Element observe

A portable way to observe elements

by Julien Etienne

HTML

<div id="big">

</div>

CSS

.box {
  width: 1px;
  height: 1px;
  position: relative;
  float: left;
  background: red;
}

#big {
  width: 100%;
  height: 100%;
  position: absolute;
  background: yellow;
}

JavaScript

const big = document.querySelector('#big');



const observePartial = () => {
  const config = {
    attributes: true,
    childList: true,
    characterData: true
  };
  let promiseResolve;
  let mutationObserver;
  let observerCallback;
  let once = true;
  const recorder = (mutationsList, observer) => {
    const params = {
      mutationsList,
      observer,
      element: observerElement
    };
    const resolve = (resolveParams) => {
      promiseResolve(resolveParams);
      mutationObserver.disconnect();
    }

    if (typeof observerCallback === 'function') {
      observerCallback(resolve, params);
    } else {
      resolve(params);
    }
  }

  return (element, callback) => {
    const isElement = element instanceof Element;

    if (!isElement) {
      console.error(`observe: ${element} is not an element`)
    }


    // First time the function is ran it sets up the mutation observer
    return new Promise(function(resolve, promiseReject) {
      if (once) {
        once = false;
        mutationObserver = new MutationObserver(recorder);
      }
      observerCallback = callback;
      promiseResolve = resolve;
      observerElement = element;
      mutationObserver.observe(element, config);
    });
  }
}




document.addEventListener('mousedown', (e) => {
  for (let i = 0; i < 2000; i++) {
    console.log('yo')
    const box = document.createElement('div');
    box.className = 'box';
    box.textContet = 'Box';
    big.appendChild(box);
  }
});


const test1 = (resolve,{mutationsList}) => setTimeout(() => {
  resolve(mutationsList);
  console.log('done')
}, 5000);


const observe = observePartial();

/* observe(document.body.firstElementChild, test1)
  .then((a, b) => {
    console.log('A B', a, b)
    observe(document.body.firstElementChild, test1)
  }) */

const testFunc = async ()=>{
    const result = await observe(document.body.firstElementChild, test1);
    console.log('result',result)
    await observe(document.body.firstElementChild,...