/**
* Helper to run an action when an element is selected.
* A "select" is made to be accessible, So can be a click, space-press or enter-press.
- * @param listenerElement
- * @param callback
+ * @param {HTMLElement|Array} elements
+ * @param {function} callback
*/
-export function onSelect(listenerElement, callback) {
- listenerElement.addEventListener('click', callback);
- listenerElement.addEventListener('keydown', (event) => {
- if (event.key === 'Enter' || event.key === ' ') {
- event.preventDefault();
+export function onSelect(elements, callback) {
+ if (!Array.isArray(elements)) {
+ elements = [elements];
+ }
+
+ for (const listenerElement of elements) {
+ listenerElement.addEventListener('click', callback);
+ listenerElement.addEventListener('keydown', (event) => {
+ if (event.key === 'Enter' || event.key === ' ') {
+ event.preventDefault();
+ callback(event);
+ }
+ });
+ }
+}
+
+/**
+ * Listen to enter press on the given element(s).
+ * @param {HTMLElement|Array} elements
+ * @param {function} callback
+ */
+export function onEnterPress(elements, callback) {
+ if (!Array.isArray(elements)) {
+ elements = [elements];
+ }
+
+ const listener = event => {
+ if (event.key === 'Enter') {
callback(event);
}
- });
+ }
+
+ elements.forEach(e => e.addEventListener('keypress', listener));
}
/**
}
}
return null;
+}
+
+/**
+ * Show a loading indicator in the given element.
+ * This will effectively clear the element.
+ * @param {Element} element
+ */
+export function showLoading(element) {
+ element.innerHTML = `<div class="loading-container"><div></div><div></div><div></div></div>`;
+}
+
+/**
+ * Remove any loading indicators within the given element.
+ * @param {Element} element
+ */
+export function removeLoading(element) {
+ const loadingEls = element.querySelectorAll('.loading-container');
+ for (const el of loadingEls) {
+ el.remove();
+ }
}
\ No newline at end of file