Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@juggle/resize-observer

Package Overview
Dependencies
Maintainers
1
Versions
63
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@juggle/resize-observer - npm Package Compare versions

Comparing version 0.2.0 to 0.3.0

1

lib/DOMInteractions.d.ts
declare type StandardCallback = () => any;
export default class DOMInteractions {
static watch(callback: StandardCallback): void;
static notify(): void;
}
export {};

44

lib/DOMInteractions.js
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);
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc