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

plugins/CoreHome/angularjs/widget-bydimension-container/widget-bydimension-container.directive.less

@@ -14,6 +14,7 @@
         .dimensionReport {
             float: left;
             min-width: 500px;
+            max-width: 100%;
         }
 
         table.dataTable tr td.label {

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,19 +438,19 @@ $.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) {
                 // makes sure dataTableWrapper and DataTable has same size => makes sure maxLabelWidth does not get
                 // 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();
                         }

plugins/CoreHome/templates/_dataTable.twig

@@ -73,7 +73,7 @@
                 {% include "@CoreHome/_dataTableFooter.twig" %}
             {% endif %}
 
-            {% include "@CoreHome/_dataTableJS.twig" %}
+            {% include "@CoreHome/_dataTableJS.twig" with { reportId: properties.report_id } %}
         {% endif %}
     </div>
 </div>

plugins/CoreHome/templates/_dataTableJS.twig

@@ -1,5 +1,5 @@
 <script type="text/javascript" defer="defer">
     $(document).ready(function () {
-        require('piwik/UI/DataTable').initNewDataTables();
+        require('piwik/UI/DataTable').initNewDataTables({{ reportId|json_encode|raw }});
     });
 </script>