extended API: callbacks, controls, event replacement, etc

Author: nikitaeverywhere

example/index.html

@@ -92,7 +92,14 @@
                 //[ , namespace: "SAMPLES" ] // current namespace : default namespace
                 //[ , username: "USER" ] // user name : default user
                 //[ , password: "" ] // user password : default password
+            },
+            triggers: { //
+                // onDrillDown: function ({Object { level: {number}, mdx: {string} }}) {}
+                //, onDrillThrough: function ({Object { level: {number}, mdx: {string} }}) {}
+                //, back: function ({Object { level: {number} }}) {}
             }
+            //, hideButtons: true // hides "back" and "drillThrough" buttons
+            //, triggerEvent: "touchstart" // all "click" events will be replaced by this event
             //, caption: "My table" // if set, table basic caption will be replaced by this text
             //, DrillDownExpression: "<spec>" // @deprecated drillDown expression split by "^"
             //, showSummary: true // show summary by columns

package.json

@@ -1,7 +1,7 @@
 {
   "name": "LightPivotTable",
   "author": "ZitRo",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "description": "A lightweight pivot table for MDX2JSON source for InterSystems Cache",
   "main": "test/testServer.js",
   "directories": {

readme.md

@@ -34,15 +34,26 @@ Build the project, and then include <code>build/css/lightPivotTable.css</code> a
 Then use global object <i>LightPivotTable</i>:
 ```js
 var setup = { // Object that contain settings. Any setting may be missed.
-        container: document.getElementById("pivot"), // HTMLElement on DOM which will contain table.
-        dataSource: {
-            MDX2JSONSource: "http://localhost:57772/SAMPLES", // MDX2JSON source server address
-            basicMDX: "SELECT NON EMPTY [Product].[P1].[Product Category].Members ON 0, NON EMPTY [Outlet].[H1].[Region].Members ON 1 FROM [HoleFoods]" // basic MDX which are going to be rendered when widget loads
+        container: document.getElementById("pivot") // HTMLElement which will contain table.
+        , dataSource: {
+            MDX2JSONSource: "http://localhost:57772/SAMPLES", // MDX2JSON server address
+            basicMDX: typeof req === "object" ? req.basicMDX : req
+            [ , namespace: "SAMPLES" ] // current namespace : default namespace
+            [ , username: "USER" ] // user name : default user
+            [ , password: "" ] // user password : default password
         }
-        , caption: "My table" // if set, table basic caption will be replaced by this text
-        , showSummary: true // show summary by columns
-        , formatNumbers: "#,###.##" // number formatting mask // @deprecated
-        , drillDownTarget: "dashboard name.dashboard" // custom drilldown target, DeepSee only.
+        [ , triggers: { // provide your functions here to handle certain events
+             onDrillDown: function ({Object { level: {number}, mdx: {string} }}) {}
+            , onDrillThrough: function ({Object { level: {number}, mdx: {string} }}) {}
+            , back: function ({Object { level: {number} }}) {}
+        } ]
+        [ , hideButtons: true // hides "back" and "drillThrough" buttons ]
+        [ , triggerEvent: "touchstart" // all "click" events will be replaced by this event ]
+        [ , caption: "My table" // if set, table basic caption will be replaced by this text ]
+        [ , DrillDownExpression: "<spec>" // @deprecated drillDown expression split by "^" ]
+        [ , showSummary: true // show summary by columns ]
+        [ , formatNumbers: "#,###.##" // @deprecated ]
+        [ , drillDownTarget: "<dashboard name>" // deepSee only - dashboard to open ]
     },
     lp = new LightPivotTable(setup);
 

source/js/LightPivotTable.js

@@ -9,12 +9,19 @@ var LightPivotTable = function (configuration) {
     var _ = this;
 
     if (typeof configuration !== "object") configuration = {};
+    this.normalizeConfiguration(configuration);
 
     this._dataSourcesStack = [];
 
     this.DRILL_LEVEL = -1;
     this.CONFIG = configuration;
 
+    /**
+     * @see this.init
+     * @type {object}
+     */
+    this.CONTROLS = {};
+
     this.mdxParser = new MDXParser();
     this.pivotView = new PivotView(this, configuration.container);
     this.dataSource = this.pushDataSource(configuration.dataSource);
@@ -151,6 +158,12 @@ LightPivotTable.prototype.tryDrillDown = function (filter) {
             _.pivotView.pushTable();
             _.dataController.pushData();
             _.dataController.setData(data);
+            if (typeof _.CONFIG.triggers["drillDown"] === "function") {
+                _.CONFIG.triggers["drillDown"].call(_, {
+                    level: _.DRILL_LEVEL,
+                    mdx: ds.basicMDX
+                });
+            }
         } else {
             _.popDataSource();
         }
@@ -185,6 +198,12 @@ LightPivotTable.prototype.tryDrillThrough = function (filters) {
             _.pivotView.pushTable();
             _.dataController.pushData();
             _.dataController.setData(data);
+            if (typeof _.CONFIG.triggers["drillThrough"] === "function") {
+                _.CONFIG.triggers["drillThrough"].call(_, {
+                    level: _.DRILL_LEVEL,
+                    mdx: ds.basicMDX
+                });
+            }
         } else {
             _.popDataSource();
         }
@@ -209,8 +228,28 @@ LightPivotTable.prototype.getPivotProperty = function (path) {
     return obj;
 };
 
+/**
+ * Fill up to normal config structure to avoid additional checks and issues.
+ *
+ * @param config
+ */
+LightPivotTable.prototype.normalizeConfiguration = function (config) {
+    if (!config["triggers"]) config.triggers = {};
+    if (!config["dataSource"]) config.dataSource = {};
+};
+
 LightPivotTable.prototype.init = function () {
 
+    var _ = this;
+
+    this.CONTROLS.drillThrough = function () {
+        _.pivotView._drillThroughClickHandler.call(_.pivotView);
+    };
+
+    this.CONTROLS.back = function () {
+        _.pivotView._backClickHandler.call(_.pivotView);
+    };
+
     this.refresh();
 
 };

source/js/PivotView.js

@@ -144,20 +144,30 @@ PivotView.prototype._rowClickHandler = function (rowIndex, cellData) {
 
 PivotView.prototype._backClickHandler = function (event) {
 
-    event.cancelBubble = true;
-    event.stopPropagation();
+    if (event) {
+        event.cancelBubble = true;
+        event.stopPropagation();
+    }
 
     this.popTable();
     this.controller.popDataSource();
 
+    if (typeof this.controller.CONFIG.triggers["back"] === "function") {
+        this.controller.CONFIG.triggers["back"].call(this.controller, {
+            level: this.controller.DRILL_LEVEL
+        });
+    }
+
 };
 
 PivotView.prototype._drillThroughClickHandler = function (event) {
 
     this.controller.tryDrillThrough();
 
-    event.cancelBubble = true;
-    event.stopPropagation();
+    if (event) {
+        event.cancelBubble = true;
+        event.stopPropagation();
+    }
 
 };
 
@@ -376,6 +386,8 @@ PivotView.prototype.formatNumber = function (mask, value) {
  */
 PivotView.prototype.renderRawData = function (data) {
 
+    var clickEvent = this.controller.CONFIG["triggerEvent"] || "click";
+
     if (!data || !data[0] || !data[0][0]) {
         this.elements.tableContainer.innerHTML = "<h1>Unable to render data</h1><p>"
             + JSON.stringify(data) + "</p>";
@@ -459,10 +471,11 @@ PivotView.prototype.renderRawData = function (data) {
                         return i - y;
                     })(data[y][x].group);
 
-                    if (x === 0 && y === 0 && _.tablesStack.length > 1) {
+                    if (!_.controller.CONFIG["hideButtons"] && x === 0 && y === 0
+                            && _.tablesStack.length > 1) {
                         var elt = document.createElement("div");
                         elt.className = "backButton";
-                        addTrigger(elt, "click", function (event) {
+                        addTrigger(elt, clickEvent, function (event) {
                             _._backClickHandler.call(_, event);
                         });
                         td.insertBefore(elt, td.childNodes[td.childNodes.length - 1] || null);
@@ -477,7 +490,7 @@ PivotView.prototype.renderRawData = function (data) {
             if (td && x >= headLeftColsNum && y === headColsNum - 1) {
                 // clickable cells (sort option)
                 (function (x) {
-                    addTrigger(td, "click", function () {
+                    addTrigger(td, clickEvent, function () {
                         var colNum = x - headLeftColsNum;
                         _._columnClickHandler.call(_, colNum);
                     });
@@ -487,7 +500,7 @@ PivotView.prototype.renderRawData = function (data) {
             // add _rowClickHandler to th's last column
             if (td && x === headLeftColsNum - 1 && y >= headRowsNum) {
                 (function (y, x) {
-                    addTrigger(td, "click", function () {
+                    addTrigger(td, clickEvent, function () {
                         var rowNum = y - headRowsNum;
                         _._rowClickHandler.call(_, rowNum, data[y][x]);
                     });
@@ -522,18 +535,19 @@ PivotView.prototype.renderRawData = function (data) {
                         span.textContent = data[y][x].value;
                     }
 
-                    (function (x, y) {addTrigger(td, "click", function () {
+                    (function (x, y) {addTrigger(td, clickEvent, function () {
                         _._cellClickHandler.call(_, x, y);
                     })})(x, y);
                 } else {
                     span.textContent = data[y][x].value;
                 }
             }
 
-            if (x === 0 && y === 0 && _.controller.dataController.getData().info.action === "MDX") {
+            if (!_.controller.CONFIG["hideButtons"] && x === 0 && y === 0
+                    && _.controller.dataController.getData().info.action === "MDX") {
                 var element = document.createElement("div");
                 element.className = "drillDownIcon";
-                addTrigger(element, "click", function (event) {
+                addTrigger(element, clickEvent, function (event) {
                     _._drillThroughClickHandler.call(_, event);
                 });
                 td.insertBefore(element, td.childNodes[td.childNodes.length - 1] || null);