Listing row selection now highlights the row

Author: nikitaeverywhere

package.json

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

source/css/LightPivot.css

@@ -51,12 +51,16 @@
     transition: left .5s ease;
 }
 
+.lpt input[type=checkbox] {
+    cursor: pointer;
+}
+
 .lpt .lpt-tableBlock tr:hover td {
-    box-shadow: inset 0 0 30px #FFF7D7;
+    box-shadow: inset 0 0 30px #fff5b9;
 }
 
 .lpt .lpt-tableBlock table td:hover {
-    box-shadow: inset 0 0 30px #FEA;
+    box-shadow: inset 0 0 30px #fff16c;
 }
 
 /* DeepSee theme */
@@ -427,6 +431,10 @@
     pointer-events: none;
 }
 
+.lpt-selectedRow td {
+    box-shadow: inset 0 0 30px #fff5b9;
+}
+
 .lpt-searchSelectOuter select {
     font-size: 13px;
     padding: 0 0 0 2px;

source/js/PivotView.js

@@ -1061,21 +1061,40 @@ PivotView.prototype.renderRawData = function (data) {
         var vertical = targetElement === LHTHead,
             rendered, separatelyGrouped, tr, th, div, checkbox;
 
+        function applySelect (element) { // checkbox element
+            var checked = element.checked;
+            while (element = element.parentNode) {
+                if (element.tagName === "TR") {
+                    element.classList[checked ? "add" : "remove"]("lpt-selectedRow");
+                    _.elements.tableContainer.querySelector(".lpt-tableBlock table")
+                        .rows[element.rowIndex]
+                        .classList[checked ? "add" : "remove"]("lpt-selectedRow");
+                    break;
+                }
+            }
+        }
+
         if (xFrom === xTo && LISTING_SELECT_ENABLED) { // listing
             for (y = yFrom; y < yTo; y++) {
                 tr = document.createElement("tr");
                 th = document.createElement("td");
                 checkbox = document.createElement("input");
                 checkbox.setAttribute("type", "checkbox");
                 checkbox.checked = !!_.selectedRows[y];
+                if (checkbox.checked) (function (checkbox) {
+                    setTimeout(function () { // highlight the rows after html generated
+                        applySelect(checkbox);
+                    }, 1);
+                })(checkbox);
                 th.setAttribute("style", "padding: 0 !important;");
                 checkbox.addEventListener("click", (function (y) { return function (e) {
                     var element = e.srcElement || e.target;
                     e.preventDefault();
                     e.cancelBubble = true;
-                    setTimeout(function () { // bad, but only working workaround for ISC DeepSee
+                    setTimeout(function () { // bad, but the only working workaround for ISC DeepSee
                         element.checked = !element.checked;
                         _.selectRow.call(_, element.checked, y);
+                        applySelect(element);
                     }, 1);
                 }})(y));
                 th.appendChild(checkbox);