feat: jsCssAnimation.init() accepting 'eventType' option

if eventType is not passed, it will be set to 'click' by default
eventType can be any value valid to be passed to addEventListener() first argument

Author: igorMSoares

index.html

@@ -138,8 +138,7 @@ <h2>Rotations</h2>
               name="rotation-angle"
               id="rotation-angle"
           /></label>
-          <button class="rotation--btn">Rotate</button>
-          <p class="rotation--input-error"></p>
+          <p class="rotation--input-error" style="display: none"></p>
           <div class="rotation-area">
             <p class="rotation-area--text">↑</p>
           </div>

js-css-animations/animate.js

@@ -497,10 +497,11 @@ const eventHandler = (el, animationId, opts) => {
  * Initiate the event listener with the animation
  * @param {number} animationId - The ID of the animation in *_ANIMS_ID object
  * @param {Object} opts - All options passed by the user
+ * @param {string} eventType - The event to attach the animation to
  * @see {@link module:globals.VISIBILITY_ANIMS_ID}
  * @see {@link module:globals.MOTION_ANIMS_ID}
  */
-const init = (animationId, opts = {}) => {
+const init = (animationId, opts = {}, eventType = 'click') => {
   const {
     triggerBtn = `.${CLASS_NAMES.triggerBtn}`,
     targetSelector,
@@ -520,7 +521,7 @@ const init = (animationId, opts = {}) => {
       .querySelectorAll(getTargetSelector(btn))
       .forEach((el, i, queryList) => {
         btn.addEventListener(
-          'click',
+          eventType,
           // @ts-ignore
           eventHandler(el, animationId, {
             ...opts,

js-css-animations/js-css-animations.js

@@ -193,8 +193,9 @@ const eventBoundAnimations = (() => {
        * Initiate the event listener with the animation to be performed
        * @param {Object.<string, any>} opts - Contains all options passed by the user to customize the animation
        */
-      animations[animName] = opts =>
-        init(animIds[animName], { animType, ...opts });
+      animations[animName] = opts => {
+        init(animIds[animName], { animType, ...opts }, opts.eventType);
+      };
     });
   });
   return animations;

main.js

@@ -70,42 +70,40 @@ jsCssAnimations.init.fade({
   keepSpace: true,
 });
 
-document.querySelector('.rotation--btn')?.addEventListener('click', () => {
-  const input = document.getElementById('rotation-angle');
-  const msgArea = document.querySelector('.rotation--input-error');
-  // @ts-ignore
-  const angle = input.value;
-  // @ts-ignore
+const validateInput = input => {
   if (input.validity.patternMismatch) {
-    jsCssAnimations.hide.fade(input, {
-      duration: 200,
-      keepSpace: true,
+    const msgArea = document.querySelector('.rotation--input-error');
+    // @ts-ignore
+    msgArea.innerText = 'Type in a number (e.g.: 270, -22.5)';
+    jsCssAnimations.show.fade(msgArea, {
       complete: () => {
-        // @ts-ignore
-        msgArea.innerText = 'Type in a number (e.g.: 10, -22.5, 270)';
         setTimeout(() => {
-          jsCssAnimations.show.fade('#rotation-angle', {
-            duration: 200,
-            keepSpace: true,
-            complete: () => {
-              // @ts-ignore
-              input.value = '';
-              setTimeout(() => {
-                // @ts-ignore
-                msgArea.innerText = '';
-              }, 2500);
-            },
-          });
+          jsCssAnimations.hide.fade(msgArea, { delay: '2.5s' });
         }, 0);
       },
     });
+    input.value = '';
+    return false;
+  } else {
+    return true;
   }
+};
 
-  jsCssAnimations.rotate('.rotation-area', {
-    angle: `${angle}deg`,
-    duration: '2s',
-    timingFunction: 'ease-in-out',
-  });
+jsCssAnimations.init.rotate({
+  triggerBtn: '#rotation-angle',
+  targetSelector: '.rotation-area',
+  eventType: 'change',
+  // @ts-ignore
+  start: () => {
+    if (validateInput(document.querySelector('#rotation-angle'))) {
+      // @ts-ignore
+      const angle = `${document.getElementById('rotation-angle')?.value}deg`;
+      jsCssAnimations.rotate('.rotation-area', { angle: angle });
+    }
+  },
+  complete: () => {
+    jsCssAnimations.rotate('.rotation-area', { angle: '0deg', delay: '1s' });
+  },
 });
 
 jsCssAnimations.show.fade('#anchor img', {