From ad6f19a072a575a629fb90c4a7f5f25edcbd283c Mon Sep 17 00:00:00 2001 From: Stefan Giehl Date: Fri, 3 Dec 2021 10:38:01 +0100 Subject: [PATCH] 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 --- ...idget-bydimension-container.directive.less | 1 + plugins/CoreHome/javascripts/dataTable.js | 31 ++++++------------- plugins/CoreHome/templates/_dataTable.twig | 2 +- plugins/CoreHome/templates/_dataTableJS.twig | 2 +- .../GoalsPages_overview.png | 4 +-- plugins/MarketingCampaignsReporting | 2 +- .../PivotByDimension_pivoted.png | 4 +-- .../UIIntegrationTest_ecommerce_products.png | 4 +-- .../UIIntegrationTest_ecommerce_sales.png | 4 +-- 9 files changed, 22 insertions(+), 32 deletions(-) diff --git a/plugins/CoreHome/angularjs/widget-bydimension-container/widget-bydimension-container.directive.less b/plugins/CoreHome/angularjs/widget-bydimension-container/widget-bydimension-container.directive.less index 7f2e4844fa2..9f8f6cce9c7 100644 --- a/plugins/CoreHome/angularjs/widget-bydimension-container/widget-bydimension-container.directive.less +++ b/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 { diff --git a/plugins/CoreHome/javascripts/dataTable.js b/plugins/CoreHome/javascripts/dataTable.js index 35b73de875d..1453f257b98 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(); } diff --git a/plugins/CoreHome/templates/_dataTable.twig b/plugins/CoreHome/templates/_dataTable.twig index f9abda1fc2c..d1a934c9614 100644 --- a/plugins/CoreHome/templates/_dataTable.twig +++ b/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 %} diff --git a/plugins/CoreHome/templates/_dataTableJS.twig b/plugins/CoreHome/templates/_dataTableJS.twig index 975dca4b3b6..7d671c398a4 100644 --- a/plugins/CoreHome/templates/_dataTableJS.twig +++ b/plugins/CoreHome/templates/_dataTableJS.twig @@ -1,5 +1,5 @@ diff --git a/plugins/Goals/tests/UI/expected-screenshots/GoalsPages_overview.png b/plugins/Goals/tests/UI/expected-screenshots/GoalsPages_overview.png index 110323f1c65..9addb5c8782 100644 --- a/plugins/Goals/tests/UI/expected-screenshots/GoalsPages_overview.png +++ b/plugins/Goals/tests/UI/expected-screenshots/GoalsPages_overview.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:23039ef64c1d32ae9149d6cb1fadeb8f133efe350372583c797f160056075199 -size 161691 +oid sha256:47f4954791162c63495b422e2bbf6eef330cd819ecb3f4490d0edc7dc7b9cbca +size 164421 diff --git a/plugins/MarketingCampaignsReporting b/plugins/MarketingCampaignsReporting index dba75308d82..fae712f437c 160000 --- a/plugins/MarketingCampaignsReporting +++ b/plugins/MarketingCampaignsReporting @@ -1 +1 @@ -Subproject commit dba75308d827659c008cd9898f61b3fc0fe2a2ec +Subproject commit fae712f437c38fc8ce2ea83ccedeb7f93fa4528d diff --git a/tests/UI/expected-screenshots/PivotByDimension_pivoted.png b/tests/UI/expected-screenshots/PivotByDimension_pivoted.png index 78bf5395ee4..dc30785ae65 100644 --- a/tests/UI/expected-screenshots/PivotByDimension_pivoted.png +++ b/tests/UI/expected-screenshots/PivotByDimension_pivoted.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:0d86338d2cddaf3be5e191433daf081b8fad5e21ea7e4379a8785acda80c123b -size 71499 +oid sha256:1f03cc267c565c4c84f8476fd60238bb340ba72e11d93e3a8d042248718bd84a +size 69333 diff --git a/tests/UI/expected-screenshots/UIIntegrationTest_ecommerce_products.png b/tests/UI/expected-screenshots/UIIntegrationTest_ecommerce_products.png index 5fc2f5b0a2e..d74e9c18088 100644 --- a/tests/UI/expected-screenshots/UIIntegrationTest_ecommerce_products.png +++ b/tests/UI/expected-screenshots/UIIntegrationTest_ecommerce_products.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:d870cdfc0e8040ae1942eef1137a29593c12eb2f9ff6ded1785860556fd0ff63 -size 55119 +oid sha256:a0814a1ee0355b98d6c8ef81396fe70fd42e56dbb728507f2fdb1d80d35ed442 +size 53649 diff --git a/tests/UI/expected-screenshots/UIIntegrationTest_ecommerce_sales.png b/tests/UI/expected-screenshots/UIIntegrationTest_ecommerce_sales.png index 6addf6f55d8..009ab628b31 100644 --- a/tests/UI/expected-screenshots/UIIntegrationTest_ecommerce_sales.png +++ b/tests/UI/expected-screenshots/UIIntegrationTest_ecommerce_sales.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:e3e29ca5e758358f795ec28b23e12f587cfdbe7bba0c6e6e208f6ae458c04a67 -size 92245 +oid sha256:6f5e19a61f57c573ea1e7302c530c819182a3b42bf1eba1b98b47974fa59ec24 +size 92901