All files / src/lib view-transition-name.ts

1
2
3
4
5
6
7
8
9
10
 
 
 
 
 
 
 
5x
 
 
/**
 * The shared view-transition-name for a project's photo, so a swatch on a
 * listing morphs into the opened project's gallery. Project ids carry
 * characters like ':' that are not valid in a CSS ident, so they are folded
 * to '-'. Two elements on one page must never share a name.
 */
export function projectTransitionName(id: string): string {
	return `project-${id.replace(/[^a-zA-Z0-9_-]/g, "-")}`;
}