Ricordisamoa has uploaded a new change for review.
https://gerrit.wikimedia.org/r/189167
Change subject: ReferenceTooltips rewritten as a Beta Feature
......................................................................
ReferenceTooltips rewritten as a Beta Feature
* Better internationalization
* OOjs UI instead of jQuery UI
* jStorage instead of cookies
Alternative implementation of I6fdf3cefb52e69e032d08c46a52cceb59162dd53
Bug: T67114
Change-Id: Ic7f0e584e0ab3629e6bb350a403bc825b7aa9e28
---
M Popups.hooks.php
A resources/ext.popups.references.js
A resources/ext.popups.references.less
3 files changed, 354 insertions(+), 0 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/Popups
refs/changes/67/189167/1
diff --git a/Popups.hooks.php b/Popups.hooks.php
index 669922d..bc39d02 100644
--- a/Popups.hooks.php
+++ b/Popups.hooks.php
@@ -56,6 +56,7 @@
'moment',
'jquery.jStorage',
'jquery.client',
+ 'oojs-ui',
);
// If EventLogging is present, add the schema as a dependency.
@@ -67,6 +68,7 @@
'scripts' => array(
'resources/ext.popups.core.js',
'resources/ext.popups.eventlogging.js',
+ 'resources/ext.popups.references.js',
'resources/ext.popups.renderer.js',
'resources/ext.popups.renderer.article.js',
'resources/ext.popups.disablenavpop.js',
@@ -75,6 +77,7 @@
'styles' => array(
'resources/ext.popups.core.less',
'resources/ext.popups.animation.less',
+ 'resources/ext.popups.references.less',
'resources/ext.popups.settings.less',
),
'dependencies' => $moduleDependencies,
diff --git a/resources/ext.popups.references.js
b/resources/ext.popups.references.js
new file mode 100644
index 0000000..b272614
--- /dev/null
+++ b/resources/ext.popups.references.js
@@ -0,0 +1,324 @@
+( function ( $, mw ) {
+ 'use strict';
+
+ /**
+ * @class mw.reftooltips
+ * @singleton
+ */
+ mw.reftooltips = {};
+
+ mw.reftooltips.CONFIG_KEY = 'mwe-reftooltips-config';
+
+ /**
+ * Whether the page is being scrolled.
+ * @property {Boolean} scrolled
+ */
+ mw.reftooltips.scrolled = false;
+
+ mw.reftooltips.Dialog = function ( config ) {
+ mw.reftooltips.Dialog.super.call( this, config );
+ };
+ OO.inheritClass( mw.reftooltips.Dialog, OO.ui.ProcessDialog );
+ mw.reftooltips.Dialog.static.title = mw.msg( 'reftooltips-dialog-title'
);
+ mw.reftooltips.Dialog.static.size = 'medium';
+ mw.reftooltips.Dialog.static.actions = [
+ {
+ action: 'save',
+ label: mw.msg( 'reftooltips-dialog-save' ),
+ flags: [ 'primary', 'constructive' ]
+ },
+ {
+ action: 'cancel',
+ label: mw.msg( 'ooui-dialog-message-reject' ),
+ flags: 'safe'
+ }
+ ];
+ mw.reftooltips.Dialog.prototype.initialize = function () {
+ mw.reftooltips.Dialog.super.prototype.initialize.apply( this,
arguments );
+ var content = new OO.ui.PanelLayout( { padded: true } ),
+
+ disableButton = new OO.ui.ButtonWidget( {
+ label: mw.msg( 'reftooltips-dialog-disable' ),
+ flags: 'destructive',
+ classes: [ 'mw-reftooltips-button-block' ]
+ } )
+ .on( 'click', function () {
+ // Not implemented yet
+ } ),
+
+ disableLabel = new OO.ui.LabelWidget( {
+ label: mw.msg( 'reftooltips-dialog-disable-notice' ),
+ padded: true,
+ classes: [ 'mw-reftooltips-label-small' ]
+ } ),
+
+ fieldset = new OO.ui.FieldsetLayout();
+
+ this.delay = new OO.ui.TextInputWidget( {
+ type: 'number',
+ value: mw.reftooltips.config.delay
+ } );
+ // TODO FIXME: make TextInputWidget support these
+ this.delay.$input.attr( {
+ step: 50,
+ min: 0,
+ max: 5000
+ } );
+
+ var items = [
+ new OO.ui.RadioOptionWidget( {
+ data: 'hover',
+ label: mw.msg( 'reftooltips-dialog-event-hover'
)
+ } ),
+ new OO.ui.RadioOptionWidget( {
+ data: 'click',
+ label: mw.msg( 'reftooltips-dialog-event-click'
)
+ } )
+ ];
+ // Create a new RadioSelectWidget and add the radio options to
it
+ // via the 'items' config option.
+ this.triggeringAction = new OO.ui.RadioSelectWidget( {
+ items: items
+ } );
+ if ( mw.reftooltips.config.triggeringAction !== null ) {
+ for ( var i = 0, len = items.length; i < len; i++ ) {
+ if ( items[ i ].getData() ===
mw.reftooltips.config.triggeringAction ) {
+ this.triggeringAction.selectItem(
items[ i ] );
+ break;
+ }
+ }
+ }
+ if ( this.triggeringAction.getSelectedItem() === null ) {
+ var firstSelectable =
this.triggeringAction.getFirstSelectableItem();
+ if ( firstSelectable !== null ) {
+ this.triggeringAction.selectItem(
firstSelectable );
+ }
+ }
+
+ fieldset.addItems( [
+ new OO.ui.FieldLayout(
+ this.delay,
+ {
+ label: mw.msg(
'reftooltips-dialog-delay' ),
+ align: 'left'
+ }
+ ),
+ new OO.ui.FieldLayout(
+ this.triggeringAction,
+ {
+ label: mw.msg(
'reftooltips-dialog-event-choose' ),
+ align: 'left'
+ }
+ )
+ ] );
+ content.$element.append( [
+ disableButton.$element,
+ disableLabel.$element,
+ '<hr>',
+ fieldset.$element
+ ] );
+ this.$body.append( content.$element );
+ };
+ mw.reftooltips.Dialog.prototype.saveSettings = function () {
+ mw.reftooltips.config.delay = parseInt( this.delay.getValue() );
+
+ var actionItem = this.triggeringAction.getSelectedItem();
+ mw.reftooltips.config.triggeringAction = actionItem !== null ?
actionItem.getData() : null;
+
+ return mw.reftooltips.setConfig( mw.reftooltips.config );
+ };
+ mw.reftooltips.Dialog.prototype.getActionProcess = function ( action ) {
+ return
mw.reftooltips.Dialog.super.prototype.getActionProcess.call( this, action )
+ .next( function () {
+ if ( action === 'save' ) {
+ return this.saveSettings().done(
function () {
+ location.reload();
+ } );
+ } else if ( action === 'reset' ) {
+ return
mw.reftooltips.resetConfig().done( function () {
+ location.reload();
+ } );
+ } else {
+ return this.close();
+ }
+ }, this );
+ };
+
+ /**
+ * Loads the user preferences from jStorage
+ *
+ * @method loadConfig
+ */
+ mw.reftooltips.loadConfig = function () {
+ mw.reftooltips.config = $.jStorage.get(
mw.reftooltips.CONFIG_KEY );
+ if ( mw.reftooltips.config === null ) {
+ mw.reftooltips.config = {
+ enabled: true,
+ delay: 200,
+ triggeringAction: 'hover'
+ };
+ }
+ };
+
+ /**
+ * Stores the user preferences into jStorage
+ *
+ * @method setConfig
+ */
+ mw.reftooltips.setConfig = function ( config ) {
+ $.jStorage.set( mw.reftooltips.CONFIG_KEY, config );
+ mw.reftooltips.loadConfig();
+ return $.Deferred().resolve();
+ };
+
+ /**
+ * Removes user preferences from jStorage
+ *
+ * @method resetConfig
+ */
+ mw.reftooltips.resetConfig = function () {
+ $.jStorage.deleteKey( mw.reftooltips.CONFIG_KEY );
+ mw.reftooltips.loadConfig();
+ return $.Deferred().resolve();
+ };
+
+ /**
+ * Checks if the user is scrolling, sets to false on mousemove
+ *
+ * @method checkScroll
+ */
+ mw.reftooltips.checkScroll = function () {
+ $( window ).on( 'scroll', function () {
+ mw.reftooltips.scrolled = true;
+ } );
+
+ $( window ).on( 'mousemove', function () {
+ mw.reftooltips.scrolled = false;
+ } );
+ };
+
+ /**
+ * Checks if the user is scrolling, sets to false on mousemove
+ *
+ * @method resetPopup
+ */
+ mw.reftooltips.resetPopup = function () {
+ if ( mw.reftooltips.timeout ) {
+ clearTimeout( mw.reftooltips.timeout );
+ }
+ if ( mw.reftooltips.popup !== undefined ) {
+ mw.reftooltips.popup
+ .toggle( false )
+ .$element
+ .remove();
+ }
+ };
+
+ /**
+ * Checks if the user is scrolling, sets to false on mousemove
+ *
+ * @method delayedClose
+ */
+ mw.reftooltips.delayedClose = function () {
+ if ( mw.reftooltips.timeout ) {
+ clearTimeout( mw.reftooltips.timeout );
+ }
+ var timeout = setTimeout( mw.reftooltips.resetPopup, 200 );
+ if ( mw.reftooltips.popup !== undefined ) {
+ mw.reftooltips.popup.$element
+ .on( 'mouseenter', function () {
+ if ( timeout ) {
+ clearTimeout( timeout );
+ }
+ } );
+ }
+ };
+
+ /**
+ * Checks if the user is scrolling, sets to false on mousemove
+ *
+ * @method showPopup
+ */
+ mw.reftooltips.showPopup = function ( $this, $content ) {
+ mw.reftooltips.resetPopup();
+ mw.reftooltips.popup = new OO.ui.PopupWidget( {
+ $content: $content,
+ padded: true,
+ width: 300
+ } );
+ mw.reftooltips.popup.configButton = new OO.ui.ButtonWidget( {
+ framed: false,
+ icon: 'advanced',
+ title: mw.msg( 'reftooltips-settings-icon-tooltip' )
+ } )
+ .on( 'click', function () {
+ var dialog = new mw.reftooltips.Dialog();
+ mw.reftooltips.windowManager.addWindows( [ dialog ] );
+ mw.reftooltips.windowManager.openWindow( dialog );
+ } );
+ mw.reftooltips.popup
+ .$body
+ .prepend( mw.reftooltips.popup.configButton.$element );
+ mw.reftooltips.popup
+ .$element
+ .appendTo( $this.parent() )
+ .on( 'mouseleave', mw.reftooltips.delayedClose );
+ mw.reftooltips.popup.toggle( true );
+ };
+
+ /**
+ * Register a hover event that may render a popup on an appropriate
link.
+ *
+ * @method setupTriggers
+ */
+ mw.reftooltips.setupTriggers = function ( $elements ) {
+ $elements.on( 'mouseenter focus', function () {
+
+ if ( mw.reftooltips.scrolled ) {
+ // Prevents hovering on popups while scrolling
+ return;
+ }
+
+ var
+ $this = $( this ),
+ href = $this.attr( 'href' ),
+ $sel = $( href );
+
+ if ( $sel.length !== 1 ) {
+ return;
+ }
+
+ var $text = $sel.children( '.reference-text' );
+ if ( $text.length !== 1 ) {
+ return;
+ }
+
+ mw.reftooltips.timeout = setTimeout( function () {
+ mw.reftooltips.showPopup( $this, $text.clone()
);
+ }, mw.reftooltips.config.delay );
+ } )
+ .on( 'blur click', mw.reftooltips.resetPopup )
+ .on( 'mouseleave', mw.reftooltips.delayedClose );
+ };
+
+ mw.reftooltips.loadConfig();
+
+ mw.hook( 'wikipage.content' ).add( function ( $content ) {
+ if ( mw.reftooltips.config.enabled ) {
+ var $elements = $content.find( '.reference' );
+ $elements.addClass( 'mw-reftooltip' );
+ mw.reftooltips.setupTriggers( $elements.find(
'a[href^="#"]' ) );
+ }
+ } );
+
+ $( function () {
+ if ( mw.reftooltips.config.enabled ) {
+ mw.reftooltips.checkScroll();
+ mw.reftooltips.windowManager = new
OO.ui.WindowManager();
+ mw.reftooltips.windowManager
+ .$element
+ .appendTo( document.body );
+ }
+ } );
+
+} ) ( jQuery, mediaWiki );
diff --git a/resources/ext.popups.references.less
b/resources/ext.popups.references.less
new file mode 100644
index 0000000..407d4ce
--- /dev/null
+++ b/resources/ext.popups.references.less
@@ -0,0 +1,27 @@
+.reference.mw-reftooltip {
+ position: relative; /* needed to position the popup properly */
+
+ .oo-ui-popupWidget-body {
+ /* make the text more readable */
+ font-size: small;
+ padding: 1em;
+ line-height: 130%;
+
+ .oo-ui-iconElement {
+ float: right;
+ }
+ }
+}
+
+/* .mw-ui-button.mw-ui-block */
+.mw-reftooltips-button-block {
+ width: 100%;
+
+ & > a.oo-ui-buttonElement-button {
+ display: block;
+ }
+}
+
+.mw-reftooltips-label-small {
+ font-size: smaller;
+}
--
To view, visit https://gerrit.wikimedia.org/r/189167
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: Ic7f0e584e0ab3629e6bb350a403bc825b7aa9e28
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/Popups
Gerrit-Branch: master
Gerrit-Owner: Ricordisamoa <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
