github-mirror/BookStack
2
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2025-06-07 19:34:33 +08:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

Updated page pointer to use a fixed positioning system

Browse Source 
Avoids interferance with elements that have their own overflow behaviour
such as table cells.
Related to #3774
This commit is contained in:
Dan Brown
2022-10-18 22:40:13 +01:00
parent ff3fb2ebb9
commit d084f225a0
3 changed files with 26 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
resources/js/components/pointer.js
View File

@ -16,13 +16,7 @@ class Pointer {
this.pointerModeLink = true;
this.pointerSectionId = '';
this.init();
this.setupListeners();
}
init() {
// Set up pointer by removing it
this.container.parentNode.removeChild(this.container);
// Set up clipboard
new Clipboard(this.container.querySelector('button'));
@ -52,8 +46,7 @@ class Pointer {
// Hide pointer when clicking away
DOM.onEvents(document.body, ['click', 'focus'], event => {
if (!this.showing || this.isSelection) return;
this.container.parentElement.removeChild(this.container);
this.showing = false;
this.hidePointer();
});
// Show pointer when selecting a single block of tagged content
@ -67,6 +60,11 @@ class Pointer {
});
}
hidePointer() {
this.container.style.display = null;
this.showing = false;
}
/**
* Move and display the pointer at the given element, targeting the given screen x-position if possible.
* @param {Element} element
@ -80,23 +78,29 @@ class Pointer {
this.pointerSectionId = element.id;
this.updateForTarget(element);
element.parentNode.insertBefore(this.container, element);
this.container.style.display = 'block';
const targetBounds = element.getBoundingClientRect();
const pointerBounds = this.container.getBoundingClientRect();
const xTarget = Math.min(Math.max(xPosition, targetBounds.left), targetBounds.right);
const xOffset = xTarget - (pointerBounds.width / 2);
const yOffset = (targetBounds.top - pointerBounds.height) - 16;
this.container.style.left = `${xOffset}px`;
this.container.style.top = `${yOffset}px`;
this.showing = true;
this.isSelection = true;
// Set pointer to sit near mouse-up position
requestAnimationFrame(() => {
const bookMarkBounds = element.getBoundingClientRect();
const pointerLeftOffset = Math.max((xPosition - bookMarkBounds.left - 164), 0);
const pointerLeftOffsetPercent = (pointerLeftOffset / bookMarkBounds.width) * 100;
setTimeout(() => {
this.isSelection = false;
}, 100);
this.container.children[0].style.left = pointerLeftOffsetPercent + '%';
setTimeout(() => {
this.isSelection = false;
}, 100);
});
const scrollListener = () => {
this.hidePointer();
window.removeEventListener('scroll', scrollListener, {passive: true});
};
window.addEventListener('scroll', scrollListener, {passive: true});
}
/**