@juggle/resize-observer
Advanced tools
Comparing version 0.2.0 to 0.3.0
declare type StandardCallback = () => any; | ||
export default class DOMInteractions { | ||
static watch(callback: StandardCallback): void; | ||
static notify(): void; | ||
} | ||
export {}; |
const watchers = []; | ||
let frameId; | ||
let extraFrames = 0; | ||
const notify = () => { | ||
cancelAnimationFrame(frameId); | ||
frameId = requestAnimationFrame(() => { | ||
if (dispatch()) { | ||
extraFrames = 0; | ||
notify(); | ||
} | ||
else if (extraFrames < 60) { | ||
extraFrames += 1; | ||
notify(); | ||
} | ||
}); | ||
}; | ||
const dispatch = () => { | ||
@@ -24,21 +9,18 @@ watchers.forEach((watcher) => watcher()); | ||
} | ||
static notify() { | ||
notify(); | ||
} | ||
} | ||
document.addEventListener('keyup', notify, true); | ||
document.addEventListener('keydown', notify, true); | ||
document.addEventListener('mouseup', notify, true); | ||
document.addEventListener('mousedown', notify, true); | ||
document.addEventListener('mouseover', notify, true); | ||
document.addEventListener('blur', notify, true); | ||
document.addEventListener('focus', notify, true); | ||
document.addEventListener('transitionend', notify, true); | ||
document.addEventListener('animationend', notify, true); | ||
document.addEventListener('animationstart', notify, true); | ||
document.addEventListener('animationiteration', notify, true); | ||
window.addEventListener('resize', notify); | ||
document.addEventListener('keyup', dispatch, true); | ||
document.addEventListener('keydown', dispatch, true); | ||
document.addEventListener('mouseup', dispatch, true); | ||
document.addEventListener('mousedown', dispatch, true); | ||
document.addEventListener('mouseover', dispatch, true); | ||
document.addEventListener('blur', dispatch, true); | ||
document.addEventListener('focus', dispatch, true); | ||
document.addEventListener('transitionend', dispatch, true); | ||
document.addEventListener('animationend', dispatch, true); | ||
document.addEventListener('animationstart', dispatch, true); | ||
document.addEventListener('animationiteration', dispatch, true); | ||
window.addEventListener('resize', dispatch); | ||
if ('MutationObserver' in window) { | ||
const observerConfig = { attributes: true, characterData: true, childList: true, subtree: true }; | ||
new MutationObserver(notify).observe(document.body, observerConfig); | ||
new MutationObserver(dispatch).observe(document.body, observerConfig); | ||
} |
@@ -41,3 +41,3 @@ import ResizeObservation from './ResizeObservation'; | ||
detail.observationTargets.push(new ResizeObservation(target)); | ||
DOMInteractions.notify(); | ||
notify(); | ||
} | ||
@@ -64,2 +64,17 @@ } | ||
} | ||
let frameId; | ||
let extraFrames = 0; | ||
const notify = () => { | ||
cancelAnimationFrame(frameId); | ||
frameId = requestAnimationFrame(() => { | ||
if (dispatch()) { | ||
extraFrames = 0; | ||
notify(); | ||
} | ||
else if (extraFrames < 60) { | ||
extraFrames += 1; | ||
notify(); | ||
} | ||
}); | ||
}; | ||
const dispatch = () => { | ||
@@ -81,2 +96,2 @@ let count = 0; | ||
}; | ||
DOMInteractions.watch(dispatch); | ||
DOMInteractions.watch(notify); |
{ | ||
"name": "@juggle/resize-observer", | ||
"version": "0.2.0", | ||
"version": "0.3.0", | ||
"description": "ResizeObserver - Based on the official draft specification", | ||
@@ -5,0 +5,0 @@ "main": "./lib/ResizeObserver.js", |
type StandardCallback = () => any; | ||
const watchers: StandardCallback[] = []; | ||
let frameId: number; | ||
let extraFrames = 0; | ||
const notify = () => { | ||
cancelAnimationFrame(frameId); | ||
frameId = requestAnimationFrame(() => { | ||
if (dispatch()) { | ||
extraFrames = 0; | ||
notify(); | ||
} | ||
else if (extraFrames < 60) { | ||
extraFrames += 1; | ||
notify(); | ||
} | ||
}); | ||
} | ||
const dispatch: StandardCallback = () => { | ||
@@ -28,24 +12,21 @@ watchers.forEach((watcher: StandardCallback) => watcher()); | ||
} | ||
public static notify () { | ||
notify(); | ||
} | ||
} | ||
// Listen to interaction | ||
document.addEventListener('keyup', notify, true); | ||
document.addEventListener('keydown', notify, true); | ||
document.addEventListener('mouseup', notify, true); | ||
document.addEventListener('mousedown', notify, true); | ||
document.addEventListener('mouseover', notify, true); | ||
document.addEventListener('blur', notify, true); | ||
document.addEventListener('focus', notify, true); | ||
document.addEventListener('keyup', dispatch, true); | ||
document.addEventListener('keydown', dispatch, true); | ||
document.addEventListener('mouseup', dispatch, true); | ||
document.addEventListener('mousedown', dispatch, true); | ||
document.addEventListener('mouseover', dispatch, true); | ||
document.addEventListener('blur', dispatch, true); | ||
document.addEventListener('focus', dispatch, true); | ||
// Listen to transitions and animations | ||
document.addEventListener('transitionend', notify, true); | ||
document.addEventListener('animationend', notify, true); | ||
document.addEventListener('animationstart', notify, true); | ||
document.addEventListener('animationiteration', notify, true); | ||
document.addEventListener('transitionend', dispatch, true); | ||
document.addEventListener('animationend', dispatch, true); | ||
document.addEventListener('animationstart', dispatch, true); | ||
document.addEventListener('animationiteration', dispatch, true); | ||
// Listen for window resize | ||
window.addEventListener('resize', notify); | ||
window.addEventListener('resize', dispatch); | ||
@@ -55,3 +36,3 @@ // Listen for any other DOM changes which could affect sizes | ||
const observerConfig = { attributes: true, characterData: true, childList: true, subtree: true }; | ||
new MutationObserver(notify).observe(document.body, observerConfig); | ||
new MutationObserver(dispatch).observe(document.body, observerConfig); | ||
} |
@@ -51,3 +51,3 @@ import ResizeObserver from './ResizeObserver'; | ||
detail.observationTargets.push(new ResizeObservation(target)); | ||
DOMInteractions.notify(); // Notify new observation | ||
notify(); // Notify new observation | ||
} | ||
@@ -75,2 +75,18 @@ } | ||
let frameId: number; | ||
let extraFrames = 0; | ||
const notify = () => { | ||
cancelAnimationFrame(frameId); | ||
frameId = requestAnimationFrame(() => { | ||
if (dispatch()) { | ||
extraFrames = 0; | ||
notify(); | ||
} | ||
else if (extraFrames < 60) { | ||
extraFrames += 1; | ||
notify(); | ||
} | ||
}); | ||
} | ||
const dispatch = () => { | ||
@@ -93,2 +109,2 @@ let count = 0; | ||
DOMInteractions.watch(dispatch); | ||
DOMInteractions.watch(notify); |
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
20503
466