tool-shack 0.0.17 → 0.0.20

package/dist/browser/index.d.ts

@@ -4,4 +4,6 @@ export * from './isShareSupported.js';
 export * from './isTabFocused.js';
 export * from './isTouchSupported.js';
 export * from './preferColorScheme.js';
+export * from './scrollToElement.js';
+export * from './scrollToPosition.js';
 export * from './tabFocusListener.js';

package/dist/browser/index.js

@@ -4,5 +4,7 @@ export * from './isShareSupported.js';
 export * from './isTabFocused.js';
 export * from './isTouchSupported.js';
 export * from './preferColorScheme.js';
+export * from './scrollToElement.js';
+export * from './scrollToPosition.js';
 export * from './tabFocusListener.js';
 //# sourceMappingURL=index.js.map

package/dist/browser/scrollToElement.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Scroll window to make HTMLElement visible
+ *
+ * @param element Element to scroll to
+ * @param offset Scroll offset from element, zero by default
+ * @param smoothScroll Enable smooth scroll if supported, true by default
+ * @returns void
+ */
+export declare const scrollToElement: (element: HTMLElement, offset?: number, smoothScroll?: boolean) => void;

package/dist/browser/scrollToElement.js

@@ -0,0 +1,14 @@
+import { getElementOffset } from '../dom/getElementOffset.js';
+import { scrollToPosition } from './scrollToPosition.js';
+/**
+ * Scroll window to make HTMLElement visible
+ *
+ * @param element Element to scroll to
+ * @param offset Scroll offset from element, zero by default
+ * @param smoothScroll Enable smooth scroll if supported, true by default
+ * @returns void
+ */
+export const scrollToElement = (element, offset = 0, smoothScroll = true) => {
+    scrollToPosition(0, getElementOffset(element).top - offset, smoothScroll);
+};
+//# sourceMappingURL=scrollToElement.js.map

package/dist/browser/scrollToPosition.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Scroll window or other scrollable element to given position
+ *
+ * @param x Horizontal position to scroll to
+ * @param y Vertical position to scroll to
+ * @param smoothScroll Enable smooth scroll if supported, true by default
+ * @param target Target to be scrolled, window by default
+ * @returns void
+ */
+export declare const scrollToPosition: (x: number, y: number, smoothScroll?: boolean, target?: Window | HTMLElement) => void;

package/dist/browser/scrollToPosition.js

@@ -0,0 +1,23 @@
+import { isScrollBehaviorSupported } from './isScrollBehaviorSupported.js';
+/**
+ * Scroll window or other scrollable element to given position
+ *
+ * @param x Horizontal position to scroll to
+ * @param y Vertical position to scroll to
+ * @param smoothScroll Enable smooth scroll if supported, true by default
+ * @param target Target to be scrolled, window by default
+ * @returns void
+ */
+export const scrollToPosition = (x, y, smoothScroll = true, target = window) => {
+    if (smoothScroll && isScrollBehaviorSupported()) {
+        target.scrollTo({
+            top: y,
+            left: x,
+            behavior: 'smooth',
+        });
+    }
+    else {
+        target.scrollTo(x, y);
+    }
+};
+//# sourceMappingURL=scrollToPosition.js.map

package/dist/dom/getElementOffset.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Get element's offset relative to the whole page
+ *
+ * @param element HTMLElement for which should be calculated offset
+ * @returns Object with top and left offset value
+ */
+export declare const getElementOffset: (element: HTMLElement) => {
+    top: number;
+    left: number;
+};

package/dist/dom/getElementOffset.js

@@ -0,0 +1,11 @@
+/**
+ * Get element's offset relative to the whole page
+ *
+ * @param element HTMLElement for which should be calculated offset
+ * @returns Object with top and left offset value
+ */
+export const getElementOffset = (element) => {
+    const box = element.getBoundingClientRect();
+    return { top: box.top + window.pageYOffset, left: box.left + window.pageXOffset };
+};
+//# sourceMappingURL=getElementOffset.js.map

package/dist/dom/index.d.ts

@@ -6,3 +6,4 @@ export * from './appendAfter.js';
 export * from './appendBefore.js';
 export * from './createElement.js';
 export * from './fireEvent.js';
+export * from './getElementOffset.js';

package/dist/dom/index.js

@@ -6,4 +6,5 @@ export * from './appendAfter.js';
 export * from './appendBefore.js';
 export * from './createElement.js';
 export * from './fireEvent.js';
+export * from './getElementOffset.js';
 //# sourceMappingURL=index.js.map

package/package.json

@@ -1,48 +1,49 @@
-{
-  "name": "tool-shack",
-  "version": "0.0.17",
-  "description": "Collection of usefull functions to ease work",
-  "author": {
-    "name": "David Myška",
-    "url": "https://www.davidmyska.com/"
-  },
-  "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/miskith/tool-shack/issues"
-  },
-  "homepage": "https://www.davidmyska.com/tool-shack/",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/miskith/tool-shack.git"
-  },
-  "type": "module",
-  "module": "dist/index.js",
-  "main": "dist/index.js",
-  "exports": {
-    "./package.json": {
-      "default": "./package.json"
-    },
-    ".": {
-      "types": "./dist/index.d.ts",
-      "default": "./dist/index.js"
-    }
-  },
-  "files": [
-    "dist/**/*.js",
-    "dist/**/*.d.ts",
-    "src/**/*.ts"
-  ],
-  "scripts": {
-    "build": "rm -rf dist && tsc -b .",
-    "format": "pretty-quick",
-    "generate-docs": "rm -rf docs && typedoc --name \"Tool-Shack\" --readme README.md src/*/index.ts",
-    "prepare": "husky install"
-  },
-  "devDependencies": {
-    "husky": "^8.0.1",
-    "prettier": "^2.7.1",
-    "pretty-quick": "^3.1.3",
-    "typedoc": "^0.23.11",
-    "typescript": "^4.8.2"
-  }
-}
+{
+  "name": "tool-shack",
+  "version": "0.0.20",
+  "description": "Collection of usefull functions to ease work",
+  "author": {
+    "name": "David Myška",
+    "url": "https://www.davidmyska.com/"
+  },
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/miskith/tool-shack/issues"
+  },
+  "homepage": "https://www.davidmyska.com/tool-shack/",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/miskith/tool-shack.git"
+  },
+  "type": "module",
+  "module": "dist/index.js",
+  "main": "dist/index.js",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist/**/*.js",
+    "dist/**/*.d.ts",
+    "src/**/*.ts"
+  ],
+	"sideEffects": false,
+  "scripts": {
+    "build": "rm -rf dist && tsc -b .",
+    "format": "pretty-quick",
+    "generate-docs": "rm -rf docs && typedoc --name \"Tool-Shack\" --readme README.md src/*/index.ts",
+    "prepare": "husky install"
+  },
+  "devDependencies": {
+    "husky": "^8.0.1",
+    "prettier": "^2.7.1",
+    "pretty-quick": "^3.1.3",
+    "typedoc": "^0.23.14",
+    "typescript": "^4.8.3"
+  }
+}

package/src/browser/index.ts

@@ -4,4 +4,6 @@ export * from './isShareSupported.js';
 export * from './isTabFocused.js';
 export * from './isTouchSupported.js';
 export * from './preferColorScheme.js';
+export * from './scrollToElement.js';
+export * from './scrollToPosition.js';
 export * from './tabFocusListener.js';

package/src/browser/scrollToElement.ts

@@ -0,0 +1,18 @@
+import { getElementOffset } from '../dom/getElementOffset.js';
+import { scrollToPosition } from './scrollToPosition.js';
+
+/**
+ * Scroll window to make HTMLElement visible
+ *
+ * @param element Element to scroll to
+ * @param offset Scroll offset from element, zero by default
+ * @param smoothScroll Enable smooth scroll if supported, true by default
+ * @returns void
+ */
+export const scrollToElement = (
+  element: HTMLElement,
+  offset: number = 0,
+  smoothScroll: boolean = true,
+): void => {
+  scrollToPosition(0, getElementOffset(element).top - offset, smoothScroll);
+};

package/src/browser/scrollToPosition.ts

@@ -0,0 +1,27 @@
+import { isScrollBehaviorSupported } from './isScrollBehaviorSupported.js';
+
+/**
+ * Scroll window or other scrollable element to given position
+ *
+ * @param x Horizontal position to scroll to
+ * @param y Vertical position to scroll to
+ * @param smoothScroll Enable smooth scroll if supported, true by default
+ * @param target Target to be scrolled, window by default
+ * @returns void
+ */
+export const scrollToPosition = (
+  x: number,
+  y: number,
+  smoothScroll: boolean = true,
+  target: Window | HTMLElement = window,
+): void => {
+  if (smoothScroll && isScrollBehaviorSupported()) {
+    target.scrollTo({
+      top: y,
+      left: x,
+      behavior: 'smooth',
+    });
+  } else {
+    target.scrollTo(x, y);
+  }
+};

package/src/dom/getElementOffset.ts

@@ -0,0 +1,11 @@
+/**
+ * Get element's offset relative to the whole page
+ *
+ * @param element HTMLElement for which should be calculated offset
+ * @returns Object with top and left offset value
+ */
+export const getElementOffset = (element: HTMLElement): { top: number; left: number } => {
+  const box: DOMRect = element.getBoundingClientRect();
+
+  return { top: box.top + window.pageYOffset, left: box.left + window.pageXOffset };
+};

package/src/dom/index.ts

@@ -7,3 +7,4 @@ export * from './appendAfter.js';
 export * from './appendBefore.js';
 export * from './createElement.js';
 export * from './fireEvent.js';
+export * from './getElementOffset.js';