X-Git-Url: http://source.bookstackapp.com/bookstack/blobdiff_plain/134a96fa32d6e5efff8a912864c9a2a2862ddb39..refs/pull/1098/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 82676b61b..3fd8fb8ef 100644 --- a/resources/assets/js/components/page-display.js +++ b/resources/assets/js/components/page-display.js @@ -11,7 +11,6 @@ class PageDisplay { this.setupPointer(); this.setupStickySidebar(); this.setupNavHighlighting(); - this.setupEditOnHeader(); // Check the hash on load if (window.location.hash) { @@ -21,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)); }); } @@ -75,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 @@ -91,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(); @@ -117,7 +128,7 @@ class PageDisplay { let $bookTreeParent = $sidebar.parent(); // Check the page is scrollable and the content is taller than the tree - let pageScrollable = ($(document).height() > $window.height()) && ($sidebar.height() < $('.page-content').height()); + let pageScrollable = ($(document).height() > ($window.height() + 40)) && ($sidebar.height() < $('.page-content').height()); // Get current tree's width and header height let headerHeight = $("#header").height() + $(".toolbar").height(); @@ -220,31 +231,6 @@ class PageDisplay { } } } - setupEditOnHeader() { - const headingEditIcon = document.querySelector('.heading-edit-icon'); - if (headingEditIcon.length === 0) { - // user does not have permission to edit. - return; - } - - // Create a clone of the edit icon without the hidden class - const visibleHeadingEditIcon = headingEditIcon.cloneNode(true); - visibleHeadingEditIcon.style.display = ''; - - const headings = document.querySelector('.page-content').querySelectorAll('h1, h2, h3, h4, h5, h6'); - - // add an edit icon to each header. - for (let i = 0; i !== headings.length; ++i) { - const currHeading = headings[i]; - const headingId = currHeading.id; - - let editIcon = visibleHeadingEditIcon.cloneNode(true); - editIcon.href += `#${headingId}`; - - currHeading.appendChild(editIcon); - } - } - } module.exports = PageDisplay;