BookStack Code Mirror - bookstack/blob - resources/js/services/util.ts

   1 /**
   2  * Returns a function, that, as long as it continues to be invoked, will not
   3  * be triggered. The function will be called after it stops being called for
   4  * N milliseconds. If `immediate` is passed, trigger the function on the
   5  * leading edge, instead of the trailing.
   6  * @attribution https://davidwalsh.name/javascript-debounce-function
   7  */
   8 export function debounce(func: Function, waitMs: number, immediate: boolean): Function {
   9     let timeout: number|null = null;
  10     return function debouncedWrapper(this: any, ...args: any[]) {
  11         const context: any = this;
  12         const later = function debouncedTimeout() {
  13             timeout = null;
  14             if (!immediate) func.apply(context, args);
  15         };
  16         const callNow = immediate && !timeout;
  17         if (timeout) {
  18             clearTimeout(timeout);
  19         }
  20         timeout = window.setTimeout(later, waitMs);
  21         if (callNow) func.apply(context, args);
  22     };
  23 }
  24
  25 function isDetailsElement(element: HTMLElement): element is HTMLDetailsElement {
  26     return element.nodeName === 'DETAILS';
  27 }
  28
  29 /**
  30  * Scroll-to and highlight an element.
  31  */
  32 export function scrollAndHighlightElement(element: HTMLElement): void {
  33     if (!element) return;
  34
  35     // Open up parent <details> elements if within
  36     let parent = element;
  37     while (parent.parentElement) {
  38         parent = parent.parentElement;
  39         if (isDetailsElement(parent) && !parent.open) {
  40             parent.open = true;
  41         }
  42     }
  43
  44     element.scrollIntoView({behavior: 'smooth'});
  45
  46     const highlight = getComputedStyle(document.body).getPropertyValue('--color-link');
  47     element.style.outline = `2px dashed ${highlight}`;
  48     element.style.outlineOffset = '5px';
  49     element.style.removeProperty('transition');
  50     setTimeout(() => {
  51         element.style.transition = 'outline linear 3s';
  52         element.style.outline = '2px dashed rgba(0, 0, 0, 0)';
  53         const listener = () => {
  54             element.removeEventListener('transitionend', listener);
  55             element.style.removeProperty('transition');
  56             element.style.removeProperty('outline');
  57             element.style.removeProperty('outlineOffset');
  58         };
  59         element.addEventListener('transitionend', listener);
  60     }, 1000);
  61 }
  62
  63 /**
  64  * Escape any HTML in the given 'unsafe' string.
  65  * Take from https://stackoverflow.com/a/6234804.
  66  */
  67 export function escapeHtml(unsafe: string): string {
  68     return unsafe
  69         .replace(/&/g, '&amp;')
  70         .replace(/</g, '&lt;')
  71         .replace(/>/g, '&gt;')
  72         .replace(/"/g, '&quot;')
  73         .replace(/'/g, '&#039;');
  74 }
  75
  76 /**
  77  * Generate a random unique ID.
  78  */
  79 export function uniqueId(): string {
  80     // eslint-disable-next-line no-bitwise
  81     const S4 = () => (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
  82     return (`${S4() + S4()}-${S4()}-${S4()}-${S4()}-${S4()}${S4()}${S4()}`);
  83 }
  84
  85 /**
  86  * Generate a random smaller unique ID.
  87  */
  88 export function uniqueIdSmall(): string {
  89     // eslint-disable-next-line no-bitwise
  90     const S4 = () => (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
  91     return S4();
  92 }
  93
  94 /**
  95  * Create a promise that resolves after the given time.
  96  */
  97 export function wait(timeMs: number): Promise<any> {
  98     return new Promise(res => {
  99         setTimeout(res, timeMs);
 100     });
 101 }