|
156 | 156 | } |
157 | 157 | } |
158 | 158 |
|
159 | | - function setupRadioCarousel(root, track) { |
160 | | - const radios = root.querySelectorAll('input[type="radio"].testimonial-card__state'); |
161 | | - if (radios.length === 0) return; |
162 | | - const items = track.querySelectorAll(CAROUSEL_ITEM_SELECTOR); |
163 | | - |
164 | | - let scrolling = false; |
165 | | - let scrollTimeout = null; |
166 | | - |
167 | | - function syncInert(activeIdx) { |
168 | | - items.forEach(function (item, i) { |
169 | | - if (i === activeIdx) item.removeAttribute('inert'); |
170 | | - else item.setAttribute('inert', ''); |
171 | | - }); |
172 | | - } |
173 | | - |
174 | | - const initialIdx = Array.prototype.findIndex.call(radios, function (r) { return r.checked; }); |
175 | | - syncInert(initialIdx >= 0 ? initialIdx : 0); |
176 | | - |
177 | | - radios.forEach(function (radio, idx) { |
178 | | - radio.addEventListener('change', function () { |
179 | | - if (!radio.checked) return; |
180 | | - syncInert(idx); |
181 | | - const target = items[idx]; |
182 | | - if (!target) return; |
183 | | - scrolling = true; |
184 | | - target.scrollIntoView({ inline: 'start', block: 'nearest', behavior: 'smooth' }); |
185 | | - clearTimeout(scrollTimeout); |
186 | | - scrollTimeout = setTimeout(function () { scrolling = false; }, 400); |
187 | | - }); |
188 | | - }); |
189 | | - |
190 | | - track.addEventListener('scroll', function () { |
191 | | - if (scrolling) return; |
192 | | - const first = items[0]; |
193 | | - if (!first) return; |
194 | | - const itemWidth = first.offsetWidth; |
195 | | - if (itemWidth === 0) return; |
196 | | - const idx = Math.round(track.scrollLeft / itemWidth); |
197 | | - const radio = radios[Math.max(0, Math.min(radios.length - 1, idx))]; |
198 | | - if (radio && !radio.checked) { |
199 | | - radio.checked = true; |
200 | | - syncInert(idx); |
201 | | - } |
202 | | - }, { passive: true }); |
203 | | - } |
204 | | - |
205 | 159 | function initCarousel(root) { |
206 | 160 | if (!root || !root.id) return; |
207 | 161 | const track = root.querySelector('[data-carousel-track]'); |
208 | 162 | const controls = document.getElementById(root.id + '-controls'); |
209 | 163 | if (!track || !controls) return; |
210 | 164 |
|
211 | | - if (root.hasAttribute('data-carousel-radios')) { |
212 | | - setupRadioCarousel(root, track); |
213 | | - return; |
214 | | - } |
215 | | - |
216 | 165 | if (root.hasAttribute('data-carousel-infinite')) { |
217 | 166 | setupInfiniteCarousel(root, track); |
218 | 167 | return; |
|
0 commit comments