feat: add animation preview (Dun-sin#388)

* feat: Add animation preview

* fix: Fix position of animation preview slider

* fix: Fixed formatting

Author: Leeyah-123

index.html

@@ -623,6 +623,8 @@ <h2>
 
           <!-- Animation -->
           <div data-content="animation">
+            <div class="preview-slider"></div>
+
             <div class="animation-type">
               <p>Animation Type</p>
               <div class="radio-group">
@@ -830,7 +832,7 @@ <h2>
 
             <div class="btn" data-button="box-shadow">Get Results</div>
           </div>
-          <!-- End of Box Shadown -->
+          <!-- End of Box Shadow -->
 
           <!-- Text Shadow Generator -->
           <div data-content="text-shadow">

src/main.ts

@@ -1,25 +1,29 @@
 // Generator Modules
-import {picTextGenerator} from './pages/pic-text';
 import {
-  addGradientTextListener,
-  gradientTextGenerator,
-} from './pages/gradient-text';
+  addAnimationListener,
+  animationGenerator,
+  displayAnimationPreview,
+} from './pages/animation';
 import {
-  gradientBorderGenerator,
-  addGradientBorderListener,
-} from './pages/gradient-border';
+  addBorderRadiusListener,
+  borderRadiusGenerator,
+} from './pages/border-radius';
+import {addBoxShadowListener, boxShadowGenerator} from './pages/box-shadow';
 import {
   addGradientBackgroundListener,
   gradientBackgroundGenerator,
 } from './pages/gradient-background';
-import {addAnimationListener, animationGenerator} from './pages/animation';
 import {
-  addBorderRadiusListener,
-  borderRadiusGenerator,
-} from './pages/border-radius';
-import {boxShadowGenerator, addBoxShadowListener} from './pages/box-shadow';
-import {addTextShadowListener, textShadowGenerator} from './pages/text-shadow';
+  addGradientBorderListener,
+  gradientBorderGenerator,
+} from './pages/gradient-border';
+import {
+  addGradientTextListener,
+  gradientTextGenerator,
+} from './pages/gradient-text';
 import {rangeGenerator} from './pages/input-range';
+import {picTextGenerator} from './pages/pic-text';
+import {addTextShadowListener, textShadowGenerator} from './pages/text-shadow';
 
 // Packages
 import * as FilePond from 'filepond';
@@ -33,7 +37,10 @@ import FilePondPluginImageTransform from 'filepond-plugin-image-transform';
 import 'filepond-plugin-image-preview/dist/filepond-plugin-image-preview.css';
 import {
   getGeneratorsElement,
+  getInputSpinner,
   getOpenSideBarButton,
+  getRadioButtonSet,
+  getRange,
   getResultPage,
 } from './lib/getElements';
 
@@ -110,6 +117,9 @@ const downloadButtons = document.querySelectorAll(
   '.image-download'
 ) as NodeListOf<HTMLElement>;
 const dropDownElements = document.querySelectorAll('.dropdown');
+const getDegreeElement = getRange('animation');
+const getRadioButtonSetElement = getRadioButtonSet('animation');
+const getDurationElement = getInputSpinner('animation');
 if (openSidePanelButton) {
   openSidePanelButton.style.display = 'none';
 }
@@ -377,6 +387,17 @@ getResultsButton.forEach((getResult) => {
   });
 });
 
+getDegreeElement?.addEventListener('change', () => displayAnimationPreview());
+getRadioButtonSetElement.forEach((radioButton: HTMLInputElement) => {
+  radioButton.onclick = () => {
+    displayAnimationPreview();
+  };
+});
+getDurationElement?.addEventListener('change', () => {
+  displayAnimationPreview();
+});
+
+// configuring dropdown menu
 dropDownElements.forEach((dropDown) => {
   const listElement = dropDown.lastElementChild as HTMLElement;
 

src/pages/animation.ts

@@ -1,17 +1,19 @@
 import copy from 'copy-to-clipboard';
 import {
   getCopyCodeButton,
+  getInputSpinner,
   getOutput,
+  getPreviewSlider,
+  getRadioButtonSet,
   getRange,
-  getInputSpinner,
-  getStyleSheet,
   getResultPage,
-  getRadioButtonSet,
+  getStyleSheet,
 } from '../lib/getElements';
-import {showPopup, setGradientDegreeValue} from '../lib/packages';
+import {setGradientDegreeValue, showPopup, slideIn} from '../lib/packages';
 
 let initial_length = 0;
 // let rule_added = false;
+let isAnimationSliderOpen = false;
 let css = '';
 
 type Values = {
@@ -27,6 +29,8 @@ const getOutputElement = getOutput(attribute);
 const getDegreeElement = getRange(attribute);
 const getRadioButtonSetElement = getRadioButtonSet(attribute);
 
+const preview = getPreviewSlider(attribute);
+
 initialConfiguration(
   getRadioButtonSetElement,
   getDegreeElement,
@@ -69,6 +73,39 @@ export function animationGenerator(type: 'newResults' | 'oldResults' | null) {
   manageAnimation(values, getOutputElement, Stylesheet);
 }
 
+// configuring animation preview
+export function displayAnimationPreview() {
+  slideIn(preview, isAnimationSliderOpen);
+  isAnimationSliderOpen = true;
+
+  if (preview.getAttribute('data-running') !== 'true') {
+    const duration = getInputSpinner(attribute);
+
+    const Stylesheet = getStyleSheet();
+
+    let i = 0;
+
+    for (i = 0; i < getRadioButtonSetElement.length; i++)
+      if (getRadioButtonSetElement[i].checked) break;
+
+    const values: Values = {
+      type: getRadioButtonSetElement[i].value,
+      degree: getDegreeElement.value,
+      duration: duration.value,
+    };
+
+    // only updating preview animation if no current animation is running
+    preview.onanimationend = () => {
+      preview.setAttribute('data-running', 'false');
+      preview.style.animation = '';
+      Stylesheet.deleteRule(initial_length + 1);
+    };
+
+    preview.setAttribute('data-running', 'true');
+    manageAnimation(values, preview, Stylesheet);
+  }
+}
+
 /**
  * sets the animation to the output element
  *

src/style.css

@@ -296,6 +296,10 @@ main > section:last-of-type {
   align-items: center;
 }
 
+[data-content='animation'] .preview-slider {
+  top: -50%;
+}
+
 [data-content='pic-text'] {
   display: flex;
 }