ResizeObserver polyfill

For ancient browsers

Verzia zo dňa 07.11.2021. Pozri najnovšiu verziu.

Tento skript by nemal byť nainštalovaný priamo. Je to knižnica pre ďalšie skripty, ktorú by mali používať cez meta príkaz // @require https://update.greasyfork.org/scripts/435127/986124/ResizeObserver%20polyfill.js

Spýtať sa otázku, uverejniť recenziu, alebo nahlásiť skript.

Zalomiť riadky

class ResizeObserver {
  constructor(callback) {
    this.observables = [];
      // Array of observed elements that looks like this:
      // [{
      //   el: domNode,
      //   size: {height: x, width: y}
      // }]
    this.boundCheck = this.check.bind(this);
    this.boundCheck();
    this.callback = callback;
  }
  
  observe(el) {
    if (this.observables.some((observable) => observable.el === el)) {
      return;
    }
    const newObservable = {
      el: el,
      size: {
        height: el.clientHeight,
        width: el.clientWidth
      }
    }
    this.observables.push(newObservable);
  }
  
  unobserve(el) {
    this.observables = this.observables.filter((obj) => obj.el !== el);
  }
  
  disconnect() {
    this.observables = [];
  }
  
  check() {
    const changedEntries = this.observables.filter((obj) => {
      const currentHeight = obj.el.clientHeight;
      const currentWidth = obj.el.clientWidth;
      if (obj.size.height !== currentHeight || obj.size.width !== currentWidth) {
        obj.size.height = currentHeight;
        obj.size.width = currentWidth;
        return true;
      }
    }).map((obj) => obj.el);
    if (changedEntries.length > 0) {
      this.callback(changedEntries);
    }
    window.requestAnimationFrame(this.boundCheck);
  }
}