Highlight codeblocks on hover (#238)

adds support for "hover highlight" in code blocks.

themes/geekboot/assets/scss/_code-theme-base.scss

@@ -68,7 +68,6 @@
 
         // code line
         .cl {
-          background-color: var(--code-block-background-color);
           padding-left: 1rem;
         }
       }

themes/geekboot/data/assets.json

@@ -1,8 +1,8 @@
 {
   "main.js": {
-    "src": "js/main-82dca918.bundle.min.js"
+    "src": "js/main-4ff1a43b.bundle.min.js"
   },
-  "main-82dca918.bundle.min.js.map": {
-    "src": "js/main-82dca918.bundle.min.js.map"
+  "main-4ff1a43b.bundle.min.js.map": {
+    "src": "js/main-4ff1a43b.bundle.min.js.map"
   }
 }

utils/webpack/src/js/customClipboard.js

@@ -22,6 +22,7 @@ document.querySelectorAll('.highlight')
   // second parent is the .hightlight div
 const clipboard = new ClipboardJS('.btn-clipboard', {
   target: trigger => trigger.parentNode.parentNode,
+  text: trigger => getText(trigger.parentNode.parentNode)
   }
 )
 
@@ -49,7 +50,9 @@ clipboard.on('error', event => {
 // Defaults to copying all lines.
 function getText(highlightDiv){
   // Find the code lines inside the code table
-  var codeLines = highlightDiv.getElementsByClassName("line")
+  // ".line" contains the line number and text
+  // .cl is just the text
+  var codeLines = highlightDiv.getElementsByClassName("cl")
   var codeText = []
 
   for (var i = 0; i < codeLines.length; i++){

utils/webpack/src/js/globalScripts.js

@@ -12,4 +12,5 @@ import './bootstrap/src/tab';
 import './bootstrap/src/offcanvas';
 
 import './tabDeepAnchor.js';
-import './customClipboard.js';
+import './customClipboard.js';
+import './hoverHighlight.js';

utils/webpack/src/js/hoverHighlight.js

@@ -0,0 +1,31 @@
+export function getKeywords(){
+    var keywordList = document.getElementsByTagName("highlight-term")
+
+    for (let i = 0; i < keywordList.length; i++) {
+        build_eventlistener(keywordList[i].id, keywordList[i].dataset.label, keywordList[i].dataset.line)
+    }
+}
+
+
+export function build_eventlistener(command_id, code_box_label, code_line_number){
+
+    // the <mouseover> elment of the individual command calling the shortcode
+    var command = document.getElementById(command_id);
+
+    // the outer div for the fenced code block
+    var code_box = document.querySelector("div[label=" + code_box_label + "]");
+
+    // the element of the source code text we want
+    var code_line_text = code_box.getElementsByClassName("cl")[code_line_number - 1 ];
+
+    command.addEventListener('mouseover', function handleMouseOver() {
+        code_line_text.classList.toggle("hl");
+    });
+
+    command.addEventListener('mouseout', function handleMouseOut() {
+        code_line_text.classList.toggle("hl");
+    });
+
+}
+
+window.onload = getKeywords();