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 <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
