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() )
+ )
);
}
// 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()
+ )
+ )
);
}
'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' ],
'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' => [
*/
( 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' );
}
}
- // 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 ) {
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;
}
--- /dev/null
+/*!
+ * JavaScript for Special:UserRights
+ */
+( function () {
+ var convertmessagebox = require( 'mediawiki.notification.convertmessagebox' );
+ // Replace successbox with notifications
+ convertmessagebox();
+}() );
--- /dev/null
+/**
+ * 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 ) );
--- /dev/null
+.client-js {
+ .mw-notify-success,
+ .mw-notify-warning,
+ .mw-notify-error {
+ display: none;
+ }
+}