2019-06-07 12:46:19 -04:00
|
|
|
/**
|
|
|
|
* 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
|
|
|
|
* N milliseconds. If `immediate` is passed, trigger the function on the
|
|
|
|
* leading edge, instead of the trailing.
|
|
|
|
* @attribution https://davidwalsh.name/javascript-debounce-function
|
2022-11-20 17:20:31 -05:00
|
|
|
* @param {Function} func
|
2023-08-23 14:02:23 -04:00
|
|
|
* @param {Number} waitMs
|
2022-11-20 17:20:31 -05:00
|
|
|
* @param {Boolean} immediate
|
2019-06-07 12:46:19 -04:00
|
|
|
* @returns {Function}
|
|
|
|
*/
|
2023-08-23 14:02:23 -04:00
|
|
|
export function debounce(func, waitMs, immediate) {
|
2019-06-07 12:46:19 -04:00
|
|
|
let timeout;
|
2023-04-19 05:46:13 -04:00
|
|
|
return function debouncedWrapper(...args) {
|
|
|
|
const context = this;
|
|
|
|
const later = function debouncedTimeout() {
|
2019-06-07 12:46:19 -04:00
|
|
|
timeout = null;
|
|
|
|
if (!immediate) func.apply(context, args);
|
|
|
|
};
|
|
|
|
const callNow = immediate && !timeout;
|
|
|
|
clearTimeout(timeout);
|
2023-08-23 14:02:23 -04:00
|
|
|
timeout = setTimeout(later, waitMs);
|
2019-06-07 12:46:19 -04:00
|
|
|
if (callNow) func.apply(context, args);
|
|
|
|
};
|
2023-04-18 17:20:02 -04:00
|
|
|
}
|
2019-06-07 19:02:51 -04:00
|
|
|
|
|
|
|
/**
|
|
|
|
* Scroll and highlight an element.
|
|
|
|
* @param {HTMLElement} element
|
|
|
|
*/
|
|
|
|
export function scrollAndHighlightElement(element) {
|
|
|
|
if (!element) return;
|
|
|
|
element.scrollIntoView({behavior: 'smooth'});
|
|
|
|
|
2023-01-28 12:11:15 -05:00
|
|
|
const color = getComputedStyle(document.body).getPropertyValue('--color-primary-light');
|
2019-06-07 19:02:51 -04:00
|
|
|
const initColor = window.getComputedStyle(element).getPropertyValue('background-color');
|
|
|
|
element.style.backgroundColor = color;
|
|
|
|
setTimeout(() => {
|
|
|
|
element.classList.add('selectFade');
|
|
|
|
element.style.backgroundColor = initColor;
|
|
|
|
}, 10);
|
|
|
|
setTimeout(() => {
|
|
|
|
element.classList.remove('selectFade');
|
|
|
|
element.style.backgroundColor = '';
|
|
|
|
}, 3000);
|
2020-06-28 18:15:05 -04:00
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Escape any HTML in the given 'unsafe' string.
|
|
|
|
* Take from https://stackoverflow.com/a/6234804.
|
|
|
|
* @param {String} unsafe
|
|
|
|
* @returns {string}
|
|
|
|
*/
|
|
|
|
export function escapeHtml(unsafe) {
|
|
|
|
return unsafe
|
2023-04-18 17:20:02 -04:00
|
|
|
.replace(/&/g, '&')
|
|
|
|
.replace(/</g, '<')
|
|
|
|
.replace(/>/g, '>')
|
|
|
|
.replace(/"/g, '"')
|
|
|
|
.replace(/'/g, ''');
|
2020-06-29 17:11:03 -04:00
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Generate a random unique ID.
|
|
|
|
*
|
|
|
|
* @returns {string}
|
|
|
|
*/
|
|
|
|
export function uniqueId() {
|
2023-04-19 05:46:13 -04:00
|
|
|
// eslint-disable-next-line no-bitwise
|
2023-04-18 17:20:02 -04:00
|
|
|
const S4 = () => (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
|
|
|
|
return (`${S4() + S4()}-${S4()}-${S4()}-${S4()}-${S4()}${S4()}${S4()}`);
|
|
|
|
}
|
2023-08-22 14:30:39 -04:00
|
|
|
|
|
|
|
/**
|
|
|
|
* 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);
|
|
|
|
});
|
|
|
|
}
|