]> BookStack Code Mirror - bookstack/blob - resources/assets/js/pages/page-show.js
Found the source of the issue, not sure how to fix
[bookstack] / resources / assets / js / pages / page-show.js
1 "use strict";
2 // Configure ZeroClipboard
3 var zeroClipBoard = require('zeroclipboard');
4 zeroClipBoard.config({
5     swfPath: '/ZeroClipboard.swf'
6 });
7
8 window.setupPageShow = module.exports = function (pageId) {
9
10     // Set up pointer
11     var $pointer = $('#pointer').detach();
12     var $pointerInner = $pointer.children('div.pointer').first();
13     var isSelection = false;
14
15     // Select all contents on input click
16     $pointer.on('click', 'input', function (e) {
17         $(this).select();
18         e.stopPropagation();
19     });
20
21     // Set up copy-to-clipboard
22     new zeroClipBoard($pointer.find('button').first()[0]);
23
24     // Hide pointer when clicking away
25     $(document.body).find('*').on('click focus', function (e) {
26         if (!isSelection) {
27             $pointer.detach();
28         }
29     });
30
31     // Show pointer when selecting a single block of tagged content
32     $('.page-content [id^="bkmrk"]').on('mouseup keyup', function (e) {
33         e.stopPropagation();
34         var selection = window.getSelection();
35         if (selection.toString().length === 0) return;
36
37         // Show pointer and set link
38         var $elem = $(this);
39         var link = window.location.protocol + "//" + window.location.host + '/link/' + pageId + '#' + $elem.attr('id');
40         $pointer.find('input').val(link);
41         $pointer.find('button').first().attr('data-clipboard-text', link);
42         $elem.before($pointer);
43         $pointer.show();
44
45         // Set pointer to sit near mouse-up position
46         var pointerLeftOffset = (e.pageX - $elem.offset().left - ($pointerInner.width() / 2));
47         if (pointerLeftOffset < 0) pointerLeftOffset = 0;
48         var pointerLeftOffsetPercent = (pointerLeftOffset / $elem.width()) * 100;
49         $pointerInner.css('left', pointerLeftOffsetPercent + '%');
50
51         isSelection = true;
52         setTimeout(() => {
53             isSelection = false;
54         }, 100);
55     });
56
57     // Go to, and highlight if necessary, the specified text.
58     function goToText(text) {
59         var idElem = $('.page-content #' + text).first();
60         if (idElem.length !== 0) {
61             idElem.smoothScrollTo();
62             idElem.css('background-color', 'rgba(244, 249, 54, 0.25)');
63         } else {
64             $('.page-content').find(':contains("' + text + '")').smoothScrollTo();
65         }
66     }
67
68     // Check the hash on load
69     if (window.location.hash) {
70         var text = window.location.hash.replace(/\%20/g, ' ').substr(1);
71         goToText(text);
72     }
73
74     // Make the book-tree sidebar stick in view on scroll
75     var $window = $(window);
76     var $bookTree = $(".book-tree");
77     // Check the page is scrollable and the content is taller than the tree
78     var pageScrollable = ($(document).height() > $window.height()) && ($bookTree.height() < $('.page-content').height());
79     // Get current tree's width and header height
80     var headerHeight = $("#header").height() + $(".toolbar").height();
81     var isFixed = $window.scrollTop() > headerHeight;
82     var bookTreeWidth = $bookTree.width();
83     // Function to fix the tree as a sidebar
84     function stickTree() {
85         $bookTree.width(bookTreeWidth + 48 + 15);
86         $bookTree.addClass("fixed");
87         isFixed = true;
88     }
89     // Function to un-fix the tree back into position
90     function unstickTree() {
91         $bookTree.css('width', 'auto');
92         $bookTree.removeClass("fixed");
93         isFixed = false;
94     }
95     // Checks if the tree stickiness state should change
96     function checkTreeStickiness(skipCheck) {
97         var shouldBeFixed = $window.scrollTop() > headerHeight;
98         if (shouldBeFixed && (!isFixed || skipCheck)) {
99             stickTree();
100         } else if (!shouldBeFixed && (isFixed || skipCheck)) {
101             unstickTree();
102         }
103     }
104     // If the page is scrollable and the window is wide enough listen to scroll events
105     // and evaluate tree stickiness.
106     if (pageScrollable && $window.width() > 1000) {
107         $window.scroll(function() {
108             checkTreeStickiness(false);
109         });
110         checkTreeStickiness(true);
111     }
112
113 };