Refs matomo-org#4077, matomo-org#4041, resize treemap on widget resiz…

…e and fix regression in jqplot refactoring (export as image didn't work).
sabl0r · Sep 21, 2013 · c2061d4 · c2061d4
1 parent ed569f2
commit c2061d4
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 7 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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());
+            });
         },
 
         /**