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

202 lines
7.3 KiB
JavaScript
Raw Normal View History

2018-11-10 11:08:33 -05:00
import Clipboard from "clipboard/dist/clipboard.min";
import Code from "../services/code";
2019-06-07 12:46:19 -04:00
import * as DOM from "../services/dom";
import {scrollAndHighlightElement} from "../services/util";
2018-04-01 07:46:27 -04:00
class PageDisplay {
constructor(elem) {
this.elem = elem;
this.pageId = elem.getAttribute('page-display');
Code.highlight();
this.setupPointer();
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
2019-06-07 12:46:19 -04:00
const sidebarPageNav = document.querySelector('.sidebar-page-nav');
if (sidebarPageNav) {
DOM.onChildEvent(sidebarPageNav, 'a', 'click', (event, child) => {
event.preventDefault();
window.components['tri-layout'][0].showContent();
const contentId = child.getAttribute('href').substr(1);
this.goToText(contentId);
window.history.pushState(null, null, '#' + contentId);
});
}
2018-04-01 07:46:27 -04:00
}
goToText(text) {
2019-06-07 12:46:19 -04:00
const idElem = document.getElementById(text);
DOM.forEach('.page-content [data-highlighted]', elem => {
elem.removeAttribute('data-highlighted');
elem.style.backgroundColor = null;
});
2018-04-01 07:46:27 -04:00
if (idElem !== null) {
scrollAndHighlightElement(idElem);
2018-04-01 07:46:27 -04:00
} else {
2019-06-07 12:46:19 -04:00
const textElem = DOM.findText('.page-content > div > *', text);
if (textElem) {
scrollAndHighlightElement(textElem);
2019-06-07 12:46:19 -04:00
}
2018-04-01 07:46:27 -04:00
}
}
setupPointer() {
2019-06-07 12:46:19 -04:00
let pointer = document.getElementById('pointer');
if (!pointer) {
return;
}
2018-04-01 07:46:27 -04:00
// Set up pointer
2019-06-07 12:46:19 -04:00
pointer = pointer.parentNode.removeChild(pointer);
const pointerInner = pointer.querySelector('div.pointer');
// Instance variables
2018-04-01 07:46:27 -04:00
let pointerShowing = false;
let isSelection = false;
let pointerModeLink = true;
let pointerSectionId = '';
// Select all contents on input click
2019-06-07 12:46:19 -04:00
DOM.onChildEvent(pointer, 'input', 'click', (event, input) => {
input.select();
2018-04-01 07:46:27 -04:00
event.stopPropagation();
});
2019-06-07 12:46:19 -04:00
// Prevent closing pointer when clicked or focused
DOM.onEvents(pointer, ['click', 'focus'], event => {
2018-04-01 07:46:27 -04:00
event.stopPropagation();
});
// Pointer mode toggle
2019-06-07 12:46:19 -04:00
DOM.onChildEvent(pointer, 'span.icon', 'click', (event, icon) => {
2018-04-01 07:46:27 -04:00
event.stopPropagation();
pointerModeLink = !pointerModeLink;
2019-06-07 12:46:19 -04:00
icon.querySelector('[data-icon="include"]').style.display = (!pointerModeLink) ? 'inline' : 'none';
icon.querySelector('[data-icon="link"]').style.display = (pointerModeLink) ? 'inline' : 'none';
2018-04-01 07:46:27 -04:00
updatePointerContent();
});
// Set up clipboard
2019-06-07 12:46:19 -04:00
new Clipboard(pointer.querySelector('button'));
2018-04-01 07:46:27 -04:00
// Hide pointer when clicking away
2019-06-07 12:46:19 -04:00
DOM.onEvents(document.body, ['click', 'focus'], event => {
2018-04-01 07:46:27 -04:00
if (!pointerShowing || isSelection) return;
2019-06-07 12:46:19 -04:00
pointer = pointer.parentElement.removeChild(pointer);
2018-04-01 07:46:27 -04:00
pointerShowing = false;
});
2019-06-07 12:46:19 -04:00
let updatePointerContent = (element) => {
2018-04-01 07:46:27 -04:00
let inputText = pointerModeLink ? window.baseUrl(`/link/${this.pageId}#${pointerSectionId}`) : `{{@${this.pageId}#${pointerSectionId}}}`;
2019-06-07 12:46:19 -04:00
if (pointerModeLink && !inputText.startsWith('http')) {
inputText = window.location.protocol + "//" + window.location.host + inputText;
}
2018-04-01 07:46:27 -04:00
2019-06-07 12:46:19 -04:00
pointer.querySelector('input').value = inputText;
2019-06-07 12:46:19 -04:00
// Update anchor if present
const editAnchor = pointer.querySelector('#pointer-edit');
if (editAnchor && element) {
const editHref = editAnchor.dataset.editHref;
const elementId = element.id;
// get the first 50 characters.
2019-06-07 12:46:19 -04:00
const queryContent = element.textContent && element.textContent.substring(0, 50);
editAnchor.href = `${editHref}?content-id=${elementId}&content-text=${encodeURIComponent(queryContent)}`;
}
2018-04-01 07:46:27 -04:00
};
// Show pointer when selecting a single block of tagged content
2019-06-07 12:46:19 -04:00
DOM.forEach('.page-content [id^="bkmrk"]', bookMarkElem => {
DOM.onEvents(bookMarkElem, ['mouseup', 'keyup'], event => {
event.stopPropagation();
let selection = window.getSelection();
if (selection.toString().length === 0) return;
// Show pointer and set link
pointerSectionId = bookMarkElem.id;
updatePointerContent(bookMarkElem);
bookMarkElem.parentNode.insertBefore(pointer, bookMarkElem);
pointer.style.display = 'block';
pointerShowing = true;
isSelection = true;
// Set pointer to sit near mouse-up position
requestAnimationFrame(() => {
const bookMarkBounds = bookMarkElem.getBoundingClientRect();
let pointerLeftOffset = (event.pageX - bookMarkBounds.left - 164);
if (pointerLeftOffset < 0) {
pointerLeftOffset = 0
}
const pointerLeftOffsetPercent = (pointerLeftOffset / bookMarkBounds.width) * 100;
pointerInner.style.left = pointerLeftOffsetPercent + '%';
setTimeout(() => {
isSelection = false;
}, 100);
});
});
2018-04-01 07:46:27 -04:00
});
}
setupNavHighlighting() {
// Check if support is present for IntersectionObserver
if (!('IntersectionObserver' in window) ||
!('IntersectionObserverEntry' in window) ||
!('intersectionRatio' in window.IntersectionObserverEntry.prototype)) {
2018-04-01 07:46:27 -04:00
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
2019-02-16 10:39:11 -05:00
for (let heading of headings) {
pageNavObserver.observe(heading);
2018-04-01 07:46:27 -04:00
}
}
function headingVisibilityChange(entries, observer) {
for (let entry of entries) {
let isVisible = (entry.intersectionRatio === 1);
toggleAnchorHighlighting(entry.target.id, isVisible);
}
}
function toggleAnchorHighlighting(elementId, shouldHighlight) {
2019-06-07 12:46:19 -04:00
DOM.forEach('a[href="#' + elementId + '"]', anchor => {
2019-02-16 10:39:11 -05:00
anchor.closest('li').classList.toggle('current-heading', shouldHighlight);
2019-06-07 12:46:19 -04:00
});
2018-04-01 07:46:27 -04:00
}
}
}
export default PageDisplay;