1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120

document.addEventListener('DOMContentLoaded', (event) => {
    const contentElements = document.querySelectorAll('.article-content p, .article-content li, .article-content ul, .article-content h1, .article-content h2, .article-content h3, .article-content a');
    const originalTexts = [];
    let highlightedElements = [];
    let currentIndex = -1;

    // Store the original text of each content element
    contentElements.forEach((element, index) => {
        originalTexts[index] = element.innerHTML;
    });

    function findOnPageMobile() {
        let input = document.getElementById('searchInput').value.toLowerCase();
        console.log(`Search input: ${input}`);
        highlightedElements = [];
        currentIndex = -1;

        contentElements.forEach((element, index) => {
            let originalText = originalTexts[index];
            let text = originalText.toLowerCase();

            // Only highlight if input length is 3 or more characters
            if (input.length >= 3 && text.includes(input)) {
                let regex = new RegExp(`(${input})`, 'gi');
                let newText = originalText.replace(regex, (match, p1, offset, string) => {
                    // Check if the match is inside an img, svg, or href attribute
                    const beforeMatch = string.slice(0, offset);
                    const afterMatch = string.slice(offset + match.length);
                    if ((beforeMatch.includes('<img') && afterMatch.includes('>')) ||
                        (beforeMatch.includes('<svg') && afterMatch.includes('</svg>')) ||
                        (beforeMatch.includes('href="') && afterMatch.includes('"'))) {
                        return p1;
                    }
                    return `<span class="highlight">${p1}</span>`;
                });

                // Preserve the href attribute of <a> tags and wrap the inner text
                if (element.tagName.toLowerCase() === 'a') {
                    const href = element.getAttribute('href');
                    const linkText = element.innerHTML.replace(regex, `<span class="highlight">$1</span>`);
                    element.outerHTML = `<a class="link" href="${href}">${linkText}</a>`;
                } else {
                    element.innerHTML = newText;
                }

                // Collect highlighted elements
                element.querySelectorAll('.highlight').forEach(highlight => {
                    highlightedElements.push(highlight);
                });
            } else {
                element.innerHTML = originalText;
            }
        });

        // Show scroll buttons if there are highlights and input is not empty
        const scrollButtons = document.getElementById('scrollButtons');
        scrollButtons.style.display = (highlightedElements.length > 0 && input.length > 0) ? 'flex' : 'none';
    }

    document.getElementById('searchInput').onkeyup = findOnPageMobile;

    // Initially hide the scroll buttons
    document.getElementById('scrollButtons').style.display = 'none';

    // Scroll functions
    document.getElementById('scrollUp').onclick = () => {
        if (highlightedElements.length > 0) {
            do {
                currentIndex = (currentIndex - 1 + highlightedElements.length) % highlightedElements.length;
                console.log(`Scrolling up to element ${currentIndex}`);
            } while (!scrollToHighlight(highlightedElements[currentIndex]));
        }
    };

    document.getElementById('scrollDown').onclick = () => {
        if (highlightedElements.length > 0) {
            do {
                currentIndex = (currentIndex + 1) % highlightedElements.length;
                console.log(`Scrolling down to element ${currentIndex}`);
            } while (!scrollToHighlight(highlightedElements[currentIndex]));
        }
    };

    function scrollToHighlight(element) {
        const rect = element.getBoundingClientRect();
        const offset = window.innerHeight / 3; // Upper third of the screen

        // Check if the element's rect values are valid
        if (rect.top === 0 && rect.bottom === 0 && rect.left === 0 && rect.right === 0) {
            console.log(`Skipping element with invalid rect: ${element.innerHTML}`);
            return false;
        }

        const scrollPosition = window.scrollY + rect.top - offset;
        console.log(`Element rect: ${JSON.stringify(rect)}`);
        console.log(`Window scrollY: ${window.scrollY}`);
        console.log(`Calculated scroll position: ${scrollPosition} for element: ${element.innerHTML}`);
        
        window.scrollTo({
            top: scrollPosition,
            behavior: 'smooth'
        });
        return true;
    }
    
    // Hide scroll buttons when clicking outside the search box and buttons
    document.addEventListener('click', (event) => {
        const searchInput = document.getElementById('searchInput');
        const scrollButtons = document.getElementById('scrollButtons');

        if (!searchInput.contains(event.target) && !scrollButtons.contains(event.target)) {
            scrollButtons.style.display = 'none';
        }
    });

    // Show scroll buttons when clicking back onto the search box
    document.getElementById('searchInput').onfocus = () => {
        document.getElementById('scrollButtons').style.display = 'flex';
    };
});