diff --git a/src/scrollHorizontallyToKeyWordInSearchResults.js b/src/scrollHorizontallyToKeyWordInSearchResults.js new file mode 100644 index 0000000..bdb8834 --- /dev/null +++ b/src/scrollHorizontallyToKeyWordInSearchResults.js @@ -0,0 +1,62 @@ +/** + * @file This file scrolls every search results that shows code in a < pre > element horizontally to the first < mark > element in the < pre > element. + * @author Kor Dwarshuis + * @version 1.0.0 + * @since 2023-08-09 + */ + +function scrollToMarkElementInPre() { + // Find all
 elements on the page
+  const preElements = document.querySelectorAll('pre');
+
+  // For each 
 element
+  preElements.forEach(pre => {
+    // Find the first  element
+    const mark = pre.querySelector('mark');
+
+    if (mark) {
+      // Get the position of the  relative to its parent 
+      const startPosition = mark.getBoundingClientRect().left;
+      const parentStart = pre.getBoundingClientRect().left;
+
+      // Calculate the offset
+      const scrollOffset = startPosition - parentStart;
+
+      // Scroll the parent 
 horizontally
+      pre.scrollLeft = scrollOffset;
+    }
+
+  });
+}
+
+const scrollHorizontallyToKeyWordInSearchResults = () => {
+  // Select the node that you want to observe
+  const targetNode = document.getElementById('hits'); // Works, presumable because it's harcoded in the html
+  // const targetNode = document.querySelector('.ais-Hits-list');// Does not work
+
+  // Create an observer instance with a callback function
+  var observer = new MutationObserver(function (mutationsList) {
+    for (var mutation of mutationsList) {
+      if (mutation.type == 'childList') {
+        // console.log('Content of the target node has changed.');
+        scrollToMarkElementInPre();
+      }
+    }
+  });
+
+  // Configuration of the observer:
+  var config = {
+    childList: true,  // observe direct children addition/removal
+    attributes: false,  // don't observe attribute changes
+    characterData: true,  // don't observe text changes
+    subtree: true  // observe any descendant changes
+  };
+
+  // Start observing the target node with the configured parameters
+  observer.observe(targetNode, config);
+
+  // Later, you can stop observing
+  // observer.disconnect();
+};
+
+scrollHorizontallyToKeyWordInSearchResults();
\ No newline at end of file