Adding JavaScript to handle highlighting single table

2 files changed, 77 insertions, 1 deletions

diff --git a/sklady/tdd.js b/sklady/tdd.js
new file mode 100644
index 0000000..bc75356
--- /dev/null
+++ b/sklady/tdd.js
@@ -0,0 +1,74 @@
+var TDD = {
+
+    rowSelector: 'body > table > tbody > tr',
+    rowHeaderClass: 'tdd-header',
+
+    findTable: function(element) {
+        var row = element.closest(TDD.rowSelector);
+        var headerRow = row;
+        while (headerRow.length && !headerRow.hasClass(TDD.rowHeaderClass)) {
+            headerRow = headerRow.prev(TDD.rowSelector);
+        }
+        var rows = [];
+        if (headerRow) {
+            rows.push(headerRow[0]);
+            headerRow = headerRow.next(TDD.rowSelector);
+            while (headerRow.length && !headerRow.hasClass(TDD.rowHeaderClass)) {
+                rows.push(headerRow[0]);
+                headerRow = headerRow.next(TDD.rowSelector);
+            }
+        }
+        return $(rows);
+    },
+
+    highlightTable: function(elem) {
+        TDD.findTable(elem).addClass('specified');
+    },
+
+    hoverTable: function(ev) {
+        TDD.findTable($(ev.currentTarget)).addClass('hovered');
+    },
+
+    unhoverTable: function(ev) {
+        TDD.findTable($(ev.currentTarget)).removeClass('hovered');
+    },
+
+    switchTable: function(ev) {
+        var header = TDD.findTable($(ev.currentTarget)).find('h4[id]');
+        location.hash = header.attr('id');
+        ev.stopPropagation();
+    },
+
+    detectReferer: function() {
+        var regex = document.referrer.match(/\d+t(\d+)-\d+\.htm/);
+        if (regex) {
+            return regex[1];
+        }
+        return undefined;
+    },
+
+    bindEvents: function() {
+        $('tr').hover(TDD.hoverTable, TDD.unhoverTable);
+        $('tr').click(TDD.switchTable);
+        $(window).on('hashchange', function() {
+            var table = $(location.hash);
+            if (table.length) {
+                $('.specified').removeClass('specified');
+                TDD.highlightTable(table);
+            } else {
+                var tableNo = TDD.detectReferer();
+                if (tableNo) {
+                    location.hash = '#table-' + tableNo;
+                } else {
+                    $('h4[id]').each(function() { TDD.highlightTable($(this)); });
+                }
+            }
+        });
+    }
+
+};
+
+$(document).ready(function() {
+    TDD.bindEvents();
+    $(window).trigger('hashchange');
+});
diff --git a/tdd-bootstrap.php b/tdd-bootstrap.php
index 342ecd0..79320b6 100644
--- a/tdd-bootstrap.php
+++ b/tdd-bootstrap.php
@@ -66,7 +66,9 @@ class Protocol {
         }
 
         $head = $dom->find('/html/head', 0);
-        $head->innertext .= '<link rel="stylesheet" type="text/css" href="css/tdd.css" />';
+        $head->innertext .= '<link rel="stylesheet" type="text/css" href="css/tdd.css" />'
+            . '<script src="https://code.jquery.com/jquery-3.3.1.min.js" type="text/javascript"></script>'
+            . '<script src="sklady/tdd.js" type="text/javascript"></script>';
 
         // replacing meta http-equiv refresh with a javascript refresh to preserve hash in the result page
         $meta = $head->find('meta');