Merge pull request #37 from evertzner/main

added toggle to animate all at the same time

web/src/pages/index.astro

@@ -76,6 +76,17 @@ export default {
       </div>
     </header>
 
+    <section class='mb-6 flex items-center justify-center'>
+      <label class='relative inline-flex cursor-pointer items-center'>
+        <input type='checkbox' value='' class='peer sr-only' id='animate' />
+        <div
+          class="rtl:peer-checked:after:-translate-x- peer h-8 w-16 rounded-full bg-gray-200 after:absolute after:start-[2px] after:top-[2px] after:h-7 after:w-7 after:rounded-full after:border after:border-gray-300 after:bg-white after:transition-all after:content-[''] peer-checked:bg-zinc-600 peer-checked:after:translate-x-[31px] peer-checked:after:border-white peer-focus:outline-none dark:bg-zinc-300"
+        >
+        </div>
+        <span class='ms-3 text-xl font-medium text-gray-900'>Animate all</span>
+      </label>
+    </section>
+
     <section
       class='m-auto grid max-w-4xl grid-cols-2 gap-4 px-4 sm:grid-cols-3 lg:grid-cols-4'
     >
@@ -124,7 +135,7 @@ export default {
           target='_blank'
           rel='noopener noreferrer'
         >
-        community❤</a
+          community❤</a
         >
       </p>
 
@@ -137,6 +148,8 @@ export default {
 
   const $articles = document.querySelectorAll('article')
 
+  const $animateAll: HTMLInputElement = document.querySelector('#animate')!
+
   $articles.forEach(($article) => {
     const animationKey = $article.getAttribute('data-class')
     const animationClass = `animate-${animationKey}`
@@ -152,6 +165,16 @@ export default {
       $box.classList.remove(animationClass)
     })
 
+    $animateAll.addEventListener('change', () => {
+      if ($animateAll.checked) {
+        $box.classList.add(animationClass)
+        $box.style.animationIterationCount = 'infinite'
+      } else {
+        $box.classList.remove(animationClass)
+        $box.style.animationIterationCount = 'unset'
+      }
+    })
+
     $article.addEventListener('click', () => {
       navigator.clipboard.writeText(animationClass)
       toast('Copied to clipboard!', {