X-Git-Url: http://source.bookstackapp.com/bookstack/blobdiff_plain/293be7093cd30bf2372b8df67b6fea888b0fbdd6..refs/pull/692/head:/resources/assets/js/pages/page-show.js diff --git a/resources/assets/js/pages/page-show.js b/resources/assets/js/pages/page-show.js index 3ddece1b8..2efaf66c6 100644 --- a/resources/assets/js/pages/page-show.js +++ b/resources/assets/js/pages/page-show.js @@ -1,16 +1,19 @@ -"use strict"; -// Configure ZeroClipboard -var zeroClipBoard = require('zeroclipboard'); -zeroClipBoard.config({ - swfPath: '/ZeroClipboard.swf' -}); +const Clipboard = require("clipboard"); +const Code = require('../libs/code'); -window.setupPageShow = module.exports = function (pageId) { +let setupPageShow = window.setupPageShow = function (pageId) { + + Code.highlight(); + + if (!pageId) return; // Set up pointer - var $pointer = $('#pointer').detach(); - var $pointerInner = $pointer.children('div.pointer').first(); - var isSelection = false; + 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', function (e) { @@ -18,34 +21,53 @@ window.setupPageShow = module.exports = function (pageId) { e.stopPropagation(); }); - // Set up copy-to-clipboard - new zeroClipBoard($pointer.find('button').first()[0]); + // Pointer mode toggle + $pointer.on('click', 'span.icon', event => { + let $icon = $(event.currentTarget); + pointerModeLink = !pointerModeLink; + $icon.html(pointerModeLink ? '' : ''); + updatePointerContent(); + }); + + // Set up clipboard + let clipboard = new Clipboard('#pointer button'); // Hide pointer when clicking away - $(document.body).find('*').on('click focus', function (e) { - if (!isSelection) { - $pointer.detach(); - } + $(document.body).find('*').on('click focus', event => { + if (!pointerShowing || isSelection) return; + let target = $(event.target); + if (target.is('.zmdi') || $(event.target).closest('#pointer').length === 1) return; + + $pointer.detach(); + pointerShowing = false; }); + function updatePointerContent() { + let inputText = pointerModeLink ? window.baseUrl(`/link/${pageId}#${pointerSectionId}`) : `{{@${pageId}#${pointerSectionId}}}`; + if (pointerModeLink && inputText.indexOf('http') !== 0) inputText = window.location.protocol + "//" + window.location.host + inputText; + + $pointer.find('input').val(inputText); + } + // Show pointer when selecting a single block of tagged content $('.page-content [id^="bkmrk"]').on('mouseup keyup', function (e) { e.stopPropagation(); - var selection = window.getSelection(); + let selection = window.getSelection(); if (selection.toString().length === 0) return; // Show pointer and set link - var $elem = $(this); - var link = window.location.protocol + "//" + window.location.host + '/link/' + pageId + '#' + $elem.attr('id'); - $pointer.find('input').val(link); - $pointer.find('button').first().attr('data-clipboard-text', link); + let $elem = $(this); + pointerSectionId = $elem.attr('id'); + updatePointerContent(); + $elem.before($pointer); $pointer.show(); + pointerShowing = true; // Set pointer to sit near mouse-up position - var pointerLeftOffset = (e.pageX - $elem.offset().left - ($pointerInner.width() / 2)); + let pointerLeftOffset = (e.pageX - $elem.offset().left - ($pointerInner.width() / 2)); if (pointerLeftOffset < 0) pointerLeftOffset = 0; - var pointerLeftOffsetPercent = (pointerLeftOffset / $elem.width()) * 100; + let pointerLeftOffsetPercent = (pointerLeftOffset / $elem.width()) * 100; $pointerInner.css('left', pointerLeftOffsetPercent + '%'); isSelection = true; @@ -56,10 +78,10 @@ window.setupPageShow = module.exports = function (pageId) { // Go to, and highlight if necessary, the specified text. function goToText(text) { - var idElem = $('.page-content #' + text).first(); - if (idElem.length !== 0) { - idElem.smoothScrollTo(); - idElem.css('background-color', 'rgba(244, 249, 54, 0.25)'); + 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(); } @@ -67,47 +89,125 @@ window.setupPageShow = module.exports = function (pageId) { // Check the hash on load if (window.location.hash) { - var text = window.location.hash.replace(/\%20/g, ' ').substr(1); + let text = window.location.hash.replace(/\%20/g, ' ').substr(1); goToText(text); } - // Make the book-tree sidebar stick in view on scroll - var $window = $(window); - var $bookTree = $(".book-tree"); + // Sidebar page nav click event + $('.sidebar-page-nav').on('click', 'a', event => { + goToText(event.target.getAttribute('href').substr(1)); + }); + + // Make the sidebar stick in view on scroll + let $window = $(window); + let $sidebar = $("#sidebar .scroll-body"); + let $bookTreeParent = $sidebar.parent(); + // Check the page is scrollable and the content is taller than the tree - var pageScrollable = ($(document).height() > $window.height()) && ($bookTree.height() < $('.page-content').height()); + let pageScrollable = ($(document).height() > $window.height()) && ($sidebar.height() < $('.page-content').height()); + // Get current tree's width and header height - var headerHeight = $("#header").height() + $(".toolbar").height(); - var isFixed = $window.scrollTop() > headerHeight; - var bookTreeWidth = $bookTree.width(); - // Function to fix the tree as a sidebar + let headerHeight = $("#header").height() + $(".toolbar").height(); + let isFixed = $window.scrollTop() > headerHeight; + + // Fix the tree as a sidebar function stickTree() { - $bookTree.width(bookTreeWidth + 48 + 15); - $bookTree.addClass("fixed"); + $sidebar.width($bookTreeParent.width() + 15); + $sidebar.addClass("fixed"); isFixed = true; } - // Function to un-fix the tree back into position + + // Un-fix the tree back into position function unstickTree() { - $bookTree.css('width', 'auto'); - $bookTree.removeClass("fixed"); + $sidebar.css('width', 'auto'); + $sidebar.removeClass("fixed"); isFixed = false; } + // Checks if the tree stickiness state should change function checkTreeStickiness(skipCheck) { - var shouldBeFixed = $window.scrollTop() > headerHeight; + 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.scroll(function() { - checkTreeStickiness(false); - }); + $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(); + } + }); + + + // Check if support is present for IntersectionObserver + if ('IntersectionObserver' in window && + 'IntersectionObserverEntry' in window && + 'intersectionRatio' in window.IntersectionObserverEntry.prototype) { + addPageHighlighting(); + } + + function addPageHighlighting() { + 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 i = 0; i !== headings.length; ++i) { + pageNavObserver.observe(headings[i]); + } + } + + function headingVisibilityChange(entries, observer) { + for (let i = 0; i < entries.length; i++) { + let currentEntry = entries[i]; + let isVisible = (currentEntry.intersectionRatio === 1); + toggleAnchorHighlighting(currentEntry.target.id, isVisible); + } + } + + function toggleAnchorHighlighting(elementId, shouldHighlight) { + let anchorsToHighlight = pageNav.querySelectorAll('a[href="#' + elementId + '"]'); + for (let i = 0; i < anchorsToHighlight.length; i++) { + // Change below to use classList.toggle when IE support is dropped. + if (shouldHighlight) { + anchorsToHighlight[i].classList.add('current-heading'); + } else { + anchorsToHighlight[i].classList.remove('current-heading'); + } + } + } + } }; + +module.exports = setupPageShow; \ No newline at end of file