Forked from sidneys/library.on-element-ready.js
Last active
January 30, 2020 00:43
-
-
Save d0x7/983e145e1d77e5a5f79410b912cc3236 to your computer and use it in GitHub Desktop.
UserScript | Library | onElementReady ES6
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // ==UserScript== | |
| // @name Library | onElementReady ES6 | |
| // @namespace de.sidneys.userscripts | |
| // @homepage https://gist.githubusercontent.com/sidneys/ee7a6b80315148ad1fb6847e72a22313/raw/ | |
| // @version 0.7.0 | |
| // @description Detect any new DOM Element by its CSS Selector, then trigger a function. Includes Promise- & Callback interface. Based on ES6 MutationObserver. Ships legacy waitForKeyElements interface, too. | |
| // @author sidneys | |
| // @icon https://i.imgur.com/nmbtzlX.png | |
| // @include *://*/* | |
| // ==/UserScript== | |
| /** | |
| * ESLint | |
| * @exports | |
| */ | |
| /* exported onElementReady */ | |
| /* exported waitForKeyElements */ | |
| const queriedAttributeName = 'was-queried' | |
| /** | |
| * @private | |
| * | |
| * Query for new DOM nodes matching a specified selector. | |
| * | |
| * @param {String} selector - CSS Selector | |
| * @param {function=} callback - Callback | |
| */ | |
| let queryForElements = (selector, rememberQueried, callback) => { | |
| // console.debug('queryForElements', 'selector:', selector) | |
| // Search for elements by selector | |
| let elementList = document.querySelectorAll(selector) || [] | |
| elementList.forEach((element) => { | |
| // Remember already-found elements via this attribute | |
| if(rememberQueried) { | |
| if (element.hasAttribute(queriedAttributeName)) { return } | |
| element.setAttribute(queriedAttributeName, 'true') | |
| } | |
| callback(element) | |
| }) | |
| } | |
| /** | |
| * @public | |
| * | |
| * Wait for Elements with a given CSS selector to enter the DOM. | |
| * Returns a Promise resolving with new Elements, and triggers a callback for every Element. | |
| * | |
| * @param {String} selector - CSS Selector | |
| * @param {Boolean=} findOnce - Stop querying after first successful pass | |
| * @param {function=} callback - Callback with Element | |
| * @returns {Promise<Element>} - Resolves with Element | |
| */ | |
| let onElementReady = (selector, findOnce = false, rememberQueried = true, callback = () => {}) => { | |
| // console.debug('onElementReady', 'findOnce:', findOnce) | |
| return new Promise((resolve) => { | |
| // Initial Query | |
| queryForElements(selector, rememberQueried, (element) => { | |
| resolve(element) | |
| callback(element) | |
| }) | |
| // Continuous Query | |
| const observer = new MutationObserver(() => { | |
| // DOM Changes detected | |
| queryForElements(selector, rememberQueried, (element) => { | |
| resolve(element) | |
| callback(element) | |
| }) | |
| if (findOnce) { observer.disconnect() } | |
| }) | |
| // Observe DOM Changes | |
| observer.observe(document.documentElement, { | |
| attributes: false, | |
| childList: true, | |
| subtree: true | |
| }) | |
| }) | |
| } | |
| /** | |
| * @public | |
| * @deprecated | |
| * | |
| * waitForKeyElements Polyfill | |
| * | |
| * @param {String} selector - CSS selector of elements to search / monitor ('.comment') | |
| * @param {function} callback - Callback executed on element detection (called with element as argument) | |
| * @param {Boolean=} findOnce - Stop lookup after the last currently available element has been found | |
| * @returns {Promise<Element>} - Element | |
| */ | |
| let waitForKeyElements = (selector, callback, findOnce) => onElementReady(selector, findOnce, callback) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment