Robmoen has uploaded a new change for review.
https://gerrit.wikimedia.org/r/52538
Change subject: More work on dialog classes and their mw specific handling.
......................................................................
More work on dialog classes and their mw specific handling.
Changes include:
VisualEditor.i18n.php, VisualEditor.php
* i18n labels for dialogs
ve.init.mw.ViewPageTarget.js
* Initial go at onOpenDialog and onCloseDialog methods
ve.init.Target.js
* Change calls to dialog hide & show to close & open
ve.ui.MetaDialog.js, ve.ui.ContentDialog.js
* Pass surface when constructing
* Add static title message property
ve.ui.Surface.css
* Set high z-index for toolbar for shadow to overlap dialog.
ve.ui.Dialog.js
* Extends EventEmitter class.
* Changed hide/show method names to open/close.
* Create base ui elements.
ve.Surface.js
* Create instance of meta dialog.
Change-Id: I867ca0546606eeb5e2ab7f612bb5af700ab877ec
---
M VisualEditor.i18n.php
M VisualEditor.php
M modules/ve/init/mw/targets/ve.init.mw.ViewPageTarget.js
M modules/ve/init/ve.init.Target.js
M modules/ve/ui/dialogs/ve.ui.ContentDialog.js
M modules/ve/ui/dialogs/ve.ui.MetaDialog.js
M modules/ve/ui/styles/ve.ui.Surface.css
M modules/ve/ui/ve.ui.Dialog.js
M modules/ve/ve.Surface.js
9 files changed, 139 insertions(+), 14 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/VisualEditor
refs/changes/38/52538/1
diff --git a/VisualEditor.i18n.php b/VisualEditor.i18n.php
index ac7ccaf..708b0b2 100644
--- a/VisualEditor.i18n.php
+++ b/VisualEditor.i18n.php
@@ -17,6 +17,9 @@
'visualeditor-ca-editsource' => 'Edit source',
'visualeditor-ca-ve-edit' => 'VisualEditor',
'visualeditor-ca-ve-create' => 'VisualEditor',
+ 'visualeditor-dialog-meta-title' => 'Page Settings',
+ 'visualeditor-dialog-content-title' => 'Generated Content',
+ 'visualeditor-dialog-label-apply' => 'Apply changes',
'visualeditor-toolbar-savedialog' => 'Review and save',
'visualeditor-savedialog-title-review' => 'Review your changes',
'visualeditor-savedialog-title-report' => 'Report a problem',
@@ -110,6 +113,9 @@
'visualeditor-ca-ve-create' => '{{Optional}}
Link text of the dedicated VisualEditor Create tab.
{{Identical|visualeditor}}',
+ 'visualeditor-dialog-meta-title' => 'MetaData dialog title text',
+ 'visualeditor-dialog-content-title' => 'Content dialog title text',
+ 'visualeditor-dialog-label-apply' => 'Label text for button to apply
changes made in dialog',
'visualeditor-toolbar-savedialog' => 'Label text for button to trigger
review and save interface',
'visualeditor-savedialog-title-review' => 'Title for reviewing slide',
'visualeditor-savedialog-title-report' => 'Title for reporting slide',
diff --git a/VisualEditor.php b/VisualEditor.php
index ddcd05a..c9184bc 100644
--- a/VisualEditor.php
+++ b/VisualEditor.php
@@ -349,6 +349,7 @@
've/ce/styles/ve.ce.Surface.css',
// ui
've/ui/styles/ve.ui.Context.css',
+ 've/ui/styles/ve.ui.Dialog.css',
've/ui/styles/ve.ui.Inspector.css',
've/ui/styles/ve.ui.Surface.css',
've/ui/styles/ve.ui.Toolbar.css',
@@ -408,6 +409,9 @@
'visualeditor-saveerror',
'visualeditor-editconflict',
'visualeditor-aliennode-tooltip',
+ 'visualeditor-dialog-meta-title',
+ 'visualeditor-dialog-content-title',
+ 'visualeditor-dialog-label-apply',
),
),
'ext.visualEditor.icons-raster' => $wgVisualEditorResourceTemplate +
array(
diff --git a/modules/ve/init/mw/targets/ve.init.mw.ViewPageTarget.js
b/modules/ve/init/mw/targets/ve.init.mw.ViewPageTarget.js
index 750bd50..8c6ec50 100644
--- a/modules/ve/init/mw/targets/ve.init.mw.ViewPageTarget.js
+++ b/modules/ve/init/mw/targets/ve.init.mw.ViewPageTarget.js
@@ -1625,6 +1625,8 @@
ve.init.mw.ViewPageTarget.prototype.onAddDialog = function ( name ) {
var dialog = this.dialogs[name];
+ // Init the dialog closed and bypass events.
+ dialog.$.hide();
// Append dialog to target container
this.$.append( dialog.$ );
};
@@ -1635,9 +1637,41 @@
* @method
* @param {string} name Name of dialog
*/
-ve.init.mw.ViewPageTarget.prototype.onOpenDialog = function () {
- // TODO: Replace toolbar contents with dialog title bar
- // TODO: Set the dialog size and add window resize handlers to keep it
there
+ve.init.mw.ViewPageTarget.prototype.onOpenDialog = function ( name ) {
+ var dialog = this.dialogs[name],
+ $toolbar = this.surface.toolbars.top.$;
+
+ // Set dialog size.
+ function setDialogSize () {
+ var height = $( 'body' ).height() - $toolbar.height() -
$toolbar.offset().top;
+ dialog.$.css( { 'width': $toolbar.width(), 'height': height } );
+ }
+ function setDialogPosition () {
+ dialog.$.css( {
+ 'top': ( $toolbar.offset().top + $toolbar.height() ),
+ 'left': $toolbar.offset().left
+ } );
+ }
+ // Dependent on top toolbar presence.
+ if ( 'top' in this.surface.toolbars ) {
+ this.toolbarObjects = {
+ 'groups': $toolbar.find( '.ve-ui-toolbarGroups'
).detach(),
+ 'actions': $toolbar.find( '.ve-ui-actions' ).detach()
+ };
+ $toolbar.prepend(
+ $( '<div class="ve-ui-toolbarGroups"></div>' ).append(
+ dialog.$.find( '.ve-ui-dialog-title' )
+ ),
+ dialog.$.find( '.ve-ui-actions' )
+ );
+ }
+
+ // Init dialog
+ setDialogSize();
+ setDialogPosition();
+
+ // Events
+ $( window ).on( { 'resize.ve-dialog': setDialogSize,
'scroll.ve-dialog': setDialogPosition } );
};
/**
@@ -1646,9 +1680,23 @@
* @method
* @param {string} name Name of dialog
*/
-ve.init.mw.ViewPageTarget.prototype.onCloseDialog = function () {
- // TODO: Restore toolbar contents
- // TODO: Remove window resize handlers for dialog
+ve.init.mw.ViewPageTarget.prototype.onCloseDialog = function ( name ) {
+ var dialog = this.dialogs[name],
+ $toolbar = this.surface.toolbars.top.$;
+
+ if ( 'top' in this.surface.toolbars ) {
+ // Move the title and action elements back to the top of the
dialog.
+ dialog.$.prepend(
+ $toolbar.find( '.ve-ui-toolbarGroups' ).children(),
+ $toolbar.find( '.ve-ui-actions' )
+ );
+ // Kill the toolbarGroups element.
+ $toolbar.find( '.ve-ui-toolbarGroups' ).remove(),
+ // Restore the toolbar elements.
+ $toolbar.prepend( this.toolbarObjects.groups,
this.toolbarObjects.actions );
+ }
+ // Events teardown
+ $( window ).off( 'resize.ve-dialog', 'scroll.ve-dialog' );
};
/* Initialization */
diff --git a/modules/ve/init/ve.init.Target.js
b/modules/ve/init/ve.init.Target.js
index bb2cb92..2084d2b 100644
--- a/modules/ve/init/ve.init.Target.js
+++ b/modules/ve/init/ve.init.Target.js
@@ -94,7 +94,7 @@
}
this.currentDialogName = name;
- dialog.show();
+ dialog.open();
this.emit( 'openDialog', name );
};
@@ -109,7 +109,7 @@
var name = this.currentDialogName;
this.currentDialogName = null;
- this.dialogs[name].hide();
+ this.dialogs[name].close();
this.emit( 'closeDialog', name );
};
diff --git a/modules/ve/ui/dialogs/ve.ui.ContentDialog.js
b/modules/ve/ui/dialogs/ve.ui.ContentDialog.js
index 9015c18..2ded73d 100644
--- a/modules/ve/ui/dialogs/ve.ui.ContentDialog.js
+++ b/modules/ve/ui/dialogs/ve.ui.ContentDialog.js
@@ -13,15 +13,27 @@
* @extends ve.ui.Dialog
*
* @constructor
+ * @param {ve.ui.Surface} surface
*/
-ve.ui.ContentDialog = function VeUiContentDialog() {
+ve.ui.ContentDialog = function VeUiContentDialog( surface ) {
// Parent constructor
- ve.ui.Dialog.call( this );
+ ve.ui.Dialog.call( this, surface );
};
/* Inheritance */
ve.inheritClass( ve.ui.ContentDialog, ve.ui.Dialog );
+/* Static Properties */
+
+/**
+ * Localized message for dialog title.
+ *
+ * @static
+ * @property
+ * @type {string}
+ */
+ve.ui.ContentDialog.static.dialogTitleMessage =
'visualeditor-dialog-content-title';
+
/* Methods */
diff --git a/modules/ve/ui/dialogs/ve.ui.MetaDialog.js
b/modules/ve/ui/dialogs/ve.ui.MetaDialog.js
index 281942e..6b65890 100644
--- a/modules/ve/ui/dialogs/ve.ui.MetaDialog.js
+++ b/modules/ve/ui/dialogs/ve.ui.MetaDialog.js
@@ -13,15 +13,37 @@
* @extends ve.ui.Dialog
*
* @constructor
+ * @param {ve.ui.Surface} surface
*/
-ve.ui.MetaDialog = function VeUiMetaDialog() {
+ve.ui.MetaDialog = function VeUiMetaDialog( surface ) {
// Parent constructor
- ve.ui.Dialog.call( this );
+ ve.ui.Dialog.call( this, surface );
+
+ // Events
+ this.addListenerMethods( this, {
+ 'open': 'onOpen'
+ } );
+
};
/* Inheritance */
ve.inheritClass( ve.ui.MetaDialog, ve.ui.Dialog );
+
+/* Static Properties */
+
+/**
+ * Localized message for dialog title.
+ *
+ * @static
+ * @property
+ * @type {string}
+ */
+ve.ui.MetaDialog.static.dialogTitleMessage = 'visualeditor-dialog-meta-title';
+
/* Methods */
+ve.ui.MetaDialog.prototype.onOpen = function () {
+ // TODO: Get meta data and build out dialog.
+};
diff --git a/modules/ve/ui/styles/ve.ui.Surface.css
b/modules/ve/ui/styles/ve.ui.Surface.css
index 697fee1..9ddc6ec 100644
--- a/modules/ve/ui/styles/ve.ui.Surface.css
+++ b/modules/ve/ui/styles/ve.ui.Surface.css
@@ -12,6 +12,7 @@
background-image: url(images/fade-up.png);
background-position: left bottom;
background-repeat: repeat-x;
+ z-index: 100;
}
.ve-ui-toolbarGroups,
diff --git a/modules/ve/ui/ve.ui.Dialog.js b/modules/ve/ui/ve.ui.Dialog.js
index 40bd387..aaa8a2c 100644
--- a/modules/ve/ui/ve.ui.Dialog.js
+++ b/modules/ve/ui/ve.ui.Dialog.js
@@ -15,11 +15,39 @@
* @param {ve.ui.Surface} surface
*/
ve.ui.Dialog = function VeUiDialog( surface ) {
+ // Parent constructor
+ ve.EventEmitter.call( this );
+
+ var dialog = this;
// Properties
this.surface = surface;
this.visible = false;
this.$ = $( '<div class="ve-ui-dialog"></div>' );
+
+ // Initialization
+ this.title = $( '<div class="ve-ui-dialog-title"></div>' ).text(
+ ve.msg( this.constructor.static.dialogTitleMessage )
+ );
+ this.cancelBtn = new ve.ui.ButtonWidget(
+ { 'label': ve.msg( 'cancel' ) }
+ );
+ this.cancelBtn.on( 'click', function() {
+ dialog.surface.target.closeDialog();
+ } );
+ this.applyBtn = new ve.ui.ButtonWidget( {
+ 'label': ve.msg( 'visualeditor-dialog-label-apply' ),
+ 'flags': ['constructive'],
+ 'disabled': false
+ } );
+ this.actions = $( '<div class="ve-ui-actions"><div>' ).append(
+ this.cancelBtn.$, this.applyBtn.$
+ );
+ this.$.append( this.title, this.actions, $( '<div
class="ve-ui-dialog-container"></div>' ) );
};
+
+/* Inheritance */
+
+ve.inheritClass( ve.ui.Dialog, ve.EventEmitter );
/* Methods */
@@ -27,12 +55,14 @@
return this.visible;
};
-ve.ui.Dialog.prototype.show = function () {
+ve.ui.Dialog.prototype.open = function () {
+ this.emit( 'open' );
this.$.show();
this.visible = true;
};
-ve.ui.Dialog.prototype.hide = function () {
+ve.ui.Dialog.prototype.close = function () {
+ this.emit( 'close' );
this.$.hide();
this.visible = false;
};
diff --git a/modules/ve/ve.Surface.js b/modules/ve/ve.Surface.js
index 6372194..f6d27c7 100644
--- a/modules/ve/ve.Surface.js
+++ b/modules/ve/ve.Surface.js
@@ -37,6 +37,8 @@
// Initialization
this.target.$.append( this.$.addClass( 've-surface' ) );
+ this.target.addDialog( 'meta', new ve.ui.MetaDialog( this ) );
+
this.view.getDocument().getDocumentNode().setLive( true );
this.setupToolbars();
this.setupCommands();
--
To view, visit https://gerrit.wikimedia.org/r/52538
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I867ca0546606eeb5e2ab7f612bb5af700ab877ec
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/VisualEditor
Gerrit-Branch: master
Gerrit-Owner: Robmoen <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
