add support for other panel to highlight

Author: fstachura

elixir/web.py

@@ -796,7 +796,6 @@ def generate_source_page(ctx: RequestContext, q: Query,
         'title_path': title_path,
         'path': path,
         'breadcrumb_urls': breadcrumb_urls,
-        'breadcrumb_links': breadcrumb_links,
         'diff_mode_available': True,
 
         **template_ctx,

static/script.js

@@ -113,13 +113,19 @@ function setupSidebarSwitch() {
   });
 }
 
-// Parse and validate line identifier in format L${number}
-function parseLineId(lineId) {
-  if (lineId[0] != "L") {
-    return;
+function getPrefix(lineId) {
+  if (lineId[0] == "L") {
+    return "L";
+  } else if (lineId.startsWith("OL")) {
+    return "OL";
+  } else {
+    return "";
   }
+}
 
-  let lineIdNum = parseInt(lineId.substring(1));
+// Parse and validate line identifier in format L${number}
+function parseLineId(lineId) {
+  const lineIdNum = parseInt(lineId.substring(getPrefix(lineId).length));
   console.assert(!isNaN(lineIdNum), "Invalid line id");
 
   let lineElement = document.getElementById(lineId);
@@ -151,16 +157,16 @@ function parseLineRangeAnchor(hashStr) {
     firstLine = lineTmp;
   }
 
-  return [firstLine, lastLine];
+  return [firstLine, lastLine, getPrefix(hash[0])];
 }
 
 // Highlights line number elements from firstLine to lastLine
-function highlightFromTo(firstLine, lastLine) {
-  const firstLineElement = document.getElementById(`L${ firstLine }`);
-  const lastLineElement = document.getElementById(`L${ lastLine }`);
+function highlightFromTo(firstLine, lastLine, prefix='L') {
+  const firstLineElement = document.getElementById(`${ prefix }${ firstLine }`);
+  const lastLineElement = document.getElementById(`${ prefix }${ lastLine }`);
 
-  const firstCodeLine = document.getElementById(`codeline-${ firstLine }`);
-  const lastCodeLine = document.getElementById(`codeline-${ lastLine }`);
+  const firstCodeLine = firstLineElement.parentNode;
+  const lastCodeLine = lastLineElement.parentNode;
 
   addClassToRangeOfElements(firstLineElement.parentNode, lastLineElement.parentNode, "line-highlight");
   addClassToRangeOfElements(firstCodeLine, lastCodeLine, "line-highlight");
@@ -192,20 +198,23 @@ function setupLineRangeHandlers() {
     return;
   }
 
-  let rangeStartLine, rangeEndLine;
+  let rangeStartLine, rangeEndLine, rangePrefix;
 
   const parseFromHash = () => {
     const highlightedRange = parseLineRangeAnchor(window.location.hash);
     // Set range start/end to elements from hash
     if (highlightedRange !== undefined) {
       rangeStartLine = highlightedRange[0];
       rangeEndLine = highlightedRange[1];
-      highlightFromTo(rangeStartLine, rangeEndLine);
+      rangePrefix = highlightedRange[2];
+      highlightFromTo(rangeStartLine, rangeEndLine, rangePrefix);
       const wrapper = document.querySelector('.wrapper');
-      const offsetTop = document.getElementById(`L${rangeStartLine}`).offsetTop;
+      const offsetTop = document.getElementById(`${rangePrefix}${rangeStartLine}`).offsetTop;
       wrapper.scrollTop = offsetTop < 100 ? 200 : offsetTop + 100;
     } else if (location.hash !== "" && location.hash[1] === "L") {
       rangeStartLine = parseLineId(location.hash.substring(1));
+    } else if (location.hash !== "" && location.hash.startsWith("OL")) {
+      rangeStartLine = parseLineId(location.hash.substring(2));
     }
   }
 
@@ -216,7 +225,6 @@ function setupLineRangeHandlers() {
 
   parseFromHash();
 
-  console.log(lxrcode);
   lxrcode.forEach(el => el.addEventListener("click", ev => {
     if (ev.ctrlKey || ev.metaKey) {
       return;
@@ -232,16 +240,17 @@ function setupLineRangeHandlers() {
 
     // Handler is set on the element that contains all line numbers, check if the
     // event is directed at an actual line number element
-    if (typeof(el.id) !== "string" || el.id[0] !== "L" || el.tagName !== "A") {
+    if (typeof(el.id) !== "string" || !(el.id[0] == "L" || el.id.startsWith("OL")) || el.tagName !== "A") {
       return;
     }
 
     clearRangeHighlight();
 
-    if (rangeStartLine === undefined || !ev.shiftKey) {
+    if (rangeStartLine === undefined || !ev.shiftKey || rangePrefix != getPrefix(el.id)) {
       rangeStartLine = parseLineId(el.id);
+      rangePrefix = getPrefix(el.id);
       rangeEndLine = undefined;
-      highlightFromTo(rangeStartLine, rangeStartLine);
+      highlightFromTo(rangeStartLine, rangeStartLine, rangePrefix);
       window.location.hash = el.id;
     } else if (ev.shiftKey) {
       if (rangeEndLine === undefined) {
@@ -277,8 +286,8 @@ function setupLineRangeHandlers() {
         }
       }
 
-      highlightFromTo(rangeStartLine, rangeEndLine);
-      window.location.hash = `L${rangeStartLine}-L${rangeEndLine}`;
+      highlightFromTo(rangeStartLine, rangeEndLine, rangePrefix);
+      window.location.hash = `${rangePrefix}${rangeStartLine}-${rangePrefix}${rangeEndLine}`;
     }
   }));
 }