@vtbag/utensil-drawer - npm Package Compare versions

Comparing version 0.0.3 to 0.0.4

lib/bundled/declarative-names.js

lib/drawer.js

		@@ -32,3 +32,2 @@ export function ensureDrawer() {
		updateDOM && (await updateDOM());
		console.log('drawer.viewTransition :>> ', drawer.viewTransition);
		drawer.after.map((interceptor) => interceptor(drawer.viewTransition));
		@@ -35,0 +34,0 @@ drawer.after = [];

lib/index.d.ts

		@@ -1,3 +0,3 @@
		export { setViewTransitionNames, setOldPageViewTransitionNames, setNewPageViewTransitionNames, } from './set-view-transition-names';
		export { setGivenViewTransitionNames, setSelectedViewTransitionNames, setOldPageViewTransitionNames, setNewPageViewTransitionNames, } from './set-view-transition-names';
		export { mayStartViewTransition } from './may-start-view-transition';
		export { beforeAndAfter } from './before-and-after';

lib/index.js

		@@ -1,3 +0,3 @@
		export { setViewTransitionNames, setOldPageViewTransitionNames, setNewPageViewTransitionNames, } from './set-view-transition-names';
		export { setGivenViewTransitionNames, setSelectedViewTransitionNames, setOldPageViewTransitionNames, setNewPageViewTransitionNames, } from './set-view-transition-names';
		export { mayStartViewTransition } from './may-start-view-transition';
		export { beforeAndAfter } from './before-and-after';

lib/set-view-transition-names.d.ts

		@@ -1,3 +0,4 @@
		export declare function setViewTransitionNames(selector: string, prefix: any): void;
		export declare function setSelectedViewTransitionNames(selector: string, prefix: any, force?: boolean): void;
		export declare function setGivenViewTransitionNames(elements: HTMLElement[], prefix: string, force?: boolean): void;
		export declare function setOldPageViewTransitionNames(selector: string, prefix: any): void;
		export declare function setNewPageViewTransitionNames(selector: string, prefix: any): void;

lib/set-view-transition-names.js

		@@ -1,13 +0,36 @@
		export function setViewTransitionNames(selector, prefix) {
		const elements = document.querySelectorAll(selector);
		/* Sets the view transition name in the style attribute of selected elements, see setGivenViewTransitionNames.
		`selector´is an arbitrary CSS selector for the current document
		*/
		export function setSelectedViewTransitionNames(selector, prefix, force = false) {
		setGivenViewTransitionNames([...document.querySelectorAll(selector)], prefix, force);
		}
		/* Sets the view transition name in the style attribute of the given elements.
		If `elements` has exactly one entry, `prefix` is used as a name.
		Otherwise the `elements` are named with the `prefix` with an appended index starting from 0.
		If `force` is true, the names are always set, otherwise only if they are not already set.
		If the prefix string ends with a '~', the character is replaced by a '-' and the names are assigned in random order.
		*/
		export function setGivenViewTransitionNames(elements, prefix, force = false) {
		if (prefix[prefix.length - 1] === '~') {
		prefix = prefix.slice(0, -1) + '-';
		shuffle(elements);
		}
		elements.forEach((element, idx, array) => {
		element.style.viewTransitionName = `${prefix}${array.length > 1 ? idx : ''}`;
		(force && (element.style.viewTransitionName = `${prefix}${array.length > 1 ? idx : ''}`)) \|\|
		(element.style.viewTransitionName \|\|= `${prefix}${array.length > 1 ? idx : ''}`);
		});
		}
		export function setOldPageViewTransitionNames(selector, prefix) {
		addEventListener('pageswap', () => setViewTransitionNames(selector, prefix));
		addEventListener('pageswap', () => setSelectedViewTransitionNames(selector, prefix));
		}
		// The pagereveal event fires very early. Thus scripts using this code should load inside the <head>
		export function setNewPageViewTransitionNames(selector, prefix) {
		addEventListener('pagereveal', () => setViewTransitionNames(selector, prefix));
		addEventListener('pagereveal', () => setSelectedViewTransitionNames(selector, prefix));
		}
		function shuffle(array) {
		for (let i = array.length - 1; i > 0; --i) {
		const j = Math.floor(Math.random() * (i + 1));
		[array[i], array[j]] = [array[j], array[i]];
		}
		return array;
		}

package.json

		{
		"name": "@vtbag/utensil-drawer",
		"type": "module",
		"version": "0.0.3",
		"version": "0.0.4",
		"main": "lib/index.js",
		@@ -15,3 +15,3 @@ "description": "Pull out just what you need to craft seamless transitions. The Utensil Drawer holds reusable functions to help you build websites with view transitions. It is a bit sparse right now, but like the one in your kitchen, it is bound to fill up over time.",
		".": "./lib/index.js",
		"./vtn": "./lib/bundled/vtn.js"
		"./declarative-names": "./lib/bundled/declarative-names.js"
		},
		@@ -51,10 +51,10 @@ "scripts": {
		"devDependencies": {
		"@changesets/cli": "^2.27.10",
		"@eslint/js": "^9.16.0",
		"@changesets/cli": "^2.27.12",
		"@eslint/js": "^9.19.0",
		"@types/dom-navigation": "^1.0.4",
		"@types/dom-view-transitions": "^1.0.5",
		"esbuild": "^0.24.0",
		"esbuild": "^0.24.2",
		"prettier": "^3.4.2",
		"typescript": "^5.7.2"
		"typescript": "^5.7.3"
		}
		}

lib/bundled/vtn.js

@vtbag/utensil-drawer - npm Package Compare versions

Improved metrics