light-bounds - npm Package Compare versions

Comparing version 0.0.3 to 0.0.4

dist/index.d.ts

@@ -1,5 +0,3 @@
-export interface InitializeLightBoundsOptions {
-    container?: Window;
-    onChange?: () => void;
-}
+export declare type LightBoundsTarget = HTMLElement;
+export declare type LightBoundsOnChange = (rect: LightBoundsBoundingRect) => void;
 export interface LightBoundsBoundingRect {
@@ -13,2 +11,2 @@ top: number;
 }
-export declare function initializeLightBounds({ container, onChange, }?: InitializeLightBoundsOptions): (target: HTMLElement, onChange?: ((rect: LightBoundsBoundingRect) => void) | undefined) => LightBoundsBoundingRect;
+export declare function lightBounds(target: LightBoundsTarget, onChange?: LightBoundsOnChange): LightBoundsBoundingRect;

dist/index.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-function initializeLightBounds(_a) {
-    var _b = _a === void 0 ? {} : _a, _c = _b.container, container = _c === void 0 ? window : _c, onChange = _b.onChange;
-    function getRect(target) {
-        var rect = target.getBoundingClientRect();
-        return {
-            top: rect.top,
-            left: rect.left,
-            right: rect.right,
-            bottom: rect.bottom,
-            width: rect.width,
-            height: rect.height,
-        };
+var watchedElements = new Map();
+var lastResizeRefresh = 0;
+var lastScrollRefresh = 0;
+function initializeWatcher() {
+    //@TODO debounce
+    window.addEventListener('resize', function () {
+        lastResizeRefresh++;
+        lastScrollRefresh++;
+        triggerCallbacks();
+    });
+    window.addEventListener('scroll', function () {
+        lastScrollRefresh++;
+        triggerCallbacks();
+    });
+}
+function triggerCallbacks() {
+    watchedElements.forEach(function (watchedElement) {
+        if (watchedElement.onChange.length > 0) {
+            getLightBoundsWithUpdate(watchedElement);
+        }
+    });
+}
+function getLightBoundsWithUpdate(watchedElement) {
+    var hasRectChanged = false;
+    if (lastResizeRefresh !== watchedElement.lastResizeRefresh) {
+        var scrollX_1 = window.scrollX, scrollY_1 = window.scrollY;
+        var rect = watchedElement.target.getBoundingClientRect();
+        hasRectChanged = true;
+        watchedElement.lastResizeRefresh = lastResizeRefresh;
+        watchedElement.rootPosition.left = rect.left + scrollX_1;
+        watchedElement.rootPosition.top = rect.top + scrollY_1;
+        watchedElement.rect.width = rect.width;
+        watchedElement.rect.height = rect.height;
     }
-    return function getBoundingClientRect(target, onChange) {
-        if (onChange) {
-            window.addEventListener('scroll', function () {
-                onChange(getRect(target));
-            });
+    if (lastScrollRefresh !== watchedElement.lastScrollRefresh) {
+        var scrollX_2 = window.scrollX, scrollY_2 = window.scrollY;
+        hasRectChanged = true;
+        watchedElement.lastScrollRefresh = lastScrollRefresh;
+        watchedElement.rect.top = watchedElement.rootPosition.top - scrollY_2;
+        watchedElement.rect.left = watchedElement.rootPosition.left - scrollX_2;
+        watchedElement.rect.right =
+            watchedElement.rootPosition.left + watchedElement.rect.width - scrollX_2;
+        watchedElement.rect.bottom =
+            watchedElement.rootPosition.top + watchedElement.rect.height - scrollY_2;
+    }
+    if (hasRectChanged) {
+        for (var i = 0; i < watchedElement.onChange.length; i++) {
+            watchedElement.onChange[i].call(watchedElement.target, watchedElement.rect);
         }
-        return getRect(target);
-    };
+    }
+    return watchedElement.rect;
 }
-exports.initializeLightBounds = initializeLightBounds;
+function lightBounds(target, onChange) {
+    if (watchedElements.size === 0) {
+        initializeWatcher();
+    }
+    if (!watchedElements.has(target)) {
+        watchedElements.set(target, {
+            target: target,
+            lastScrollRefresh: -1,
+            lastResizeRefresh: -1,
+            rect: {
+                top: 0,
+                left: 0,
+                right: 0,
+                bottom: 0,
+                width: 0,
+                height: 0,
+            },
+            rootPosition: {
+                top: 0,
+                left: 0,
+            },
+            onChange: [],
+        });
+    }
+    var watchedElement = watchedElements.get(target);
+    if (onChange) {
+        watchedElement.onChange.push(onChange);
+    }
+    return getLightBoundsWithUpdate(watchedElement);
+}
+exports.lightBounds = lightBounds;

package.json

 {
 	"name": "light-bounds",
-	"version": "0.0.3",
+	"version": "0.0.4",
 	"description": "Another getBoundingClientRect",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

src/index.ts

@@ -1,6 +0,5 @@
-export interface InitializeLightBoundsOptions {
-	container?: Window
-	onChange?: () => void
-}
+export type LightBoundsTarget = HTMLElement
 
+export type LightBoundsOnChange = (rect: LightBoundsBoundingRect) => void
+
 export interface LightBoundsBoundingRect {
@@ -15,30 +14,115 @@ top: number
 
-export function initializeLightBounds({
-	container = window,
-	onChange, // @TODO
-}: InitializeLightBoundsOptions = {}) {
-	function getRect(target: HTMLElement): LightBoundsBoundingRect {
-		const rect = target.getBoundingClientRect()
-		return {
-			top: rect.top,
-			left: rect.left,
-			right: rect.right,
-			bottom: rect.bottom,
-			width: rect.width,
-			height: rect.height,
+interface TargetData {
+	target: LightBoundsTarget
+	lastScrollRefresh: number
+	lastResizeRefresh: number
+	rect: LightBoundsBoundingRect
+	rootPosition: {
+		top: number
+		left: number
+	}
+	onChange: LightBoundsOnChange[]
+}
+
+const watchedElements = new Map<LightBoundsTarget, TargetData>()
+
+let lastResizeRefresh = 0
+let lastScrollRefresh = 0
+
+function initializeWatcher() {
+	//@TODO debounce
+	window.addEventListener('resize', () => {
+		lastResizeRefresh++
+		lastScrollRefresh++
+		triggerCallbacks()
+	})
+	window.addEventListener('scroll', () => {
+		lastScrollRefresh++
+		triggerCallbacks()
+	})
+}
+
+function triggerCallbacks() {
+	watchedElements.forEach((watchedElement) => {
+		if (watchedElement.onChange.length > 0) {
+			getLightBoundsWithUpdate(watchedElement)
 		}
+	})
+}
+
+function getLightBoundsWithUpdate(
+	watchedElement: TargetData
+): LightBoundsBoundingRect {
+	let hasRectChanged = false
+
+	if (lastResizeRefresh !== watchedElement.lastResizeRefresh) {
+		const { scrollX, scrollY } = window
+		const rect = watchedElement.target.getBoundingClientRect()
+		hasRectChanged = true
+		watchedElement.lastResizeRefresh = lastResizeRefresh
+		watchedElement.rootPosition.left = rect.left + scrollX
+		watchedElement.rootPosition.top = rect.top + scrollY
+
+		watchedElement.rect.width = rect.width
+		watchedElement.rect.height = rect.height
 	}
 
-	return function getBoundingClientRect(
-		target: HTMLElement,
-		onChange?: (rect: LightBoundsBoundingRect) => void
-	): LightBoundsBoundingRect {
-		if (onChange) {
-			window.addEventListener('scroll', () => {
-				onChange(getRect(target))
-			})
+	if (lastScrollRefresh !== watchedElement.lastScrollRefresh) {
+		const { scrollX, scrollY } = window
+		hasRectChanged = true
+		watchedElement.lastScrollRefresh = lastScrollRefresh
+		watchedElement.rect.top = watchedElement.rootPosition.top - scrollY
+		watchedElement.rect.left = watchedElement.rootPosition.left - scrollX
+		watchedElement.rect.right =
+			watchedElement.rootPosition.left + watchedElement.rect.width - scrollX
+		watchedElement.rect.bottom =
+			watchedElement.rootPosition.top + watchedElement.rect.height - scrollY
+	}
+
+	if (hasRectChanged) {
+		for (let i = 0; i < watchedElement.onChange.length; i++) {
+			watchedElement.onChange[i].call(
+				watchedElement.target,
+				watchedElement.rect
+			)
 		}
+	}
+	return watchedElement.rect
+}
 
-		return getRect(target)
+export function lightBounds(
+	target: LightBoundsTarget,
+	onChange?: LightBoundsOnChange
+): LightBoundsBoundingRect {
+	if (watchedElements.size === 0) {
+		initializeWatcher()
 	}
+
+	if (!watchedElements.has(target)) {
+		watchedElements.set(target, {
+			target,
+			lastScrollRefresh: -1,
+			lastResizeRefresh: -1,
+			rect: {
+				top: 0,
+				left: 0,
+				right: 0,
+				bottom: 0,
+				width: 0,
+				height: 0,
+			},
+			rootPosition: {
+				top: 0,
+				left: 0,
+			},
+			onChange: [],
+		})
+	}
+	const watchedElement = watchedElements.get(target)!
+
+	if (onChange) {
+		watchedElement.onChange.push(onChange)
+	}
+
+	return getLightBoundsWithUpdate(watchedElement)
 }

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

7752

increased by117.81%

Lines of code

228

increased by132.65%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes