]> BookStack Code Mirror - bookstack/blob - resources/assets/js/pages/page-show.js
Removes some unused code.
[bookstack] / resources / assets / js / pages / page-show.js
1 const Clipboard = require("clipboard");
2 const Code = require('../code');
3
4 let setupPageShow = window.setupPageShow = function (pageId) {
5
6     Code.highlight();
7
8     if (!pageId) return;
9
10     // Set up pointer
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 = '';
17
18     // Select all contents on input click
19     $pointer.on('click', 'input', function (e) {
20         $(this).select();
21         e.stopPropagation();
22     });
23
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();
30     });
31
32     // Set up clipboard
33     let clipboard = new Clipboard('#pointer button');
34
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;
40
41         $pointer.detach();
42         pointerShowing = false;
43     });
44
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;
48
49         $pointer.find('input').val(inputText);
50     }
51
52     // Show pointer when selecting a single block of tagged content
53     $('.page-content [id^="bkmrk"]').on('mouseup keyup', function (e) {
54         e.stopPropagation();
55         let selection = window.getSelection();
56         if (selection.toString().length === 0) return;
57
58         // Show pointer and set link
59         let $elem = $(this);
60         pointerSectionId = $elem.attr('id');
61         updatePointerContent();
62
63         $elem.before($pointer);
64         $pointer.show();
65         pointerShowing = true;
66
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 + '%');
72
73         isSelection = true;
74         setTimeout(() => {
75             isSelection = false;
76         }, 100);
77     });
78
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();
87             setTimeout(() => {
88                 $idElem.addClass('anim').addClass('selectFade').css('background-color', '');
89                 setTimeout(() => {
90                    $idElem.removeClass('selectFade');
91                 }, 3000);
92             }, 100);
93         } else {
94             $('.page-content').find(':contains("' + text + '")').smoothScrollTo();
95         }
96     }
97
98     // Check the hash on load
99     if (window.location.hash) {
100         let text = window.location.hash.replace(/\%20/g, ' ').substr(1);
101         goToText(text);
102     }
103
104     // Sidebar page nav click event
105     $('.sidebar-page-nav').on('click', 'a', event => {
106         goToText(event.target.getAttribute('href').substr(1));
107     });
108
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");
122         isFixed = true;
123     }
124     // Function to un-fix the tree back into position
125     function unstickTree() {
126         $bookTree.css('width', 'auto');
127         $bookTree.removeClass("fixed");
128         isFixed = false;
129     }
130     // Checks if the tree stickiness state should change
131     function checkTreeStickiness(skipCheck) {
132         let shouldBeFixed = $window.scrollTop() > headerHeight;
133         if (shouldBeFixed && (!isFixed || skipCheck)) {
134             stickTree();
135         } else if (!shouldBeFixed && (isFixed || skipCheck)) {
136             unstickTree();
137         }
138     }
139     // The event ran when the window scrolls
140     function windowScrollEvent() {
141         checkTreeStickiness(false);
142     }
143
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);
149     }
150
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);
156         } else {
157             $window.off('scroll', windowScrollEvent);
158             unstickTree();
159         }
160     });
161
162     // in order to call from other places.
163     window.setupPageShow.goToText = goToText;
164 };
165
166 module.exports = setupPageShow;