Krinkle has uploaded a new change for review.
https://gerrit.wikimedia.org/r/107275
Change subject: [WIP] Implement MWTemplateDialog (simplified
MWTransclusionDialog)
......................................................................
[WIP] Implement MWTemplateDialog (simplified MWTransclusionDialog)
* A work-in-progress version of MWTemplateDialog existed already,
but was inaccessible.
* Make TransclusionDialog abstract and implement in MWTemplateDialog
and MWAdvancedTransclusionDialog respectively.
FIXME:
* MWAdvancedTransclusionDialog has 'transclusion2' as name, so
now that one is inaccessible, don't merge until this is resolved.
TODO:
* Make the template dialog the default for inserting new
transclusions, with a way to switch to the advanced one.
* When editing existing transclusions, dynamically decide which
to open based on whether the transclusion is simple (only 1
transclusion, and not a wikitext one).
* Template dialog has a preview section, this currently has a
toggle checkbox. Hide this, and instead base it on whether the
template is an inline node or not.
Change-Id: I5cc71499b3a7f34358fc607bd442ca70108e94a2
---
M modules/ve-mw/ui/dialogs/ve.ui.MWAdvancedTransclusionDialog.js
M modules/ve-mw/ui/dialogs/ve.ui.MWTemplateDialog.js
M modules/ve-mw/ui/dialogs/ve.ui.MWTransclusionDialog.js
M modules/ve-mw/ui/styles/ve.ui.MWDialog.css
4 files changed, 197 insertions(+), 4 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/VisualEditor
refs/changes/75/107275/1
diff --git a/modules/ve-mw/ui/dialogs/ve.ui.MWAdvancedTransclusionDialog.js
b/modules/ve-mw/ui/dialogs/ve.ui.MWAdvancedTransclusionDialog.js
index dd609ff..fe54edc 100644
--- a/modules/ve-mw/ui/dialogs/ve.ui.MWAdvancedTransclusionDialog.js
+++ b/modules/ve-mw/ui/dialogs/ve.ui.MWAdvancedTransclusionDialog.js
@@ -31,7 +31,7 @@
/* Static Properties */
-ve.ui.MWAdvancedTransclusionDialog.static.name = 'transclusion';
+ve.ui.MWAdvancedTransclusionDialog.static.name = 'transclusion2';
ve.ui.MWAdvancedTransclusionDialog.static.titleMessage =
'visualeditor-dialog-transclusion-title';
diff --git a/modules/ve-mw/ui/dialogs/ve.ui.MWTemplateDialog.js
b/modules/ve-mw/ui/dialogs/ve.ui.MWTemplateDialog.js
index 1606a1a..c5163d9 100644
--- a/modules/ve-mw/ui/dialogs/ve.ui.MWTemplateDialog.js
+++ b/modules/ve-mw/ui/dialogs/ve.ui.MWTemplateDialog.js
@@ -5,6 +5,8 @@
* @license The MIT License (MIT); see LICENSE.txt
*/
+/*global mw */
+
/**
* Dialog for editing MediaWiki templates.
*
@@ -23,6 +25,11 @@
this.node = null;
this.transclusion = null;
this.loaded = false;
+ this.previewing = false;
+ this.preview = false;
+ this.parsing = false;
+ this.parsingQuery = null;
+ this.wikitext = null;
};
/* Inheritance */
@@ -42,6 +49,111 @@
/**
* @inheritdoc
*/
+ve.ui.MWTemplateDialog.prototype.onTransclusionChange = function () {
+ // TODO: Debounce me
+ if ( this.previewing ) {
+ this.fetchPreview();
+ }
+};
+
+/**
+ * Get HTML preview of template from server.
+ */
+ve.ui.MWTemplateDialog.prototype.fetchPreview = function () {
+ var wikitext = this.transclusion.getWikitext();
+
+ if ( wikitext !== this.wikitext ) {
+ this.wikitext = wikitext;
+ this.parsing = true;
+ if ( this.parsingQuery ) {
+ this.parsingQuery.abort();
+ }
+ this.parsingQuery = $.ajax( {
+ 'url': mw.util.wikiScript( 'api' ),
+ 'data': {
+ 'action': 'visualeditor',
+ 'paction': 'parsefragment',
+ 'page': mw.config.get( 'wgRelevantPageName' ),
+ 'wikitext': wikitext,
+ 'format': 'json'
+ },
+ 'dataType': 'json',
+ 'type': 'POST',
+ // Wait up to 100 seconds before giving up
+ 'timeout': 100000,
+ 'cache': 'false'
+ } )
+ .done( ve.bind( this.onParseSuccess, this ) )
+ .fail( ve.bind( this.onParseError, this ) )
+ .always( ve.bind( function () {
+ this.parsing = false;
+ this.preview = true;
+ }, this ) );
+ }
+};
+
+/**
+ * Handle a successful response from the parser for the wikitext fragment.
+ *
+ * @param {Object} response Response data
+ */
+ve.ui.MWTemplateDialog.prototype.onParseSuccess = function ( response ) {
+ if (
+ response &&
+ !response.error &&
+ response.visualeditor &&
+ response.visualeditor.result === 'success'
+ ) {
+ this.$previewContent.empty().append( this.$(
response.visualeditor.content ) );
+ }
+};
+
+/**
+ * Handle a failed response from the parser for the wikitext fragment.
+ *
+ * @param {Object} response Response data
+ */
+ve.ui.MWTemplateDialog.prototype.onParseError = function () {
+ this.$previewContent.empty().text( 'ERROR PARSING TEMPLATE!' );
+};
+
+/**
+ * Handle preview button change events.
+ *
+ * @param {boolean} value Button value
+ */
+ve.ui.MWTemplateDialog.prototype.onPreviewButtonChange = function ( value ) {
+ this.setPreviewing( value );
+};
+
+/**
+ * Check if preview is enabled.
+ *
+ * @return {boolean} Preview is enabled
+ */
+ve.ui.MWTemplateDialog.prototype.isPreviewing = function () {
+ return this.previewing;
+};
+
+/**
+ * Hide or show preview.
+ *
+ * @param {boolean} Show preview
+ * @chainable
+ */
+ve.ui.MWTemplateDialog.prototype.setPreviewing = function ( value ) {
+ this.previewing = !!value;
+ this.previewButton.setValue( value );
+ this.$body.toggleClass( 've-ui-mwTemplateDialog-previewing',
this.previewing );
+ if ( value && !this.preview ) {
+ this.fetchPreview();
+ }
+ return this;
+};
+
+/**
+ * @inheritdoc
+ */
ve.ui.MWTemplateDialog.prototype.getBookletLayout = function () {
return new OO.ui.BookletLayout( {
'$': this.$,
@@ -51,6 +163,35 @@
} );
};
+/**
+ * @inheritdoc
+ */
+ve.ui.MWTemplateDialog.prototype.initialize = function () {
+ // Parent method
+ ve.ui.MWTransclusionDialog.prototype.initialize.call( this );
+
+ // Properties
+ this.$editor = this.$( '<div>' );
+ this.$preview = this.$( '<div>' );
+ this.$previewContent = this.$( '<div>' );
+ this.previewButton = new OO.ui.CheckboxWidget( { '$': this.$, 'label':
'Preview' } );
+
+ // Events
+ this.previewButton.connect( this, { 'change': 'onPreviewButtonChange' }
);
+
+ // Initialization
+ this.$body.append( this.$editor, this.$preview );
+ this.$foot.append( this.previewButton.$element );
+ this.$editor
+ .addClass( 've-ui-mwTemplateDialog-editor' )
+ .append( this.bookletLayout.$element );
+ this.$preview
+ .addClass( 've-ui-mwTemplateDialog-preview' )
+ .append( this.$previewContent );
+ this.$previewContent
+ .addClass( 've-ui-mwTemplateDialog-preview-content' );
+};
+
/* Registration */
ve.ui.dialogFactory.register( ve.ui.MWTemplateDialog );
diff --git a/modules/ve-mw/ui/dialogs/ve.ui.MWTransclusionDialog.js
b/modules/ve-mw/ui/dialogs/ve.ui.MWTransclusionDialog.js
index 9812f0b..4933125 100644
--- a/modules/ve-mw/ui/dialogs/ve.ui.MWTransclusionDialog.js
+++ b/modules/ve-mw/ui/dialogs/ve.ui.MWTransclusionDialog.js
@@ -36,12 +36,19 @@
/* Methods */
/**
- * Handle parts being replaced.
+ * Handle transclusion change events.
+ */
+ve.ui.MWTransclusionDialog.prototype.onTransclusionChange = function () {
+ //
+};
+
+/**
+ * Handle transclusion part replacement events.
*
* @param {ve.dm.MWTransclusionPartModel} removed Removed part
* @param {ve.dm.MWTransclusionPartModel} added Added part
*/
-ve.ui.MWTransclusionDialog.prototype.onReplacePart = function ( removed, added
) {
+ve.ui.MWTransclusionDialog.prototype.onTransclusionReplace = function (
removed, added ) {
var i, len, page, name, names, params, selected,
removePages = [],
select = false;
@@ -187,7 +194,9 @@
this.loaded = false;
// Events
- this.transclusion.connect( this, { 'replace': 'onReplacePart' } );
+ this.transclusion.connect( this, {
+ 'replace': 'onTransclusionReplace', 'change':
'onTransclusionChange'
+ } );
// Initialization
if ( this.node instanceof ve.ce.MWTransclusionNode ) {
diff --git a/modules/ve-mw/ui/styles/ve.ui.MWDialog.css
b/modules/ve-mw/ui/styles/ve.ui.MWDialog.css
index dc8a1c9..fb6f652 100644
--- a/modules/ve-mw/ui/styles/ve.ui.MWDialog.css
+++ b/modules/ve-mw/ui/styles/ve.ui.MWDialog.css
@@ -55,6 +55,49 @@
top: 1em;
}
+/* ve.ui.TemplateDialog */
+
+.ve-ui-mwTemplateDialog-editor,
+.ve-ui-mwTemplateDialog-preview {
+ position: absolute;
+ left: 0;
+ right: 0;
+}
+
+.ve-ui-mwTemplateDialog-editor {
+ overflow: hidden;
+ top: 0;
+ bottom: 0;
+ -webkit-transition: bottom 200ms;
+ -moz-transition: bottom 200ms;
+ -o-transition: bottom 200ms;
+ transition: bottom 200ms;
+}
+
+.ve-ui-mwTemplateDialog-preview {
+ overflow: hidden;
+ height: 0;
+ bottom: 0;
+ box-shadow: 0 0 0 rgba(0,0,0,0);
+ -webkit-transition: height 200ms, box-shadow 200ms;
+ -moz-transition: height 200ms, box-shadow 200ms;
+ -o-transition: height 200ms, box-shadow 200ms;
+ transition: height 200ms, box-shadow 200ms;
+}
+
+.ve-ui-mwTemplateDialog-preview-content {
+ padding: 1.25em;
+}
+
+.ve-ui-mwTemplateDialog-previewing .ve-ui-mwTemplateDialog-editor {
+ bottom: 5em;
+}
+
+.ve-ui-mwTemplateDialog-previewing .ve-ui-mwTemplateDialog-preview {
+ height: 5em;
+ box-shadow: 0 0 0.66em rgba(0,0,0,0.25)
+}
+
/* ve.ui.MWMetaDialog */
.ve-ui-mwMetaDialog-languages-table {
--
To view, visit https://gerrit.wikimedia.org/r/107275
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I5cc71499b3a7f34358fc607bd442ca70108e94a2
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/VisualEditor
Gerrit-Branch: master
Gerrit-Owner: Krinkle <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
