Refs #4041, #3317, #4077, allow different visualizations to specify their own loading logic (when the appropriate footer icon is clicked) and fix a couple UI bugs in treemap.

2 files changed, 63 insertions, 38 deletions

diff --git a/plugins/CoreHome/javascripts/dataTable.js b/plugins/CoreHome/javascripts/dataTable.js
index f0a0e78a90..477abb9337 100644
--- a/plugins/CoreHome/javascripts/dataTable.js
+++ b/plugins/CoreHome/javascripts/dataTable.js
@@ -36,6 +36,21 @@ function DataTable(element) {
     this.param = {};
 }
 
+DataTable._footerIconHandlers = {}
+
+DataTable.registerFooterIconHandler = function (id, handler) {
+    var handlers = DataTable._footerIconHandlers;
+
+    if (handlers[id]) {
+        setTimeout(function () { // fail gracefully
+            throw new Exception("DataTable footer icon handler '" + id + "' is already being used.")
+        }, 1);
+        return;
+    }
+
+    handlers[id] = handler;
+};
+
 $.extend(DataTable.prototype, UIControl.prototype, {
 
     //initialisation function
@@ -709,42 +724,19 @@ $.extend(DataTable.prototype, UIControl.prototype, {
         );
 
         //footer arrow position element name
-        self.jsViewDataTable = $('.dataTableFooterWrap', domElem).attr('var');
-
-        $('.tableAllColumnsSwitch a', domElem)
-            .show()
-            .click(
-            function () {
-                // we only reset the limit filter, in case switch to table view from cloud view where limit is custom set to 30
-                // this value is stored in config file General->datatable_default_limit but this is more an edge case so ok to set it to 10
-
-                self.param.viewDataTable = $(this).attr('format');
+        self.jsViewDataTable = self.param.viewDataTable;
 
-                //self.resetAllFilters();
+        $('.tableAllColumnsSwitch a', domElem).show();
 
-                // when switching to display simple table, do not exclude low pop by default
-                delete self.param.enable_filter_excludelowpop;
-                delete self.param.filter_sort_column;
-                delete self.param.filter_sort_order;
-                delete columns;
-                self.reloadAjaxDataTable();
-                self.notifyWidgetParametersChange($(this), {viewDataTable: self.param.viewDataTable});
+        $('.dataTableFooterIcons .tableIcon', domElem).click(function () {
+            var id = $(this).attr('data-footer-icon-id');
+            if (!id) {
+                return;
             }
-        );
-
-        //handle Graph View icons
-        $('.tableGraphViews a', domElem)
-            .click(function () {
-                var viewDataTable = $(this).attr('format');
-
-                var filters = self.resetAllFilters();
-                self.param.flat = filters.flat;
-                self.param.columns = filters.columns;
-
-                self.param.viewDataTable = viewDataTable;
-                self.reloadAjaxDataTable();
-                self.notifyWidgetParametersChange($(this), {viewDataTable: self.param.viewDataTable});
-            });
+            
+            DataTable._footerIconHandlers[id](self, id);
+            self.notifyWidgetParametersChange(domElem, {viewDataTable: id});
+        })
 
         //Graph icon Collapsed functionality
         self.currentGraphViewIcon = 0;
@@ -755,7 +747,7 @@ $.extend(DataTable.prototype, UIControl.prototype, {
         //define collapsed icons
         $('.tableGraphCollapsed a', domElem)
             .each(function (i) {
-                if (self.jsViewDataTable == $(this).attr('var')) {
+                if (self.jsViewDataTable == $(this).attr('data-footer-icon-id')) {
                     self.currentGraphViewIcon = i;
                     self.graphViewEnabled = true;
                 }
@@ -1051,7 +1043,7 @@ $.extend(DataTable.prototype, UIControl.prototype, {
 
     // Tell parent widget that the parameters of this table was updated,
     notifyWidgetParametersChange: function (domWidget, parameters) {
-        var widget = $(domWidget).parents('[widgetId]');
+        var widget = $(domWidget).closest('[widgetId]');
         // trigger setParameters event on base element
         widget.trigger('setParameters', parameters);
     },
@@ -1528,6 +1520,39 @@ $.extend(DataTable.prototype, UIControl.prototype, {
     }
 });
 
+// handle switch to All Columns/Goals/HtmlTable DataTable visualization
+var switchToHtmlTable = function (dataTable, viewDataTable) {
+    // we only reset the limit filter, in case switch to table view from cloud view where limit is custom set to 30
+    // this value is stored in config file General->datatable_default_limit but this is more an edge case so ok to set it to 10
+
+    dataTable.param.viewDataTable = viewDataTable;
+
+    // when switching to display simple table, do not exclude low pop by default
+    delete dataTable.param.enable_filter_excludelowpop;
+    delete dataTable.param.filter_sort_column;
+    delete dataTable.param.filter_sort_order;
+    delete columns;
+    dataTable.reloadAjaxDataTable();
+};
+
+DataTable.registerFooterIconHandler('table', switchToHtmlTable);
+DataTable.registerFooterIconHandler('tableAllColumns', switchToHtmlTable);
+DataTable.registerFooterIconHandler('tableGoals', switchToHtmlTable);
+DataTable.registerFooterIconHandler('ecommerceOrder', switchToHtmlTable);
+DataTable.registerFooterIconHandler('ecommerceAbandonedCart', switchToHtmlTable);
+
+// generic function to handle switch to graph visualizations
+DataTable.switchToGraph = function (dataTable, viewDataTable) {
+    var filters = dataTable.resetAllFilters();
+    dataTable.param.flat = filters.flat;
+    dataTable.param.columns = filters.columns;
+
+    dataTable.param.viewDataTable = viewDataTable;
+    dataTable.reloadAjaxDataTable();
+};
+
+DataTable.registerFooterIconHandler('cloud', DataTable.switchToGraph);
+
 exports.DataTable = DataTable;
 
 })(jQuery, require);
\ No newline at end of file
diff --git a/plugins/CoreHome/templates/_dataTableFooter.twig b/plugins/CoreHome/templates/_dataTableFooter.twig
index a7829e619b..40f4df904a 100644
--- a/plugins/CoreHome/templates/_dataTableFooter.twig
+++ b/plugins/CoreHome/templates/_dataTableFooter.twig
@@ -25,16 +25,16 @@
     <span class="loadingPiwik" style="display:none;"><img src="plugins/Zeitgeist/images/loading-blue.gif"/> {{ 'General_LoadingData'|translate }}</span>
     {% if properties.show_footer_icons %}
         <div class="dataTableFooterIcons">
-            <div class="dataTableFooterWrap" var="{{ javascriptVariablesToSet.viewDataTable }}">
+            <div class="dataTableFooterWrap">
                 {% for footerIconGroup in footerIcons %}
                 <div class="tableIconsGroup">
                     <span class="{{ footerIconGroup.class }}">
                     {% for footerIcon in footerIconGroup.buttons %}
                         <span>
-                            {% if properties.show_active_view_icon and javascriptVariablesToSet.viewDataTable == footerIcon.format %}
+                            {% if properties.show_active_view_icon and javascriptVariablesToSet.viewDataTable == footerIcon.id %}
                             <img src="plugins/Zeitgeist/images/data_table_footer_active_item.png" class="dataTableFooterActiveItem"/>
                             {% endif %}
-                            <a class="tableIcon {% if javascriptVariablesToSet.viewDataTable == footerIcon.format %}activeIcon{% endif %}" format="{{ footerIcon.format }}" var="{{ footerIcon.var }}">
+                            <a class="tableIcon {% if javascriptVariablesToSet.viewDataTable == footerIcon.id %}activeIcon{% endif %}" data-footer-icon-id="{{ footerIcon.id }}">
                                 <img width="16" height="16" title="{{ footerIcon.title }}" src="{{ footerIcon.icon }}"/>
                                 {% if footerIcon.text is defined %}<span>{{ footerIcon.text }}</span>{% endif %}
                             </a>