@vtbag/utensil-drawer
Version:
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.
54 lines (53 loc) • 2.33 kB
JavaScript
let typeAttributes;
export const getTypeAttributes = () => typeAttributes;
export function root(scope) {
return 'documentElement' in scope ? scope.documentElement : scope;
}
export function polyfilledTypes(scope, viewTransition, proxied) {
if (!proxied)
return viewTransition;
//@ts-ignore
const classList = ('documentElement' in scope ? scope.documentElement : scope).classList;
let types = undefined;
const typeAttr = 'vtbag-vtt-0'; // for :active-view-transition, postcss-active-view-transition-type
classList.add(typeAttr);
typeAttributes = new Set([typeAttr]);
return new Proxy(viewTransition, {
get(target, prop) {
if (prop === 'types') {
return (types ??= new Proxy(target.types ?? new Set(), {
get(typesTarget, typesProp) {
if (typesProp === 'add') {
return (value) => {
typesTarget.add(value);
const typeAttr = 'vtbag-vtt-' + value;
typeAttributes.add(typeAttr);
classList.add(typeAttr);
};
}
else if (typesProp === 'delete') {
return (value) => {
typesTarget.delete(value);
classList.remove('vtbag-vtt-' + value);
};
}
else if (typesProp === 'clear') {
return () => {
typesTarget.forEach((value) => classList.remove('vtbag-vtt-' + value));
typesTarget.clear();
};
}
else if (typesProp === 'has') {
return (value) => typeAttributes.has(value);
}
else if (typesProp === Symbol.iterator) {
return () => typesTarget[Symbol.iterator]();
}
return typesTarget[typesProp];
},
}));
}
return target[prop];
},
});
}