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.

Author: ssddanbrown

resources/js/components/page-display.js

@@ -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));
-    }
-
 }

resources/js/services/util.js

@@ -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);
 }
 
 /**