Actually add the test this time

[bookstack] / resources / js / services / util.js

diff --git a/resources/js/services/util.js b/resources/js/services/util.js
index 0a8966f15c638031e3a4c4685ebe8e6b2be93b47..942456d9dedb475ce3e6e05ad0a06ccdf2513ffd 100644 (file)
--- a/resources/js/services/util.js
+++ b/resources/js/services/util.js
@@ -5,11 +5,11 @@
  * leading edge, instead of the trailing.
  * @attribution https://davidwalsh.name/javascript-debounce-function
  * @param {Function} func
- * @param {Number} wait
+ * @param {Number} waitMs
  * @param {Boolean} immediate
  * @returns {Function}
  */
-export function debounce(func, wait, immediate) {
+export function debounce(func, waitMs, immediate) {
     let timeout;
     return function debouncedWrapper(...args) {
         const context = this;
@@ -19,7 +19,7 @@ export function debounce(func, wait, immediate) {
         };
         const callNow = immediate && !timeout;
         clearTimeout(timeout);
-        timeout = setTimeout(later, wait);
+        timeout = setTimeout(later, waitMs);
         if (callNow) func.apply(context, args);
     };
 }
@@ -30,19 +30,32 @@ export function debounce(func, wait, immediate) {
  */
 export function scrollAndHighlightElement(element) {
     if (!element) return;
+
+    let parent = element;
+    while (parent.parentElement) {
+        parent = parent.parentElement;
+        if (parent.nodeName === 'DETAILS' && !parent.open) {
+            parent.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);
 }
 
 /**