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
|
}
|
