Refs #4041, use require() and UIControl in all DataTable JS classes.

4 files changed, 35 insertions, 31 deletions

diff --git a/plugins/CoreHome/javascripts/dataTable.js b/plugins/CoreHome/javascripts/dataTable.js
index df360e9fd8..f0a0e78a90 100644
--- a/plugins/CoreHome/javascripts/dataTable.js
+++ b/plugins/CoreHome/javascripts/dataTable.js
@@ -9,13 +9,10 @@
 //								DataTable
 //-----------------------------------------------------------------------------
 
-/**
- * DataTable
- * @constructor
- */
-function dataTable() {
-    this.param = {};
-}
+(function ($, require) {
+
+var exports = require('piwik/UI'),
+    UIControl = exports.UIControl;
 
 /**
  * This class contains the client side logic for viewing and interacting with
@@ -23,29 +20,33 @@ function dataTable() {
  * 
  * The id attribute for DataTables is set dynamically by the DataTableManager
  * class, and this class instance is stored using the jQuery $.data function
- * with the 'piwikDataTable' key.
+ * with the 'uiControlObject' key.
  * 
  * To find a datatable element by report (ie, 'UserSettings.getBrowser'),
  * use piwik.DataTableManager.getDataTableByReport.
  * 
  * To get the dataTable JS instance (an instance of this class) for a
- * datatable HTML element, use $(element).data('piwikDataTable').
+ * datatable HTML element, use $(element).data('uiControlObject').
+ * 
+ * @constructor
  */
-dataTable.prototype =
-{
+function DataTable(element) {
+    UIControl.call(this, element);
+
+    this.param = {};
+}
+
+$.extend(DataTable.prototype, UIControl.prototype, {
+
     //initialisation function
-    init: function (workingDivId, domElem) {
-        if (typeof domElem == "undefined") {
-            domElem = $('#' + workingDivId);
-        }
+    init: function () {
+        var domElem = this.$element;
 
-        this.workingDivId = workingDivId;
+        this.workingDivId = domElem.attr('id');
         this.loadedSubDataTable = {};
         this.isEmpty = $('.pk-emptyDataTable', domElem).length > 0;
         this.bindEventsAndApplyStyle(domElem);
         this.initialized = true;
-
-        domElem.data('piwikDataTable', this);
     },
 
     //function triggered when user click on column sort
@@ -1525,4 +1526,8 @@ dataTable.prototype =
         }
         return h2;
     }
-};
\ No newline at end of file
+});
+
+exports.DataTable = DataTable;
+
+})(jQuery, require);
\ No newline at end of file
diff --git a/plugins/CoreHome/javascripts/dataTable_manager.js b/plugins/CoreHome/javascripts/dataTable_manager.js
index cb10e3b54d..1e9bf4256e 100644
--- a/plugins/CoreHome/javascripts/dataTable_manager.js
+++ b/plugins/CoreHome/javascripts/dataTable_manager.js
@@ -5,7 +5,7 @@
  * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
  */
 
-(function ($) {
+(function ($, require) {
 
     /**
      * The DataTableManager class manages the initialization of JS dataTable
@@ -52,7 +52,7 @@
                 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';
+                    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) {
@@ -61,7 +61,8 @@
                         }
                     }
                     
-                    self.initSingleDataTable(this, window[tableType], params, props);
+                    var klass = require('piwik/UI')[tableType];
+                    self.initSingleDataTable(this, klass, params, props);
                 }
             });
         },
@@ -79,12 +80,10 @@
 
             $(domElem).attr('id', newId);
 
-            var table = new klass();
-            $(domElem).data('dataTableInstance', table);
-
+            var table = new klass($(domElem));
             table.param = params;
             table.props = props;
-            table.init(newId);
+            table.init();
         },
 
         /**
@@ -115,10 +114,10 @@
          */
         getDataTableInstanceByReport: function (report) {
             var dataTableElement = this.getDataTableByReport(report);
-            return dataTableElement ? $(dataTableElement).data('dataTableInstance') : undefined;
+            return dataTableElement ? $(dataTableElement).data('uiControlObject') : undefined;
         }
     };
 
     piwik.DataTableManager = new DataTableManager();
 
-}(jQuery));
\ No newline at end of file
+}(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 dd44949eaf..65fa619252 100644
--- a/plugins/CoreHome/javascripts/dataTable_rowactions.js
+++ b/plugins/CoreHome/javascripts/dataTable_rowactions.js
@@ -79,8 +79,8 @@ DataTable_RowActions_Registry.register({
             // we look for the data table instance in the dom
             var report = param.split(':')[0];
             var div = $(piwik.DataTableManager.getDataTableByReport(report));
-            if (div.size() > 0 && div.data('piwikDataTable')) {
-                dataTable = div.data('piwikDataTable');
+            if (div.size() > 0 && div.data('uiControlObject')) {
+                dataTable = div.data('uiControlObject');
                 if (typeof dataTable.rowEvolutionActionInstance != 'undefined') {
                     return dataTable.rowEvolutionActionInstance;
                 }
diff --git a/plugins/CoreHome/templates/_dataTable.twig b/plugins/CoreHome/templates/_dataTable.twig
index b89b4576b2..8aedae0dd5 100644
--- a/plugins/CoreHome/templates/_dataTable.twig
+++ b/plugins/CoreHome/templates/_dataTable.twig
@@ -1,7 +1,7 @@
 {% set summaryRowId = constant('Piwik\\DataTable::ID_SUMMARY_ROW') %}{# ID_SUMMARY_ROW #}
 {% set isSubtable = javascriptVariablesToSet.idSubtable is defined and javascriptVariablesToSet.idSubtable != 0 %}
 <div class="dataTable {{ visualizationCssClass }} {{ properties.datatable_css_class|default('') }} {% if isSubtable %}subDataTable{% endif %}"
-     data-table-type="{{ properties.datatable_js_type|default('dataTable') }}"
+     data-table-type="{{ properties.datatable_js_type }}"
      data-report="{{ properties.report_id }}"
      data-props="{% if clientSidePropertiesToSet is empty %}{}{% else %}{{ clientSidePropertiesToSet|json_encode }}{% endif %}"
      data-params="{% if javascriptVariablesToSet is empty %}{}{% else %}{{ javascriptVariablesToSet|json_encode }}{% endif %}">