[MediaWiki-commits] [Gerrit] Implement OO.ui.alert() and OO.ui.confirm() - change (oojs/ui)
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
---
[MediaWiki-commits] [Gerrit] Implement OO.ui.alert() and OO.ui.confirm() - change (oojs/ui)
Bartosz Dziewoński has uploaded a new change for review.
https://gerrit.wikimedia.org/r/257256
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(-)
git pull ssh://gerrit.wikimedia.org:29418/oojs/ui refs/changes/56/257256/1
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
+++
