Yurik has uploaded a new change for review.
https://gerrit.wikimedia.org/r/256702
Change subject: Prevent graph multi-click, show status
......................................................................
Prevent graph multi-click, show status
* Show "Loading" on click, not after loading vega lib
* Prevent multiple clicks on the same graph
* Removed duplicate code to initialize the graph
* Renamed CSS class mw-graph-static to mw-graph-interactable
Bug: T120155
Change-Id: Idf97e769771221988291ac8f6b7952c85743d853
---
M Graph.body.php
M js/graph-loader.js
M js/graph2.js
M styles/common.less
4 files changed, 52 insertions(+), 45 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/Graph
refs/changes/02/256702/1
diff --git a/Graph.body.php b/Graph.body.php
index 212820e..b76b122 100644
--- a/Graph.body.php
+++ b/Graph.body.php
@@ -171,7 +171,7 @@
$liveTag = '';
$containerClass = 'mw-graph-container';
if ( $loadOnClick ) {
- $containerClass .= ' mw-graph-static';
+ $containerClass .= ' mw-graph-interactable';
$liveTag = Html::rawElement( 'div', array(
'class' => 'mw-graph-switch-button',
), wfMessage( 'graph-switch-button' )->text() );
diff --git a/js/graph-loader.js b/js/graph-loader.js
index 604e2e8..c015f79 100644
--- a/js/graph-loader.js
+++ b/js/graph-loader.js
@@ -3,37 +3,22 @@
mw.hook( 'wikipage.content' ).add( function () {
// Make graph containers clickable
- $( '#mw-content-text' ).on( 'click',
'.mw-graph-container.mw-graph-static', function () {
+ $( '#mw-content-text' ).on( 'click',
'.mw-graph-container.mw-graph-interactable', function () {
var $this = $( this );
+
+ // Prevent multiple clicks
+ $this.off( 'click' );
// Add a class to decorate loading
$this.addClass( 'mw-graph-loading' );
+ var $button = $this.find( '.mw-graph-switch-button' );
+ $button.text( mw.message( 'graph-loading' ).text() );
+ $button.addClass( 'loading' );
+
// Replace the image with the graph
loadAndReplaceWithGraph( $this );
} );
-
- /**
- * Takes a graph container and renders the vega graph inside.
- *
- * @param {jQuery} $el Graph container.
- * @param {Function} callback Method called when the graph is
loaded.
- */
- function renderGraph( $el, callback ) {
- new mw.Api().get( {
- action: 'graph',
- // TODO: is this the right way to get current
page title?
- title: mw.config.get( 'wgPageName' ),
- hash: $el.data( 'graphId' )
- } ).done( function ( data ) {
- vg.parse.spec( data.graph, function ( chart ) {
- if ( chart ) {
- chart( { el: $el[ 0 ] }
).update();
- }
- callback();
- } );
- } );
- }
/**
* Replace a graph image by the vega graph.
@@ -47,19 +32,27 @@
// TODO, Performance BUG: loading vega and calling api
should happen in parallel
// Lazy loading dependencies
mw.loader.using( 'ext.graph.vega2', function () {
- var $img = $el.find( 'img' ),
- $button = $el.find(
'.mw-graph-switch-button' );
+ new mw.Api().get( {
+ action: 'graph',
+ // TODO: is this the right way to get
current page title?
+ title: mw.config.get( 'wgPageName' ),
+ hash: $el.data( 'graphId' )
+ } ).done( function ( data ) {
+ mw.drawVegaGraph( $el[ 0 ], data.graph,
function ( error ) {
+ var $img = $el.find( 'img' ),
+ $button = $el.find(
'.mw-graph-switch-button' );
- $button.text( mw.message( 'graph-loading'
).text() );
- $button.addClass( 'loading' );
- renderGraph( $el, function () {
- $button.text( mw.message(
'graph-loading-done' ).text() );
- setTimeout( function () {
- $el.removeClass(
'mw-graph-loading' );
- $el.removeClass(
'mw-graph-static' );
- $button.remove();
- }, 1500 );
- $img.remove();
+ if ( !error ) {
+ $button.text(
mw.message( 'graph-loading-done' ).text() );
+ setTimeout( function ()
{
+
$button.remove();
+
$el.removeClass( 'mw-graph-loading' );
+
$el.removeClass( 'mw-graph-interactable' );
+ }, 1500 );
+ $img.remove();
+ }
+ // TODO: handle error by
showing some message
+ } );
} );
} );
}
diff --git a/js/graph2.js b/js/graph2.js
index 00ed508..7f2a956 100644
--- a/js/graph2.js
+++ b/js/graph2.js
@@ -39,22 +39,36 @@
return url;
};
+ /**
+ * Set up drawing canvas inside the given element and draw graph data
+ * @param element
+ * @param data graph spec
+ * @param {Function} callback function(error) called when drawing is
done
+ */
+ mw.drawVegaGraph = function ( element, data, callback ) {
+ vg.parse.spec( data, function ( error, chart ) {
+ if ( !error ) {
+ chart( { el: element } ).update();
+ }
+ if ( callback ) {
+ callback( error );
+ } else if ( error ) {
+ console.error( error );
+ }
+ } );
+ };
+
mw.hook( 'wikipage.content' ).add( function ( $content ) {
var specs = mw.config.get( 'wgGraphSpecs' );
if ( !specs ) {
return;
}
$content.find( '.mw-graph' ).each( function () {
- var graphId = $( this.parentNode ).data( 'graph-id' ),
- el = this;
- if ( !specs[ graphId ] ) {
+ var graphId = $( this.parentNode ).data( 'graph-id' );
+ if ( !specs.hasOwnProperty( graphId ) ) {
mw.log.warn( graphId );
} else {
- vg.parse.spec( specs[ graphId ], function (
chart ) {
- if ( chart ) {
- chart( { el: el } ).update();
- }
- } );
+ mw.drawVegaGraph( this, specs[ graphId ] );
}
} );
} );
diff --git a/styles/common.less b/styles/common.less
index d2d6f16..82583b2 100644
--- a/styles/common.less
+++ b/styles/common.less
@@ -26,7 +26,7 @@
position: relative;
}
- .mw-graph-container.mw-graph-static {
+ .mw-graph-container.mw-graph-interactable {
.mw-graph-switch-button {
position: absolute;
--
To view, visit https://gerrit.wikimedia.org/r/256702
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: Idf97e769771221988291ac8f6b7952c85743d853
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/Graph
Gerrit-Branch: master
Gerrit-Owner: Yurik <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
