Library | onElementReady ES7

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.

Este script no debería instalarse directamente. Es una biblioteca que utilizan otros scripts mediante la meta-directiva de inclusión // @require https://update.greasyfork.org/scripts/374849/1060689/Library%20%7C%20onElementReady%20ES7.js

  1. // ==UserScript==
  2. // @name Library: onElementReady ES7
  3. // @namespace org.sidneys.userscripts
  4. // @homepage https://gist.githubusercontent.com/sidneys/ee7a6b80315148ad1fb6847e72a22313/raw/
  5. // @version 0.8.1
  6. // @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.
  7. // @author sidneys
  8. // @icon https://i.imgur.com/nmbtzlX.png
  9. // @match *://*/*
  10. // ==/UserScript==
  11.  
  12.  
  13. /**
  14. * ESLint
  15. * @exports
  16. */
  17. /* exported onElementReady, waitForKeyElements */
  18.  
  19.  
  20. /**
  21. * @private
  22. *
  23. * Query for new DOM nodes matching a specified selector.
  24. *
  25. * @param {String} selector - CSS Selector
  26. * @param {function=} callback - Callback
  27. */
  28. let queryForElements = (selector, callback) => {
  29. // console.debug('queryForElements', 'selector:', selector)
  30.  
  31. // Remember already-found elements via this attribute
  32. const attributeName = 'was-queried'
  33.  
  34. // Search for elements by selector
  35. let elementList = document.querySelectorAll(selector) || []
  36. elementList.forEach((element) => {
  37. if (element.hasAttribute(attributeName)) { return }
  38. element.setAttribute(attributeName, 'true')
  39. callback(element)
  40. })
  41. }
  42.  
  43. /**
  44. * @public
  45. *
  46. * Wait for Elements with a given CSS selector to enter the DOM.
  47. * Returns a Promise resolving with new Elements, and triggers a callback for every Element.
  48. *
  49. * @param {String} selector - CSS Selector
  50. * @param {Boolean=} findOnce - Stop querying after first successful pass
  51. * @param {function=} callback - Callback with Element
  52. * @returns {Promise<Element>} - Resolves with Element
  53. */
  54. let onElementReady = (selector, findOnce = false, callback = () => {}) => {
  55. // console.debug('onElementReady', 'findOnce:', findOnce)
  56.  
  57. return new Promise((resolve) => {
  58. // Initial Query
  59. queryForElements(selector, (element) => {
  60. resolve(element)
  61. callback(element)
  62. })
  63.  
  64. // Continuous Query
  65. const observer = new MutationObserver(() => {
  66. // DOM Changes detected
  67. queryForElements(selector, (element) => {
  68. resolve(element)
  69. callback(element)
  70. })
  71.  
  72. if (findOnce) { observer.disconnect() }
  73. })
  74.  
  75. // Observe DOM Changes
  76. observer.observe(document.documentElement, {
  77. attributes: false,
  78. childList: true,
  79. subtree: true
  80. })
  81. })
  82. }
  83.  
  84. /**
  85. * @public
  86. * @deprecated
  87. *
  88. * waitForKeyElements Polyfill
  89. *
  90. * @param {String} selector - CSS selector of elements to search / monitor ('.comment')
  91. * @param {function} callback - Callback executed on element detection (called with element as argument)
  92. * @param {Boolean=} findOnce - Stop lookup after the last currently available element has been found
  93. * @returns {Promise<Element>} - Element
  94. */
  95. let waitForKeyElements = (selector, callback, findOnce) => onElementReady(selector, findOnce, callback)