Merge pull request #48 from barrilocho/feat-select-options

[Feat] Add properties options selects in web

src/theme.js

@@ -415,8 +415,8 @@ export default {
     }
   },
   animationDelay: {
-    none: 0,
-    0: 0,
+    none: '0ms',
+    0: '0ms',
     100: '100ms',
     150: '150ms',
     200: '200ms',
@@ -430,13 +430,13 @@ export default {
     1000: '1000ms'
   },
   animationDuration: {
-    none: 0,
+    none: '0ms',
     slower: '500ms',
     slow: '400ms',
     normal: '300ms',
     fast: '200ms',
     faster: '100ms',
-    0: 0,
+    0: '0ms',
     100: '100ms',
     150: '150ms',
     200: '200ms',
@@ -450,7 +450,7 @@ export default {
     1000: '1000ms'
   },
   animationSteps: {
-    none: '0 ',
+    none: '0',
     retro: '8',
     normal: '16',
     modern: '24'

web/src/pages/index.astro

@@ -9,7 +9,7 @@ import { Code } from 'astro:components'
 import Github from '@components/icons/github.astro'
 import ToggleTheme from '@components/ToggleTheme.astro'
 
-const { animation } = theme
+const { animation, animationDuration, animationSteps, animationDelay } = theme
 const { version } = pkg
 ---
 
@@ -87,6 +87,32 @@ export default {
         </div>
         <span class='ms-3 text-xl font-medium text-gray-900 dark:text-gray-100'>Animate all</span>
       </label>
+    </section>  
+    <section class='mb-6 grid grid-flow-col gap-6 columns-4 items-center justify-center'>
+      <label for="duration" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
+        Duration
+        <select name="duration" id="duration" class="mt-2 bg-gray-50 min-w-36 border border-gray-300 text-gray-900 text-sm rounded-lg block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white">
+          {Object.entries(animationDuration).map(([key, value])=> {
+            return (<option value={value}>{key}</option>)
+          })}
+        </select>
+      </label>
+      <label for="delay" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
+        Delay
+        <select name="delay" id="delay" class="mt-2 bg-gray-50 min-w-36 border border-gray-300 text-gray-900 text-sm rounded-lg  block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white">
+          {Object.entries(animationDelay).map(([key, value])=> {
+            return (<option value={value}>{key}</option>)
+          })}
+        </select>
+      </label>
+      <label for="steps" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
+        Steps
+        <select name="steps" id="steps" class="mt-2 bg-gray-50 min-w-36 border border-gray-300 text-gray-900 text-sm rounded-lg block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white">
+          {Object.entries(animationSteps).map(([key, value])=> {
+            return (<option value={value}>{key}</option>)
+          })}
+        </select>
+      </label>
     </section>
 
     <section
@@ -151,6 +177,9 @@ export default {
   const $articles = document.querySelectorAll('article')
 
   const $animateAll: HTMLInputElement = document.querySelector('#animate')!
+  const $duration: HTMLSelectElement = document.querySelector('#duration')!
+  const $steps: HTMLSelectElement = document.querySelector('#steps')!
+  const $delay: HTMLSelectElement = document.querySelector('#delay')!
 
   // functions to use as events handlers
   // created to add and remove the events depending on the toggle
@@ -170,7 +199,6 @@ export default {
     $box.classList.remove(animationClass)
   }
 
-
   $animateAll.addEventListener('change', () => {
     $articles.forEach(($article) => {
       const animationKey = $article.getAttribute('data-class')
@@ -193,6 +221,34 @@ export default {
     })
   })
 
+  $duration.addEventListener('change', (event) => {
+    const target = event.target as HTMLSelectElement;
+    $articles.forEach(($article) => {
+      const $box = $article.querySelector('span')
+      if ($box == null) return
+      $box.style.animationDuration = target.value
+    })
+  });
+
+  $steps.addEventListener('change', (event) => {
+    const target = event.target as HTMLSelectElement;
+    $articles.forEach(($article) => {
+      const $box = $article.querySelector('span')
+      if ($box == null) return
+      $box.style.animationTimingFunction = `steps(${target.value})`
+    })
+  });
+
+  $delay.addEventListener('change', (event) => {
+    const target = event.target as HTMLSelectElement;
+    $articles.forEach(($article) => {
+      const $box = $article.querySelector('span')
+      if ($box == null) return
+      $box.style.animationDelay = target.value
+    })
+  });
+
+
   $articles.forEach(($article) => {
     const animationKey = $article.getAttribute('data-class')
     const animationClass = `animate-${animationKey}`