Mooeypoo has uploaded a new change for review. (
https://gerrit.wikimedia.org/r/365504 )
Change subject: [wip] SimpleDialogWidget: Create a simple dialog widget
......................................................................
[wip] SimpleDialogWidget: Create a simple dialog widget
Have a widget that does the dialog + everything else (overlay,
windowmanager, etc) for the user.
Still in progress.
Change-Id: I1e3cd7887f103028fed14898f65b82562a3c58cb
---
M build/modules.yaml
M demos/pages/widgets.js
M i18n/en.json
M i18n/qqq.json
M src/core.js
A src/dialogs/SimpleProcessDialog.js
6 files changed, 149 insertions(+), 1 deletion(-)
git pull ssh://gerrit.wikimedia.org:29418/oojs/ui refs/changes/04/365504/1
diff --git a/build/modules.yaml b/build/modules.yaml
index bd8f47a..1c4312e 100644
--- a/build/modules.yaml
+++ b/build/modules.yaml
@@ -158,6 +158,7 @@
"src/Dialog.js",
"src/dialogs/MessageDialog.js",
"src/dialogs/ProcessDialog.js",
+ "src/dialogs/SimpleProcessDialog.js",
"src/windows.js"
],
},
diff --git a/demos/pages/widgets.js b/demos/pages/widgets.js
index e9cee0b..02a43b9 100644
--- a/demos/pages/widgets.js
+++ b/demos/pages/widgets.js
@@ -8,7 +8,22 @@
verticalDragItems = [],
verticalHandledDragItems = [],
$overlay = $( '<div>' ).addClass( 'demo-overlay' ).attr( 'id',
'demo-overlay' ),
- $demo = demo.$element;
+ $demo = demo.$element,
+ simpleDialogButton = new OO.ui.ButtonWidget( {
+ label: 'Open dialog',
+ title: 'Simple process dialog'
+ } ),
+ simpleDialogWidget = new OO.ui.SimpleProcessDialog(
+ 'demo',
+ 'Demo simple dialog',
+ {
+ $overlay: $overlay
+ }
+ );
+
+ simpleDialogButton.on( 'click', function () {
+ simpleDialogWidget.open();
+ } );
for ( i = 0; i <= 12; i++ ) {
horizontalDragItems.push(
@@ -2348,6 +2363,19 @@
]
} ),
new OO.ui.FieldsetLayout( {
+ id: 'demo-section-simpleDialog',
+ label: 'Simple process dialog',
+ items: [
+ new OO.ui.FieldLayout(
+ simpleDialogButton,
+ {
+ label:
'SimpleProcessDialog\u200E',
+ align: 'top'
+ }
+ )
+ ]
+ } ),
+ new OO.ui.FieldsetLayout( {
id: 'demo-section-fieldLayouts',
label: 'Field layouts',
icon: 'tag',
diff --git a/i18n/en.json b/i18n/en.json
index be00832..df5568b 100644
--- a/i18n/en.json
+++ b/i18n/en.json
@@ -23,6 +23,7 @@
"ooui-toolgroup-expand": "More",
"ooui-toolgroup-collapse": "Fewer",
"ooui-dialog-message-accept": "OK",
+ "ooui-dialog-message-save": "Save",
"ooui-dialog-message-reject": "Cancel",
"ooui-dialog-process-error": "Something went wrong",
"ooui-dialog-process-dismiss": "Dismiss",
diff --git a/i18n/qqq.json b/i18n/qqq.json
index 1a096ef..6e09bef 100644
--- a/i18n/qqq.json
+++ b/i18n/qqq.json
@@ -27,6 +27,7 @@
"ooui-toolgroup-expand": "Label for the fake tool that expands the full
list of tools in a toolbar group.\n\nSee also:\n*
{{msg-mw|Ooui-toolgroup-collapse}}\n{{Identical|More}}",
"ooui-toolgroup-collapse": "Label for the fake tool that collapses the
full list of tools in a toolbar group.\n\nSee also:\n*
{{msg-mw|Ooui-toolgroup-expand}}\n{{Identical|Fewer}}",
"ooui-dialog-message-accept": "Default label for the accept button of a
message dialog\n{{Identical|OK}}",
+ "ooui-dialog-message-save": "Default label for the save button of a
message dialog\n{{Identical|Save}}",
"ooui-dialog-message-reject": "Default label for the reject button of a
message dialog\n{{Identical|Cancel}}",
"ooui-dialog-process-error": "Title for process dialog error
description",
"ooui-dialog-process-dismiss": "Label for process dialog dismiss error
button, visible when describing errors\n{{Identical|Dismiss}}",
diff --git a/src/core.js b/src/core.js
index 5e0b2a4..af72ef0 100644
--- a/src/core.js
+++ b/src/core.js
@@ -350,6 +350,8 @@
'ooui-toolgroup-collapse': 'Fewer',
// Default label for the accept button of a confirmation dialog
'ooui-dialog-message-accept': 'OK',
+ // Default label for the save button of a confirmation dialog
+ 'ooui-dialog-message-save': 'Save',
// Default label for the reject button of a confirmation dialog
'ooui-dialog-message-reject': 'Cancel',
// Title for process dialog error description
diff --git a/src/dialogs/SimpleProcessDialog.js
b/src/dialogs/SimpleProcessDialog.js
new file mode 100644
index 0000000..227dccb
--- /dev/null
+++ b/src/dialogs/SimpleProcessDialog.js
@@ -0,0 +1,115 @@
+/**
+ * A simple single dialog widget that wraps the behavior of both
+ * the dialog and the OO.ui.WindowManager for easy instantiation
+ * and setup.
+ *
+ * @abstract
+ * @class
+ * @extends OO.ui.Dialog
+ *
+ * @constructor
+ * @param {string} name Unique name for this dialog
+ * @param {string} title Title for the dialog
+ * @param {Object} [config] Configuration options
+ * @cfg {Object[]} [actions] Actions performed by the dialog. These
+ * represent the buttons that the dialog will display, and the processes
+ * that the dialog will listen to when performing actions. By default,
+ * if no actions are given, these will be set up:
+ * [
+ * { action: 'save', label: 'Done', flags: 'primary' },
+ * { label: 'Cancel', flags: 'safe' }
+ * ]
+ * Note that a 'cancel' button requires no specific action name.
+ * @cfg {jQuery} [$overlay] An overlay to display the dialog in.
+ * If not supplied, an overlay will be set up and attached.
+ * @cfg {OO.ui.WindowManager} [windowManager] A window manager for this
+ * dialog. If not provided, a window manager will be created and set up.
+ */
+OO.ui.SimpleProcessDialog = function OoUiSimpleProcessDialog( name, title,
config ) {
+ var availableActions = [],
+ simpledialog = this,
+ $overlay = $( '<div>' )
+ .addClass( 'oo-ui-window-overlay' );
+
+ // Define ProcessDialog class
+ this.DialogClass = function OoUiSimpleProcessDialogInnerDialog( config
) {
+ // Parent constructor
+ simpledialog.DialogClass.parent.call( this, config );
+
+ this.$element.addClass( 'oo-ui-simpleProcessDialog-dialog' );
+ };
+
+ // Parent constructor
+ OO.ui.SimpleProcessDialog.parent.call( this, config );
+
+ // Set up the overlay
+ if ( !config.$overlay ) {
+ config.$overlay = $overlay;
+ $( 'body' ).append( config.$overlay );
+ }
+ this.$overlay = config.$overaly;
+
+ // Set up window manager
+ if ( !config.windowManager ) {
+ config.windowManager = new OO.ui.WindowManager();
+ $( 'body' ).append( config.windowManager.$element );
+ }
+ this.windowManager = config.windowManager;
+
+ // Add actions
+ config.actions = config.actions || [
+ { action: 'save', label: OO.ui.msg( 'ooui-dialog-message-save'
), flags: 'primary' },
+ { label: OO.ui.msg( 'ooui-dialog-message-reject' ), flags:
'safe' }
+ ];
+
+ // Set up the dialog
+ OO.inheritClass( this.DialogClass, OO.ui.ProcessDialog );
+ this.DialogClass.static.name = name;
+ this.DialogClass.static.title = title;
+ this.DialogClass.static.actions = config.actions;
+ this.DialogClass.prototype.getActionProcess =
this.dialogGetActionProcess.bind( this );
+ this.dialog = new this.DialogClass();
+
+ // Connect dialog to window manager
+ this.windowManager.addWindows( [ this.dialog ] );
+
+
+ // Initialization
+ this.$element.addClass( 'oo-ui-simpleProcessDialog' );
+};
+
+/* Setup */
+
+OO.inheritClass( OO.ui.SimpleProcessDialog, OO.ui.Widget );
+
+/* Methods */
+
+OO.ui.SimpleProcessDialog.prototype.open = function () {
+ this.windowManager.openWindow( this.dialog );
+};
+
+/**
+ * Get a process for taking action.
+ *
+ * When you override this method, you can create a new OO.ui.Process and
return it, or add additional
+ * accept steps to the process the parent method provides using the {@link
OO.ui.Process#first 'first'}
+ * and {@link OO.ui.Process#next 'next'} methods of OO.ui.Process.
+ *
+ * Users of this class should extend this method to handle
+ * the actions that this dialog handles.
+ *
+ * @param {string} [action] Symbolic name of action
+ * @return {OO.ui.Process} Action process
+ */
+OO.ui.SimpleProcessDialog.prototype.dialogGetActionProcess = function ( action
) {
+ var widget = this;
+
+ if ( action ) {
+ return new OO.ui.Process( function () {
+ widget.dialog.close( { action: action } );
+ } );
+ }
+
+ return this.DialogClass.parent.prototype.getActionProcess.call( this,
action );
+};
+
--
To view, visit https://gerrit.wikimedia.org/r/365504
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I1e3cd7887f103028fed14898f65b82562a3c58cb
Gerrit-PatchSet: 1
Gerrit-Project: oojs/ui
Gerrit-Branch: master
Gerrit-Owner: Mooeypoo <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
