From 231a50f2b666f4290794cfeea25b0a3fe6df5c2a Mon Sep 17 00:00:00 2001 From: Trevor Parscal Date: Wed, 15 May 2013 11:44:32 -0700 Subject: [PATCH] Implement ve.ui.MWTemplateDialog Objective: * Add button to launch template dialog * Add template dialog Changes; *.php * Add messages and links to files ve.ce.Node.css * Make inline templates display as inline-block to contain their contents (allowing shields to work properly) ve.ui.MWTemplateDialog.js * New empty dialog for templates ve.ui.MWTemplateButtonTool.js * New template button, appears in context and launches dialog Change-Id: I9174ed7c9012522246a6defc859276bf36763f5b --- VisualEditor.i18n.php | 2 + VisualEditor.php | 4 ++ demos/ve/index.php | 2 + modules/ve/ce/styles/ve.ce.Node.css | 2 +- modules/ve/test/index.php | 4 +- .../ve/ui/dialogs/ve.ui.MWTemplateDialog.js | 71 +++++++++++++++++++ .../buttons/ve.ui.MWTemplateButtonTool.js | 38 ++++++++++ 7 files changed, 121 insertions(+), 2 deletions(-) create mode 100644 modules/ve/ui/dialogs/ve.ui.MWTemplateDialog.js create mode 100644 modules/ve/ui/tools/buttons/ve.ui.MWTemplateButtonTool.js diff --git a/VisualEditor.i18n.php b/VisualEditor.i18n.php index c127b4abe7..53fbc1c396 100644 --- a/VisualEditor.i18n.php +++ b/VisualEditor.i18n.php @@ -29,6 +29,7 @@ $messages['en'] = array( 'visualeditor-dialog-content-title' => 'Content settings', 'visualeditor-dialog-media-title' => 'Media settings', 'visualeditor-dialog-reference-title' => 'Reference', + 'visualeditor-dialog-template-title' => 'Template', 'visualeditor-dialog-action-apply' => 'Apply changes', 'visualeditor-dialog-action-cancel' => 'Cancel', 'visualeditor-dialog-action-close' => 'Close', @@ -65,6 +66,7 @@ $messages['en'] = array( 'visualeditor-annotationbutton-italic-tooltip' => 'Italic', 'visualeditor-annotationbutton-link-tooltip' => 'Link', 'visualeditor-dialogbutton-reference-tooltip' => 'Reference', + 'visualeditor-dialogbutton-template-tooltip' => 'Template', 'visualeditor-dialogbutton-media-tooltip' => 'Media', 'visualeditor-indentationbutton-indent-tooltip' => 'Increase indentation', 'visualeditor-indentationbutton-outdent-tooltip' => 'Decrease indentation', diff --git a/VisualEditor.php b/VisualEditor.php index 2ba2b19405..b3ad6de4fc 100644 --- a/VisualEditor.php +++ b/VisualEditor.php @@ -542,7 +542,9 @@ $wgResourceModules += array( 've/ce/nodes/ve.ce.MWReferenceNode.js', 've/ui/tools/buttons/ve.ui.MWReferenceButtonTool.js', + 've/ui/tools/buttons/ve.ui.MWTemplateButtonTool.js', 've/ui/dialogs/ve.ui.MWReferenceDialog.js', + 've/ui/dialogs/ve.ui.MWTemplateDialog.js', ), 'dependencies' => array( 'ext.visualEditor.core', @@ -550,6 +552,8 @@ $wgResourceModules += array( 'messages' => array( 'visualeditor-dialog-reference-title', 'visualeditor-dialogbutton-reference-tooltip', + 'visualeditor-dialog-template-title', + 'visualeditor-dialogbutton-template-tooltip', ), ), 'ext.visualEditor.icons-raster' => $wgVisualEditorResourceTemplate + array( diff --git a/demos/ve/index.php b/demos/ve/index.php index 7a3641a4e7..73b531b621 100644 --- a/demos/ve/index.php +++ b/demos/ve/index.php @@ -309,7 +309,9 @@ $html = file_get_contents( $page ); + + @@ -263,7 +263,9 @@ + + diff --git a/modules/ve/ui/dialogs/ve.ui.MWTemplateDialog.js b/modules/ve/ui/dialogs/ve.ui.MWTemplateDialog.js new file mode 100644 index 0000000000..2f711f605a --- /dev/null +++ b/modules/ve/ui/dialogs/ve.ui.MWTemplateDialog.js @@ -0,0 +1,71 @@ +/*! + * VisualEditor user interface MWTemplateDialog class. + * + * @copyright 2011-2013 VisualEditor Team and others; see AUTHORS.txt + * @license The MIT License (MIT); see LICENSE.txt + */ + +/** + * Document dialog. + * + * @class + * @extends ve.ui.Dialog + * + * @constructor + * @param {ve.ui.Surface} surface + */ +ve.ui.MWTemplateDialog = function VeUiMWTemplateDialog( surface ) { + // Parent constructor + ve.ui.Dialog.call( this, surface ); +}; + +/* Inheritance */ + +ve.inheritClass( ve.ui.MWTemplateDialog, ve.ui.Dialog ); + +/* Static Properties */ + +ve.ui.MWTemplateDialog.static.titleMessage = 'visualeditor-dialog-template-title'; + +ve.ui.MWTemplateDialog.static.icon = 'template'; + +ve.ui.MWTemplateDialog.static.modelClasses = [ ve.dm.MWTemplateNode ]; + +/* Methods */ + +/** + * Handle frame ready events. + * + * @method + */ +ve.ui.MWTemplateDialog.prototype.initialize = function () { + // Call parent method + ve.ui.Dialog.prototype.initialize.call( this ); +}; + +/** + * Handle frame ready events. + * + * @method + */ +ve.ui.MWTemplateDialog.prototype.onOpen = function () { + // Parent method + ve.ui.Dialog.prototype.onOpen.call( this ); +}; + +/** + * Handle frame ready events. + * + * @method + * @param {string} action Action that caused the window to be closed + */ +ve.ui.MWTemplateDialog.prototype.onClose = function () { + // Parent method + ve.ui.Dialog.prototype.onOpen.call( this ); +}; + +/* Registration */ + +ve.ui.dialogFactory.register( 'mwTemplate', ve.ui.MWTemplateDialog ); + +ve.ui.viewRegistry.register( 'mwTemplate', ve.ui.MWTemplateDialog ); diff --git a/modules/ve/ui/tools/buttons/ve.ui.MWTemplateButtonTool.js b/modules/ve/ui/tools/buttons/ve.ui.MWTemplateButtonTool.js new file mode 100644 index 0000000000..23fd1652bb --- /dev/null +++ b/modules/ve/ui/tools/buttons/ve.ui.MWTemplateButtonTool.js @@ -0,0 +1,38 @@ +/*! + * VisualEditor UserInterface MWTemplateButtonTool class. + * + * @copyright 2011-2013 VisualEditor Team and others; see AUTHORS.txt + * @license The MIT License (MIT); see LICENSE.txt + */ + +/** + * Template button tool. + * + * @class + * @extends ve.ui.DialogButtonTool + * @constructor + * @param {ve.ui.Toolbar} toolbar + * @param {Object} [config] Config options + */ +ve.ui.MWTemplateButtonTool = function VeUiMwTemplateButtonTool( toolbar, config ) { + // Parent constructor + ve.ui.DialogButtonTool.call( this, toolbar, config ); +}; + +/* Inheritance */ + +ve.inheritClass( ve.ui.MWTemplateButtonTool, ve.ui.DialogButtonTool ); + +/* Static Properties */ + +ve.ui.MWTemplateButtonTool.static.name = 'mwTemplate'; + +ve.ui.MWTemplateButtonTool.static.icon = 'template'; + +ve.ui.MWTemplateButtonTool.static.titleMessage = 'visualeditor-dialogbutton-template-tooltip'; + +ve.ui.MWTemplateButtonTool.static.dialog = 'mwTemplate'; + +/* Registration */ + +ve.ui.toolFactory.register( 'mwTemplate', ve.ui.MWTemplateButtonTool );