Page JS: Improved block jumping and highlighting

- 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

View File

@ -37,7 +37,6 @@ export class PageDisplay extends Component {
window.importVersioned('code').then(Code => Code.highlight());
this.setupNavHighlighting();
this.setupDetailsCodeBlockRefresh();
// Check the hash on load
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));
}
}

View File

@ -1,3 +1,5 @@
import {elem} from './dom';
/**
* 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
@ -30,19 +32,29 @@ export function debounce(func, waitMs, immediate) {
*/
export function scrollAndHighlightElement(element) {
if (!element) return;
const parentDetails = element.closest('details');
if (parentDetails && !parentDetails.open) {
parentDetails.open = true;
}
element.scrollIntoView({behavior: 'smooth'});
const color = getComputedStyle(document.body).getPropertyValue('--color-primary-light');
const initColor = window.getComputedStyle(element).getPropertyValue('background-color');
element.style.backgroundColor = color;
const highlight = getComputedStyle(document.body).getPropertyValue('--color-link');
element.style.outline = `2px dashed ${highlight}`;
element.style.outlineOffset = '5px';
element.style.transition = null;
setTimeout(() => {
element.classList.add('selectFade');
element.style.backgroundColor = initColor;
}, 10);
setTimeout(() => {
element.classList.remove('selectFade');
element.style.backgroundColor = '';
}, 3000);
element.style.transition = 'outline linear 3s';
element.style.outline = '2px dashed rgba(0, 0, 0, 0)';
const listener = () => {
element.removeEventListener('transitionend', listener);
element.style.transition = null;
element.style.outline = null;
element.style.outlineOffset = null;
};
element.addEventListener('transitionend', listener);
}, 1000);
}
/**