BookStack/resources/assets/js/components/page-display.js

import Clipboard from "clipboard/dist/clipboard.min";
import Code from "../services/code";

class PageDisplay {

    constructor(elem) {
        this.elem = elem;
        this.pageId = elem.getAttribute('page-display');

        Code.highlight();
        this.setupPointer();
        this.setupStickySidebar();
        this.setupNavHighlighting();

        // Check the hash on load
        if (window.location.hash) {
            let text = window.location.hash.replace(/\%20/g, ' ').substr(1);
            this.goToText(text);
        }

        // Sidebar page nav click event
        $('.sidebar-page-nav').on('click', 'a', event => {
            this.goToText(event.target.getAttribute('href').substr(1));
        });
    }

    goToText(text) {
        let idElem = document.getElementById(text);
        $('.page-content [data-highlighted]').attr('data-highlighted', '').css('background-color', '');
        if (idElem !== null) {
            window.scrollAndHighlight(idElem);
        } else {
            $('.page-content').find(':contains("' + text + '")').smoothScrollTo();
        }
    }

    setupPointer() {
        if (document.getElementById('pointer') === null) return;
        // Set up pointer
        let $pointer = $('#pointer').detach();
        let pointerShowing = false;
        let $pointerInner = $pointer.children('div.pointer').first();
        let isSelection = false;
        let pointerModeLink = true;
        let pointerSectionId = '';

        // Select all contents on input click
        $pointer.on('click', 'input', event => {
            $(this).select();
            event.stopPropagation();
        });

        $pointer.on('click focus', event => {
            event.stopPropagation();
        });

        // Pointer mode toggle
        $pointer.on('click', 'span.icon', event => {
            event.stopPropagation();
            let $icon = $(event.currentTarget);
            pointerModeLink = !pointerModeLink;
            $icon.find('[data-icon="include"]').toggle(!pointerModeLink);
            $icon.find('[data-icon="link"]').toggle(pointerModeLink);
            updatePointerContent();
        });

        // Set up clipboard
        let clipboard = new Clipboard($pointer[0].querySelector('button'));

        // Hide pointer when clicking away
        $(document.body).find('*').on('click focus', event => {
            if (!pointerShowing || isSelection) return;
            $pointer.detach();
            pointerShowing = false;
        });

        let updatePointerContent = ($elem) => {
            let inputText = pointerModeLink ? window.baseUrl(`/link/${this.pageId}#${pointerSectionId}`) : `{{@${this.pageId}#${pointerSectionId}}}`;
            if (pointerModeLink && inputText.indexOf('http') !== 0) inputText = window.location.protocol + "//" + window.location.host + inputText;

            $pointer.find('input').val(inputText);

            // update anchor if present
            const $editAnchor = $pointer.find('#pointer-edit');
            if ($editAnchor.length !== 0 && $elem) {
                const editHref = $editAnchor.data('editHref');
                const element = $elem[0];
                const elementId = element.id;

                // get the first 50 characters.
                let queryContent = element.textContent && element.textContent.substring(0, 50);
                $editAnchor[0].href = `${editHref}?content-id=${elementId}&content-text=${encodeURIComponent(queryContent)}`;
            }
        };

        // Show pointer when selecting a single block of tagged content
        $('.page-content [id^="bkmrk"]').on('mouseup keyup', function (e) {
            e.stopPropagation();
            let selection = window.getSelection();
            if (selection.toString().length === 0) return;

            // Show pointer and set link
            let $elem = $(this);
            pointerSectionId = $elem.attr('id');
            updatePointerContent($elem);

            $elem.before($pointer);
            $pointer.show();
            pointerShowing = true;

            // Set pointer to sit near mouse-up position
            let pointerLeftOffset = (e.pageX - $elem.offset().left - ($pointerInner.width() / 2));
            if (pointerLeftOffset < 0) pointerLeftOffset = 0;
            let pointerLeftOffsetPercent = (pointerLeftOffset / $elem.width()) * 100;
            $pointerInner.css('left', pointerLeftOffsetPercent + '%');

            isSelection = true;
            setTimeout(() => {
                isSelection = false;
            }, 100);
        });
    }

    setupStickySidebar() {
        // Make the sidebar stick in view on scroll
        const $window = $(window);
        const $sidebar = $("#sidebar .scroll-body");
        const $sidebarContainer = $sidebar.parent();
        const sidebarHeight = $sidebar.height() + 32;

        // Check the page is scrollable and the content is taller than the tree
        const pageScrollable = ($(document).height() > ($window.height() + 40)) && (sidebarHeight < $('.page-content').height());

        // Get current tree's width and header height
        const headerHeight = $("#header").height() + $(".toolbar").height();
        let isFixed = $window.scrollTop() > headerHeight;

        // Fix the tree as a sidebar
        function stickTree() {
            $sidebar.width($sidebarContainer.width() + 15);
            $sidebar.addClass("fixed");
            isFixed = true;
        }

        // Un-fix the tree back into position
        function unstickTree() {
            $sidebar.css('width', 'auto');
            $sidebar.removeClass("fixed");
            isFixed = false;
        }

        // Checks if the tree stickiness state should change
        function checkTreeStickiness(skipCheck) {
            let shouldBeFixed = $window.scrollTop() > headerHeight;
            if (shouldBeFixed && (!isFixed || skipCheck)) {
                stickTree();
            } else if (!shouldBeFixed && (isFixed || skipCheck)) {
                unstickTree();
            }
        }
        // The event ran when the window scrolls
        function windowScrollEvent() {
            checkTreeStickiness(false);
        }

        // If the page is scrollable and the window is wide enough listen to scroll events
        // and evaluate tree stickiness.
        if (pageScrollable && $window.width() > 1000) {
            $window.on('scroll', windowScrollEvent);
            checkTreeStickiness(true);
        }

        // Handle window resizing and switch between desktop/mobile views
        $window.on('resize', event => {
            if (pageScrollable && $window.width() > 1000) {
                $window.on('scroll', windowScrollEvent);
                checkTreeStickiness(true);
            } else {
                $window.off('scroll', windowScrollEvent);
                unstickTree();
            }
        });
    }

    setupNavHighlighting() {
        // Check if support is present for IntersectionObserver
        if (!('IntersectionObserver' in window) ||
            !('IntersectionObserverEntry' in window) ||
            !('intersectionRatio' in window.IntersectionObserverEntry.prototype)) {
            return;
        }

        let pageNav = document.querySelector('.sidebar-page-nav');

        // fetch all the headings.
        let headings = document.querySelector('.page-content').querySelectorAll('h1, h2, h3, h4, h5, h6');
        // if headings are present, add observers.
        if (headings.length > 0 && pageNav !== null) {
            addNavObserver(headings);
        }

        function addNavObserver(headings) {
            // Setup the intersection observer.
            let intersectOpts = {
                rootMargin: '0px 0px 0px 0px',
                threshold: 1.0
            };
            let pageNavObserver = new IntersectionObserver(headingVisibilityChange, intersectOpts);

            // observe each heading
            for (let heading of headings) {
                pageNavObserver.observe(heading);
            }
        }

        function headingVisibilityChange(entries, observer) {
            for (let entry of entries) {
                let isVisible = (entry.intersectionRatio === 1);
                toggleAnchorHighlighting(entry.target.id, isVisible);
            }
        }

        function toggleAnchorHighlighting(elementId, shouldHighlight) {
            const anchorsToHighlight = pageNav.querySelectorAll('a[href="#' + elementId + '"]');
            for (let anchor of anchorsToHighlight) {
                anchor.closest('li').classList.toggle('current-heading', shouldHighlight);
            }
        }
    }
}

export default PageDisplay;