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

diff --git a/includes/specials/SpecialPreferences.php b/includes/specials/SpecialPreferences.php
index 2e7b4cd..f00477f 100644 (file)
--- 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 d5affc7..c7c1239 100644 (file)
--- 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(
-                               "<div class=\"successbox\">\n$1\n</div>",
-                               [ '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 e838a53..746cbd1 100644 (file)
--- 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 a756f22..163e85d 100644 (file)
--- 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 4c9c41e..c7a5f77 100644 (file)
--- 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 (file)
index 0000000..0643988
--- /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 (file)
index 0000000..5d46de6
--- /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 (file)
index 0000000..2371f4e
--- /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;
+       }
+}