X-Git-Url: http://source.bookstackapp.com/bookstack/blobdiff_plain/d886c6a32e633f21a38b5fc880cf14f9921404c2..refs/pull/1314/head:/resources/assets/js/components/page-display.js diff --git a/resources/assets/js/components/page-display.js b/resources/assets/js/components/page-display.js index f51cb7f34..bca641cb6 100644 --- a/resources/assets/js/components/page-display.js +++ b/resources/assets/js/components/page-display.js @@ -1,4 +1,4 @@ -import Clipboard from "clipboard"; +import Clipboard from "clipboard/dist/clipboard.min"; import Code from "../services/code"; class PageDisplay { @@ -20,7 +20,7 @@ class PageDisplay { // Sidebar page nav click event $('.sidebar-page-nav').on('click', 'a', event => { - goToText(event.target.getAttribute('href').substr(1)); + this.goToText(event.target.getAttribute('href').substr(1)); }); } @@ -74,11 +74,23 @@ class PageDisplay { pointerShowing = false; }); - let updatePointerContent = () => { + let updatePointerContent = ($elem) => { let inputText = pointerModeLink ? window.baseUrl(`/link/${this.pageId}#${pointerSectionId}`) : `{{@${this.pageId}#${pointerSectionId}}}`; if (pointerModeLink && inputText.indexOf('http') !== 0) inputText = window.location.protocol + "//" + window.location.host + inputText; $pointer.find('input').val(inputText); + + // update anchor if present + const $editAnchor = $pointer.find('#pointer-edit'); + if ($editAnchor.length !== 0 && $elem) { + const editHref = $editAnchor.data('editHref'); + const element = $elem[0]; + const elementId = element.id; + + // get the first 50 characters. + let queryContent = element.textContent && element.textContent.substring(0, 50); + $editAnchor[0].href = `${editHref}?content-id=${elementId}&content-text=${encodeURIComponent(queryContent)}`; + } }; // Show pointer when selecting a single block of tagged content @@ -90,7 +102,7 @@ class PageDisplay { // Show pointer and set link let $elem = $(this); pointerSectionId = $elem.attr('id'); - updatePointerContent(); + updatePointerContent($elem); $elem.before($pointer); $pointer.show(); @@ -111,20 +123,21 @@ class PageDisplay { setupStickySidebar() { // Make the sidebar stick in view on scroll - let $window = $(window); - let $sidebar = $("#sidebar .scroll-body"); - let $bookTreeParent = $sidebar.parent(); + const $window = $(window); + const $sidebar = $("#sidebar .scroll-body"); + const $sidebarContainer = $sidebar.parent(); + const sidebarHeight = $sidebar.height() + 32; // Check the page is scrollable and the content is taller than the tree - let pageScrollable = ($(document).height() > $window.height()) && ($sidebar.height() < $('.page-content').height()); + const pageScrollable = ($(document).height() > ($window.height() + 40)) && (sidebarHeight < $('.page-content').height()); // Get current tree's width and header height - let headerHeight = $("#header").height() + $(".toolbar").height(); + const headerHeight = $("#header").height() + $(".toolbar").height(); let isFixed = $window.scrollTop() > headerHeight; // Fix the tree as a sidebar function stickTree() { - $sidebar.width($bookTreeParent.width() + 15); + $sidebar.width($sidebarContainer.width() + 15); $sidebar.addClass("fixed"); isFixed = true; } @@ -219,7 +232,6 @@ class PageDisplay { } } } - } -module.exports = PageDisplay; \ No newline at end of file +export default PageDisplay;