From 1f15863aa7ed0d849065c673afba514643fae01f Mon Sep 17 00:00:00 2001 From: Florian Date: Wed, 14 Oct 2015 19:20:28 +0200 Subject: [PATCH] Use mw.notification for success message on Special:UserRights Split out Special:Preferences handling of successbox into it's own mediawiki.notification.convertmessagebox module and make it reuseable. Use this module on Special:UserRights. Bug: T115463 Change-Id: I87054b55053d209835d6fdea1f6e3e67f10e3ac8 --- includes/specials/SpecialPreferences.php | 13 ++-- includes/specials/SpecialUserrights.php | 19 +++++- resources/Resources.php | 22 ++++++- .../mediawiki.special.preferences.js | 23 ++----- .../mediawiki.special.preferences.styles.css | 5 -- .../mediawiki.special.userrights.js | 8 +++ ...ediawiki.notification.convertmessagebox.js | 64 +++++++++++++++++++ ...notification.convertmessagebox.styles.less | 7 ++ 8 files changed, 128 insertions(+), 33 deletions(-) create mode 100644 resources/src/mediawiki.special/mediawiki.special.userrights.js create mode 100644 resources/src/mediawiki/mediawiki.notification.convertmessagebox.js create mode 100644 resources/src/mediawiki/mediawiki.notification.convertmessagebox.styles.less diff --git a/includes/specials/SpecialPreferences.php b/includes/specials/SpecialPreferences.php index 2e7b4cd2d2..f00477f7f2 100644 --- a/includes/specials/SpecialPreferences.php +++ b/includes/specials/SpecialPreferences.php @@ -57,17 +57,18 @@ class SpecialPreferences extends SpecialPage { if ( $request->getSessionData( 'specialPreferencesSaveSuccess' ) ) { // Remove session data for the success message $request->setSessionData( 'specialPreferencesSaveSuccess', null ); + $out->addModuleStyles( 'mediawiki.notification.convertmessagebox.styles' ); - $out->wrapWikiMsg( + $out->addHtml( Html::rawElement( 'div', [ - 'class' => 'mw-preferences-messagebox successbox', - 'id' => 'mw-preferences-success' + 'class' => 'mw-preferences-messagebox mw-notify-success successbox', + 'id' => 'mw-preferences-success', + 'data-mw-autohide' => 'false', ], - Html::element( 'p', [], '$1' ) - ), - 'savedprefs' + Html::element( 'p', [], $this->msg( 'savedprefs' )->text() ) + ) ); } diff --git a/includes/specials/SpecialUserrights.php b/includes/specials/SpecialUserrights.php index d5affc7873..c7c12396a5 100644 --- a/includes/specials/SpecialUserrights.php +++ b/includes/specials/SpecialUserrights.php @@ -147,9 +147,22 @@ class UserrightsPage extends SpecialPage { // show a successbox, if the user rights was saved successfully if ( $request->getCheck( 'success' ) && $this->mFetchedUser !== null ) { - $out->wrapWikiMsg( - "
\n$1\n
", - [ 'savedrights', $this->mFetchedUser->getName() ] + $out->addModules( [ 'mediawiki.special.userrights' ] ); + $out->addModuleStyles( 'mediawiki.notification.convertmessagebox.styles' ); + $out->addHtml( + Html::rawElement( + 'div', + [ + 'class' => 'mw-notify-success successbox', + 'id' => 'mw-preferences-success', + 'data-mw-autohide' => 'false', + ], + Html::element( + 'p', + [], + $this->msg( 'savedrights', $this->mFetchedUser->getName() )->text() + ) + ) ); } diff --git a/resources/Resources.php b/resources/Resources.php index e838a53a3b..746cbd15f7 100644 --- a/resources/Resources.php +++ b/resources/Resources.php @@ -1126,6 +1126,20 @@ return [ 'scripts' => 'resources/src/mediawiki/mediawiki.notify.js', 'targets' => [ 'desktop', 'mobile' ], ], + 'mediawiki.notification.convertmessagebox' => [ + 'dependencies' => [ + 'mediawiki.notification', + ], + 'scripts' => 'resources/src/mediawiki/mediawiki.notification.convertmessagebox.js', + 'targets' => [ 'desktop', 'mobile' ], + ], + 'mediawiki.notification.convertmessagebox.styles' => [ + 'position' => 'top', + 'styles' => [ + 'resources/src/mediawiki/mediawiki.notification.convertmessagebox.styles.less', + ], + 'targets' => [ 'desktop', 'mobile' ], + ], 'mediawiki.RegExp' => [ 'scripts' => 'resources/src/mediawiki/mediawiki.RegExp.js', 'targets' => [ 'desktop', 'mobile' ], @@ -1884,7 +1898,13 @@ return [ 'dependencies' => [ 'mediawiki.language', 'mediawiki.confirmCloseWindow', - 'mediawiki.notification', + 'mediawiki.notification.convertmessagebox', + ], + ], + 'mediawiki.special.userrights' => [ + 'scripts' => 'resources/src/mediawiki.special/mediawiki.special.userrights.js', + 'dependencies' => [ + 'mediawiki.notification.convertmessagebox', ], ], 'mediawiki.special.preferences.styles' => [ diff --git a/resources/src/mediawiki.special/mediawiki.special.preferences.js b/resources/src/mediawiki.special/mediawiki.special.preferences.js index a756f22d4d..163e85d335 100644 --- a/resources/src/mediawiki.special/mediawiki.special.preferences.js +++ b/resources/src/mediawiki.special/mediawiki.special.preferences.js @@ -3,10 +3,9 @@ */ ( function ( mw, $ ) { $( function () { - var $preftoc, $preferences, $fieldsets, - labelFunc, - $tzSelect, $tzTextbox, $localtimeHolder, servertime, - allowCloseWindow, notif; + var $preftoc, $preferences, $fieldsets, labelFunc, + $tzSelect, $tzTextbox, $localtimeHolder, servertime, allowCloseWindow, + convertmessagebox = require( 'mediawiki.notification.convertmessagebox' ); labelFunc = function () { return this.id.replace( /^mw-prefsection/g, 'preftab' ); @@ -82,20 +81,8 @@ } } - // Check for messageboxes (.successbox, .warningbox, .errorbox) to replace with notifications - if ( $( '.mw-preferences-messagebox' ).length ) { - // If there is a #mw-preferences-success box and javascript is enabled, use a slick notification instead! - if ( $( '#mw-preferences-success' ).length ) { - notif = mw.notification.notify( mw.message( 'savedprefs' ), { autoHide: false } ); - // 'change' event not reliable! - $( '#preftoc, .prefsection' ).one( 'change keydown mousedown', function () { - if ( notif ) { - notif.close(); - notif = null; - } - } ); - } - } + // Check for successbox to replace with notifications + convertmessagebox(); // Enable keyboard users to use left and right keys to switch tabs $preftoc.on( 'keydown', function ( event ) { diff --git a/resources/src/mediawiki.special/mediawiki.special.preferences.styles.css b/resources/src/mediawiki.special/mediawiki.special.preferences.styles.css index 4c9c41eb2c..c7a5f77b3b 100644 --- a/resources/src/mediawiki.special/mediawiki.special.preferences.styles.css +++ b/resources/src/mediawiki.special/mediawiki.special.preferences.styles.css @@ -33,11 +33,6 @@ zoom: 1; } -/* When JS is enabled, .mw-preferences-messageboxes are replaced with mw.notifications */ -.client-js .mw-preferences-messagebox { - display: none; -} - .client-nojs #preftoc { display: none; } diff --git a/resources/src/mediawiki.special/mediawiki.special.userrights.js b/resources/src/mediawiki.special/mediawiki.special.userrights.js new file mode 100644 index 0000000000..064398851b --- /dev/null +++ b/resources/src/mediawiki.special/mediawiki.special.userrights.js @@ -0,0 +1,8 @@ +/*! + * JavaScript for Special:UserRights + */ +( function () { + var convertmessagebox = require( 'mediawiki.notification.convertmessagebox' ); + // Replace successbox with notifications + convertmessagebox(); +}() ); diff --git a/resources/src/mediawiki/mediawiki.notification.convertmessagebox.js b/resources/src/mediawiki/mediawiki.notification.convertmessagebox.js new file mode 100644 index 0000000000..5d46de60bb --- /dev/null +++ b/resources/src/mediawiki/mediawiki.notification.convertmessagebox.js @@ -0,0 +1,64 @@ +/** + * Usage: + * + * var convertmessagebox = require( 'mediawiki.notification.convertmessagebox' ); + * + * @class mw.plugin.convertmessagebox + * @singleton + */ +( function ( mw, $ ) { + 'use strict'; + + /** + * Convert a messagebox to a notification. + * + * Checks if a message box with class `.mw-notify-success`, `.mw-notify-warning`, or `.mw-notify-error` + * exists and converts it into a mw.Notification with the text of the element or a given message key. + * + * By default the notification will automatically hide after 5s, or when the user clicks the element. + * This can be overridden by setting attribute `data-mw-autohide="true"`. + * + * @param {Object} [options] Options + * @param {mw.Message} [options.msg] Message key (must be loaded already) + */ + function convertmessagebox( options ) { + var $msgBox, type, autoHide, msg, notif, + $successBox = $( '.mw-notify-success' ), + $warningBox = $( '.mw-notify-warning' ), + $errorBox = $( '.mw-notify-error' ); + + // If there is a message box and javascript is enabled, use a slick notification instead! + if ( $successBox.length ) { + $msgBox = $successBox; + type = 'info'; + } else if ( $warningBox.length ) { + $msgBox = $warningBox; + type = 'warn'; + } else if ( $errorBox.length ) { + $msgBox = $errorBox; + type = 'error'; + } else { + return; + } + + autoHide = $msgBox.attr( 'data-mw-autohide' ) === 'true'; + + // If the msg param is given, use it, otherwise use the text of the successbox + msg = options && options.msg || $msgBox.text(); + $msgBox.detach(); + + notif = mw.notification.notify( msg, { autoHide: autoHide, type: type } ); + if ( !autoHide ) { + // 'change' event not reliable! + $( document ).one( 'keydown mousedown', function () { + if ( notif ) { + notif.close(); + notif = null; + } + } ); + } + } + + module.exports = convertmessagebox; + +}( mediaWiki, jQuery ) ); diff --git a/resources/src/mediawiki/mediawiki.notification.convertmessagebox.styles.less b/resources/src/mediawiki/mediawiki.notification.convertmessagebox.styles.less new file mode 100644 index 0000000000..2371f4e8d8 --- /dev/null +++ b/resources/src/mediawiki/mediawiki.notification.convertmessagebox.styles.less @@ -0,0 +1,7 @@ +.client-js { + .mw-notify-success, + .mw-notify-warning, + .mw-notify-error { + display: none; + } +} -- 2.20.1