12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667 |
- import watchSizeForBrowsersOtherThanIE9 from 'watch-size'
- import { removeFromArray } from './removeFromArray'
- let intervalId
- const registered = []
- const INTERVAL_DURATION = 100
- function run() {
- intervalId = setInterval(() => {
- registered.forEach(test)
- }, INTERVAL_DURATION)
- }
- function stop() {
- clearInterval(intervalId)
- intervalId = null
- }
- function test(item) {
- const { $el, listener, lastWidth, lastHeight } = item
- const width = $el.offsetWidth
- const height = $el.offsetHeight
- if (lastWidth !== width || lastHeight !== height) {
- item.lastWidth = width
- item.lastHeight = height
- listener({ width, height })
- }
- }
- function watchSizeForIE9($el, listener) {
- const item = {
- $el,
- listener,
- lastWidth: null,
- lastHeight: null,
- }
- const unwatch = () => {
- removeFromArray(registered, item)
- if (!registered.length) stop()
- }
- registered.push(item)
- // The original watch-size will call the listener on initialization.
- // Keep the same behavior here.
- test(item)
- run()
- return unwatch
- }
- export function watchSize($el, listener) {
- // See: https://stackoverflow.com/a/31293352
- const isIE9 = document.documentMode === 9
- // watch-size will call the listener on initialization.
- // Disable this behavior with a lock to achieve a clearer code logic.
- let locked = true
- const wrappedListener = (...args) => locked || listener(...args)
- const implementation = isIE9
- ? watchSizeForIE9
- : watchSizeForBrowsersOtherThanIE9
- const removeSizeWatcher = implementation($el, wrappedListener)
- locked = false // unlock after initialization
- return removeSizeWatcher
- }
|