respective book and chapter structure added.

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

diff --git a/resources/js/services/util.js b/resources/js/services/util.js
index 238f8b1d88c7b4d1f2be0d684a9f816be9461949..1264d105860e11ae68e9f7d53cbbfd02ea878837 100644 (file)
--- a/resources/js/services/util.js
+++ b/resources/js/services/util.js
@@ -1,5 +1,3 @@
-
-

 /**
  * 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
 /**
  * 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


@@ -7,24 +5,24 @@
  * leading edge, instead of the trailing.
  * @attribution https://davidwalsh.name/javascript-debounce-function
  * @param {Function} func
  * 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}
  */
  * @param {Boolean} immediate
  * @returns {Function}
  */

-export function debounce(func, wait, immediate) {
+export function debounce(func, waitMs, immediate) {

     let timeout;
     let timeout;

-    return function() {
-        const context = this, args = arguments;
-        const later = function() {
+    return function debouncedWrapper(...args) {
+        const context = this;
+        const later = function debouncedTimeout() {

             timeout = null;
             if (!immediate) func.apply(context, args);
         };
         const callNow = immediate && !timeout;
         clearTimeout(timeout);
             timeout = null;
             if (!immediate) func.apply(context, args);
         };
         const callNow = immediate && !timeout;
         clearTimeout(timeout);

-        timeout = setTimeout(later, wait);
+        timeout = setTimeout(later, waitMs);

         if (callNow) func.apply(context, args);
     };
         if (callNow) func.apply(context, args);
     };

-};
+}

 
 /**
  * Scroll and highlight an element.
 
 /**
  * Scroll and highlight an element.


@@ -32,19 +30,32 @@ export function debounce(func, wait, immediate) {
  */
 export function scrollAndHighlightElement(element) {
     if (!element) return;
  */
 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'});
 
     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(() => {
     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);

 }
 
 /**
 }
 
 /**


@@ -55,11 +66,11 @@ export function scrollAndHighlightElement(element) {
  */
 export function escapeHtml(unsafe) {
     return unsafe
  */
 export function escapeHtml(unsafe) {
     return unsafe

-        .replace(/&/g, "&")
-        .replace(/</g, "&lt;")
-        .replace(/>/g, "&gt;")
-        .replace(/"/g, "&quot;")
-        .replace(/'/g, "&#039;");
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;')
+        .replace(/'/g, '&#039;');

 }
 
 /**
 }
 
 /**


@@ -68,6 +79,29 @@ export function escapeHtml(unsafe) {
  * @returns {string}
  */
 export function uniqueId() {
  * @returns {string}
  */
 export function uniqueId() {

-    const S4 = () => (((1+Math.random())*0x10000)|0).toString(16).substring(1);
-    return (S4()+S4()+"-"+S4()+"-"+S4()+"-"+S4()+"-"+S4()+S4()+S4());
-}
\ No newline at end of file
+    // eslint-disable-next-line no-bitwise
+    const S4 = () => (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
+    return (`${S4() + S4()}-${S4()}-${S4()}-${S4()}-${S4()}${S4()}${S4()}`);
+}
+
+/**
+ * Generate a random smaller unique ID.
+ *
+ * @returns {string}
+ */
+export function uniqueIdSmall() {
+    // eslint-disable-next-line no-bitwise
+    const S4 = () => (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
+    return S4();
+}
+
+/**
+ * Create a promise that resolves after the given time.
+ * @param {int} timeMs
+ * @returns {Promise}
+ */
+export function wait(timeMs) {
+    return new Promise(res => {
+        setTimeout(res, timeMs);
+    });
+}