Refs #4041, remove DatatableManager class and replace with UIControl code.

7 files changed, 54 insertions, 133 deletions

diff --git a/plugins/CoreHome/CoreHome.php b/plugins/CoreHome/CoreHome.php
index b7dfca0796..97504c8425 100644
--- a/plugins/CoreHome/CoreHome.php
+++ b/plugins/CoreHome/CoreHome.php
@@ -84,7 +84,6 @@ class CoreHome extends \Piwik\Plugin
         $jsFiles[] = "plugins/CoreHome/javascripts/autocomplete.js";
         $jsFiles[] = "plugins/CoreHome/javascripts/sparkline.js";
         $jsFiles[] = "plugins/CoreHome/javascripts/corehome.js";
-        $jsFiles[] = "plugins/CoreHome/javascripts/dataTable_manager.js";
         $jsFiles[] = "plugins/CoreHome/javascripts/donate.js";
         $jsFiles[] = "libs/jqplot/jqplot-custom.min.js";
         $jsFiles[] = "plugins/CoreHome/javascripts/promo.js";
diff --git a/plugins/CoreHome/javascripts/dataTable.js b/plugins/CoreHome/javascripts/dataTable.js
index 275e81c86c..870b4f93a2 100644
--- a/plugins/CoreHome/javascripts/dataTable.js
+++ b/plugins/CoreHome/javascripts/dataTable.js
@@ -18,12 +18,12 @@ var exports = require('piwik/UI'),
  * This class contains the client side logic for viewing and interacting with
  * Piwik datatables.
  * 
- * The id attribute for DataTables is set dynamically by the DataTableManager
- * class, and this class instance is stored using the jQuery $.data function
+ * The id attribute for DataTables is set dynamically by the initNewDataTables
+ * method, and this class instance is stored using the jQuery $.data function
  * with the 'uiControlObject' key.
  * 
  * To find a datatable element by report (ie, 'UserSettings.getBrowser'),
- * use piwik.DataTableManager.getDataTableByReport.
+ * use piwik.DataTable.getDataTableByReport.
  * 
  * To get the dataTable JS instance (an instance of this class) for a
  * datatable HTML element, use $(element).data('uiControlObject').
@@ -33,11 +33,21 @@ var exports = require('piwik/UI'),
 function DataTable(element) {
     UIControl.call(this, element);
 
-    this.param = {};
+    this.init();
 }
 
 DataTable._footerIconHandlers = {}
 
+DataTable.initNewDataTables = function () {
+    $('div.dataTable').each(function () {
+        if (!$(this).attr('id')) {
+            var tableType = $(this).attr('data-table-type') || 'DataTable',
+                klass = require('piwik/UI')[tableType] || require(tableType),
+                table = new klass(this);
+        }
+    });
+};
+
 DataTable.registerFooterIconHandler = function (id, handler) {
     var handlers = DataTable._footerIconHandlers;
 
@@ -51,13 +61,33 @@ DataTable.registerFooterIconHandler = function (id, handler) {
     handlers[id] = handler;
 };
 
+/**
+ * Returns the first datatable div displaying a specific report.
+ *
+ * @param {string} report  The report, eg, UserSettings.getWideScreen
+ * @return {Element} The datatable div displaying the report, or undefined if
+ *                   it cannot be found.
+ */
+DataTable.getDataTableByReport = function (report) {
+    var result = undefined;
+    $('.dataTable').each(function () {
+        if ($(this).attr('data-report') == report) {
+            result = this;
+            return false;
+        }
+    });
+    return result;
+};
+
 $.extend(DataTable.prototype, UIControl.prototype, {
 
     //initialisation function
     init: function () {
         var domElem = this.$element;
 
-        this.workingDivId = domElem.attr('id');
+        this.workingDivId = this._createDivId();
+        domElem.attr('id', this.workingDivId);
+
         this.loadedSubDataTable = {};
         this.isEmpty = $('.pk-emptyDataTable', domElem).length > 0;
         this.bindEventsAndApplyStyle(domElem);
@@ -1516,6 +1546,10 @@ $.extend(DataTable.prototype, UIControl.prototype, {
             h2 = $('h2', domElem);
         }
         return h2;
+    },
+
+    _createDivId: function () {
+        return 'dataTable_' + this._controlId;
     }
 });
 
diff --git a/plugins/CoreHome/javascripts/dataTable_manager.js b/plugins/CoreHome/javascripts/dataTable_manager.js
deleted file mode 100644
index f4804e2762..0000000000
--- a/plugins/CoreHome/javascripts/dataTable_manager.js
+++ /dev/null
@@ -1,123 +0,0 @@
-/*!
- * Piwik - Web Analytics
- *
- * @link http://piwik.org
- * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
- */
-
-(function ($, require) {
-
-    /**
-     * The DataTableManager class manages the initialization of JS dataTable
-     * instances. It's main purpose is to give each dataTable div a unique ID.
-     * This is done in the browser since it's possible for any report to be
-     * loaded via AJAX, some more than once.
-     *
-     * The singleton instance can be accessed via piwik.DataTableManager.
-     */
-    var DataTableManager = function () {
-        this.nextId = 0;
-    };
-
-    DataTableManager.prototype = {
-
-        /**
-         * Gets the next available dataTable ID.
-         *
-         * @return {string}
-         */
-        getNextId: function () {
-            this.nextId += 1;
-            return 'dataTable_' + this.nextId;
-        },
-
-        /**
-         * Gets the ID used for the last table or 0 if a DataTable hasn't been
-         * initialized yet.
-         */
-        getLastId: function () {
-            return 'dataTable_' + this.nextId;
-        },
-
-        /**
-         * Initializes all uninitialized datatable elements. Uninitialized
-         * datatable elements do not have an ID set.
-         */
-        initNewDataTables: function () {
-            var self = this;
-
-            // find each datatable that hasn't been initialized (has no id attribute),
-            // and initialize it
-            $('div.dataTable').each(function () {
-                if (!$(this).attr('id')) {
-                    var params = JSON.parse($(this).attr('data-params') || '{}');
-                    var props = JSON.parse($(this).attr('data-props') || '{}');
-                    var tableType = $(this).attr('data-table-type') || 'DataTable';
-
-                    // convert values in params that are arrays to comma separated string lists
-                    for (var key in params) {
-                        if (params[key] instanceof Array) {
-                            params[key] = params[key].join(',');
-                        }
-                    }
-                    
-                    var klass = require('piwik/UI')[tableType] || require(tableType);
-                    self.initSingleDataTable(this, klass, params, props);
-                }
-            });
-        },
-
-        /**
-         * Initializes a single datatable element.
-         *
-         * @param {Element} domElem The DataTable div element.
-         * @param {Function} klass The DataTable's JS class.
-         * @param {Object} params The request params used.
-         * @param {Object} props The view properties that should be visible to the JS.
-         */
-        initSingleDataTable: function (domElem, klass, params, props) {
-            var newId = this.getNextId();
-
-            $(domElem).attr('id', newId);
-
-            var table = new klass($(domElem));
-            table.param = params;
-            table.props = props;
-            table.init();
-        },
-
-        /**
-         * Returns the first datatable div displaying a specific report.
-         *
-         * @param {string} report  The report, eg, UserSettings.getWideScreen
-         * @return {Element} The datatable div displaying the report, or undefined if
-         *                   it cannot be found.
-         */
-        getDataTableByReport: function (report) {
-            var result = undefined;
-            $('.dataTable').each(function () {
-                if ($(this).attr('data-report') == report) {
-                    result = this;
-                    return false;
-                }
-            });
-            return result;
-        },
-
-        /**
-         * Returns the datatable instance of the first datatable div displaying
-         * a specific report.
-         *
-         * @param {string} report  The report, eg, UserSettings.getWideScrren
-         * @return {dataTable} The DataTable instance created for the element, if
-         *                     the element can be found. undefined, if it can't be found.
-         */
-        getDataTableInstanceByReport: function (report) {
-            var dataTableElement = this.getDataTableByReport(report);
-            return dataTableElement ? $(dataTableElement).data('uiControlObject') : undefined;
-        }
-    };
-
-    piwik.DataTableManager = new DataTableManager();
-
-}(jQuery, require));
\ No newline at end of file
diff --git a/plugins/CoreHome/javascripts/dataTable_rowactions.js b/plugins/CoreHome/javascripts/dataTable_rowactions.js
index 65fa619252..69f03f5ca7 100644
--- a/plugins/CoreHome/javascripts/dataTable_rowactions.js
+++ b/plugins/CoreHome/javascripts/dataTable_rowactions.js
@@ -78,7 +78,7 @@ DataTable_RowActions_Registry.register({
             // when row evolution is triggered from the url (not a click on the data table)
             // we look for the data table instance in the dom
             var report = param.split(':')[0];
-            var div = $(piwik.DataTableManager.getDataTableByReport(report));
+            var div = $(require('piwik/UI').DataTable.getDataTableByReport(report));
             if (div.size() > 0 && div.data('uiControlObject')) {
                 dataTable = div.data('uiControlObject');
                 if (typeof dataTable.rowEvolutionActionInstance != 'undefined') {
diff --git a/plugins/CoreHome/javascripts/sparkline.js b/plugins/CoreHome/javascripts/sparkline.js
index 5b308c9606..a3970838ca 100644
--- a/plugins/CoreHome/javascripts/sparkline.js
+++ b/plugins/CoreHome/javascripts/sparkline.js
@@ -55,7 +55,7 @@ window.initializeSparklines = function () {
                 // on click, reload the graph with the new url
                 $(this).click(function () {
                     var reportId = graph.attr('data-graph-id'),
-                        dataTable = $(piwik.DataTableManager.getDataTableByReport(reportId));
+                        dataTable = $(require('piwik/UI').DataTable.getDataTableByReport(reportId));
 
                     // when the metrics picker is used, the id of the data table might be updated (which is correct behavior).
                     // for example, in goal reports it might change from GoalsgetEvolutionGraph to GoalsgetEvolutionGraph1.
diff --git a/plugins/CoreHome/javascripts/uiControl.js b/plugins/CoreHome/javascripts/uiControl.js
index 82d5a26bab..3d5dba646d 100644
--- a/plugins/CoreHome/javascripts/uiControl.js
+++ b/plugins/CoreHome/javascripts/uiControl.js
@@ -18,11 +18,22 @@
      * @param {Element} element The root element of the control.
      */
     var UIControl = function (element) {
-        this._controlIndex = UIControl._controls.length;
+        this._controlId = UIControl._controls.length;
         UIControl._controls.push(this);
 
         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) {
+            if (params[key] instanceof Array) {
+                params[key] = params[key].join(',');
+            }
+        }
+        this.param = params;
+        
+        this.props = JSON.parse($element.attr('data-props') || '{}');
     };
 
     /**
diff --git a/plugins/CoreHome/templates/_dataTableJS.twig b/plugins/CoreHome/templates/_dataTableJS.twig
index 244ee8a17b..975dca4b3b 100644
--- a/plugins/CoreHome/templates/_dataTableJS.twig
+++ b/plugins/CoreHome/templates/_dataTableJS.twig
@@ -1,5 +1,5 @@
 <script type="text/javascript" defer="defer">
     $(document).ready(function () {
-        piwik.DataTableManager.initNewDataTables();
+        require('piwik/UI/DataTable').initNewDataTables();
     });
 </script>