class/DomResize.js

import { Event } from './Event'

/**
 * @description 节点大小监测。
 * @example
 * // 使用
 * let event = new DomResize(document.querySelector('#contianer'))
 * event.on('dom-resize', callback)
 */

export class DomResize extends Event {
  width = 20000
  oldWidth = 0
  newWidth = 0
  oldHeight = 0
  newHeight = 0
  supportsPassive = false
  constructor (el) {
    super()
    this.el = el
    this._init()
  }
  _init () {
    this.oldWidth = parseFloat(window.getComputedStyle(this.el).width)
    this.oldHeight = parseFloat(window.getComputedStyle(this.el).height)
    this.setSupportsPassive()
    this.createNode()
  }

  createNode () {
    // 监听变大的DOM
    const holderBig = document.createElement('div')

    holderBig.style =
      'position: absolute;top:0;left: 0;bottom: 0;right: 0;overflow: hidden;visibility: hidden;z-index:-1'
    holderBig.innerHTML = `<div style="width:${this.width}px;height:${this.width}px"></div>`

    // 监听变小的DOM
    const holderSmall = document.createElement('div')

    holderSmall.style =
      'position: absolute;top:0;left: 0;bottom: 0;right: 0;overflow: hidden;visibility: hidden;z-index:-1'
    holderSmall.innerHTML = '<div style="width:300%;height:300%"></div>'

    this.holderBig = holderBig
    this.holderSmall = holderSmall
    this.el.appendChild(holderBig)
    this.el.appendChild(holderSmall)

    holderSmall.scrollTop = this.width
    holderSmall.scrollLeft = this.width
    holderBig.scrollTop = this.width
    holderBig.scrollLeft = this.width

    holderBig.addEventListener(
      'scroll',
      this.scroll,
      this.supportsPassive
        ? {
          passive: true
        }
        : false,
      false
    )
    holderSmall.addEventListener(
      'scroll',
      this.scroll,
      this.supportsPassive
        ? {
          passive: true
        }
        : false,
      false
    )
  }

  scroll = () => {
    this.newWidth = parseFloat(window.getComputedStyle(this.el).width)
    this.newHeight = parseFloat(window.getComputedStyle(this.el).height)
    // 只有两次width不同时才分发事件，不然会多次分发
    if (this.oldWidth !== this.newWidth || this.oldHeight !== this.newHeight) {
      this.emit('dom-resize')
      this.oldWidth = this.newWidth
      this.oldHeight = this.newHeight
    }
    // 每次触发滚动事件后，重新将滚动条设至尽头
    this.holderSmall.scrollTop = this.holderBig.scrollTop = this.width
    this.holderSmall.scrollLeft = this.holderBig.scrollLeft = this.width
  }

  setSupportsPassive () {
    try {
      const opts = Object.defineProperty({}, 'passive', {
        get: () => {
          this.supportsPassive = true
          return true
        }
      })

      window.addEventListener('testPassive', null, opts)
      window.removeEventListener('testPassive', null, opts)
    } catch (e) {
      console.error(e)
    }
  }

  destroy () {
    this.holderBig.removeEventListener('scroll', this.scroll)
    this.holderSmall.removeEventListener('scroll', this.scroll)
    this.el.removeChild(this.holderBig)
    this.el.removeChild(this.holderSmall)
  }
}