Astro+Directus(Visual-Editing)+Snipcart Test-Stack
This commit is contained in:
+56
@@ -0,0 +1,56 @@
|
||||
<p align="center">
|
||||
<a href="https://reach.tech">
|
||||
<img alt="Reach observeRect" src="./logo.png" width="400">
|
||||
</a>
|
||||
</p>
|
||||
|
||||
<p align="center">
|
||||
Observe the rect of a DOM element.
|
||||
</p>
|
||||
|
||||
<p align="center">
|
||||
<a href="https://www.npmjs.com/package/@reach/observe-rect"><img src="https://img.shields.io/npm/v/@reach/observe-rect.svg?style=flat-square"></a>
|
||||
<a href="https://www.npmjs.com/package/@reach/observe-rect"><img src="https://img.shields.io/npm/dm/@reach/observe-rect.svg?style=flat-square"></a>
|
||||
</p>
|
||||
|
||||
<p align="center">
|
||||
<img src="./demo.gif" alt="Demo"/>
|
||||
</p>
|
||||
|
||||
## Installation
|
||||
|
||||
```
|
||||
npm install @reach/observe-rect
|
||||
# or
|
||||
yarn add @reach/observe-rect
|
||||
```
|
||||
|
||||
## Usage
|
||||
|
||||
```js
|
||||
import observeRect from "@reach/observe-rect";
|
||||
|
||||
let node = document.getElementById("some-node");
|
||||
|
||||
let rectObserver = observeRect(node, rect => {
|
||||
console.log("left", rect.left);
|
||||
console.log("top", rect.top);
|
||||
console.log("height", rect.height);
|
||||
console.log("width", rect.width);
|
||||
});
|
||||
|
||||
// start observing
|
||||
rectObserver.observe();
|
||||
|
||||
// stop observing
|
||||
rectObserver.unobserve();
|
||||
```
|
||||
|
||||
## About
|
||||
|
||||
A lot of things can change the position or size of an element, like scrolling, content reflows and user input. This utility observes and notifies you when your element's rect changes.
|
||||
|
||||
## Legal
|
||||
|
||||
MIT License
|
||||
Copyright (c) 2018-present, Ryan Florence
|
||||
+10
@@ -0,0 +1,10 @@
|
||||
export default function observeRect(node: Element, cb: (rect: DOMRect) => void): {
|
||||
observe(): void;
|
||||
unobserve(): void;
|
||||
};
|
||||
export declare type PartialRect = Partial<DOMRect>;
|
||||
export declare type RectProps = {
|
||||
rect: DOMRect | undefined;
|
||||
hasRectChanged: boolean;
|
||||
callbacks: Function[];
|
||||
};
|
||||
+8
@@ -0,0 +1,8 @@
|
||||
|
||||
'use strict'
|
||||
|
||||
if (process.env.NODE_ENV === 'production') {
|
||||
module.exports = require('./observe-rect.cjs.production.min.js')
|
||||
} else {
|
||||
module.exports = require('./observe-rect.cjs.development.js')
|
||||
}
|
||||
+76
@@ -0,0 +1,76 @@
|
||||
'use strict';
|
||||
|
||||
Object.defineProperty(exports, '__esModule', { value: true });
|
||||
|
||||
var props = ["bottom", "height", "left", "right", "top", "width"];
|
||||
|
||||
var rectChanged = function rectChanged(a, b) {
|
||||
if (a === void 0) {
|
||||
a = {};
|
||||
}
|
||||
|
||||
if (b === void 0) {
|
||||
b = {};
|
||||
}
|
||||
|
||||
return props.some(function (prop) {
|
||||
return a[prop] !== b[prop];
|
||||
});
|
||||
};
|
||||
|
||||
var observedNodes = /*#__PURE__*/new Map();
|
||||
var rafId;
|
||||
|
||||
var run = function run() {
|
||||
var changedStates = [];
|
||||
observedNodes.forEach(function (state, node) {
|
||||
var newRect = node.getBoundingClientRect();
|
||||
|
||||
if (rectChanged(newRect, state.rect)) {
|
||||
state.rect = newRect;
|
||||
changedStates.push(state);
|
||||
}
|
||||
});
|
||||
changedStates.forEach(function (state) {
|
||||
state.callbacks.forEach(function (cb) {
|
||||
return cb(state.rect);
|
||||
});
|
||||
});
|
||||
rafId = window.requestAnimationFrame(run);
|
||||
};
|
||||
|
||||
function observeRect(node, cb) {
|
||||
return {
|
||||
observe: function observe() {
|
||||
var wasEmpty = observedNodes.size === 0;
|
||||
|
||||
if (observedNodes.has(node)) {
|
||||
observedNodes.get(node).callbacks.push(cb);
|
||||
} else {
|
||||
observedNodes.set(node, {
|
||||
rect: undefined,
|
||||
hasRectChanged: false,
|
||||
callbacks: [cb]
|
||||
});
|
||||
}
|
||||
|
||||
if (wasEmpty) run();
|
||||
},
|
||||
unobserve: function unobserve() {
|
||||
var state = observedNodes.get(node);
|
||||
|
||||
if (state) {
|
||||
// Remove the callback
|
||||
var index = state.callbacks.indexOf(cb);
|
||||
if (index >= 0) state.callbacks.splice(index, 1); // Remove the node reference
|
||||
|
||||
if (!state.callbacks.length) observedNodes["delete"](node); // Stop the loop
|
||||
|
||||
if (!observedNodes.size) cancelAnimationFrame(rafId);
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
exports.default = observeRect;
|
||||
//# sourceMappingURL=observe-rect.cjs.development.js.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"observe-rect.cjs.development.js","sources":["../src/index.ts"],"sourcesContent":["let props: (keyof DOMRect)[] = [\n\t\"bottom\",\n\t\"height\",\n\t\"left\",\n\t\"right\",\n\t\"top\",\n\t\"width\",\n];\n\nlet rectChanged = (a: DOMRect = {} as DOMRect, b: DOMRect = {} as DOMRect) =>\n\tprops.some((prop) => a[prop] !== b[prop]);\n\nlet observedNodes = new Map<Element, RectProps>();\nlet rafId: number;\n\nlet run = () => {\n\tconst changedStates: RectProps[] = [];\n\tobservedNodes.forEach((state, node) => {\n\t\tlet newRect = node.getBoundingClientRect();\n\t\tif (rectChanged(newRect, state.rect)) {\n\t\t\tstate.rect = newRect;\n\t\t\tchangedStates.push(state);\n\t\t}\n\t});\n\n\tchangedStates.forEach((state) => {\n\t\tstate.callbacks.forEach((cb) => cb(state.rect));\n\t});\n\n\trafId = window.requestAnimationFrame(run);\n};\n\nexport default function observeRect(\n\tnode: Element,\n\tcb: (rect: DOMRect) => void\n) {\n\treturn {\n\t\tobserve() {\n\t\t\tlet wasEmpty = observedNodes.size === 0;\n\t\t\tif (observedNodes.has(node)) {\n\t\t\t\tobservedNodes.get(node)!.callbacks.push(cb);\n\t\t\t} else {\n\t\t\t\tobservedNodes.set(node, {\n\t\t\t\t\trect: undefined,\n\t\t\t\t\thasRectChanged: false,\n\t\t\t\t\tcallbacks: [cb],\n\t\t\t\t});\n\t\t\t}\n\t\t\tif (wasEmpty) run();\n\t\t},\n\n\t\tunobserve() {\n\t\t\tlet state = observedNodes.get(node);\n\t\t\tif (state) {\n\t\t\t\t// Remove the callback\n\t\t\t\tconst index = state.callbacks.indexOf(cb);\n\t\t\t\tif (index >= 0) state.callbacks.splice(index, 1);\n\n\t\t\t\t// Remove the node reference\n\t\t\t\tif (!state.callbacks.length) observedNodes.delete(node);\n\n\t\t\t\t// Stop the loop\n\t\t\t\tif (!observedNodes.size) cancelAnimationFrame(rafId);\n\t\t\t}\n\t\t},\n\t};\n}\n\nexport type PartialRect = Partial<DOMRect>;\n\nexport type RectProps = {\n\trect: DOMRect | undefined;\n\thasRectChanged: boolean;\n\tcallbacks: Function[];\n};\n"],"names":["props","rectChanged","a","b","some","prop","observedNodes","Map","rafId","run","changedStates","forEach","state","node","newRect","getBoundingClientRect","rect","push","callbacks","cb","window","requestAnimationFrame","observeRect","observe","wasEmpty","size","has","get","set","undefined","hasRectChanged","unobserve","index","indexOf","splice","length","cancelAnimationFrame"],"mappings":";;;;AAAA,IAAIA,KAAK,GAAsB,CAC9B,QAD8B,EAE9B,QAF8B,EAG9B,MAH8B,EAI9B,OAJ8B,EAK9B,KAL8B,EAM9B,OAN8B,CAA/B;;AASA,IAAIC,WAAW,GAAG,SAAdA,WAAc,CAACC,CAAD,EAA6BC,CAA7B;AAAA,MAACD,CAAD;AAACA,IAAAA,CAAD,GAAc,EAAd;AAAA;;AAAA,MAA6BC,CAA7B;AAA6BA,IAAAA,CAA7B,GAA0C,EAA1C;AAAA;;AAAA,SACjBH,KAAK,CAACI,IAAN,CAAW,UAACC,IAAD;AAAA,WAAUH,CAAC,CAACG,IAAD,CAAD,KAAYF,CAAC,CAACE,IAAD,CAAvB;AAAA,GAAX,CADiB;AAAA,CAAlB;;AAGA,IAAIC,aAAa,gBAAG,IAAIC,GAAJ,EAApB;AACA,IAAIC,KAAJ;;AAEA,IAAIC,GAAG,GAAG,SAANA,GAAM;AACT,MAAMC,aAAa,GAAgB,EAAnC;AACAJ,EAAAA,aAAa,CAACK,OAAd,CAAsB,UAACC,KAAD,EAAQC,IAAR;AACrB,QAAIC,OAAO,GAAGD,IAAI,CAACE,qBAAL,EAAd;;AACA,QAAId,WAAW,CAACa,OAAD,EAAUF,KAAK,CAACI,IAAhB,CAAf,EAAsC;AACrCJ,MAAAA,KAAK,CAACI,IAAN,GAAaF,OAAb;AACAJ,MAAAA,aAAa,CAACO,IAAd,CAAmBL,KAAnB;AACA;AACD,GAND;AAQAF,EAAAA,aAAa,CAACC,OAAd,CAAsB,UAACC,KAAD;AACrBA,IAAAA,KAAK,CAACM,SAAN,CAAgBP,OAAhB,CAAwB,UAACQ,EAAD;AAAA,aAAQA,EAAE,CAACP,KAAK,CAACI,IAAP,CAAV;AAAA,KAAxB;AACA,GAFD;AAIAR,EAAAA,KAAK,GAAGY,MAAM,CAACC,qBAAP,CAA6BZ,GAA7B,CAAR;AACA,CAfD;;SAiBwBa,YACvBT,MACAM;AAEA,SAAO;AACNI,IAAAA,OADM;AAEL,UAAIC,QAAQ,GAAGlB,aAAa,CAACmB,IAAd,KAAuB,CAAtC;;AACA,UAAInB,aAAa,CAACoB,GAAd,CAAkBb,IAAlB,CAAJ,EAA6B;AAC5BP,QAAAA,aAAa,CAACqB,GAAd,CAAkBd,IAAlB,EAAyBK,SAAzB,CAAmCD,IAAnC,CAAwCE,EAAxC;AACA,OAFD,MAEO;AACNb,QAAAA,aAAa,CAACsB,GAAd,CAAkBf,IAAlB,EAAwB;AACvBG,UAAAA,IAAI,EAAEa,SADiB;AAEvBC,UAAAA,cAAc,EAAE,KAFO;AAGvBZ,UAAAA,SAAS,EAAE,CAACC,EAAD;AAHY,SAAxB;AAKA;;AACD,UAAIK,QAAJ,EAAcf,GAAG;AACjB,KAbK;AAeNsB,IAAAA,SAfM;AAgBL,UAAInB,KAAK,GAAGN,aAAa,CAACqB,GAAd,CAAkBd,IAAlB,CAAZ;;AACA,UAAID,KAAJ,EAAW;AACV;AACA,YAAMoB,KAAK,GAAGpB,KAAK,CAACM,SAAN,CAAgBe,OAAhB,CAAwBd,EAAxB,CAAd;AACA,YAAIa,KAAK,IAAI,CAAb,EAAgBpB,KAAK,CAACM,SAAN,CAAgBgB,MAAhB,CAAuBF,KAAvB,EAA8B,CAA9B,EAHN;;AAMV,YAAI,CAACpB,KAAK,CAACM,SAAN,CAAgBiB,MAArB,EAA6B7B,aAAa,UAAb,CAAqBO,IAArB,EANnB;;AASV,YAAI,CAACP,aAAa,CAACmB,IAAnB,EAAyBW,oBAAoB,CAAC5B,KAAD,CAApB;AACzB;AACD;AA5BK,GAAP;AA8BA;;;;"}
|
||||
+2
@@ -0,0 +1,2 @@
|
||||
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=["bottom","height","left","right","top","width"],c=new Map;exports.default=function(n,a){return{observe:function(){var r=0===c.size;c.has(n)?c.get(n).callbacks.push(a):c.set(n,{rect:void 0,hasRectChanged:!1,callbacks:[a]}),r&&function n(){var a=[];c.forEach((function(e,c){var n,r,i=c.getBoundingClientRect();void 0===(n=i)&&(n={}),void 0===(r=e.rect)&&(r={}),t.some((function(e){return n[e]!==r[e]}))&&(e.rect=i,a.push(e))})),a.forEach((function(e){e.callbacks.forEach((function(t){return t(e.rect)}))})),e=window.requestAnimationFrame(n)}()},unobserve:function(){var t=c.get(n);if(t){var r=t.callbacks.indexOf(a);r>=0&&t.callbacks.splice(r,1),t.callbacks.length||c.delete(n),c.size||cancelAnimationFrame(e)}}}};
|
||||
//# sourceMappingURL=observe-rect.cjs.production.min.js.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"observe-rect.cjs.production.min.js","sources":["../src/index.ts"],"sourcesContent":["let props: (keyof DOMRect)[] = [\n\t\"bottom\",\n\t\"height\",\n\t\"left\",\n\t\"right\",\n\t\"top\",\n\t\"width\",\n];\n\nlet rectChanged = (a: DOMRect = {} as DOMRect, b: DOMRect = {} as DOMRect) =>\n\tprops.some((prop) => a[prop] !== b[prop]);\n\nlet observedNodes = new Map<Element, RectProps>();\nlet rafId: number;\n\nlet run = () => {\n\tconst changedStates: RectProps[] = [];\n\tobservedNodes.forEach((state, node) => {\n\t\tlet newRect = node.getBoundingClientRect();\n\t\tif (rectChanged(newRect, state.rect)) {\n\t\t\tstate.rect = newRect;\n\t\t\tchangedStates.push(state);\n\t\t}\n\t});\n\n\tchangedStates.forEach((state) => {\n\t\tstate.callbacks.forEach((cb) => cb(state.rect));\n\t});\n\n\trafId = window.requestAnimationFrame(run);\n};\n\nexport default function observeRect(\n\tnode: Element,\n\tcb: (rect: DOMRect) => void\n) {\n\treturn {\n\t\tobserve() {\n\t\t\tlet wasEmpty = observedNodes.size === 0;\n\t\t\tif (observedNodes.has(node)) {\n\t\t\t\tobservedNodes.get(node)!.callbacks.push(cb);\n\t\t\t} else {\n\t\t\t\tobservedNodes.set(node, {\n\t\t\t\t\trect: undefined,\n\t\t\t\t\thasRectChanged: false,\n\t\t\t\t\tcallbacks: [cb],\n\t\t\t\t});\n\t\t\t}\n\t\t\tif (wasEmpty) run();\n\t\t},\n\n\t\tunobserve() {\n\t\t\tlet state = observedNodes.get(node);\n\t\t\tif (state) {\n\t\t\t\t// Remove the callback\n\t\t\t\tconst index = state.callbacks.indexOf(cb);\n\t\t\t\tif (index >= 0) state.callbacks.splice(index, 1);\n\n\t\t\t\t// Remove the node reference\n\t\t\t\tif (!state.callbacks.length) observedNodes.delete(node);\n\n\t\t\t\t// Stop the loop\n\t\t\t\tif (!observedNodes.size) cancelAnimationFrame(rafId);\n\t\t\t}\n\t\t},\n\t};\n}\n\nexport type PartialRect = Partial<DOMRect>;\n\nexport type RectProps = {\n\trect: DOMRect | undefined;\n\thasRectChanged: boolean;\n\tcallbacks: Function[];\n};\n"],"names":["rafId","props","observedNodes","Map","node","cb","observe","wasEmpty","size","has","get","callbacks","push","set","rect","undefined","hasRectChanged","run","changedStates","forEach","state","a","b","newRect","getBoundingClientRect","some","prop","window","requestAnimationFrame","unobserve","index","indexOf","splice","length","cancelAnimationFrame"],"mappings":"oEAAA,IAaIA,EAbAC,EAA2B,CAC9B,SACA,SACA,OACA,QACA,MACA,SAMGC,EAAgB,IAAIC,6BAqBvBC,EACAC,SAEO,CACNC,uBACKC,EAAkC,IAAvBL,EAAcM,KACzBN,EAAcO,IAAIL,GACrBF,EAAcQ,IAAIN,GAAOO,UAAUC,KAAKP,GAExCH,EAAcW,IAAIT,EAAM,CACvBU,UAAMC,EACNC,gBAAgB,EAChBL,UAAW,CAACN,KAGVE,GAjCG,SAANU,QACGC,EAA6B,GACnChB,EAAciB,SAAQ,SAACC,EAAOhB,OARZiB,EAA4BC,EASzCC,EAAUnB,EAAKoB,kCATFH,EAUDE,KAVCF,EAAa,cAAeC,EAUpBF,EAAMN,QAVcQ,EAAa,IAC3DrB,EAAMwB,MAAK,SAACC,UAASL,EAAEK,KAAUJ,EAAEI,QAUjCN,EAAMN,KAAOS,EACbL,EAAcN,KAAKQ,OAIrBF,EAAcC,SAAQ,SAACC,GACtBA,EAAMT,UAAUQ,SAAQ,SAACd,UAAOA,EAAGe,EAAMN,YAG1Cd,EAAQ2B,OAAOC,sBAAsBX,GAmBrBA,IAGfY,yBACKT,EAAQlB,EAAcQ,IAAIN,MAC1BgB,EAAO,KAEJU,EAAQV,EAAMT,UAAUoB,QAAQ1B,GAClCyB,GAAS,GAAGV,EAAMT,UAAUqB,OAAOF,EAAO,GAGzCV,EAAMT,UAAUsB,QAAQ/B,SAAqBE,GAG7CF,EAAcM,MAAM0B,qBAAqBlC"}
|
||||
+72
@@ -0,0 +1,72 @@
|
||||
var props = ["bottom", "height", "left", "right", "top", "width"];
|
||||
|
||||
var rectChanged = function rectChanged(a, b) {
|
||||
if (a === void 0) {
|
||||
a = {};
|
||||
}
|
||||
|
||||
if (b === void 0) {
|
||||
b = {};
|
||||
}
|
||||
|
||||
return props.some(function (prop) {
|
||||
return a[prop] !== b[prop];
|
||||
});
|
||||
};
|
||||
|
||||
var observedNodes = /*#__PURE__*/new Map();
|
||||
var rafId;
|
||||
|
||||
var run = function run() {
|
||||
var changedStates = [];
|
||||
observedNodes.forEach(function (state, node) {
|
||||
var newRect = node.getBoundingClientRect();
|
||||
|
||||
if (rectChanged(newRect, state.rect)) {
|
||||
state.rect = newRect;
|
||||
changedStates.push(state);
|
||||
}
|
||||
});
|
||||
changedStates.forEach(function (state) {
|
||||
state.callbacks.forEach(function (cb) {
|
||||
return cb(state.rect);
|
||||
});
|
||||
});
|
||||
rafId = window.requestAnimationFrame(run);
|
||||
};
|
||||
|
||||
function observeRect(node, cb) {
|
||||
return {
|
||||
observe: function observe() {
|
||||
var wasEmpty = observedNodes.size === 0;
|
||||
|
||||
if (observedNodes.has(node)) {
|
||||
observedNodes.get(node).callbacks.push(cb);
|
||||
} else {
|
||||
observedNodes.set(node, {
|
||||
rect: undefined,
|
||||
hasRectChanged: false,
|
||||
callbacks: [cb]
|
||||
});
|
||||
}
|
||||
|
||||
if (wasEmpty) run();
|
||||
},
|
||||
unobserve: function unobserve() {
|
||||
var state = observedNodes.get(node);
|
||||
|
||||
if (state) {
|
||||
// Remove the callback
|
||||
var index = state.callbacks.indexOf(cb);
|
||||
if (index >= 0) state.callbacks.splice(index, 1); // Remove the node reference
|
||||
|
||||
if (!state.callbacks.length) observedNodes["delete"](node); // Stop the loop
|
||||
|
||||
if (!observedNodes.size) cancelAnimationFrame(rafId);
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
export default observeRect;
|
||||
//# sourceMappingURL=observe-rect.esm.js.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"observe-rect.esm.js","sources":["../src/index.ts"],"sourcesContent":["let props: (keyof DOMRect)[] = [\n\t\"bottom\",\n\t\"height\",\n\t\"left\",\n\t\"right\",\n\t\"top\",\n\t\"width\",\n];\n\nlet rectChanged = (a: DOMRect = {} as DOMRect, b: DOMRect = {} as DOMRect) =>\n\tprops.some((prop) => a[prop] !== b[prop]);\n\nlet observedNodes = new Map<Element, RectProps>();\nlet rafId: number;\n\nlet run = () => {\n\tconst changedStates: RectProps[] = [];\n\tobservedNodes.forEach((state, node) => {\n\t\tlet newRect = node.getBoundingClientRect();\n\t\tif (rectChanged(newRect, state.rect)) {\n\t\t\tstate.rect = newRect;\n\t\t\tchangedStates.push(state);\n\t\t}\n\t});\n\n\tchangedStates.forEach((state) => {\n\t\tstate.callbacks.forEach((cb) => cb(state.rect));\n\t});\n\n\trafId = window.requestAnimationFrame(run);\n};\n\nexport default function observeRect(\n\tnode: Element,\n\tcb: (rect: DOMRect) => void\n) {\n\treturn {\n\t\tobserve() {\n\t\t\tlet wasEmpty = observedNodes.size === 0;\n\t\t\tif (observedNodes.has(node)) {\n\t\t\t\tobservedNodes.get(node)!.callbacks.push(cb);\n\t\t\t} else {\n\t\t\t\tobservedNodes.set(node, {\n\t\t\t\t\trect: undefined,\n\t\t\t\t\thasRectChanged: false,\n\t\t\t\t\tcallbacks: [cb],\n\t\t\t\t});\n\t\t\t}\n\t\t\tif (wasEmpty) run();\n\t\t},\n\n\t\tunobserve() {\n\t\t\tlet state = observedNodes.get(node);\n\t\t\tif (state) {\n\t\t\t\t// Remove the callback\n\t\t\t\tconst index = state.callbacks.indexOf(cb);\n\t\t\t\tif (index >= 0) state.callbacks.splice(index, 1);\n\n\t\t\t\t// Remove the node reference\n\t\t\t\tif (!state.callbacks.length) observedNodes.delete(node);\n\n\t\t\t\t// Stop the loop\n\t\t\t\tif (!observedNodes.size) cancelAnimationFrame(rafId);\n\t\t\t}\n\t\t},\n\t};\n}\n\nexport type PartialRect = Partial<DOMRect>;\n\nexport type RectProps = {\n\trect: DOMRect | undefined;\n\thasRectChanged: boolean;\n\tcallbacks: Function[];\n};\n"],"names":["props","rectChanged","a","b","some","prop","observedNodes","Map","rafId","run","changedStates","forEach","state","node","newRect","getBoundingClientRect","rect","push","callbacks","cb","window","requestAnimationFrame","observeRect","observe","wasEmpty","size","has","get","set","undefined","hasRectChanged","unobserve","index","indexOf","splice","length","cancelAnimationFrame"],"mappings":"AAAA,IAAIA,KAAK,GAAsB,CAC9B,QAD8B,EAE9B,QAF8B,EAG9B,MAH8B,EAI9B,OAJ8B,EAK9B,KAL8B,EAM9B,OAN8B,CAA/B;;AASA,IAAIC,WAAW,GAAG,SAAdA,WAAc,CAACC,CAAD,EAA6BC,CAA7B;AAAA,MAACD,CAAD;AAACA,IAAAA,CAAD,GAAc,EAAd;AAAA;;AAAA,MAA6BC,CAA7B;AAA6BA,IAAAA,CAA7B,GAA0C,EAA1C;AAAA;;AAAA,SACjBH,KAAK,CAACI,IAAN,CAAW,UAACC,IAAD;AAAA,WAAUH,CAAC,CAACG,IAAD,CAAD,KAAYF,CAAC,CAACE,IAAD,CAAvB;AAAA,GAAX,CADiB;AAAA,CAAlB;;AAGA,IAAIC,aAAa,gBAAG,IAAIC,GAAJ,EAApB;AACA,IAAIC,KAAJ;;AAEA,IAAIC,GAAG,GAAG,SAANA,GAAM;AACT,MAAMC,aAAa,GAAgB,EAAnC;AACAJ,EAAAA,aAAa,CAACK,OAAd,CAAsB,UAACC,KAAD,EAAQC,IAAR;AACrB,QAAIC,OAAO,GAAGD,IAAI,CAACE,qBAAL,EAAd;;AACA,QAAId,WAAW,CAACa,OAAD,EAAUF,KAAK,CAACI,IAAhB,CAAf,EAAsC;AACrCJ,MAAAA,KAAK,CAACI,IAAN,GAAaF,OAAb;AACAJ,MAAAA,aAAa,CAACO,IAAd,CAAmBL,KAAnB;AACA;AACD,GAND;AAQAF,EAAAA,aAAa,CAACC,OAAd,CAAsB,UAACC,KAAD;AACrBA,IAAAA,KAAK,CAACM,SAAN,CAAgBP,OAAhB,CAAwB,UAACQ,EAAD;AAAA,aAAQA,EAAE,CAACP,KAAK,CAACI,IAAP,CAAV;AAAA,KAAxB;AACA,GAFD;AAIAR,EAAAA,KAAK,GAAGY,MAAM,CAACC,qBAAP,CAA6BZ,GAA7B,CAAR;AACA,CAfD;;SAiBwBa,YACvBT,MACAM;AAEA,SAAO;AACNI,IAAAA,OADM;AAEL,UAAIC,QAAQ,GAAGlB,aAAa,CAACmB,IAAd,KAAuB,CAAtC;;AACA,UAAInB,aAAa,CAACoB,GAAd,CAAkBb,IAAlB,CAAJ,EAA6B;AAC5BP,QAAAA,aAAa,CAACqB,GAAd,CAAkBd,IAAlB,EAAyBK,SAAzB,CAAmCD,IAAnC,CAAwCE,EAAxC;AACA,OAFD,MAEO;AACNb,QAAAA,aAAa,CAACsB,GAAd,CAAkBf,IAAlB,EAAwB;AACvBG,UAAAA,IAAI,EAAEa,SADiB;AAEvBC,UAAAA,cAAc,EAAE,KAFO;AAGvBZ,UAAAA,SAAS,EAAE,CAACC,EAAD;AAHY,SAAxB;AAKA;;AACD,UAAIK,QAAJ,EAAcf,GAAG;AACjB,KAbK;AAeNsB,IAAAA,SAfM;AAgBL,UAAInB,KAAK,GAAGN,aAAa,CAACqB,GAAd,CAAkBd,IAAlB,CAAZ;;AACA,UAAID,KAAJ,EAAW;AACV;AACA,YAAMoB,KAAK,GAAGpB,KAAK,CAACM,SAAN,CAAgBe,OAAhB,CAAwBd,EAAxB,CAAd;AACA,YAAIa,KAAK,IAAI,CAAb,EAAgBpB,KAAK,CAACM,SAAN,CAAgBgB,MAAhB,CAAuBF,KAAvB,EAA8B,CAA9B,EAHN;;AAMV,YAAI,CAACpB,KAAK,CAACM,SAAN,CAAgBiB,MAArB,EAA6B7B,aAAa,UAAb,CAAqBO,IAArB,EANnB;;AASV,YAAI,CAACP,aAAa,CAACmB,IAAnB,EAAyBW,oBAAoB,CAAC5B,KAAD,CAApB;AACzB;AACD;AA5BK,GAAP;AA8BA;;;;"}
|
||||
+82
@@ -0,0 +1,82 @@
|
||||
(function (global, factory) {
|
||||
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
|
||||
typeof define === 'function' && define.amd ? define(['exports'], factory) :
|
||||
(global = global || self, factory(global['@reach/observe-rect'] = {}));
|
||||
}(this, (function (exports) { 'use strict';
|
||||
|
||||
var props = ["bottom", "height", "left", "right", "top", "width"];
|
||||
|
||||
var rectChanged = function rectChanged(a, b) {
|
||||
if (a === void 0) {
|
||||
a = {};
|
||||
}
|
||||
|
||||
if (b === void 0) {
|
||||
b = {};
|
||||
}
|
||||
|
||||
return props.some(function (prop) {
|
||||
return a[prop] !== b[prop];
|
||||
});
|
||||
};
|
||||
|
||||
var observedNodes = /*#__PURE__*/new Map();
|
||||
var rafId;
|
||||
|
||||
var run = function run() {
|
||||
var changedStates = [];
|
||||
observedNodes.forEach(function (state, node) {
|
||||
var newRect = node.getBoundingClientRect();
|
||||
|
||||
if (rectChanged(newRect, state.rect)) {
|
||||
state.rect = newRect;
|
||||
changedStates.push(state);
|
||||
}
|
||||
});
|
||||
changedStates.forEach(function (state) {
|
||||
state.callbacks.forEach(function (cb) {
|
||||
return cb(state.rect);
|
||||
});
|
||||
});
|
||||
rafId = window.requestAnimationFrame(run);
|
||||
};
|
||||
|
||||
function observeRect(node, cb) {
|
||||
return {
|
||||
observe: function observe() {
|
||||
var wasEmpty = observedNodes.size === 0;
|
||||
|
||||
if (observedNodes.has(node)) {
|
||||
observedNodes.get(node).callbacks.push(cb);
|
||||
} else {
|
||||
observedNodes.set(node, {
|
||||
rect: undefined,
|
||||
hasRectChanged: false,
|
||||
callbacks: [cb]
|
||||
});
|
||||
}
|
||||
|
||||
if (wasEmpty) run();
|
||||
},
|
||||
unobserve: function unobserve() {
|
||||
var state = observedNodes.get(node);
|
||||
|
||||
if (state) {
|
||||
// Remove the callback
|
||||
var index = state.callbacks.indexOf(cb);
|
||||
if (index >= 0) state.callbacks.splice(index, 1); // Remove the node reference
|
||||
|
||||
if (!state.callbacks.length) observedNodes["delete"](node); // Stop the loop
|
||||
|
||||
if (!observedNodes.size) cancelAnimationFrame(rafId);
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
exports.default = observeRect;
|
||||
|
||||
Object.defineProperty(exports, '__esModule', { value: true });
|
||||
|
||||
})));
|
||||
//# sourceMappingURL=observe-rect.umd.development.js.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"observe-rect.umd.development.js","sources":["../src/index.ts"],"sourcesContent":["let props: (keyof DOMRect)[] = [\n\t\"bottom\",\n\t\"height\",\n\t\"left\",\n\t\"right\",\n\t\"top\",\n\t\"width\",\n];\n\nlet rectChanged = (a: DOMRect = {} as DOMRect, b: DOMRect = {} as DOMRect) =>\n\tprops.some((prop) => a[prop] !== b[prop]);\n\nlet observedNodes = new Map<Element, RectProps>();\nlet rafId: number;\n\nlet run = () => {\n\tconst changedStates: RectProps[] = [];\n\tobservedNodes.forEach((state, node) => {\n\t\tlet newRect = node.getBoundingClientRect();\n\t\tif (rectChanged(newRect, state.rect)) {\n\t\t\tstate.rect = newRect;\n\t\t\tchangedStates.push(state);\n\t\t}\n\t});\n\n\tchangedStates.forEach((state) => {\n\t\tstate.callbacks.forEach((cb) => cb(state.rect));\n\t});\n\n\trafId = window.requestAnimationFrame(run);\n};\n\nexport default function observeRect(\n\tnode: Element,\n\tcb: (rect: DOMRect) => void\n) {\n\treturn {\n\t\tobserve() {\n\t\t\tlet wasEmpty = observedNodes.size === 0;\n\t\t\tif (observedNodes.has(node)) {\n\t\t\t\tobservedNodes.get(node)!.callbacks.push(cb);\n\t\t\t} else {\n\t\t\t\tobservedNodes.set(node, {\n\t\t\t\t\trect: undefined,\n\t\t\t\t\thasRectChanged: false,\n\t\t\t\t\tcallbacks: [cb],\n\t\t\t\t});\n\t\t\t}\n\t\t\tif (wasEmpty) run();\n\t\t},\n\n\t\tunobserve() {\n\t\t\tlet state = observedNodes.get(node);\n\t\t\tif (state) {\n\t\t\t\t// Remove the callback\n\t\t\t\tconst index = state.callbacks.indexOf(cb);\n\t\t\t\tif (index >= 0) state.callbacks.splice(index, 1);\n\n\t\t\t\t// Remove the node reference\n\t\t\t\tif (!state.callbacks.length) observedNodes.delete(node);\n\n\t\t\t\t// Stop the loop\n\t\t\t\tif (!observedNodes.size) cancelAnimationFrame(rafId);\n\t\t\t}\n\t\t},\n\t};\n}\n\nexport type PartialRect = Partial<DOMRect>;\n\nexport type RectProps = {\n\trect: DOMRect | undefined;\n\thasRectChanged: boolean;\n\tcallbacks: Function[];\n};\n"],"names":["props","rectChanged","a","b","some","prop","observedNodes","Map","rafId","run","changedStates","forEach","state","node","newRect","getBoundingClientRect","rect","push","callbacks","cb","window","requestAnimationFrame","observeRect","observe","wasEmpty","size","has","get","set","undefined","hasRectChanged","unobserve","index","indexOf","splice","length","cancelAnimationFrame"],"mappings":";;;;;;CAAA,IAAIA,KAAK,GAAsB,CAC9B,QAD8B,EAE9B,QAF8B,EAG9B,MAH8B,EAI9B,OAJ8B,EAK9B,KAL8B,EAM9B,OAN8B,CAA/B;;CASA,IAAIC,WAAW,GAAG,SAAdA,WAAc,CAACC,CAAD,EAA6BC,CAA7B;CAAA,MAACD,CAAD;CAACA,IAAAA,CAAD,GAAc,EAAd;CAAA;;CAAA,MAA6BC,CAA7B;CAA6BA,IAAAA,CAA7B,GAA0C,EAA1C;CAAA;;CAAA,SACjBH,KAAK,CAACI,IAAN,CAAW,UAACC,IAAD;CAAA,WAAUH,CAAC,CAACG,IAAD,CAAD,KAAYF,CAAC,CAACE,IAAD,CAAvB;CAAA,GAAX,CADiB;CAAA,CAAlB;;CAGA,IAAIC,aAAa,gBAAG,IAAIC,GAAJ,EAApB;CACA,IAAIC,KAAJ;;CAEA,IAAIC,GAAG,GAAG,SAANA,GAAM;CACT,MAAMC,aAAa,GAAgB,EAAnC;CACAJ,EAAAA,aAAa,CAACK,OAAd,CAAsB,UAACC,KAAD,EAAQC,IAAR;CACrB,QAAIC,OAAO,GAAGD,IAAI,CAACE,qBAAL,EAAd;;CACA,QAAId,WAAW,CAACa,OAAD,EAAUF,KAAK,CAACI,IAAhB,CAAf,EAAsC;CACrCJ,MAAAA,KAAK,CAACI,IAAN,GAAaF,OAAb;CACAJ,MAAAA,aAAa,CAACO,IAAd,CAAmBL,KAAnB;CACA;CACD,GAND;CAQAF,EAAAA,aAAa,CAACC,OAAd,CAAsB,UAACC,KAAD;CACrBA,IAAAA,KAAK,CAACM,SAAN,CAAgBP,OAAhB,CAAwB,UAACQ,EAAD;CAAA,aAAQA,EAAE,CAACP,KAAK,CAACI,IAAP,CAAV;CAAA,KAAxB;CACA,GAFD;CAIAR,EAAAA,KAAK,GAAGY,MAAM,CAACC,qBAAP,CAA6BZ,GAA7B,CAAR;CACA,CAfD;;UAiBwBa,YACvBT,MACAM;CAEA,SAAO;CACNI,IAAAA,OADM;CAEL,UAAIC,QAAQ,GAAGlB,aAAa,CAACmB,IAAd,KAAuB,CAAtC;;CACA,UAAInB,aAAa,CAACoB,GAAd,CAAkBb,IAAlB,CAAJ,EAA6B;CAC5BP,QAAAA,aAAa,CAACqB,GAAd,CAAkBd,IAAlB,EAAyBK,SAAzB,CAAmCD,IAAnC,CAAwCE,EAAxC;CACA,OAFD,MAEO;CACNb,QAAAA,aAAa,CAACsB,GAAd,CAAkBf,IAAlB,EAAwB;CACvBG,UAAAA,IAAI,EAAEa,SADiB;CAEvBC,UAAAA,cAAc,EAAE,KAFO;CAGvBZ,UAAAA,SAAS,EAAE,CAACC,EAAD;CAHY,SAAxB;CAKA;;CACD,UAAIK,QAAJ,EAAcf,GAAG;CACjB,KAbK;CAeNsB,IAAAA,SAfM;CAgBL,UAAInB,KAAK,GAAGN,aAAa,CAACqB,GAAd,CAAkBd,IAAlB,CAAZ;;CACA,UAAID,KAAJ,EAAW;CACV;CACA,YAAMoB,KAAK,GAAGpB,KAAK,CAACM,SAAN,CAAgBe,OAAhB,CAAwBd,EAAxB,CAAd;CACA,YAAIa,KAAK,IAAI,CAAb,EAAgBpB,KAAK,CAACM,SAAN,CAAgBgB,MAAhB,CAAuBF,KAAvB,EAA8B,CAA9B,EAHN;;CAMV,YAAI,CAACpB,KAAK,CAACM,SAAN,CAAgBiB,MAArB,EAA6B7B,aAAa,UAAb,CAAqBO,IAArB,EANnB;;CASV,YAAI,CAACP,aAAa,CAACmB,IAAnB,EAAyBW,oBAAoB,CAAC5B,KAAD,CAApB;CACzB;CACD;CA5BK,GAAP;CA8BA;;;;;;;;;;;;"}
|
||||
+2
@@ -0,0 +1,2 @@
|
||||
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e=e||self)["@reach/observe-rect"]={})}(this,(function(e){"use strict";var t,n=["bottom","height","left","right","top","width"],c=new Map;e.default=function(e,o){return{observe:function(){var i=0===c.size;c.has(e)?c.get(e).callbacks.push(o):c.set(e,{rect:void 0,hasRectChanged:!1,callbacks:[o]}),i&&function e(){var o=[];c.forEach((function(e,t){var c,i,a=t.getBoundingClientRect();void 0===(c=a)&&(c={}),void 0===(i=e.rect)&&(i={}),n.some((function(e){return c[e]!==i[e]}))&&(e.rect=a,o.push(e))})),o.forEach((function(e){e.callbacks.forEach((function(t){return t(e.rect)}))})),t=window.requestAnimationFrame(e)}()},unobserve:function(){var n=c.get(e);if(n){var i=n.callbacks.indexOf(o);i>=0&&n.callbacks.splice(i,1),n.callbacks.length||c.delete(e),c.size||cancelAnimationFrame(t)}}}},Object.defineProperty(e,"__esModule",{value:!0})}));
|
||||
//# sourceMappingURL=observe-rect.umd.production.min.js.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"observe-rect.umd.production.min.js","sources":["../src/index.ts"],"sourcesContent":["let props: (keyof DOMRect)[] = [\n\t\"bottom\",\n\t\"height\",\n\t\"left\",\n\t\"right\",\n\t\"top\",\n\t\"width\",\n];\n\nlet rectChanged = (a: DOMRect = {} as DOMRect, b: DOMRect = {} as DOMRect) =>\n\tprops.some((prop) => a[prop] !== b[prop]);\n\nlet observedNodes = new Map<Element, RectProps>();\nlet rafId: number;\n\nlet run = () => {\n\tconst changedStates: RectProps[] = [];\n\tobservedNodes.forEach((state, node) => {\n\t\tlet newRect = node.getBoundingClientRect();\n\t\tif (rectChanged(newRect, state.rect)) {\n\t\t\tstate.rect = newRect;\n\t\t\tchangedStates.push(state);\n\t\t}\n\t});\n\n\tchangedStates.forEach((state) => {\n\t\tstate.callbacks.forEach((cb) => cb(state.rect));\n\t});\n\n\trafId = window.requestAnimationFrame(run);\n};\n\nexport default function observeRect(\n\tnode: Element,\n\tcb: (rect: DOMRect) => void\n) {\n\treturn {\n\t\tobserve() {\n\t\t\tlet wasEmpty = observedNodes.size === 0;\n\t\t\tif (observedNodes.has(node)) {\n\t\t\t\tobservedNodes.get(node)!.callbacks.push(cb);\n\t\t\t} else {\n\t\t\t\tobservedNodes.set(node, {\n\t\t\t\t\trect: undefined,\n\t\t\t\t\thasRectChanged: false,\n\t\t\t\t\tcallbacks: [cb],\n\t\t\t\t});\n\t\t\t}\n\t\t\tif (wasEmpty) run();\n\t\t},\n\n\t\tunobserve() {\n\t\t\tlet state = observedNodes.get(node);\n\t\t\tif (state) {\n\t\t\t\t// Remove the callback\n\t\t\t\tconst index = state.callbacks.indexOf(cb);\n\t\t\t\tif (index >= 0) state.callbacks.splice(index, 1);\n\n\t\t\t\t// Remove the node reference\n\t\t\t\tif (!state.callbacks.length) observedNodes.delete(node);\n\n\t\t\t\t// Stop the loop\n\t\t\t\tif (!observedNodes.size) cancelAnimationFrame(rafId);\n\t\t\t}\n\t\t},\n\t};\n}\n\nexport type PartialRect = Partial<DOMRect>;\n\nexport type RectProps = {\n\trect: DOMRect | undefined;\n\thasRectChanged: boolean;\n\tcallbacks: Function[];\n};\n"],"names":["rafId","props","observedNodes","Map","node","cb","observe","wasEmpty","size","has","get","callbacks","push","set","rect","undefined","hasRectChanged","run","changedStates","forEach","state","a","b","newRect","getBoundingClientRect","some","prop","window","requestAnimationFrame","unobserve","index","indexOf","splice","length","cancelAnimationFrame"],"mappings":"oNAAA,IAaIA,EAbAC,EAA2B,CAC9B,SACA,SACA,OACA,QACA,MACA,SAMGC,EAAgB,IAAIC,uBAqBvBC,EACAC,SAEO,CACNC,uBACKC,EAAkC,IAAvBL,EAAcM,KACzBN,EAAcO,IAAIL,GACrBF,EAAcQ,IAAIN,GAAOO,UAAUC,KAAKP,GAExCH,EAAcW,IAAIT,EAAM,CACvBU,UAAMC,EACNC,gBAAgB,EAChBL,UAAW,CAACN,KAGVE,GAjCG,SAANU,QACGC,EAA6B,GACnChB,EAAciB,SAAQ,SAACC,EAAOhB,OARZiB,EAA4BC,EASzCC,EAAUnB,EAAKoB,kCATFH,EAUDE,KAVCF,EAAa,cAAeC,EAUpBF,EAAMN,QAVcQ,EAAa,IAC3DrB,EAAMwB,MAAK,SAACC,UAASL,EAAEK,KAAUJ,EAAEI,QAUjCN,EAAMN,KAAOS,EACbL,EAAcN,KAAKQ,OAIrBF,EAAcC,SAAQ,SAACC,GACtBA,EAAMT,UAAUQ,SAAQ,SAACd,UAAOA,EAAGe,EAAMN,YAG1Cd,EAAQ2B,OAAOC,sBAAsBX,GAmBrBA,IAGfY,yBACKT,EAAQlB,EAAcQ,IAAIN,MAC1BgB,EAAO,KAEJU,EAAQV,EAAMT,UAAUoB,QAAQ1B,GAClCyB,GAAS,GAAGV,EAAMT,UAAUqB,OAAOF,EAAO,GAGzCV,EAAMT,UAAUsB,QAAQ/B,SAAqBE,GAG7CF,EAAcM,MAAM0B,qBAAqBlC"}
|
||||
+53
@@ -0,0 +1,53 @@
|
||||
{
|
||||
"name": "@reach/observe-rect",
|
||||
"version": "1.2.0",
|
||||
"description": "Observe the Rect of a DOM element.",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/reach/observe-rect",
|
||||
"directory": "packages/auto-id"
|
||||
},
|
||||
"scripts": {
|
||||
"build": "cross-env NODE_ENV=production tsdx build --format=cjs,esm,umd",
|
||||
"start": "cross-env NODE_ENV=development tsdx watch",
|
||||
"test": "cross-env NODE_ENV=test tsdx test",
|
||||
"serve": "serve"
|
||||
},
|
||||
"files": [
|
||||
"dist",
|
||||
"README.md"
|
||||
],
|
||||
"main": "dist/index.js",
|
||||
"umd:main": "dist/observe-rect.umd.production.js",
|
||||
"module": "dist/observe-rect.esm.js",
|
||||
"typings": "dist/index.d.ts",
|
||||
"author": "React Training <hello@reacttraining.com>",
|
||||
"license": "MIT",
|
||||
"dependencies": {},
|
||||
"devDependencies": {
|
||||
"@typescript-eslint/eslint-plugin": "^3.3.0",
|
||||
"@typescript-eslint/parser": "^3.3.0",
|
||||
"babel-eslint": "^10.1.0",
|
||||
"cross-env": "^7.0.2",
|
||||
"eslint": "^7.3.0",
|
||||
"eslint-plugin-import": "^2.21.2",
|
||||
"eslint-plugin-jest": "^23.16.0",
|
||||
"husky": "^4.2.5",
|
||||
"prettier": "^2.0.5",
|
||||
"pretty-quick": "^2.0.1",
|
||||
"serve": "^11.3.2",
|
||||
"tsdx": "^0.12.1",
|
||||
"tslib": "^2.0.0",
|
||||
"typescript": "^3.9.5"
|
||||
},
|
||||
"husky": {
|
||||
"hooks": {
|
||||
"pre-commit": "pretty-quick --staged"
|
||||
}
|
||||
},
|
||||
"prettier": {
|
||||
"semi": true,
|
||||
"trailingComma": "es5",
|
||||
"useTabs": true
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user