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 listenerElement
  29  * @param callback
  30  */
  31 export function onSelect(listenerElement, callback) {
  32     listenerElement.addEventListener('click', callback);
  33     listenerElement.addEventListener('keydown', (event) => {
  34         if (event.key === 'Enter' || event.key === ' ') {
  35             event.preventDefault();
  36             callback(event);
  37         }
  38     });
  39 }
  40
  41 /**
  42  * Set a listener on an element for an event emitted by a child
  43  * matching the given childSelector param.
  44  * Used in a similar fashion to jQuery's $('listener').on('eventName', 'childSelector', callback)
  45  * @param {Element} listenerElement
  46  * @param {String} childSelector
  47  * @param {String} eventName
  48  * @param {Function} callback
  49  */
  50 export function onChildEvent(listenerElement, childSelector, eventName, callback) {
  51     listenerElement.addEventListener(eventName, function(event) {
  52         const matchingChild = event.target.closest(childSelector);
  53         if (matchingChild) {
  54             callback.call(matchingChild, event, matchingChild);
  55         }
  56     });
  57 }
  58
  59 /**
  60  * Look for elements that match the given selector and contain the given text.
  61  * Is case insensitive and returns the first result or null if nothing is found.
  62  * @param {String} selector
  63  * @param {String} text
  64  * @returns {Element}
  65  */
  66 export function findText(selector, text) {
  67     const elements = document.querySelectorAll(selector);
  68     text = text.toLowerCase();
  69     for (let element of elements) {
  70         if (element.textContent.toLowerCase().includes(text)) {
  71             return element;
  72         }
  73     }
  74     return null;
  75 }