diff --git a/plugins/CoreHome/javascripts/uiControl.js b/plugins/CoreHome/javascripts/uiControl.js index 3d5dba646db..7c92d26a01f 100644 --- a/plugins/CoreHome/javascripts/uiControl.js +++ b/plugins/CoreHome/javascripts/uiControl.js @@ -24,9 +24,8 @@ var $element = this.$element = $(element); $element.data('uiControlObject', this); - // convert values in params that are arrays to comma separated string lists var params = JSON.parse($element.attr('data-params') || '{}'); - for (var key in params) { + for (var key in params) { // convert values in params that are arrays to comma separated string lists if (params[key] instanceof Array) { params[key] = params[key].join(','); } @@ -46,7 +45,7 @@ * to the DOM. * * TODO: instead of having other pieces of the UI manually calling cleanupUnusedControls, - * MutationObservers should be called + * MutationObservers should be used */ UIControl.cleanupUnusedControls = function () { var controls = UIControl._controls; @@ -88,6 +87,20 @@ delete this.$element; this._baseDestroyCalled = true; + }, + + /** + * Handle the widget resize event, if we're currently in a widget. + * + * TODO: should use proper resize detection (see + * http://www.backalleycoder.com/2013/03/18/cross-browser-event-based-element-resize-detection/ ) + * with timeouts (since resizing widgets can be expensive) + */ + onWidgetResize: function (handler) { + var $widget = this.$element.closest('.widgetContent'); + $widget.on('widget:maximise', handler) + .on('widget:minimise', handler) + .on('widget:resize', handler); } }; diff --git a/plugins/CoreVisualizations/javascripts/jqplot.js b/plugins/CoreVisualizations/javascripts/jqplot.js index 76cfefe4335..0c2e103338b 100644 --- a/plugins/CoreVisualizations/javascripts/jqplot.js +++ b/plugins/CoreVisualizations/javascripts/jqplot.js @@ -148,7 +148,7 @@ // export as image target.on('piwikExportAsImage', function () { - self.exportAsImage(target, lang); + self.exportAsImage(target, self._lang); }); // manage resources @@ -161,6 +161,10 @@ } } }); + + this.$element.closest('.widgetContent').on('widget:resize', function () { + self._resizeGraph(); + }); }, _resizeGraph: function () { diff --git a/plugins/Dashboard/javascripts/dashboardObject.js b/plugins/Dashboard/javascripts/dashboardObject.js index 9a54a0cd579..038dd1a8a16 100644 --- a/plugins/Dashboard/javascripts/dashboardObject.js +++ b/plugins/Dashboard/javascripts/dashboardObject.js @@ -311,9 +311,9 @@ saveLayout(); } - // reload all widgets containing a graph to make them display correct - $('.widget:has(".piwik-graph")').each(function (id, elem) { - reloadWidget($(elem).attr('id')); + // trigger resize event on all widgets + $('.widgetContent').each(function () { + $(this).trigger('widget:resize'); }); } diff --git a/plugins/TreemapVisualization/javascripts/treemapViz.js b/plugins/TreemapVisualization/javascripts/treemapViz.js index a908d5f26c2..a3ba92d3880 100644 --- a/plugins/TreemapVisualization/javascripts/treemapViz.js +++ b/plugins/TreemapVisualization/javascripts/treemapViz.js @@ -111,6 +111,11 @@ self._leaveNode(); return false; }); + + this.onWidgetResize(function () { + var $treemap = self.$element.find('.infoviz-treemap'); + self.treemap.canvas.resize($treemap.width(), $treemap.height()); + }); }, /**