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

99 lines
3.5 KiB
JavaScript
Raw Normal View History

2019-06-08 00:46:19 +08:00
import * as DOM from "../services/dom";
import {scrollAndHighlightElement} from "../services/util";
import {Component} from "./component";
2018-04-01 19:46:27 +08:00
export class PageDisplay extends Component {
2018-04-01 19:46:27 +08:00
setup() {
this.container = this.$el;
this.pageId = this.$opts.pageId;
2018-04-01 19:46:27 +08:00
window.importVersioned('code').then(Code => Code.highlight());
2018-04-01 19:46:27 +08:00
this.setupNavHighlighting();
this.setupDetailsCodeBlockRefresh();
2018-04-01 19:46:27 +08:00
// Check the hash on load
if (window.location.hash) {
const text = window.location.hash.replace(/%20/g, ' ').substring(1);
2018-04-01 19:46:27 +08:00
this.goToText(text);
}
// Sidebar page nav click event
2019-06-08 00:46:19 +08:00
const sidebarPageNav = document.querySelector('.sidebar-page-nav');
if (sidebarPageNav) {
DOM.onChildEvent(sidebarPageNav, 'a', 'click', (event, child) => {
event.preventDefault();
window.$components.first('tri-layout').showContent();
const contentId = child.getAttribute('href').substr(1);
this.goToText(contentId);
window.history.pushState(null, null, '#' + contentId);
});
}
2018-04-01 19:46:27 +08:00
}
goToText(text) {
2019-06-08 00:46:19 +08:00
const idElem = document.getElementById(text);
DOM.forEach('.page-content [data-highlighted]', elem => {
elem.removeAttribute('data-highlighted');
elem.style.backgroundColor = null;
});
2018-04-01 19:46:27 +08:00
if (idElem !== null) {
scrollAndHighlightElement(idElem);
2018-04-01 19:46:27 +08:00
} else {
2019-06-08 00:46:19 +08:00
const textElem = DOM.findText('.page-content > div > *', text);
if (textElem) {
scrollAndHighlightElement(textElem);
2019-06-08 00:46:19 +08:00
}
2018-04-01 19:46:27 +08:00
}
}
setupNavHighlighting() {
const pageNav = document.querySelector('.sidebar-page-nav');
2018-04-01 19:46:27 +08:00
// fetch all the headings.
const headings = document.querySelector('.page-content').querySelectorAll('h1, h2, h3, h4, h5, h6');
2018-04-01 19:46:27 +08:00
// if headings are present, add observers.
if (headings.length > 0 && pageNav !== null) {
addNavObserver(headings);
}
function addNavObserver(headings) {
// Setup the intersection observer.
const intersectOpts = {
2018-04-01 19:46:27 +08:00
rootMargin: '0px 0px 0px 0px',
threshold: 1.0
};
const pageNavObserver = new IntersectionObserver(headingVisibilityChange, intersectOpts);
2018-04-01 19:46:27 +08:00
// observe each heading
for (const heading of headings) {
2019-02-16 23:39:11 +08:00
pageNavObserver.observe(heading);
2018-04-01 19:46:27 +08:00
}
}
function headingVisibilityChange(entries, observer) {
for (const entry of entries) {
const isVisible = (entry.intersectionRatio === 1);
2018-04-01 19:46:27 +08:00
toggleAnchorHighlighting(entry.target.id, isVisible);
}
}
function toggleAnchorHighlighting(elementId, shouldHighlight) {
2019-06-08 00:46:19 +08:00
DOM.forEach('a[href="#' + elementId + '"]', anchor => {
2019-02-16 23:39:11 +08:00
anchor.closest('li').classList.toggle('current-heading', shouldHighlight);
2019-06-08 00:46:19 +08:00
});
2018-04-01 19:46:27 +08:00
}
}
setupDetailsCodeBlockRefresh() {
const onToggle = event => {
const codeMirrors = [...event.target.querySelectorAll('.CodeMirror')];
codeMirrors.forEach(cm => cm.CodeMirror && cm.CodeMirror.refresh());
};
const details = [...this.container.querySelectorAll('details')];
details.forEach(detail => detail.addEventListener('toggle', onToggle));
}
}