tool-shack 0.0.15 → 0.0.18

package/dist/browser/index.d.ts

@@ -1,6 +1,9 @@
-export * from './isPushNotificationSupported';
-export * from './isShareSupported';
-export * from './isTabFocused';
-export * from './isTouchSupported';
-export * from './preferColorScheme';
-export * from './tabFocusListener';
+export * from './isPushNotificationSupported.js';
+export * from './isScrollBehaviorSupported.js';
+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

@@ -1,7 +1,10 @@
 export * from './isPushNotificationSupported.js';
+export * from './isScrollBehaviorSupported.js';
 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/isScrollBehaviorSupported.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Check if user's browser supports setting scroll behavior
+ *
+ * @returns Boolean indicating if user's browser supports setting scroll behavior
+ */
+export declare const isScrollBehaviorSupported: () => boolean;

package/dist/browser/isScrollBehaviorSupported.js

@@ -0,0 +1,7 @@
+/**
+ * Check if user's browser supports setting scroll behavior
+ *
+ * @returns Boolean indicating if user's browser supports setting scroll behavior
+ */
+export const isScrollBehaviorSupported = () => !!('scrollBehavior' in document.documentElement.style);
+//# sourceMappingURL=isScrollBehaviorSupported.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,15 @@
+import { getOffset } 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) => {
+    offset = offset ?? window.innerHeight / 6;
+    scrollToPosition(0, getOffset(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/browser/tabFocusListener.d.ts

@@ -5,4 +5,4 @@
  * @param blurCallback Function to be called when current browser tab goes out of focus
  * @returns void
  */
-export declare const tabFocusListener: (focusCallback?: (() => void) | undefined, blurCallback?: (() => void) | undefined) => void;
+export declare const tabFocusListener: (focusCallback?: () => void, blurCallback?: () => void) => void;

package/dist/dateTime/index.d.ts

@@ -1,3 +1,3 @@
-export * from './interfaces';
-export * from './dateAsIso';
-export * from './parseDuration';
+export * from './interfaces/index.js';
+export * from './dateAsIso.js';
+export * from './parseDuration.js';

package/dist/dateTime/interfaces/index.d.ts

@@ -1 +1 @@
-export * from './parseDuration';
+export * from './parseDuration.js';

package/dist/dateTime/parseDuration.d.ts

@@ -1,4 +1,4 @@
-import { IDuration } from './interfaces/parseDuration';
+import { IDuration } from './interfaces/parseDuration.js';
 /**
  * Parse duration in milliseconds into days, hours, minutes, seconds, milliseconds
  *

package/dist/dom/createElement.d.ts

@@ -1,4 +1,4 @@
-import { IExtendingElementProps } from './interfaces/createElement';
+import { IExtendingElementProps } from './interfaces/createElement.js';
 /**
  * Method for creating Node element and assigning multiple parameters, event listeners & children in one method call
  *

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 getOffset: (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 getOffset = (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

@@ -1,8 +1,9 @@
-export * from './interfaces';
-export * from './addAsyncEventListener';
-export * from './addClickOutsideListener';
-export * from './addEventListener';
-export * from './appendAfter';
-export * from './appendBefore';
-export * from './createElement';
-export * from './fireEvent';
+export * from './interfaces/index.js';
+export * from './addAsyncEventListener.js';
+export * from './addClickOutsideListener.js';
+export * from './addEventListener.js';
+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/dist/dom/interfaces/index.d.ts

@@ -1 +1 @@
-export * from './createElement';
+export * from './createElement.js';

package/dist/general/index.d.ts

@@ -1,3 +1,3 @@
-export * from './isEmpty';
-export * from './isNil';
-export * from './isValidJson';
+export * from './isEmpty.js';
+export * from './isNil.js';
+export * from './isValidJson.js';

package/dist/index.d.ts

@@ -1,6 +1,6 @@
-export * from './browser';
-export * from './dateTime';
-export * from './dom';
-export * from './general';
-export * from './schedule';
-export * from './string';
+export * from './browser/index.js';
+export * from './dateTime/index.js';
+export * from './dom/index.js';
+export * from './general/index.js';
+export * from './schedule/index.js';
+export * from './string/index.js';

package/dist/schedule/index.d.ts

@@ -1,2 +1,2 @@
-export * from './runAnimation';
-export * from './runAsync';
+export * from './runAnimation.js';
+export * from './runAsync.js';

package/dist/string/index.d.ts

@@ -1,5 +1,5 @@
-export * from './byteSize';
-export * from './escapeHTML';
-export * from './removeDiacritics';
-export * from './slugify';
-export * from './truncate';
+export * from './byteSize.js';
+export * from './escapeHTML.js';
+export * from './removeDiacritics.js';
+export * from './slugify.js';
+export * from './truncate.js';

package/package.json

@@ -1,49 +1,49 @@
-{
-  "name": "tool-shack",
-  "version": "0.0.15",
-  "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-esm .",
-    "format": "pretty-quick",
-    "generate-docs": "rm -rf docs && typedoc --name \"Tool-Shack\" --readme README.md src/*/index.ts",
-    "prepare": "husky install"
-  },
-  "devDependencies": {
-    "@digitak/tsc-esm": "^3.1.2",
-    "husky": "^7.0.4",
-    "prettier": "^2.6.2",
-    "pretty-quick": "^3.1.3",
-    "typedoc": "^0.22.13",
-    "typescript": "^4.6.3"
-  }
-}
+{
+  "name": "tool-shack",
+  "version": "0.0.18",
+  "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

@@ -1,6 +1,9 @@
-export * from './isPushNotificationSupported';
-export * from './isShareSupported';
-export * from './isTabFocused';
-export * from './isTouchSupported';
-export * from './preferColorScheme';
-export * from './tabFocusListener';
+export * from './isPushNotificationSupported.js';
+export * from './isScrollBehaviorSupported.js';
+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/isScrollBehaviorSupported.ts

@@ -0,0 +1,7 @@
+/**
+ * Check if user's browser supports setting scroll behavior
+ *
+ * @returns Boolean indicating if user's browser supports setting scroll behavior
+ */
+export const isScrollBehaviorSupported = (): boolean =>
+  !!('scrollBehavior' in document.documentElement.style);

package/src/browser/isTouchSupported.ts

@@ -1,4 +1,4 @@
-import { IExtendedWindow } from './interfaces/isTouchSupported';
+import { IExtendedWindow } from './interfaces/isTouchSupported.js';
 
 /**
  * Check if user's browser supports touch events

package/src/browser/scrollToElement.ts

@@ -0,0 +1,20 @@
+import { getOffset } 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 => {
+  offset = offset ?? window.innerHeight / 6;
+
+  scrollToPosition(0, getOffset(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/browser/tabFocusListener.ts

@@ -1,4 +1,4 @@
-import { isTabFocused } from './isTabFocused';
+import { isTabFocused } from './isTabFocused.js';
 
 /**
  * Set callbacks for if current browser tab is in focus

package/src/dateTime/index.ts

@@ -1,4 +1,4 @@
-export * from './interfaces';
+export * from './interfaces/index.js';
 
-export * from './dateAsIso';
-export * from './parseDuration';
+export * from './dateAsIso.js';
+export * from './parseDuration.js';

package/src/dateTime/interfaces/index.ts

@@ -1 +1 @@
-export * from './parseDuration';
+export * from './parseDuration.js';

package/src/dateTime/parseDuration.ts

@@ -1,4 +1,4 @@
-import { IDuration } from './interfaces/parseDuration';
+import { IDuration } from './interfaces/parseDuration.js';
 
 /**
  * Parse duration in milliseconds into days, hours, minutes, seconds, milliseconds

package/src/dom/createElement.ts

@@ -1,4 +1,4 @@
-import { IExtendingElementProps } from './interfaces/createElement';
+import { IExtendingElementProps } from './interfaces/createElement.js';
 
 /**
  * Method for creating Node element and assigning multiple parameters, event listeners & children in one method call

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 getOffset = (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

@@ -1,9 +1,10 @@
-export * from './interfaces';
+export * from './interfaces/index.js';
 
-export * from './addAsyncEventListener';
-export * from './addClickOutsideListener';
-export * from './addEventListener';
-export * from './appendAfter';
-export * from './appendBefore';
-export * from './createElement';
-export * from './fireEvent';
+export * from './addAsyncEventListener.js';
+export * from './addClickOutsideListener.js';
+export * from './addEventListener.js';
+export * from './appendAfter.js';
+export * from './appendBefore.js';
+export * from './createElement.js';
+export * from './fireEvent.js';
+export * from './getElementOffset.js';

package/src/dom/interfaces/index.ts

@@ -1 +1 @@
-export * from './createElement';
+export * from './createElement.js';

package/src/general/index.ts

@@ -1,3 +1,3 @@
-export * from './isEmpty';
-export * from './isNil';
-export * from './isValidJson';
+export * from './isEmpty.js';
+export * from './isNil.js';
+export * from './isValidJson.js';

package/src/general/isEmpty.ts

@@ -1,4 +1,4 @@
-import { isNil } from './isNil';
+import { isNil } from './isNil.js';
 
 /**
  * Check if given value is empty

package/src/index.ts

@@ -1,6 +1,6 @@
-export * from './browser';
-export * from './dateTime';
-export * from './dom';
-export * from './general';
-export * from './schedule';
-export * from './string';
+export * from './browser/index.js';
+export * from './dateTime/index.js';
+export * from './dom/index.js';
+export * from './general/index.js';
+export * from './schedule/index.js';
+export * from './string/index.js';

package/src/schedule/index.ts

@@ -1,2 +1,2 @@
-export * from './runAnimation';
-export * from './runAsync';
+export * from './runAnimation.js';
+export * from './runAsync.js';

package/src/string/index.ts

@@ -1,5 +1,5 @@
-export * from './byteSize';
-export * from './escapeHTML';
-export * from './removeDiacritics';
-export * from './slugify';
-export * from './truncate';
+export * from './byteSize.js';
+export * from './escapeHTML.js';
+export * from './removeDiacritics.js';
+export * from './slugify.js';
+export * from './truncate.js';

package/src/string/slugify.ts

@@ -1,4 +1,4 @@
-import { removeDiacritics } from './removeDiacritics';
+import { removeDiacritics } from './removeDiacritics.js';
 
 /**
  * Create slug from given string