Listing data view enhance

Author: nikitaeverywhere

package.json

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

source/css/LightPivot.css

@@ -276,11 +276,19 @@
 
 /* lpt-dataWait */
 .lpt .lpt-hoverMessage {
+    position: absolute;
+    box-sizing: border-box;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+    padding: .5em;
     z-index: 999;
     opacity: 0;
     font-size: xx-large;
     font-family: serif;
-    background: rgba(255, 255, 255, 0.85);
+    background: rgba(255, 255, 255, 0.95);
     white-space: normal;
     line-height: 1;
     -webkit-transition: opacity 1s ease;
@@ -538,4 +546,15 @@
     border-top: none;
     border-bottom: none;
     outline: none;
+}
+
+.lpt-messageHead {
+    font-size: 14pt;
+    font-weight: 900;
+    text-decoration: underline;
+    margin-bottom: .2em;
+}
+
+.lpt-messageBody {
+    font-size: 12pt;
 }

source/js/DataController.js

@@ -106,10 +106,9 @@ DataController.prototype.setData = function (data) {
     this.postDataProcessing(data);
 
     if (data.info.mdxType === "drillthrough") {
-        this.setDrillThroughHandler(function (params) {
-            _.controller.pivotView.displayMessage(params["cellData"]["value"] || "", true);
-            return false;
-        });
+        this.setDrillThroughHandler(
+            this.controller.pivotView.listingClickHandler.bind(this.controller.pivotView)
+        );
     }
     //console.log(data);
     this._trigger();

source/js/PivotView.js

@@ -433,7 +433,7 @@ PivotView.prototype._getSelectedText = function () {
  * @param {event} event
  * @param {function} [drillThroughHandler]
  */
-PivotView.prototype._cellClickHandler = function (cell, x, y, event, drillThroughHandler) {
+PivotView.prototype._cellClickHandler = function (cell, x, y, event, drillThroughHandler, data) {
 
     var data = this.controller.dataController.getData(),
         f = [], f1, f2, callbackRes = true, result,
@@ -473,21 +473,73 @@ PivotView.prototype._cellClickHandler = function (cell, x, y, event, drillThroug
             callbackRes = this.controller.CONFIG.triggers["cellDrillThrough"]({
                 event: event,
                 filters: f,
-                cellData: cell
-            });
+                cellData: cell,
+                x: x,
+                y: y
+            }, data);
         }
         if (typeof drillThroughHandler === "function") {
             callbackRes = !(!(false !== drillThroughHandler({
                 event: event,
                 filters: f,
-                cellData: cell
-            })) || !(callbackRes !== false));
+                cellData: cell,
+                x: x,
+                y: y
+            }, data)) || !(callbackRes !== false));
         }
         if (callbackRes !== false) this.controller.tryDrillThrough(f);
     }
 
 };
 
+PivotView.prototype.listingClickHandler = function (params, data) {
+
+    if (data.info.leftHeaderColumnsNumber !== 0) {
+        console.warn("Listing handler called not for a listing!");
+        return;
+    }
+
+    var self = this,
+        el = function (e) { return document.createElement(e); },
+        d1 = document.createElement("div"),
+        headers = data.rawData[0].map(function (v) {
+            return v.value + (v.source && v.source.title ? "(" + v.source.title + ")" : "");
+        }),
+        values = data.rawData[params.y].map(function (v) { return v.value; });
+
+    d1.className = "lpt-hoverMessage";
+    d1.style.fontSize = "12pt";
+    d1.style.opacity = 0;
+
+    var h, val, hr;
+    for (var i = 0; i < headers.length; i++) {
+        h = el("div"); val = el("div"); hr = el("hr");
+        h.className = "lpt-messageHead";
+        h.textContent = headers[i];
+        val.className = "lpt-messageBody";
+        if (values[i] !== "")
+            val.textContent = values[i];
+        else
+            val.innerHTML = "&nbsp;";
+        d1.appendChild(h);
+        d1.appendChild(val);
+        d1.appendChild(hr);
+    }
+
+    this.elements.base.appendChild(d1);
+
+    setTimeout(function () {
+        if (d1) d1.style.opacity = 1;
+    }, 1);
+    d1.addEventListener(this.controller.CONFIG["triggerEvent"] || "click", function () {
+        if (self._getSelectedText()) return;
+        self.removeMessage();
+    });
+
+    return false;
+
+};
+
 /**
  * Display hovering message.
  *
@@ -1295,7 +1347,7 @@ PivotView.prototype.renderRawData = function (data) {
             td.addEventListener(CLICK_EVENT, (function (x, y, cell) {
                 return function (event) {
                     _._cellClickHandler.call(
-                        _, cell, x, y, event, info.drillThroughHandler
+                        _, cell, x, y, event, info.drillThroughHandler, data
                     );
                 };
             })(x, y, rawData[y][x]));