Refs #4041, moved & renamed actionDataTable JavaScript class to file in the Actions plugin.

1 files changed, 315 insertions, 0 deletions

diff --git a/plugins/Actions/javascripts/actionsDataTable.js b/plugins/Actions/javascripts/actionsDataTable.js
new file mode 100644
index 0000000000..74fcb9d095
--- /dev/null
+++ b/plugins/Actions/javascripts/actionsDataTable.js
@@ -0,0 +1,315 @@
+/*!
+ * Piwik - Web Analytics
+ *
+ * @link http://piwik.org
+ * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
+ */
+
+ (function ($, require) {
+
+    var dataTable = window.dataTable,
+        dataTablePrototype = dataTable.prototype;
+
+    // helper function for actionDataTable
+    function getLevelFromClass(style) {
+        if (!style || typeof style == "undefined") return 0;
+
+        var currentLevel = 0;
+
+        var currentLevelIndex = style.indexOf('level');
+        if (currentLevelIndex >= 0) {
+            currentLevel = Number(style.substr(currentLevelIndex + 5, 1));
+        }
+        return currentLevel;
+    }
+
+    // helper function for actionDataTable
+    function setImageMinus(domElem) {
+        $('img.plusMinus', domElem).attr('src', 'plugins/Zeitgeist/images/minus.png');
+    }
+
+    // helper function for actionDataTable
+    function setImagePlus(domElem) {
+        $('img.plusMinus', domElem).attr('src', 'plugins/Zeitgeist/images/plus.png');
+    }
+
+    /**
+     * TODO
+     * 
+     * @constructor
+     */
+    window.ActionsDataTable = function () {
+        dataTable.call(this);
+
+        this.parentAttributeParent = '';
+        this.parentId = '';
+        this.disabledRowDom = {}; // to handle double click on '+' row
+    };
+
+    $.extend(window.ActionsDataTable.prototype, dataTablePrototype, {
+
+        //initialisation of the actionDataTable
+        init: function (workingDivId, domElem) {
+            if (typeof domElem == "undefined"
+                || domElem.length == 0) // needed for actions subtables where truncating was not working otherwise
+            {
+                domElem = $('#' + workingDivId);
+            }
+            this.workingDivId = workingDivId;
+            this.bindEventsAndApplyStyle(domElem);
+            this.initialized = true;
+
+            domElem.data('piwikDataTable', this);
+        },
+
+        //see dataTable::bindEventsAndApplyStyle
+        bindEventsAndApplyStyle: function (domElem, rows) {
+            var self = this;
+
+            self.cleanParams();
+            
+            if (!rows) {
+                rows = $('tr', domElem);
+            }
+
+            // we dont display the link on the row with subDataTable when we are already
+            // printing all the subTables (case of recursive search when the content is
+            // including recursively all the subtables
+            if (!self.param.filter_pattern_recursive) {
+                self.numberOfSubtables = rows.filter('.subDataTable').click(function () {
+                    self.onClickActionSubDataTable(this)
+                }).size();
+            }
+
+            self.applyCosmetics(domElem, rows);
+            self.handleRowActions(domElem, rows);
+            self.handleLimit(domElem);
+            self.handleAnnotationsButton(domElem);
+            self.handleExportBox(domElem);
+            self.handleSort(domElem);
+            self.handleOffsetInformation(domElem);
+            if (self.workingDivId != undefined) {
+                var dataTableLoadedProxy = function (response) {
+                    self.dataTableLoaded(response, self.workingDivId);
+                };
+
+                self.handleSearchBox(domElem, dataTableLoadedProxy);
+                self.handleConfigurationBox(domElem, dataTableLoadedProxy);
+            }
+
+            self.handleColumnDocumentation(domElem);
+            self.handleReportDocumentation(domElem);
+            self.handleRelatedReports(domElem);
+            self.handleTriggeredEvents(domElem);
+            self.handleCellTooltips(domElem);
+        },
+
+        //see dataTable::applyCosmetics
+        applyCosmetics: function (domElem, rows) {
+            var self = this;
+            var rowsWithSubtables = rows.filter('.subDataTable');
+
+            rowsWithSubtables.css('font-weight', 'bold');
+
+            $("th:first-child", domElem).addClass('label');
+            $('td span.label', domElem).each(function () { self.truncate($(this)); });
+            var imagePlusMinusWidth = 12;
+            var imagePlusMinusHeight = 12;
+            $('td:first-child', rowsWithSubtables)
+                .each(function () {
+                    $(this).prepend('<img width="' + imagePlusMinusWidth + '" height="' + imagePlusMinusHeight + '" class="plusMinus" src="" />');
+                    if (self.param.filter_pattern_recursive) {
+                        setImageMinus(this);
+                    }
+                    else {
+                        setImagePlus(this);
+                    }
+                });
+
+            var rootRow = rows.first().prev();
+            
+            // we look at the style of the row before the new rows to determine the rows'
+            // level
+            var level = rootRow.length ? getLevelFromClass(rootRow.attr('class')) + 1 : 0;
+            
+            rows.each(function () {
+                var currentStyle = $(this).attr('class') || '';
+
+                if (currentStyle.indexOf('level') == -1) {
+                    $(this).addClass('level' + level);
+                }
+
+                // we add an attribute parent that contains the ID of all the parent categories
+                // this ID is used when collapsing a parent row, it searches for all children rows
+                // which 'parent' attribute's value contains the collapsed row ID
+                $(this).prop('parent', function () {
+                    return self.parentAttributeParent + ' ' + self.parentId;
+                });
+
+                // Add some styles on the cells even/odd
+                // label (first column of a data row) or not
+                $("td:first-child:odd", this).addClass('label labeleven');
+                $("td:first-child:even", this).addClass('label labelodd');
+                $("tr:odd td", domElem).slice(1).addClass('column columnodd');
+                $("tr:even td", domElem).slice(1).addClass('column columneven');
+            });
+        },
+
+        handleRowActions: function (domElem, rows) {
+            this.doHandleRowActions(rows);
+        },
+
+        // Called when the user click on an actionDataTable row
+        onClickActionSubDataTable: function (domElem) {
+            var self = this;
+
+            // get the idSubTable
+            var idSubTable = $(domElem).attr('id');
+
+            var divIdToReplaceWithSubTable = 'subDataTable_' + idSubTable;
+
+            var NextStyle = $(domElem).next().attr('class');
+            var CurrentStyle = $(domElem).attr('class');
+
+            var currentRowLevel = getLevelFromClass(CurrentStyle);
+            var nextRowLevel = getLevelFromClass(NextStyle);
+
+            // if the row has not been clicked
+            // which is the same as saying that the next row level is equal or less than the current row
+            // because when we click a row the level of the next rows is higher (level2 row gives level3 rows)
+            if (currentRowLevel >= nextRowLevel) {
+                //unbind click to avoid double click problem
+                $(domElem).off('click');
+                self.disabledRowDom = $(domElem);
+
+                var numberOfColumns = $(domElem).children().length;
+                $(domElem).after('\
+                <tr id="' + divIdToReplaceWithSubTable + '" class="cellSubDataTable">\
+                    <td colspan="' + numberOfColumns + '">\
+                            <span class="loadingPiwik" style="display:inline"><img src="plugins/Zeitgeist/images/loading-blue.gif" /> Loading...</span>\
+                    </td>\
+                </tr>\
+                ');
+                var savedActionVariable = self.param.action;
+
+                // reset all the filters from the Parent table
+                var filtersToRestore = self.resetAllFilters();
+
+                // Do not reset the sorting filters that must be applied to sub tables
+                this.param['filter_sort_column'] = filtersToRestore['filter_sort_column'];
+                this.param['filter_sort_order'] = filtersToRestore['filter_sort_order'];
+                this.param['enable_filter_excludelowpop'] = filtersToRestore['enable_filter_excludelowpop'];
+
+                self.param.idSubtable = idSubTable;
+                self.param.action = self.props.subtable_controller_action;
+
+                self.reloadAjaxDataTable(false, function (resp) {
+                    self.actionsSubDataTableLoaded(resp, idSubTable);
+                    self.repositionRowActions($(domElem));
+                });
+                self.param.action = savedActionVariable;
+
+                self.restoreAllFilters(filtersToRestore);
+
+                delete self.param.idSubtable;
+            }
+            // else we toggle all these rows
+            else {
+                var plusDetected = $('td img.plusMinus', domElem).attr('src').indexOf('plus') >= 0;
+
+                $(domElem).siblings().each(function () {
+                    var parents = $(this).prop('parent').split(' ');
+                    if (parents) {
+                        if (parents.indexOf(idSubTable) >= 0
+                            || parents.indexOf('subDataTable_' + idSubTable) >= 0) {
+                            if (plusDetected) {
+                                $(this).css('display', '');
+
+                                //unroll everything and display '-' sign
+                                //if the row is already opened
+                                var NextStyle = $(this).next().attr('class');
+                                var CurrentStyle = $(this).attr('class');
+
+                                var currentRowLevel = getLevelFromClass(CurrentStyle);
+                                var nextRowLevel = getLevelFromClass(NextStyle);
+
+                                if (currentRowLevel < nextRowLevel)
+                                    setImageMinus(this);
+                            }
+                            else {
+                                $(this).css('display', 'none');
+                            }
+                            self.repositionRowActions($(domElem));
+                        }
+                    }
+                });
+            }
+
+            // toggle the +/- image
+            var plusDetected = $('td img.plusMinus', domElem).attr('src').indexOf('plus') >= 0;
+            if (plusDetected) {
+                setImageMinus(domElem);
+            }
+            else {
+                setImagePlus(domElem);
+            }
+        },
+
+        //called when the full table actions is loaded
+        dataTableLoaded: function (response, workingDivId) {
+            var content = $(response);
+            var idToReplace = workingDivId || $(content).attr('id');
+
+            //reset parents id
+            self.parentAttributeParent = '';
+            self.parentId = '';
+
+            var dataTableSel = $('#' + idToReplace);
+
+            // keep the original list of related reports
+            var oldReportsElem = $('.datatableRelatedReports', dataTableSel);
+            $('.datatableRelatedReports', content).replaceWith(oldReportsElem);
+
+            dataTableSel.replaceWith(content);
+            piwikHelper.lazyScrollTo(content[0], 400);
+
+            return content;
+        },
+
+        // Called when a set of rows for a category of actions is loaded
+        actionsSubDataTableLoaded: function (response, idSubTable) {
+            var self = this;
+            var idToReplace = 'subDataTable_' + idSubTable;
+            var root = $('#' + self.workingDivId);
+
+            var response = $(response);
+            self.parentAttributeParent = $('tr#' + idToReplace).prev().prop('parent');
+            self.parentId = idToReplace;
+
+            $('tr#' + idToReplace, root).after(response).remove();
+
+            var missingColumns = (response.prev().find('td').size() - response.find('td').size());
+            for (var i = 0; i < missingColumns; i++) {
+                // if the subtable has fewer columns than the parent table, add some columns.
+                // this happens for example, when the parent table has performance metrics and the subtable doesn't.
+                response.append('<td>-</td>');
+            }
+
+            var re = /subDataTable_(\d+)/;
+            var ok = re.exec(self.parentId);
+            if (ok) {
+                self.parentId = ok[1];
+            }
+
+            // we execute the bindDataTableEvent function for the new DIV
+            self.bindEventsAndApplyStyle($('#' + self.workingDivId), response);
+
+            //bind back the click event (disabled to avoid double-click problem)
+            self.disabledRowDom.click(
+                function () {
+                    self.onClickActionSubDataTable(this)
+                });
+        }
+    });
+
+})(jQuery, require);
\ No newline at end of file