1 const Clipboard = require("clipboard");
2 const Code = require('../code');
4 let setupPageShow = window.setupPageShow = function (pageId) {
11 let $pointer = $('#pointer').detach();
12 let pointerShowing = false;
13 let $pointerInner = $pointer.children('div.pointer').first();
14 let isSelection = false;
15 let pointerModeLink = true;
16 let pointerSectionId = '';
18 // Select all contents on input click
19 $pointer.on('click', 'input', function (e) {
24 // Pointer mode toggle
25 $pointer.on('click', 'span.icon', event => {
26 let $icon = $(event.currentTarget);
27 pointerModeLink = !pointerModeLink;
28 $icon.html(pointerModeLink ? '<i class="zmdi zmdi-link"></i>' : '<i class="zmdi zmdi-square-down"></i>');
29 updatePointerContent();
33 let clipboard = new Clipboard('#pointer button');
35 // Hide pointer when clicking away
36 $(document.body).find('*').on('click focus', event => {
37 if (!pointerShowing || isSelection) return;
38 let target = $(event.target);
39 if (target.is('.zmdi') || $(event.target).closest('#pointer').length === 1) return;
42 pointerShowing = false;
45 function updatePointerContent() {
46 let inputText = pointerModeLink ? window.baseUrl(`/link/${pageId}#${pointerSectionId}`) : `{{@${pageId}#${pointerSectionId}}}`;
47 if (pointerModeLink && inputText.indexOf('http') !== 0) inputText = window.location.protocol + "//" + window.location.host + inputText;
49 $pointer.find('input').val(inputText);
52 // Show pointer when selecting a single block of tagged content
53 $('.page-content [id^="bkmrk"]').on('mouseup keyup', function (e) {
55 let selection = window.getSelection();
56 if (selection.toString().length === 0) return;
58 // Show pointer and set link
60 pointerSectionId = $elem.attr('id');
61 updatePointerContent();
63 $elem.before($pointer);
65 pointerShowing = true;
67 // Set pointer to sit near mouse-up position
68 let pointerLeftOffset = (e.pageX - $elem.offset().left - ($pointerInner.width() / 2));
69 if (pointerLeftOffset < 0) pointerLeftOffset = 0;
70 let pointerLeftOffsetPercent = (pointerLeftOffset / $elem.width()) * 100;
71 $pointerInner.css('left', pointerLeftOffsetPercent + '%');
79 // Go to, and highlight if necessary, the specified text.
80 function goToText(text) {
81 let idElem = document.getElementById(text);
82 $('.page-content [data-highlighted]').attr('data-highlighted', '').css('background-color', '');
83 if (idElem !== null) {
84 let $idElem = $(idElem);
85 let color = $('#custom-styles').attr('data-color-light');
86 $idElem.css('background-color', color).attr('data-highlighted', 'true').smoothScrollTo();
88 $idElem.addClass('anim').addClass('selectFade').css('background-color', '');
90 $idElem.removeClass('selectFade');
94 $('.page-content').find(':contains("' + text + '")').smoothScrollTo();
98 // Check the hash on load
99 if (window.location.hash) {
100 let text = window.location.hash.replace(/\%20/g, ' ').substr(1);
104 // Sidebar page nav click event
105 $('.sidebar-page-nav').on('click', 'a', event => {
106 goToText(event.target.getAttribute('href').substr(1));
109 // Make the book-tree sidebar stick in view on scroll
110 let $window = $(window);
111 let $bookTree = $(".book-tree");
112 let $bookTreeParent = $bookTree.parent();
113 // Check the page is scrollable and the content is taller than the tree
114 let pageScrollable = ($(document).height() > $window.height()) && ($bookTree.height() < $('.page-content').height());
115 // Get current tree's width and header height
116 let headerHeight = $("#header").height() + $(".toolbar").height();
117 let isFixed = $window.scrollTop() > headerHeight;
118 // Function to fix the tree as a sidebar
119 function stickTree() {
120 $bookTree.width($bookTreeParent.width() + 15);
121 $bookTree.addClass("fixed");
124 // Function to un-fix the tree back into position
125 function unstickTree() {
126 $bookTree.css('width', 'auto');
127 $bookTree.removeClass("fixed");
130 // Checks if the tree stickiness state should change
131 function checkTreeStickiness(skipCheck) {
132 let shouldBeFixed = $window.scrollTop() > headerHeight;
133 if (shouldBeFixed && (!isFixed || skipCheck)) {
135 } else if (!shouldBeFixed && (isFixed || skipCheck)) {
139 // The event ran when the window scrolls
140 function windowScrollEvent() {
141 checkTreeStickiness(false);
144 // If the page is scrollable and the window is wide enough listen to scroll events
145 // and evaluate tree stickiness.
146 if (pageScrollable && $window.width() > 1000) {
147 $window.on('scroll', windowScrollEvent);
148 checkTreeStickiness(true);
151 // Handle window resizing and switch between desktop/mobile views
152 $window.on('resize', event => {
153 if (pageScrollable && $window.width() > 1000) {
154 $window.on('scroll', windowScrollEvent);
155 checkTreeStickiness(true);
157 $window.off('scroll', windowScrollEvent);
162 // in order to call from other places.
163 window.setupPageShow.goToText = goToText;
166 module.exports = setupPageShow;