Santhosh has uploaded a new change for review. https://gerrit.wikimedia.org/r/197000
Change subject: Use the callout widget for entrypoint dialog ...................................................................... Use the callout widget for entrypoint dialog Change-Id: I76ec184655dbb706e172ff2082034b1eff12a1a5 --- M Resources.php M modules/entrypoint/ext.cx.entrypoint.js M modules/entrypoint/styles/ext.cx.entrypoint.less 3 files changed, 26 insertions(+), 86 deletions(-) git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/ContentTranslation refs/changes/00/197000/1 diff --git a/Resources.php b/Resources.php index 6101509..9fb5901 100644 --- a/Resources.php +++ b/Resources.php @@ -565,6 +565,7 @@ 'jquery.uls.data', 'mediawiki.Uri', 'mediawiki.jqueryMsg', + 'ext.cx.widgets.callout', ), ) + $resourcePaths; diff --git a/modules/entrypoint/ext.cx.entrypoint.js b/modules/entrypoint/ext.cx.entrypoint.js index 14920f3..114ae13 100644 --- a/modules/entrypoint/ext.cx.entrypoint.js +++ b/modules/entrypoint/ext.cx.entrypoint.js @@ -34,6 +34,7 @@ * Initialize the plugin. */ CXEntryPoint.prototype.init = function () { + this.renderDialog(); this.listen(); }; @@ -41,57 +42,29 @@ * Listen for events. */ CXEntryPoint.prototype.listen = function () { - var entryPoint = this; + var self = this; - // Hide the dialog when clicking outside it - $( 'html' ).click( function () { - entryPoint.hide(); - } ); - - // Open or close the dialog when clicking the link. - // The dialog will be unitialized until the first click. - this.$trigger.click( function ( e ) { - e.preventDefault(); + this.$trigger.on( 'click', function ( e ) { e.stopPropagation(); - - // jquery.uls.data is needed for autonyms - mw.loader.using( 'jquery.uls.data', function () { - if ( !entryPoint.$dialog ) { - entryPoint.renderDialog(); - entryPoint.listenForDialog(); - } - - entryPoint.toggle(); - } ); + e.preventDefault(); + self.toggle(); } ); - }; - - /** - * Listen for events in the CX entry point dialog. - */ - CXEntryPoint.prototype.listenForDialog = function () { - var entryPoint = this; this.$actionScratch.click( function () { var title, url; - title = entryPoint.$titleInput.val() || mw.config.get( 'wgTitle' ); - url = entryPoint.siteMapper.getPageUrl( entryPoint.options.targetLanguage, title ); + title = self.$titleInput.val() || mw.config.get( 'wgTitle' ); + url = self.siteMapper.getPageUrl( self.options.targetLanguage, title ); location.href = url; } ); this.$actionTranslate.click( $.proxy( this.startPageInCX, this ) ); - this.$dialog.click( function ( e ) { - e.stopPropagation(); + this.$closeIcon.click( function () { + self.hide(); } ); - - this.$closeIcon.click( $.proxy( this.hide, this ) ); }; - /** - * Show or Hide the CX entry point dialog based on current state - */ CXEntryPoint.prototype.toggle = function () { if ( this.shown ) { this.hide(); @@ -99,46 +72,20 @@ this.show(); } }; - /** * Show the entry point dialog */ CXEntryPoint.prototype.show = function () { - this.$dialog.show(); + this.$trigger.callout( 'show' ); this.shown = true; - this.position(); this.$titleInput.focus(); }; /** - * Position the entry point dialog. - */ - CXEntryPoint.prototype.position = function () { - var dialogTop, dialogLeft, - dir = $( 'html' ).prop( 'dir' ); - - // The default is to place the dialog near the element that triggers it - dialogTop = this.options.top || this.$trigger.offset().top; - dialogLeft = this.options.left || this.$trigger.offset().left; - - if ( dir === 'rtl' ) { - dialogLeft = dialogLeft - this.$dialog.width(); - } - - this.$dialog.css( { - top: dialogTop, - left: dialogLeft - } ); - }; - - /** - * Hide the entry point dialog. + * Show the entry point dialog */ CXEntryPoint.prototype.hide = function () { - if ( this.shown ) { - this.$dialog.hide(); - } - + this.$trigger.callout( 'hide' ); this.shown = false; }; @@ -162,15 +109,14 @@ * Render the CX entry point dialog. */ CXEntryPoint.prototype.renderDialog = function () { - var $actions, $titleBoxBlock, + var $actions, $titleBoxBlock, $dialog, self, $heading, $titleLabel, $license, translateButtonLabel, targetAutonym = $.uls.data.getAutonym( this.options.targetLanguage ), currentTitle = mw.config.get( 'wgTitle' ); - this.$dialog = $( '<div>' ) - .prop( 'id', 'cx-entrypoint-dialog-' + this.options.targetLanguage ) - .addClass( 'cx-entrypoint-dialog' ) - .hide(); + self = this; + $dialog = $( '<div>' ) + .prop( 'id', 'cx-entrypoint-dialog-' + this.options.targetLanguage ); this.$closeIcon = $( '<span>' ) .addClass( 'icon-close' ); @@ -216,9 +162,14 @@ .addClass( 'cx-entrypoint-dialog__actions' ) .append( this.$actionScratch, this.$actionTranslate ); - this.$dialog.append( $heading, $titleLabel, $titleBoxBlock, $license, $actions ); + $dialog.append( $heading, $titleLabel, $titleBoxBlock, $license, $actions ); - $( 'body' ).append( this.$dialog ); + this.$trigger.callout( { + trigger: 'click', + content: $dialog, + gravity: $.fn.callout.autoWE, + classes: 'cx-entrypoint-dialog' + } ); }; /** diff --git a/modules/entrypoint/styles/ext.cx.entrypoint.less b/modules/entrypoint/styles/ext.cx.entrypoint.less index 8b5aae9..4f88bfc 100644 --- a/modules/entrypoint/styles/ext.cx.entrypoint.less +++ b/modules/entrypoint/styles/ext.cx.entrypoint.less @@ -2,19 +2,7 @@ @import "mediawiki.mixins"; .cx-entrypoint-dialog { - .mw-ui-grid; - .mw-ui-one-third; - padding: 0; - color: #333; - position: absolute; - min-width: 600px; - max-width: 800px; - background: white; - border: 1px solid #ccc; - border-bottom-width: 3px; - border-radius: 3px; - box-shadow: 0 5px 10px rgba(0,0,0,0.2); - z-index: 100; + max-width: 600px; } .cx-entrypoint-dialog__heading { @@ -80,4 +68,4 @@ font-size: 12px; color: #777; border-top: 1px solid #f5f5f5; -} \ No newline at end of file +} -- To view, visit https://gerrit.wikimedia.org/r/197000 To unsubscribe, visit https://gerrit.wikimedia.org/r/settings Gerrit-MessageType: newchange Gerrit-Change-Id: I76ec184655dbb706e172ff2082034b1eff12a1a5 Gerrit-PatchSet: 1 Gerrit-Project: mediawiki/extensions/ContentTranslation Gerrit-Branch: master Gerrit-Owner: Santhosh <santhosh.thottin...@gmail.com> _______________________________________________ MediaWiki-commits mailing list MediaWiki-commits@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits