☰

ResizeObserver polyfill

For ancient browsers

目前為 2021-11-07 提交的版本，檢視 最新版本。

此腳本不應該直接安裝，它是一個供其他腳本使用的函式庫。欲使用本函式庫，請在腳本 metadata 寫上： // @require https://update.cn-greasyfork.org/scripts/435127/986121/ResizeObserver%20polyfill.js 

  1. class ResizeObserver {
  2.   constructor(callback) {
  3.     this.observables = [];
  4.       // Array of observed elements that looks like this:
  5.       // [{
  6.       //   el: domNode,
  7.       //   size: {height: x, width: y}
  8.       // }]
  9.     this.boundCheck = this.check.bind(this);
  10.     this.boundCheck();
  11.     this.callback = callback;
  12.   }
  13.   
  14.   observe(el) {
  15.     if (this.observables.some((observable) => observable.el === el)) {
  16.       return;
  17.     }
  18.     const newObservable = {
  19.       el: el,
  20.       size: {
  21.         height: el.clientHeight,
  22.         width: el.clientWidth
  23.       }
  24.     }
  25.     this.observables.push(newObservable);
  26.   }
  27.   
  28.   unobserve(el) {
  29.     this.observables = this.observables.filter((obj) => obj.el !== el);
  30.   }
  31.   
  32.   disconnect() {
  33.     this.observables = [];
  34.   }
  35.   
  36.   check() {
  37.     const changedEntries = this.observables.filter((obj) => {
  38.       const currentHeight = obj.el.clientHeight;
  39.       const currentWidth = obj.el.clientWidth;
  40.       if (obj.size.height !== currentHeight || obj.size.width !== currentWidth) {
  41.         obj.size.height = currentHeight;
  42.         obj.size.width = currentWidth;
  43.         return true;
  44.       }
  45.     }).map((obj) => obj.el);
  46.     if (changedEntries.length > 0) {
  47.       this.callback(changedEntries);
  48.     }
  49.     window.requestAnimationFrame(this.boundCheck);
  50.   }
  51. }
  52.  
  53. const fooDiv = document.getElementById('foo');
  54. const barDiv = document.getElementById('bar');
  55.  
  56. const resizeObserver = new ResizeObserver((entries) => {
  57.   entries.forEach((entry) => {
  58.     const colors = ['#FFDAE9', '#F9FFEF', '#B5FFE1', '#CBE896', '#ACECF7', '#F2BB05'];
  59.     entry.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
  60.   });
  61. });
  62.  
  63. resizeObserver.observe(fooDiv);
  64.  
  65. resizeObserver.observe(barDiv);