-"use strict";
-// Configure ZeroClipboard
const Clipboard = require("clipboard");
-const Code = require('../code');
+const Code = require('../libs/code');
let setupPageShow = window.setupPageShow = function (pageId) {
let pointerSectionId = '';
// Select all contents on input click
- $pointer.on('click', 'input', function (e) {
+ $pointer.on('click', 'input', event => {
$(this).select();
- e.stopPropagation();
+ 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.html(pointerModeLink ? '<i class="zmdi zmdi-link"></i>' : '<i class="zmdi zmdi-square-down"></i>');
+ $icon.find('[data-icon="include"]').toggle(!pointerModeLink);
+ $icon.find('[data-icon="link"]').toggle(pointerModeLink);
updatePointerContent();
});
// Set up clipboard
- let clipboard = new Clipboard('#pointer button');
+ let clipboard = new Clipboard($pointer[0].querySelector('button'));
// Hide pointer when clicking away
$(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;
});
let idElem = document.getElementById(text);
$('.page-content [data-highlighted]').attr('data-highlighted', '').css('background-color', '');
if (idElem !== null) {
- let $idElem = $(idElem);
- let color = $('#custom-styles').attr('data-color-light');
- $idElem.css('background-color', color).attr('data-highlighted', 'true').smoothScrollTo();
- setTimeout(() => {
- $idElem.addClass('anim').addClass('selectFade').css('background-color', '');
- setTimeout(() => {
- $idElem.removeClass('selectFade');
- }, 3000);
- }, 100);
+ window.scrollAndHighlight(idElem);
} else {
$('.page-content').find(':contains("' + text + '")').smoothScrollTo();
}
goToText(event.target.getAttribute('href').substr(1));
});
- // Make the book-tree sidebar stick in view on scroll
+ // Make the sidebar stick in view on scroll
let $window = $(window);
- let $bookTree = $(".book-tree");
- let $bookTreeParent = $bookTree.parent();
+ let $sidebar = $("#sidebar .scroll-body");
+ let $bookTreeParent = $sidebar.parent();
+
// Check the page is scrollable and the content is taller than the tree
- let 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
let headerHeight = $("#header").height() + $(".toolbar").height();
let isFixed = $window.scrollTop() > headerHeight;
- // Function to fix the tree as a sidebar
+
+ // Fix the tree as a sidebar
function stickTree() {
- $bookTree.width($bookTreeParent.width() + 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) {
let shouldBeFixed = $window.scrollTop() > headerHeight;
}
});
- // in order to call from other places.
- window.setupPageShow.goToText = goToText;
+
+ // 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
projects / bookstack / blobdiff