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 eachelement + 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 parenthorizontally + 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