BookStack Code Mirror - bookstack/blob - resources/assets/js/pages/page-show.js

   1 "use strict";
   2 // Configure ZeroClipboard
   3 import ZeroClipBoard from "zeroclipboard";
   4
   5 export default window.setupPageShow = function (pageId) {
   6
   7     // Set up pointer
   8     let $pointer = $('#pointer').detach();
   9     let $pointerInner = $pointer.children('div.pointer').first();
  10     let isSelection = false;
  11
  12     // Select all contents on input click
  13     $pointer.on('click', 'input', function (e) {
  14         $(this).select();
  15         e.stopPropagation();
  16     });
  17
  18     // Set up copy-to-clipboard
  19     ZeroClipBoard.config({
  20         swfPath: window.baseUrl('/ZeroClipboard.swf')
  21     });
  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         let selection = window.getSelection();
  35         if (selection.toString().length === 0) return;
  36
  37         // Show pointer and set link
  38         let $elem = $(this);
  39         let link = window.baseUrl('/link/' + pageId + '#' + $elem.attr('id'));
  40         if (link.indexOf('http') !== 0) link = window.location.protocol + "//" + window.location.host + link;
  41         $pointer.find('input').val(link);
  42         $pointer.find('button').first().attr('data-clipboard-text', link);
  43         $elem.before($pointer);
  44         $pointer.show();
  45
  46         // Set pointer to sit near mouse-up position
  47         let pointerLeftOffset = (e.pageX - $elem.offset().left - ($pointerInner.width() / 2));
  48         if (pointerLeftOffset < 0) pointerLeftOffset = 0;
  49         let pointerLeftOffsetPercent = (pointerLeftOffset / $elem.width()) * 100;
  50         $pointerInner.css('left', pointerLeftOffsetPercent + '%');
  51
  52         isSelection = true;
  53         setTimeout(() => {
  54             isSelection = false;
  55         }, 100);
  56     });
  57
  58     // Go to, and highlight if necessary, the specified text.
  59     function goToText(text) {
  60         let idElem = document.getElementById(text);
  61         $('.page-content [data-highlighted]').attr('data-highlighted', '').css('background-color', '');
  62         if (idElem !== null) {
  63             let $idElem = $(idElem);
  64             let color = $('#custom-styles').attr('data-color-light');
  65             $idElem.css('background-color', color).attr('data-highlighted', 'true').smoothScrollTo();
  66         } else {
  67             $('.page-content').find(':contains("' + text + '")').smoothScrollTo();
  68         }
  69     }
  70
  71     // Check the hash on load
  72     if (window.location.hash) {
  73         let text = window.location.hash.replace(/\%20/g, ' ').substr(1);
  74         goToText(text);
  75     }
  76
  77     // Sidebar page nav click event
  78     $('.sidebar-page-nav').on('click', 'a', event => {
  79         goToText(event.target.getAttribute('href').substr(1));
  80     });
  81
  82     // Make the book-tree sidebar stick in view on scroll
  83     let $window = $(window);
  84     let $bookTree = $(".book-tree");
  85     let $bookTreeParent = $bookTree.parent();
  86     // Check the page is scrollable and the content is taller than the tree
  87     let pageScrollable = ($(document).height() > $window.height()) && ($bookTree.height() < $('.page-content').height());
  88     // Get current tree's width and header height
  89     let headerHeight = $("#header").height() + $(".toolbar").height();
  90     let isFixed = $window.scrollTop() > headerHeight;
  91     // Function to fix the tree as a sidebar
  92     function stickTree() {
  93         $bookTree.width($bookTreeParent.width() + 15);
  94         $bookTree.addClass("fixed");
  95         isFixed = true;
  96     }
  97     // Function to un-fix the tree back into position
  98     function unstickTree() {
  99         $bookTree.css('width', 'auto');
 100         $bookTree.removeClass("fixed");
 101         isFixed = false;
 102     }
 103     // Checks if the tree stickiness state should change
 104     function checkTreeStickiness(skipCheck) {
 105         let shouldBeFixed = $window.scrollTop() > headerHeight;
 106         if (shouldBeFixed && (!isFixed || skipCheck)) {
 107             stickTree();
 108         } else if (!shouldBeFixed && (isFixed || skipCheck)) {
 109             unstickTree();
 110         }
 111     }
 112     // The event ran when the window scrolls
 113     function windowScrollEvent() {
 114         checkTreeStickiness(false);
 115     }
 116
 117     // If the page is scrollable and the window is wide enough listen to scroll events
 118     // and evaluate tree stickiness.
 119     if (pageScrollable && $window.width() > 1000) {
 120         $window.on('scroll', windowScrollEvent);
 121         checkTreeStickiness(true);
 122     }
 123
 124     // Handle window resizing and switch between desktop/mobile views
 125     $window.on('resize', event => {
 126         if (pageScrollable && $window.width() > 1000) {
 127             $window.on('scroll', windowScrollEvent);
 128             checkTreeStickiness(true);
 129         } else {
 130             $window.off('scroll', windowScrollEvent);
 131             unstickTree();
 132         }
 133     });
 134
 135 };