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