Refs matomo-org#4041, remove DatatableManager class and replace with …

…UIControl code.

plugins/CoreHome/CoreHome.php

@@ -84,7 +84,6 @@ public function getJsFiles(&$jsFiles)
         $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";

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;
     }
 });
 

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') {

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.

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') || '{}');
     };
 
     /**

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>

plugins/UserCountryMap/javascripts/realtime-map.js

@@ -47,7 +47,7 @@
             }
 
             // set unique ID for kartograph map div
-            this.uniqueId = 'RealTimeMap_map-' + this._controlIndex;
+            this.uniqueId = 'RealTimeMap_map-' + this._controlId;
             $('.RealTimeMap_map', $element).attr('id', this.uniqueId);
 
             // create the map

tests/PHPUnit/travis.sh

@@ -6,7 +6,7 @@ then
 else
   if [ -n "$TEST_DIR" ]
   then
-    phpunit --colors $TEST_DIR
+      phpunit --colors $TEST_DIR
   else
 	  phpunit --configuration phpunit.xml --coverage-text --colors
   fi