Infra-Mirrors/BookStack
1
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2024-09-20 00:06:42 +00:00
Code Issues Packages Projects Releases Wiki Activity

Page JS: Improved block jumping and highlighting

Browse Source 
- Updated anchor scroll change to open up details blocks if the target
  exists within.
- Updated highlighting and animation implementation to fix hardly visible highlighting.
- Removed old, now unused, handing of CM instances in details blocks.

Related to #4637.
This commit is contained in:
Dan Brown 2023-11-01 18:49:47 +00:00
parent 324e403ae5
commit 38ac3c959b
No known key found for this signature in database
GPG Key ID: 46D9F943C24A2EF9
2 changed files with 22 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
resources/js/components/page-display.js
View File

@ -37,7 +37,6 @@ export class PageDisplay extends Component {
window.importVersioned('code').then(Code => Code.highlight()); window.importVersioned('code').then(Code => Code.highlight());
this.setupNavHighlighting(); this.setupNavHighlighting();
this.setupDetailsCodeBlockRefresh();
// Check the hash on load // Check the hash on load
if (window.location.hash) { if (window.location.hash) {
@ -87,14 +86,4 @@ export class PageDisplay extends Component {
} }
} }
setupDetailsCodeBlockRefresh() {
const onToggle = event => {
const codeMirrors = [...event.target.querySelectorAll('.CodeMirror')];
codeMirrors.forEach(cm => cm.CodeMirror && cm.CodeMirror.refresh());
};
const details = [...this.container.querySelectorAll('details')];
details.forEach(detail => detail.addEventListener('toggle', onToggle));
}
} }

32
resources/js/services/util.js
View File

@ -1,3 +1,5 @@
import {elem} from './dom';
/** /**
* Returns a function, that, as long as it continues to be invoked, will not * Returns a function, that, as long as it continues to be invoked, will not
* be triggered. The function will be called after it stops being called for * be triggered. The function will be called after it stops being called for
@ -30,19 +32,29 @@ export function debounce(func, waitMs, immediate) {
*/ */
export function scrollAndHighlightElement(element) { export function scrollAndHighlightElement(element) {
if (!element) return; if (!element) return;
const parentDetails = element.closest('details');
if (parentDetails && !parentDetails.open) {
parentDetails.open = true;
}
element.scrollIntoView({behavior: 'smooth'}); element.scrollIntoView({behavior: 'smooth'});
const color = getComputedStyle(document.body).getPropertyValue('--color-primary-light'); const highlight = getComputedStyle(document.body).getPropertyValue('--color-link');
const initColor = window.getComputedStyle(element).getPropertyValue('background-color'); element.style.outline = `2px dashed ${highlight}`;
element.style.backgroundColor = color; element.style.outlineOffset = '5px';
element.style.transition = null;
setTimeout(() => { setTimeout(() => {
element.classList.add('selectFade'); element.style.transition = 'outline linear 3s';
element.style.backgroundColor = initColor; element.style.outline = '2px dashed rgba(0, 0, 0, 0)';
}, 10); const listener = () => {
setTimeout(() => { element.removeEventListener('transitionend', listener);
element.classList.remove('selectFade'); element.style.transition = null;
element.style.backgroundColor = ''; element.style.outline = null;
}, 3000); element.style.outlineOffset = null;
};
element.addEventListener('transitionend', listener);
}, 1000);
} }
/** /**