jenkins-bot has submitted this change and it was merged.

Change subject: Implement OO.ui.alert() and OO.ui.confirm()
......................................................................


Implement OO.ui.alert() and OO.ui.confirm()

Two new convenience methods that pop up a MessageDialog with specified
message and appropriate buttons, named after the JavaScript methods
alert() and confirm() (but with a Promise-based interface).

Opening a MessageDialog to show the user a simple message takes a
whole lot of boilterplate code and a pile of promises; these methods
abstract this away. See documentation for details.

Also, tweak MessageDialog styles to better handle the case where no
'title' or no 'message' is given.

Bug: T117076
Change-Id: I5e61538d08de70bfce6c270c09ca04c7da028cc0
---
M src/core.js
M src/dialogs/MessageDialog.js
M src/themes/apex/windows.less
M src/themes/mediawiki/windows.less
4 files changed, 93 insertions(+), 2 deletions(-)

Approvals:
  Alex Monk: Looks good to me, approved
  Jforrester: Looks good to me, but someone else must approve
  jenkins-bot: Verified



diff --git a/src/core.js b/src/core.js
index 7ad4a3a..c3c4755 100644
--- a/src/core.js
+++ b/src/core.js
@@ -415,3 +415,87 @@
        // Safe if in the whitelist
        return whitelist.indexOf( protocol ) !== -1;
 };
+
+/**
+ * Lazy-initialize and return a global OO.ui.WindowManager instance, used by 
OO.ui.alert and
+ * OO.ui.confirm.
+ *
+ * @private
+ * @return {OO.ui.WindowManager}
+ */
+OO.ui.getWindowManager = function () {
+       if ( !OO.ui.windowManager ) {
+               OO.ui.windowManager = new OO.ui.WindowManager();
+               $( 'body' ).append( OO.ui.windowManager.$element );
+               OO.ui.windowManager.addWindows( {
+                       messageDialog: new OO.ui.MessageDialog()
+               } );
+       }
+       return OO.ui.windowManager;
+};
+
+/**
+ * Display a quick modal alert dialog, using a OO.ui.MessageDialog. While the 
dialog is open, the
+ * rest of the page will be dimmed out and the user won't be able to interact 
with it. The dialog
+ * has only one action button, labelled "OK", clicking it will simply close 
the dialog.
+ *
+ * A window manager is created automatically when this function is called for 
the first time.
+ *
+ *     @example
+ *     OO.ui.alert( 'Something happened!' ).done( function () {
+ *         console.log( 'User closed the dialog.' );
+ *     } );
+ *
+ * @param {jQuery|string} text Message text to display
+ * @param {Object} [options] Additional options, see 
OO.ui.MessageDialog#getSetupProcess
+ * @return {jQuery.Promise} Promise resolved when the user closes the dialog
+ */
+OO.ui.alert = function ( text, options ) {
+       return OO.ui.getWindowManager().openWindow( 'messageDialog', $.extend( {
+               message: text,
+               verbose: true,
+               actions: [ OO.ui.MessageDialog.static.actions[ 0 ] ]
+       }, options ) ).then( function ( opened ) {
+               return opened.then( function ( closing ) {
+                       return closing.then( function () {
+                               return $.Deferred().resolve();
+                       } );
+               } );
+       } );
+};
+
+/**
+ * Display a quick modal confirmation dialog, using a OO.ui.MessageDialog. 
While the dialog is open,
+ * the rest of the page will be dimmed out and the user won't be able to 
interact with it. The
+ * dialog has two action buttons, one to confirm an operation (labelled "OK") 
and one to cancel it
+ * (labelled "Cancel").
+ *
+ * A window manager is created automatically when this function is called for 
the first time.
+ *
+ *     @example
+ *     OO.ui.confirm( 'Are you sure?' ).done( function ( confirmed ) {
+ *         if ( confirmed ) {
+ *             console.log( 'User clicked "OK"!' );
+ *         } else {
+ *             console.log( 'User clicked "Cancel" or closed the dialog.' );
+ *         }
+ *     } );
+ *
+ * @param {jQuery|string} text Message text to display
+ * @param {Object} [options] Additional options, see 
OO.ui.MessageDialog#getSetupProcess
+ * @return {jQuery.Promise} Promise resolved when the user closes the dialog. 
If the user chose to
+ *  confirm, the promise will resolve to boolean `true`; otherwise, it will 
resolve to boolean
+ *  `false`.
+ */
+OO.ui.confirm = function ( text, options ) {
+       return OO.ui.getWindowManager().openWindow( 'messageDialog', $.extend( {
+               message: text,
+               verbose: true
+       }, options ) ).then( function ( opened ) {
+               return opened.then( function ( closing ) {
+                       return closing.then( function ( data ) {
+                               return $.Deferred().resolve( !!( data && 
data.action === 'accept' ) );
+                       } );
+               } );
+       } );
+};
diff --git a/src/dialogs/MessageDialog.js b/src/dialogs/MessageDialog.js
index e08f56f..5d8b2ee 100644
--- a/src/dialogs/MessageDialog.js
+++ b/src/dialogs/MessageDialog.js
@@ -86,6 +86,7 @@
  */
 OO.ui.MessageDialog.static.message = null;
 
+// Note that OO.ui.alert() and OO.ui.confirm() rely on these.
 OO.ui.MessageDialog.static.actions = [
        { action: 'accept', label: OO.ui.deferMsg( 'ooui-dialog-message-accept' 
), flags: 'primary' },
        { action: 'reject', label: OO.ui.deferMsg( 'ooui-dialog-message-reject' 
), flags: 'safe' }
diff --git a/src/themes/apex/windows.less b/src/themes/apex/windows.less
index 247985f..9489a30 100644
--- a/src/themes/apex/windows.less
+++ b/src/themes/apex/windows.less
@@ -22,7 +22,10 @@
        &-message {
                display: block;
                text-align: center;
-               padding-top: 0.5em;
+
+               &.oo-ui-labelElement {
+                       padding-top: 0.5em;
+               }
        }
 
        &-title {
diff --git a/src/themes/mediawiki/windows.less 
b/src/themes/mediawiki/windows.less
index 070a996..ada1835 100644
--- a/src/themes/mediawiki/windows.less
+++ b/src/themes/mediawiki/windows.less
@@ -15,7 +15,10 @@
        &-message {
                display: block;
                text-align: center;
-               padding-top: 0.5em;
+
+               &.oo-ui-labelElement {
+                       padding-top: 0.5em;
+               }
        }
 
        &-title {

-- 
To view, visit https://gerrit.wikimedia.org/r/257256
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings

Gerrit-MessageType: merged
Gerrit-Change-Id: I5e61538d08de70bfce6c270c09ca04c7da028cc0
Gerrit-PatchSet: 1
Gerrit-Project: oojs/ui
Gerrit-Branch: master
Gerrit-Owner: Bartosz Dziewoński <matma....@gmail.com>
Gerrit-Reviewer: Alex Monk <kren...@gmail.com>
Gerrit-Reviewer: Bartosz Dziewoński <matma....@gmail.com>
Gerrit-Reviewer: Esanders <esand...@wikimedia.org>
Gerrit-Reviewer: Jforrester <jforres...@wikimedia.org>
Gerrit-Reviewer: jenkins-bot <>

_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits

Reply via email to