Ferdbold has uploaded a new change for review. (
https://gerrit.wikimedia.org/r/328469 )
Change subject: [WIP] Preview node on graph dialog (GeneratedContentNode
implementation)
......................................................................
[WIP] Preview node on graph dialog (GeneratedContentNode implementation)
Bug: T151127
Change-Id: I8f3510e7082ca43ae1e0f24238c885b7a19961f9
---
M extension.json
M modules/ve-graph/ve.ce.MWGraphNode.js
M modules/ve-graph/ve.dm.MWGraphNode.js
A modules/ve-graph/ve.ui.MWGraphDialog.css
M modules/ve-graph/ve.ui.MWGraphDialog.js
5 files changed, 81 insertions(+), 12 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/Graph
refs/changes/69/328469/1
diff --git a/extension.json b/extension.json
index 7384adc..018bf43 100644
--- a/extension.json
+++ b/extension.json
@@ -114,6 +114,7 @@
"modules/ve-graph/widgets/ve.ui.TableWidget.js"
],
"styles": [
+ "modules/ve-graph/ve.ui.MWGraphDialog.css",
"modules/ve-graph/ve.ce.MWGraphNode.css",
"modules/ve-graph/ve.ui.MWGraphIcons.css",
"modules/ve-graph/widgets/ve.ui.RowWidget.css",
diff --git a/modules/ve-graph/ve.ce.MWGraphNode.js
b/modules/ve-graph/ve.ce.MWGraphNode.js
index 4a4010d..58d9703 100644
--- a/modules/ve-graph/ve.ce.MWGraphNode.js
+++ b/modules/ve-graph/ve.ce.MWGraphNode.js
@@ -113,9 +113,11 @@
/**
* Render a Vega graph inside the node
+ * @override
*/
-ve.ce.MWGraphNode.prototype.update = function () {
- var node = this;
+ve.ce.MWGraphNode.prototype.generateContents = function() {
+ var node = this,
+ deferred = $.Deferred();
// Clear element
this.$graph.empty();
@@ -134,12 +136,25 @@
node.$plot.css( view._padding );
node.calculateHighlights();
+
+ deferred.resolve( node.$element.get() );
},
function ( failMessageKey ) {
node.$graph.text( ve.msg( failMessageKey ) );
+ deferred.resolve( node.$element.get() );
}
);
} );
+
+ return deferred.promise();
+};
+
+/**
+ * @override
+ */
+ve.ce.MWGraphNode.prototype.validateGeneratedContents = function () {
+ // Always invalidate cached renders since the canvas will be blank
inside
+ return false;
};
/**
diff --git a/modules/ve-graph/ve.dm.MWGraphNode.js
b/modules/ve-graph/ve.dm.MWGraphNode.js
index 20f07ae..82d027c 100644
--- a/modules/ve-graph/ve.dm.MWGraphNode.js
+++ b/modules/ve-graph/ve.dm.MWGraphNode.js
@@ -181,6 +181,25 @@
return result || '';
};
+/**
+ * @override
+ */
+ve.dm.MWGraphNode.static.toDataElement = function ( domElements ) {
+ var dataElement,
+ mwDataJSON = domElements[ 0 ].getAttribute( 'data-mw' ),
+ mwData = mwDataJSON ? JSON.parse( mwDataJSON ) : {};
+
+ dataElement = {
+ type: this.name,
+ attributes: {
+ mw: mwData,
+ originalMw: mwDataJSON
+ }
+ };
+
+ return dataElement;
+};
+
/* Methods */
/**
diff --git a/modules/ve-graph/ve.ui.MWGraphDialog.css
b/modules/ve-graph/ve.ui.MWGraphDialog.css
new file mode 100644
index 0000000..58ed897
--- /dev/null
+++ b/modules/ve-graph/ve.ui.MWGraphDialog.css
@@ -0,0 +1,7 @@
+.ve-ui-graphDialog-menuLayout-content {
+ overflow: auto;
+}
+
+.ve-ui-mwGraphDialog-preview {
+ text-align: center;
+}
diff --git a/modules/ve-graph/ve.ui.MWGraphDialog.js
b/modules/ve-graph/ve.ui.MWGraphDialog.js
index cc05ab7..0be993d 100644
--- a/modules/ve-graph/ve.ui.MWGraphDialog.js
+++ b/modules/ve-graph/ve.ui.MWGraphDialog.js
@@ -8,7 +8,7 @@
* MediaWiki graph dialog.
*
* @class
- * @extends ve.ui.MWExtensionDialog
+ * @extends ve.ui.MWExtensionPreviewDialog
*
* @constructor
* @param {Object} [element]
@@ -26,7 +26,7 @@
/* Inheritance */
-OO.inheritClass( ve.ui.MWGraphDialog, ve.ui.MWExtensionDialog );
+OO.inheritClass( ve.ui.MWGraphDialog, ve.ui.MWExtensionPreviewDialog );
/* Static properties */
@@ -35,6 +35,8 @@
ve.ui.MWGraphDialog.static.title = OO.ui.deferMsg(
'graph-ve-dialog-edit-title' );
ve.ui.MWGraphDialog.static.size = 'large';
+
+ve.ui.MWGraphDialog.static.modelClasses = [ ve.dm.MWGraphNode ];
ve.ui.MWGraphDialog.static.actions = [
{
@@ -55,8 +57,6 @@
modes: [ 'edit', 'insert' ]
}
];
-
-ve.ui.MWGraphDialog.static.modelClasses = [ ve.dm.MWGraphNode ];
/* Methods */
@@ -81,7 +81,17 @@
ve.ui.MWGraphDialog.super.prototype.initialize.call( this );
/* Root layout */
- this.rootLayout = new OO.ui.BookletLayout( {
+ this.rootLayout = new OO.ui.MenuLayout( {
+ menuPosition: 'bottom'
+ } );
+
+ /* Preview element */
+ this.previewElement.$element.addClass(
+ 've-ui-mwGraphDialog-preview'
+ );
+
+ /* Menu layout */
+ this.menuLayout = new OO.ui.BookletLayout( {
classes: [ 've-ui-mwGraphDialog-panel-root' ],
outlined: true
} );
@@ -90,7 +100,7 @@
this.dataPage = new OO.ui.PageLayout( 'data' );
this.rawPage = new OO.ui.PageLayout( 'raw' );
- this.rootLayout.addPages( [
+ this.menuLayout.addPages( [
this.generalPage, this.dataPage, this.rawPage
] );
@@ -213,7 +223,7 @@
this.rawPage.$element.append( jsonTextField.$element );
// Events
- this.rootLayout.connect( this, { set: 'onRootLayoutSet' } );
+ this.menuLayout.connect( this, { set: 'onMenuLayoutSet' } );
this.graphTypeDropdownInput.connect( this, { change:
'onGraphTypeInputChange' } );
this.sizeWidget.connect( this, { change: 'onSizeWidgetChange' } );
@@ -230,6 +240,13 @@
this.jsonTextInput.connect( this, { change: 'onSpecStringInputChange' }
);
// Initialization
+ this.rootLayout.$menu
+ .append( this.menuLayout.$element );
+
+ this.rootLayout.$content
+ .addClass( 've-ui-graphDialog-menuLayout-content' )
+ .append( this.previewElement.$element );
+
this.$body.append( this.rootLayout.$element );
};
@@ -286,7 +303,6 @@
.first( function () {
// Kill model
this.graphModel.disconnect( this );
-
this.graphModel = null;
// Clear data page
@@ -297,6 +313,16 @@
this.getFragment().getSurface().popStaging();
}
}, this );
+};
+
+/**
+ * @inheritdoc
+ */
+ve.ui.MWGraphDialog.prototype.updateMwData = function ( mwData ) {
+ ve.ui.MWGraphDialog.super.prototype.updateMwData.call( this, mwData );
+
+ // Get spec from dialog model
+ mwData.body.extsrc = this.graphModel.getSpecString();
};
/**
@@ -479,11 +505,11 @@
};
/**
- * Handle page set events on the root layout
+ * Handle page set events on the menu layout
*
* @param {OO.ui.PageLayout} page Set page
*/
-ve.ui.MWGraphDialog.prototype.onRootLayoutSet = function ( page ) {
+ve.ui.MWGraphDialog.prototype.onMenuLayoutSet = function ( page ) {
if ( page.getName() === 'raw' ) {
// The raw data may have been changed while not visible,
// so recalculate height now it is visible.
@@ -586,6 +612,7 @@
dialog.actions.setAbilities( {
done: ( dialog.mode === 'insert' ) ||
dialog.graphModel.hasBeenChanged()
} );
+ dialog.onChangeHandler.call();
},
function () {
dialog.actions.setAbilities( { done: false } );
--
To view, visit https://gerrit.wikimedia.org/r/328469
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I8f3510e7082ca43ae1e0f24238c885b7a19961f9
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/Graph
Gerrit-Branch: master
Gerrit-Owner: Ferdbold <fbol...@wikimedia.org>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
