1+ ( function ( ) {
2+ const initializedRoots = new WeakSet ( ) ;
3+
4+ function isMode ( v ) {
5+ return v === "light" || v === "dark" ;
6+ }
7+
8+ function initRoot ( root ) {
9+ if ( ! ( root instanceof HTMLElement ) ) return ;
10+ if ( initializedRoots . has ( root ) ) return ;
11+ initializedRoots . add ( root ) ;
12+
13+ const optionButtons = Array . from (
14+ root . querySelectorAll ( "[data-image-toggle-button]" )
15+ ) . filter ( ( n ) => n instanceof HTMLElement ) ;
16+
17+ const modeButtons = Array . from (
18+ root . querySelectorAll ( "[data-image-toggle-to]" )
19+ ) . filter ( ( n ) => n instanceof HTMLElement ) ;
20+
21+ const cards = Array . from ( root . querySelectorAll ( "[data-image-card]" ) ) . filter (
22+ ( n ) => n instanceof HTMLElement
23+ ) ;
24+
25+ optionButtons . forEach ( ( btn ) => {
26+ if ( ! btn . hasAttribute ( "data-default-variant" ) ) {
27+ btn . setAttribute ( "data-default-variant" , btn . getAttribute ( "data-variant" ) || "filled" ) ;
28+ }
29+ } ) ;
30+
31+ const getMode = ( ) => root . getAttribute ( "data-mode" ) === "dark" ? "dark" : "light" ;
32+ const setMode = ( mode ) => root . setAttribute ( "data-mode" , mode ) ;
33+
34+ const getActiveId = ( ) =>
35+ root . getAttribute ( "data-active-id" ) ||
36+ optionButtons [ 0 ] ?. getAttribute ( "data-image-id" ) ||
37+ "" ;
38+
39+ const setActiveId = ( id ) => root . setAttribute ( "data-active-id" , id ) ;
40+
41+ const updateModeButtons = ( ) => {
42+ const mode = getMode ( ) ;
43+
44+ modeButtons . forEach ( ( btn ) => {
45+ const to = btn . getAttribute ( "data-image-toggle-to" ) ;
46+ const show =
47+ ( mode === "light" && to === "dark" ) ||
48+ ( mode === "dark" && to === "light" ) ;
49+
50+ btn . style . display = show ? "" : "none" ;
51+ btn . setAttribute ( "aria-hidden" , show ? "false" : "true" ) ;
52+
53+ try {
54+ btn . tabIndex = show ? 0 : - 1 ;
55+ } catch ( e ) { }
56+ } ) ;
57+ } ;
58+
59+ const update = ( ) => {
60+ const mode = getMode ( ) ;
61+ const activeId = getActiveId ( ) ;
62+
63+ optionButtons . forEach ( ( btn ) => {
64+ const id = btn . getAttribute ( "data-image-id" ) ;
65+ const isActive = id === activeId ;
66+
67+ if ( isActive ) {
68+ btn . setAttribute ( "data-active" , "true" ) ;
69+ btn . setAttribute ( "aria-pressed" , "true" ) ;
70+ const defaultVariant = btn . getAttribute ( "data-default-variant" ) || "filled" ;
71+ btn . setAttribute ( "data-variant" , defaultVariant ) ;
72+ } else {
73+ btn . removeAttribute ( "data-active" ) ;
74+ btn . setAttribute ( "aria-pressed" , "false" ) ;
75+ btn . setAttribute ( "data-variant" , "ghost" ) ;
76+ }
77+ } ) ;
78+
79+ cards . forEach ( ( card ) => {
80+ const id = card . getAttribute ( "data-image-id" ) ;
81+ const cardMode = card . getAttribute ( "data-image-mode" ) ;
82+ const isActive = id === activeId && cardMode === mode ;
83+
84+ if ( isActive ) {
85+ card . setAttribute ( "data-active" , "true" ) ;
86+ card . setAttribute ( "aria-hidden" , "false" ) ;
87+ } else {
88+ card . removeAttribute ( "data-active" ) ;
89+ card . setAttribute ( "aria-hidden" , "true" ) ;
90+ }
91+ } ) ;
92+
93+ updateModeButtons ( ) ;
94+ } ;
95+
96+ optionButtons . forEach ( ( btn ) => {
97+ btn . addEventListener ( "click" , ( e ) => {
98+ e . preventDefault ( ) ;
99+ e . stopPropagation ( ) ;
100+
101+ const id = btn . getAttribute ( "data-image-id" ) ;
102+ if ( id ) {
103+ setActiveId ( id ) ;
104+ update ( ) ;
105+ }
106+ } ) ;
107+ } ) ;
108+
109+ modeButtons . forEach ( ( btn ) => {
110+ btn . addEventListener ( "click" , ( e ) => {
111+ e . preventDefault ( ) ;
112+ e . stopPropagation ( ) ;
113+
114+ const to = btn . getAttribute ( "data-image-toggle-to" ) ;
115+ if ( isMode ( to ) ) {
116+ setMode ( to ) ;
117+ update ( ) ;
118+ }
119+ } ) ;
120+ } ) ;
121+
122+ update ( ) ;
123+ }
124+
125+ function scan ( ) {
126+ const roots = document . querySelectorAll ( "[data-image-toggle-root]" ) ;
127+ roots . forEach ( initRoot ) ;
128+ }
129+
130+ function setupObserver ( ) {
131+ if ( ! document . body ) return ;
132+ const obs = new MutationObserver ( ( ) => scan ( ) ) ;
133+ obs . observe ( document . body , { childList : true , subtree : true } ) ;
134+ }
135+
136+ if ( document . readyState === "loading" ) {
137+ document . addEventListener (
138+ "DOMContentLoaded" ,
139+ ( ) => {
140+ scan ( ) ;
141+ setupObserver ( ) ;
142+ } ,
143+ { once : true }
144+ ) ;
145+ } else {
146+ scan ( ) ;
147+ setupObserver ( ) ;
148+ }
149+
150+ document . addEventListener ( "astro:page-load" , scan ) ;
151+ document . addEventListener ( "astro:after-swap" , scan ) ;
152+ } ) ( ) ;
0 commit comments