psyrendust/elementChange.js

## elementChange.js
/**
 * @typedef  MutationCallback
 * @param  {NodeList}  addedNodes    A NodeList of elements that have been added to the DOM.
 * @param  {NodeList}  removedNodes  A NodeList of elements that have been removed from the DOM.
 */
/**
 * Add a MutationObserver to a DOM node.
 *
 * @example
 *
 * <!DOCTYPE html>
 * <html>
 * <body>
 *   <div id="container"></div>
 *   <script>
 *   var container = document.querySelector('#container');
 *   // add listener
 *   var removeElementChange = addElementChange(container, function changeHappened(addedNodes, removedNodes) {
 *     if (addedNodes.length) {
 *       // something was added
 *     }
 *     if (removedNodes.length) {
 *       // something was removed
 *     }
 *     // remove the listener
 *     removeElementChange();
 *   });
 *   </script>
 * </body>
 * </html>
 *
 * @see     https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver
 *
 * @param   {Node}              element   The DOM node to listen to for mutation events.
 * @param   {MutationCallback}  callback  The callback function to fire after a mutation occurs.
 * @return  {Function}          A function to call to remove the MutationObserver
 */
;(function IIFE(scope) {
  var MutationObserver = scope.MutationObserver || scope.WebKitMutationObserver,
  function addElementChange(element, callback) {
    if (MutationObserver) {
      // IE 11+, no Android support
      var observer = new MutationObserver(function mutationObserver(mutations, observer) {
        if (mutations[0].addedNodes.length || mutations[0].removedNodes.length) {
          callback(mutations[0].addedNodes, mutations[0].removedNodes);
        }
      });
      observer.observe(element, {
        childList: true,
        subtree: true
      });
      return function removeElementChange() {
        observer.disconnect();
      };
    }
  }
  scope.addElementChange = addElementChange;
})(window);
	/**
	* @typedef MutationCallback
	* @param {NodeList} addedNodes A NodeList of elements that have been added to the DOM.
	* @param {NodeList} removedNodes A NodeList of elements that have been removed from the DOM.
	*/
	/**
	* Add a MutationObserver to a DOM node.
	*
	* @example
	*
	* <!DOCTYPE html>
	* <html>
	* <body>
	* <div id="container"></div>
	* <script>
	* var container = document.querySelector('#container');
	* // add listener
	* var removeElementChange = addElementChange(container, function changeHappened(addedNodes, removedNodes) {
	* if (addedNodes.length) {
	* // something was added
	* }
	* if (removedNodes.length) {
	* // something was removed
	* }
	* // remove the listener
	* removeElementChange();
	* });
	* </script>
	* </body>
	* </html>
	*
	* @see https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver
	*
	* @param {Node} element The DOM node to listen to for mutation events.
	* @param {MutationCallback} callback The callback function to fire after a mutation occurs.
	* @return {Function} A function to call to remove the MutationObserver
	*/
	;(function IIFE(scope) {
	var MutationObserver = scope.MutationObserver \|\| scope.WebKitMutationObserver,
	function addElementChange(element, callback) {
	if (MutationObserver) {
	// IE 11+, no Android support
	var observer = new MutationObserver(function mutationObserver(mutations, observer) {
	if (mutations[0].addedNodes.length \|\| mutations[0].removedNodes.length) {
	callback(mutations[0].addedNodes, mutations[0].removedNodes);
	}
	});
	observer.observe(element, {
	childList: true,
	subtree: true
	});
	return function removeElementChange() {
	observer.disconnect();
	};
	}
	}
	scope.addElementChange = addElementChange;
	})(window);