BookStack Code Mirror - bookstack/blob - resources/js/services/dom.js

   1 /**
   2  * Run the given callback against each element that matches the given selector.
   3  * @param {String} selector
   4  * @param {Function<Element>} callback
   5  */
   6 export function forEach(selector, callback) {
   7     const elements = document.querySelectorAll(selector);
   8     for (let element of elements) {
   9         callback(element);
  10     }
  11 }
  12
  13 /**
  14  * Helper to listen to multiple DOM events
  15  * @param {Element} listenerElement
  16  * @param {Array<String>} events
  17  * @param {Function<Event>} callback
  18  */
  19 export function onEvents(listenerElement, events, callback) {
  20     for (let eventName of events) {
  21         listenerElement.addEventListener(eventName, callback);
  22     }
  23 }
  24
  25 /**
  26  * Helper to run an action when an element is selected.
  27  * A "select" is made to be accessible, So can be a click, space-press or enter-press.
  28  * @param {HTMLElement|Array} elements
  29  * @param {function} callback
  30  */
  31 export function onSelect(elements, callback) {
  32     if (!Array.isArray(elements)) {
  33         elements = [elements];
  34     }
  35
  36     for (const listenerElement of elements) {
  37         listenerElement.addEventListener('click', callback);
  38         listenerElement.addEventListener('keydown', (event) => {
  39             if (event.key === 'Enter' || event.key === ' ') {
  40                 event.preventDefault();
  41                 callback(event);
  42             }
  43         });
  44     }
  45 }
  46
  47 /**
  48  * Listen to enter press on the given element(s).
  49  * @param {HTMLElement|Array} elements
  50  * @param {function} callback
  51  */
  52 export function onEnterPress(elements, callback) {
  53     if (!Array.isArray(elements)) {
  54         elements = [elements];
  55     }
  56 }
  57
  58 /**
  59  * Set a listener on an element for an event emitted by a child
  60  * matching the given childSelector param.
  61  * Used in a similar fashion to jQuery's $('listener').on('eventName', 'childSelector', callback)
  62  * @param {Element} listenerElement
  63  * @param {String} childSelector
  64  * @param {String} eventName
  65  * @param {Function} callback
  66  */
  67 export function onChildEvent(listenerElement, childSelector, eventName, callback) {
  68     listenerElement.addEventListener(eventName, function(event) {
  69         const matchingChild = event.target.closest(childSelector);
  70         if (matchingChild) {
  71             callback.call(matchingChild, event, matchingChild);
  72         }
  73     });
  74 }
  75
  76 /**
  77  * Look for elements that match the given selector and contain the given text.
  78  * Is case insensitive and returns the first result or null if nothing is found.
  79  * @param {String} selector
  80  * @param {String} text
  81  * @returns {Element}
  82  */
  83 export function findText(selector, text) {
  84     const elements = document.querySelectorAll(selector);
  85     text = text.toLowerCase();
  86     for (let element of elements) {
  87         if (element.textContent.toLowerCase().includes(text)) {
  88             return element;
  89         }
  90     }
  91     return null;
  92 }