Ensure javascript of a datatable only initializes itself (#18386)

* Ensure javascript of a datatable only initializes itself

* apply review feedback

* use css max-width instead of js calculation

* improve js code

* updates expected screenshots

* updates submodule

1 files changed, 10 insertions, 21 deletions

diff --git a/plugins/CoreHome/javascripts/dataTable.js b/plugins/CoreHome/javascripts/dataTable.js
index 35b73de875..1453f257b9 100644
--- a/plugins/CoreHome/javascripts/dataTable.js
+++ b/plugins/CoreHome/javascripts/dataTable.js
@@ -39,8 +39,9 @@ function DataTable(element) {
 
 DataTable._footerIconHandlers = {};
 
-DataTable.initNewDataTables = function () {
-    $('div.dataTable').each(function () {
+DataTable.initNewDataTables = function (reportId) {
+    var selector = typeof reportId === 'string' ? '[data-report='+JSON.stringify(reportId)+']' : 'div.dataTable';
+    $(selector).each(function () {
         if (!$(this).attr('id')) {
             var tableType = $(this).attr('data-table-type') || 'DataTable',
                 klass = require('piwik/UI')[tableType] || require(tableType);
@@ -376,7 +377,7 @@ $.extend(DataTable.prototype, UIControl.prototype, {
         self.handleSearchBox(domElem);
         self.handleColumnDocumentation(domElem);
         self.handleRowActions(domElem);
-		self.handleCellTooltips(domElem);
+        self.handleCellTooltips(domElem);
         self.handleRelatedReports(domElem);
         self.handleTriggeredEvents(domElem);
         self.handleColumnHighlighting(domElem);
@@ -425,14 +426,6 @@ $.extend(DataTable.prototype, UIControl.prototype, {
             $domElem.width('');
             parentDataTable.width('');
 
-            var $table = $('table.dataTable', domElem);
-            if ($table.closest('.reportsByDimensionView').length) {
-                var requiredTableWidth = $table.width() - 40; // 40 is padding on card content
-                if (domElem.width() > requiredTableWidth) {
-                    domElem.css('max-width', requiredTableWidth + 'px');
-                }
-            }
-
             var tableWidth = getTableWidth(domElem);
 
             if (tableWidth <= maxTableWidth) {
@@ -445,9 +438,9 @@ $.extend(DataTable.prototype, UIControl.prototype, {
 
             if (dataTableInCard && dataTableInCard.length) {
                 // makes sure card has the same width
-                dataTableInCard.width(maxTableWidth);
+                dataTableInCard.css('max-width', maxTableWidth);
             } else {
-                $domElem.width(maxTableWidth);
+                $domElem.css('max-width', maxTableWidth);
             }
 
             if (parentDataTable && parentDataTable.length) {
@@ -455,9 +448,9 @@ $.extend(DataTable.prototype, UIControl.prototype, {
                 // applied in getLabelWidth() since they will have the same size.
 
                 if (dataTableInCard.length) {
-                    dataTableInCard.width(maxTableWidth);
+                    dataTableInCard.css('max-width', maxTableWidth);
                 } else {
-                    parentDataTable.width(maxTableWidth);
+                    parentDataTable.css('max-width', maxTableWidth);
                 }
             }
         }
@@ -1963,17 +1956,13 @@ $.extend(DataTable.prototype, UIControl.prototype, {
                     // ensure the tooltips of parent elements are hidden when the action tooltip is shown
                     // otherwise it can happen that tooltips for subtable rows are shown as well.
                     open: function() {
-                        var tooltip = $(this).parents().filter(function() {
-                            return jQuery.hasData(this) && $(this).data('ui-tooltip');
-                        }).tooltip('instance');
+                        var tooltip = $(this).parents('[piwik-widget]').tooltip('instance');
                         if (tooltip) {
                             tooltip.disable();
                         }
                     },
                     close: function() {
-                        var tooltip = $(this).parents().filter(function() {
-                            return jQuery.hasData(this) && $(this).data('ui-tooltip');
-                        }).tooltip('instance');
+                        var tooltip = $(this).parents('[piwik-widget]').tooltip('instance');
                         if (tooltip) {
                             tooltip.enable();
                         }