| 1 | import type { |
| 2 | SlideAutoAnimateProps, |
| 3 | SlideBackgroundProps, |
| 4 | SlideDataAttributeValue, |
| 5 | SlideProps, |
| 6 | SlideRevealProps, |
| 7 | } from '../types'; |
| 8 | |
| 9 | export const EMPTY_DATA_ATTRIBUTES_SIGNATURE = '[]'; |
| 10 | |
| 11 | export type SlideShorthandProps = SlideBackgroundProps & SlideAutoAnimateProps & SlideRevealProps; |
| 12 | |
| 13 | export type SlideElementProps = Omit<SlideProps, 'children' | keyof SlideShorthandProps>; |
| 14 | |
| 15 | const SLIDE_DATA_ATTRIBUTES: Record<keyof SlideShorthandProps, `data-${string}`> = { |
| 16 | background: 'data-background', |
| 17 | backgroundImage: 'data-background-image', |
| 18 | backgroundVideo: 'data-background-video', |
| 19 | backgroundVideoLoop: 'data-background-video-loop', |
| 20 | backgroundVideoMuted: 'data-background-video-muted', |
| 21 | backgroundIframe: 'data-background-iframe', |
| 22 | backgroundColor: 'data-background-color', |
| 23 | backgroundGradient: 'data-background-gradient', |
| 24 | backgroundSize: 'data-background-size', |
| 25 | backgroundPosition: 'data-background-position', |
| 26 | backgroundRepeat: 'data-background-repeat', |
| 27 | backgroundOpacity: 'data-background-opacity', |
| 28 | backgroundTransition: 'data-background-transition', |
| 29 | visibility: 'data-visibility', |
| 30 | autoAnimate: 'data-auto-animate', |
| 31 | autoAnimateId: 'data-auto-animate-id', |
| 32 | autoAnimateRestart: 'data-auto-animate-restart', |
| 33 | autoAnimateUnmatched: 'data-auto-animate-unmatched', |
| 34 | autoAnimateEasing: 'data-auto-animate-easing', |
| 35 | autoAnimateDuration: 'data-auto-animate-duration', |
| 36 | autoAnimateDelay: 'data-auto-animate-delay', |
| 37 | transition: 'data-transition', |
| 38 | transitionSpeed: 'data-transition-speed', |
| 39 | autoSlide: 'data-autoslide', |
| 40 | notes: 'data-notes', |
| 41 | backgroundInteractive: 'data-background-interactive', |
| 42 | preload: 'data-preload', |
| 43 | }; |
| 44 | |
| 45 | export function getDataAttributesSignature(attributes: SlideElementProps) { |
| 46 | return JSON.stringify( |
| 47 | Object.entries(attributes) |
| 48 | .filter(([key]) => key.startsWith('data-')) |
| 49 | .sort(([a], [b]) => a.localeCompare(b)) |
| 50 | ); |
| 51 | } |
| 52 | |
| 53 | export function getSlideAttributes( |
| 54 | attributes: SlideElementProps, |
| 55 | shorthandProps: SlideShorthandProps |
| 56 | ): SlideElementProps { |
| 57 | const resolvedAttributes = { ...attributes } as SlideElementProps; |
| 58 | const resolvedDataAttributes = resolvedAttributes as unknown as Record< |
| 59 | string, |
| 60 | SlideDataAttributeValue |
| 61 | >; |
| 62 | |
| 63 | for (const [propName, dataAttributeName] of Object.entries(SLIDE_DATA_ATTRIBUTES) as Array< |
| 64 | [keyof SlideShorthandProps, `data-${string}`] |
| 65 | >) { |
| 66 | if (resolvedDataAttributes[dataAttributeName] !== undefined) continue; |
| 67 | |
| 68 | const value = shorthandProps[propName]; |
| 69 | if (value === undefined) continue; |
| 70 | |
| 71 | if (value === false) { |
| 72 | if (propName === 'autoAnimateUnmatched') { |
| 73 | resolvedDataAttributes[dataAttributeName] = 'false'; |
| 74 | } |
| 75 | continue; |
| 76 | } |
| 77 | |
| 78 | resolvedDataAttributes[dataAttributeName] = typeof value === 'boolean' ? '' : value; |
| 79 | } |
| 80 | |
| 81 | return resolvedAttributes; |
| 82 | } |
| 83 |