diff options
Diffstat (limited to 'plugins/CoreHome/javascripts/dataTable.js')
| -rw-r--r-- | plugins/CoreHome/javascripts/dataTable.js | 136 |
1 files changed, 88 insertions, 48 deletions
diff --git a/plugins/CoreHome/javascripts/dataTable.js b/plugins/CoreHome/javascripts/dataTable.js index 71dd8e78b7..dd00113ed7 100644 --- a/plugins/CoreHome/javascripts/dataTable.js +++ b/plugins/CoreHome/javascripts/dataTable.js @@ -107,7 +107,6 @@ $.extend(DataTable.prototype, UIControl.prototype, { this.workingDivId = this._createDivId(); domElem.attr('id', this.workingDivId); - this.maxNumRowsToHandleEvents = 255; this.loadedSubDataTable = {}; this.isEmpty = $('.pk-emptyDataTable', domElem).length > 0; this.bindEventsAndApplyStyle(domElem); @@ -215,7 +214,7 @@ $.extend(DataTable.prototype, UIControl.prototype, { // The ajax request contains the function callback to trigger if the request is successful or failed // displayLoading = false When we don't want to display the Loading... DIV .loadingPiwik // for example when the script add a Loading... it self and doesn't want to display the generic Loading - reloadAjaxDataTable: function (displayLoading, callbackSuccess) { + reloadAjaxDataTable: function (displayLoading, callbackSuccess, extraParams) { var self = this; if (typeof displayLoading == "undefined") { @@ -252,7 +251,7 @@ $.extend(DataTable.prototype, UIControl.prototype, { var params = {}; for (var key in self.param) { - if (typeof self.param[key] != "undefined" && self.param[key] != '') { + if (typeof self.param[key] != "undefined" && self.param[key] !== null && self.param[key] !== '') { if (key == 'filter_column' || key == 'filter_column_recursive' ) { // search in (metadata) `combinedLabel` when dimensions are shown separately in flattened tables // needs to be overwritten for each request as switching a searched table might return no results @@ -270,6 +269,9 @@ $.extend(DataTable.prototype, UIControl.prototype, { } ajaxRequest.addParams(params, 'get'); + if (extraParams) { + ajaxRequest.addParams(extraParams, 'post'); + } ajaxRequest.withTokenInUrl(); ajaxRequest.setCallback( @@ -410,6 +412,14 @@ $.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) { @@ -443,7 +453,7 @@ $.extend(DataTable.prototype, UIControl.prototype, { { var labelWidth = minLabelWidth; - var columnsInFirstRow = $('tr:nth-child(1) td:not(.label)', domElem); + var columnsInFirstRow = $('tbody tr:not(.parentComparisonRow):not(.comparePeriod):eq(0) td:not(.label)', domElem); var widthOfAllColumns = 0; columnsInFirstRow.each(function (index, column) { @@ -465,7 +475,8 @@ $.extend(DataTable.prototype, UIControl.prototype, { if (labelWidth > maxLabelWidth && !self.isWidgetized() && innerWidth !== domElem.width() - && !self.isDashboard()) { + && !self.isDashboard() + ) { labelWidth = maxLabelWidth; // prevent for instance table in Actions-Pages is not too wide } @@ -482,7 +493,6 @@ $.extend(DataTable.prototype, UIControl.prototype, { } var minWidthBody = $('tbody tr:nth-child(1) td.label', domElem).css('minWidth'); - if (minWidthBody) { minWidthBody = parseInt(minWidthBody, 10); if (minWidthBody && minWidthBody > minWidth) { @@ -528,8 +538,6 @@ $.extend(DataTable.prototype, UIControl.prototype, { return labelWidth; } - setMaxTableWidthIfNeeded(domElem, 1200); - var isTableVisualization = this.jsViewDataTable && typeof this.jsViewDataTable === 'string' && typeof this.jsViewDataTable.indexOf === 'function' @@ -560,6 +568,8 @@ $.extend(DataTable.prototype, UIControl.prototype, { self.overflowContentIfNeeded(domElem); } + setMaxTableWidthIfNeeded(domElem, 1200); + if (!self.windowResizeTableAttached) { self.windowResizeTableAttached = true; @@ -1451,36 +1461,16 @@ $.extend(DataTable.prototype, UIControl.prototype, { //Apply some miscelleaneous style to the DataTable applyCosmetics: function (domElem) { - var self = this; - - // Add some styles on the cells even/odd - // label (first column of a data row) or not - $("th:first-child", domElem).addClass('label'); - $("td:first-child", domElem).addClass('label'); - - var metadata = this.getReportMetadata(); - - if (self.param.flat == "1" && self.param.show_dimensions == "1" && metadata.dimensions && Object.keys(metadata.dimensions).length > 1) { - for (var i = 1; i < Object.keys(metadata.dimensions).length; i++) { - $("th:nth-child("+(i+1)+")", domElem).addClass('label'); - $("td:nth-child("+(i+1)+")", domElem).addClass('label'); - } - } - - $("tr td", domElem).addClass('column'); + // empty }, handleColumnHighlighting: function (domElem) { - if (!this.canHandleRowEvents(domElem)) { - return; - } - var maxWidth = {}; var currentNthChild = null; var self = this; - // higlight all columns on hover - $('td', domElem).hover(function() { + // give all values consistent width + $('td', domElem).each(function () { var $this = $(this); if ($this.hasClass('label')) { return; @@ -1492,16 +1482,29 @@ $.extend(DataTable.prototype, UIControl.prototype, { if (!maxWidth[nthChild]) { maxWidth[nthChild] = 0; - rows.find("td:nth-child(" + (nthChild) + ").column .value").each(function (index, element) { + rows.find("td:nth-child(" + (nthChild) + ").column .value").add('> thead th:not(.label) .thDIV', table).each(function (index, element) { var width = $(element).width(); if (width > maxWidth[nthChild]) { maxWidth[nthChild] = width; } }); rows.find("td:nth-child(" + (nthChild) + ").column .value").each(function (index, element) { - $(element).css({width: maxWidth[nthChild], display: 'inline-block'}); + $(element).closest('td').css({width: maxWidth[nthChild]}); }); } + }); + + // higlight all columns on hover + $(domElem).on('mouseenter', 'td', function (e) { + e.stopPropagation(); + var $this = $(e.target); + if ($this.hasClass('label')) { + return; + } + + var table = $this.closest('table'); + var nthChild = $this.parent('tr').children().index($(e.target)) + 1; + var rows = $('> tbody > tr', table); if (currentNthChild === nthChild) { return; @@ -1511,8 +1514,10 @@ $.extend(DataTable.prototype, UIControl.prototype, { rows.children("td:nth-child(" + (nthChild) + ")").addClass('highlight'); self.repositionRowActions($this.parent('tr')); - }, function(event) { - var $this = $(this); + }); + + $(domElem).on('mouseleave', 'td', function(event) { + var $this = $(event.target); var table = $this.closest('table'); var $parentTr = $this.parent('tr'); var tr = $parentTr.children(); @@ -1531,6 +1536,21 @@ $.extend(DataTable.prototype, UIControl.prototype, { }); }, + getComparisonIdSubtables: function ($row) { + if ($row.is('.parentComparisonRow')) { + var comparisonRows = $row.nextUntil('.parentComparisonRow').filter('.comparisonRow'); + + var comparisonIdSubtables = {}; + comparisonRows.each(function () { + var comparisonSeriesIndex = +$(this).data('comparison-series'); + comparisonIdSubtables[comparisonSeriesIndex] = $(this).data('idsubtable'); + }); + + return JSON.stringify(comparisonIdSubtables); + } + return undefined; + }, + //behaviour for 'nested DataTable' (DataTable loaded on a click on a row) handleSubDataTable: function (domElem) { var self = this; @@ -1544,12 +1564,17 @@ $.extend(DataTable.prototype, UIControl.prototype, { // if the subDataTable is not already loaded if (typeof self.loadedSubDataTable[divIdToReplaceWithSubTable] == "undefined") { - var numberOfColumns = $(this).children().length; + var numberOfColumns = $(this).closest('table').find('thead tr').first().children().length; + + var $insertAfter = $(this).nextUntil(':not(.comparePeriod):not(.comparisonRow)').last(); + if (!$insertAfter.length) { + $insertAfter = $(this); + } // at the end of the query it will replace the ID matching the new HTML table #ID // we need to create this ID first - $(this).after( - '<tr>' + + var newRow = $insertAfter.after( + '<tr class="subDataTableContainer">' + '<td colspan="' + numberOfColumns + '" class="cellSubDataTable">' + '<div id="' + divIdToReplaceWithSubTable + '">' + '<span class="loadingPiwik" style="display:inline"><img src="plugins/Morpheus/images/loading-blue.gif" />' + _pk_translate('General_Loading') + '</span>' + @@ -1558,6 +1583,8 @@ $.extend(DataTable.prototype, UIControl.prototype, { '</tr>' ); + piwikHelper.lazyScrollTo(newRow); + var savedActionVariable = self.param.action; // reset all the filters from the Parent table @@ -1570,9 +1597,12 @@ $.extend(DataTable.prototype, UIControl.prototype, { delete self.param.totalRows; + var extraParams = {}; + extraParams.comparisonIdSubtables = self.getComparisonIdSubtables($(this)); + self.reloadAjaxDataTable(false, function(response) { self.dataTableLoaded(response, divIdToReplaceWithSubTable); - }); + }, extraParams); self.param.action = savedActionVariable; delete self.param.idSubtable; @@ -1580,14 +1610,15 @@ $.extend(DataTable.prototype, UIControl.prototype, { self.loadedSubDataTable[divIdToReplaceWithSubTable] = true; - $(this).next().toggle(); - // when "loading..." is displayed, hide actions // repositioning after loading is not easily possible $(this).find('div.dataTableRowActions').hide(); + } else { + var $toToggle = $(this).nextUntil('.subDataTableContainer').last(); + $toToggle = $toToggle.length ? $toToggle : $(this); + $toToggle.next().toggle(); } - $(this).next().toggle(); $(this).toggleClass('expanded'); self.repositionRowActions($(this)); } @@ -1644,10 +1675,6 @@ $.extend(DataTable.prototype, UIControl.prototype, { }); }, - canHandleRowEvents: function (domElem) { - return domElem.find('table > tbody > tr').length <= this.maxNumRowsToHandleEvents; - }, - handleRowActions: function (domElem) { this.doHandleRowActions(domElem.find('table > tbody > tr')); }, @@ -1663,6 +1690,15 @@ $.extend(DataTable.prototype, UIControl.prototype, { hide: false, tooltipClass: 'small' }); + domElem.find('span.ratio').tooltip({ + track: true, + content: function() { + var title = $(this).attr('title'); + return piwikHelper.escape(title.replace(/\n/g, '<br />')); + }, + show: {delay: 700, duration: 200}, + hide: false + }) }, handleRelatedReports: function (domElem) { @@ -1828,7 +1864,7 @@ $.extend(DataTable.prototype, UIControl.prototype, { listenEvent = 'click'; } - parent.on(listenEvent, 'tr', function () { + parent.on(listenEvent, 'tr:not(.subDataTableContainer)', function () { var tr = this; var $tr = $(tr); var td = $tr.find('td.label:last'); @@ -1840,7 +1876,11 @@ $.extend(DataTable.prototype, UIControl.prototype, { } // if there are row actions, make sure the first column is not too narrow - td.css('minWidth', '145px'); + td.css('minWidth', $tr.is('.comparisonRow') ? '117px' : '145px'); + + if ($(this).is('.parentComparisonRow,.comparePeriod').length) { + return; + } if (useTouchEvent && tr.actionsDom && tr.actionsDom.prop('rowActionsVisible')) { tr.actionsDom.prop('rowActionsVisible', false); |