X-Git-Url: http://source.bookstackapp.com/bookstack/blobdiff_plain/cd6572b61af2165133468d2562d04dffdca8fca8..refs/pull/474/head:/resources/assets/js/pages/page-show.js diff --git a/resources/assets/js/pages/page-show.js b/resources/assets/js/pages/page-show.js index 0cdde790d..7754840af 100644 --- a/resources/assets/js/pages/page-show.js +++ b/resources/assets/js/pages/page-show.js @@ -1,13 +1,19 @@ -"use strict"; -// Configure ZeroClipboard -import zeroClipBoard from "zeroclipboard"; +const Clipboard = require("clipboard"); +const Code = require('../code'); -export default window.setupPageShow = function (pageId) { +let setupPageShow = window.setupPageShow = function (pageId) { + + Code.highlight(); + + if (!pageId) return; // Set up pointer let $pointer = $('#pointer').detach(); + let pointerShowing = false; let $pointerInner = $pointer.children('div.pointer').first(); let isSelection = false; + let pointerModeLink = true; + let pointerSectionId = ''; // Select all contents on input click $pointer.on('click', 'input', function (e) { @@ -15,19 +21,34 @@ export default window.setupPageShow = function (pageId) { e.stopPropagation(); }); - // Set up copy-to-clipboard - zeroClipBoard.config({ - swfPath: window.baseUrl('/ZeroClipboard.swf') + // Pointer mode toggle + $pointer.on('click', 'span.icon', event => { + let $icon = $(event.currentTarget); + pointerModeLink = !pointerModeLink; + $icon.html(pointerModeLink ? '' : ''); + updatePointerContent(); }); - new zeroClipBoard($pointer.find('button').first()[0]); + + // Set up clipboard + let clipboard = new Clipboard('#pointer button'); // Hide pointer when clicking away - $(document.body).find('*').on('click focus', function (e) { - if (!isSelection) { - $pointer.detach(); - } + $(document.body).find('*').on('click focus', event => { + if (!pointerShowing || isSelection) return; + let target = $(event.target); + if (target.is('.zmdi') || $(event.target).closest('#pointer').length === 1) return; + + $pointer.detach(); + pointerShowing = false; }); + function updatePointerContent() { + let inputText = pointerModeLink ? window.baseUrl(`/link/${pageId}#${pointerSectionId}`) : `{{@${pageId}#${pointerSectionId}}}`; + if (pointerModeLink && inputText.indexOf('http') !== 0) inputText = window.location.protocol + "//" + window.location.host + inputText; + + $pointer.find('input').val(inputText); + } + // Show pointer when selecting a single block of tagged content $('.page-content [id^="bkmrk"]').on('mouseup keyup', function (e) { e.stopPropagation(); @@ -36,12 +57,12 @@ export default window.setupPageShow = function (pageId) { // Show pointer and set link let $elem = $(this); - let link = window.baseUrl('/link/' + pageId + '#' + $elem.attr('id')); - if (link.indexOf('http') !== 0) link = window.location.protocol + "//" + window.location.host + link; - $pointer.find('input').val(link); - $pointer.find('button').first().attr('data-clipboard-text', link); + pointerSectionId = $elem.attr('id'); + updatePointerContent(); + $elem.before($pointer); $pointer.show(); + pointerShowing = true; // Set pointer to sit near mouse-up position let pointerLeftOffset = (e.pageX - $elem.offset().left - ($pointerInner.width() / 2)); @@ -57,10 +78,18 @@ export default window.setupPageShow = function (pageId) { // Go to, and highlight if necessary, the specified text. function goToText(text) { - let idElem = $('.page-content #' + text).first(); - if (idElem.length !== 0) { - idElem.smoothScrollTo(); - idElem.css('background-color', 'rgba(244, 249, 54, 0.25)'); + let idElem = document.getElementById(text); + $('.page-content [data-highlighted]').attr('data-highlighted', '').css('background-color', ''); + if (idElem !== null) { + let $idElem = $(idElem); + let color = $('#custom-styles').attr('data-color-light'); + $idElem.css('background-color', color).attr('data-highlighted', 'true').smoothScrollTo(); + setTimeout(() => { + $idElem.addClass('anim').addClass('selectFade').css('background-color', ''); + setTimeout(() => { + $idElem.removeClass('selectFade'); + }, 3000); + }, 100); } else { $('.page-content').find(':contains("' + text + '")').smoothScrollTo(); } @@ -72,6 +101,11 @@ export default window.setupPageShow = function (pageId) { goToText(text); } + // Sidebar page nav click event + $('.sidebar-page-nav').on('click', 'a', event => { + goToText(event.target.getAttribute('href').substr(1)); + }); + // Make the book-tree sidebar stick in view on scroll let $window = $(window); let $bookTree = $(".book-tree"); @@ -125,4 +159,8 @@ export default window.setupPageShow = function (pageId) { } }); + // in order to call from other places. + window.setupPageShow.goToText = goToText; }; + +module.exports = setupPageShow; \ No newline at end of file