docs: update documentation

Author: igorMSoares

jsdoc/doc/animate.js.html

@@ -37,7 +37,12 @@ <h1 class="page-title">Source: animate.js</h1>
   CUSTOM_CSS_PROPERTIES,
 } from './globals.js';
 
-import { initParentResize, endParentResize } from './resize-parent.js';
+import {
+  initParentResize,
+  endParentResize,
+  setOverflowHidden,
+  removeOverflowHidden,
+} from './resize-parent.js';
 
 import {
   removeInlineTransition,
@@ -60,7 +65,7 @@ <h1 class="page-title">Source: animate.js</h1>
     staggerDelay: undefined,
     start: undefined,
     complete: undefined,
-    keepSpace: false,
+    maintainSpace: false,
     dimensionsTransition: true,
     widthTransition: undefined,
     heightTransition: undefined,
@@ -175,6 +180,12 @@ <h1 class="page-title">Source: animate.js</h1>
   stack: {},
 };
 
+/**
+ * Keeps track of the EventListeners associated to a trigger selector
+ * @type {{[x: String]: EventListener[]}}
+ */
+const LISTENERS = {};
+
 /**
  * Removes the CSS properties customized by the user
  * @param {HTMLElement} element - The DOM element with the custom CSS properties
@@ -354,10 +365,12 @@ <h1 class="page-title">Source: animate.js</h1>
  * @returns True if the element has an iteration CSS property set, False otherwise
  */
 const hasIterationProp = element => {
+  const iterationProperty = element.style.getPropertyValue(
+    PROPERTY_NAMES.iteration
+  );
   return (
-    element.style
-      .getPropertyValue(PROPERTY_NAMES.iteration)
-      .match(/^(infinite|\d+)$/) !== null
+    iterationProperty != '1' &amp;&amp;
+    iterationProperty.match(/^(infinite|\d+)$/) !== null
   );
 };
 
@@ -371,17 +384,14 @@ <h1 class="page-title">Source: animate.js</h1>
  *  element: HTMLElement,
  *  parentMeasures: Object,
  *  action: string,
- *  dimension: string | undefined,
- *  keepSpace: boolean
+ *  dimension: string | undefined
  * }} args - All the necessary arguments
  */
 const handleVisibilityToggle = (element, args) => {
   setTimeout(() => {
     if (args.dimension) setParentMaxMeasures(args);
     if (args.action === 'show') {
-      args.keepSpace
-        ? element.classList.remove(CLASS_NAMES.hidden)
-        : element.classList.remove(CLASS_NAMES.collapsed);
+      element.classList.remove(CLASS_NAMES.hidden, CLASS_NAMES.collapsed);
     }
   }, 0);
 };
@@ -394,12 +404,14 @@ <h1 class="page-title">Source: animate.js</h1>
  */
 const endVisibilityToggle = (element, opts) => {
   if (opts.action === 'hide') {
-    opts.keepSpace
+    opts.maintainSpace
       ? element.classList.add(CLASS_NAMES.hidden)
       : element.classList.add(CLASS_NAMES.collapsed);
   }
   if (opts.heightTransition || opts.widthTransition)
     endParentResize(element, opts);
+  else if (opts.overflowHidden &amp;&amp; element.parentElement)
+    removeOverflowHidden(element.parentElement);
 };
 
 /**
@@ -442,8 +454,8 @@ <h1 class="page-title">Source: animate.js</h1>
     trigger,
     start = CONFIG.start,
     complete = CONFIG.complete,
-    keepSpace = CONFIG.keepSpace,
-    dimensionsTransition = keepSpace || isMotion(animType)
+    maintainSpace = CONFIG.maintainSpace,
+    dimensionsTransition = maintainSpace || isMotion(animType)
       ? false
       : CONFIG.dimensionsTransition,
     widthTransition = CONFIG.widthTransition ?? dimensionsTransition,
@@ -472,7 +484,8 @@ <h1 class="page-title">Source: animate.js</h1>
             heightTransition,
             overflowHidden,
           }));
-        }
+        } else if (overflowHidden &amp;&amp; element.parentElement)
+          setOverflowHidden(element.parentElement);
       },
       motion: () => {
         currentTransition = getCurrentTransition(element);
@@ -487,7 +500,6 @@ <h1 class="page-title">Source: animate.js</h1>
           parentMeasures,
           action,
           dimension,
-          keepSpace,
         });
       },
       motion: () => {
@@ -501,9 +513,10 @@ <h1 class="page-title">Source: animate.js</h1>
       visibility: () => {
         endVisibilityToggle(element, {
           action,
-          keepSpace,
+          maintainSpace,
           widthTransition,
           heightTransition,
+          overflowHidden,
         });
         if (!hasIterationProp(element))
           element.classList.remove(CLASS_NAMES[action][id]);
@@ -595,7 +608,7 @@ <h1 class="page-title">Source: animate.js</h1>
  * @param {HTMLElement} el - The DOM element being animated
  * @param {number} animationId - The ID of the animation in the *_ANIMS_ID
  * @param {Object} opts - The options passed by the user
- * @returns A function to be passed to the addEventListener() as a handler
+ * @returns {EventListener} A function to be passed to the addEventListener() as a handler
  * @see {@link module:globals.VISIBILITY_ANIMS_ID}
  * @see {@link module:globals.MOTION_ANIMS_ID}
  */
@@ -647,24 +660,48 @@ <h1 class="page-title">Source: animate.js</h1>
       btn.setAttribute('target-selector', targetSelector);
     }
 
+    if (!opts.trigger) opts.trigger = trigger;
+    LISTENERS[trigger] = [];
     document
       .querySelectorAll(getTargetSelector(btn))
       .forEach((el, i, queryList) => {
-        btn.addEventListener(
-          eventType,
-          // @ts-ignore
-          eventHandler(el, animationId, {
-            ...opts,
-            totalTargets: queryList.length,
-            queryIndex: i,
-          })
-        );
+        // @ts-ignore
+        const listener = eventHandler(el, animationId, {
+          ...opts,
+          totalTargets: queryList.length,
+          queryIndex: i,
+        });
+
+        LISTENERS[trigger].push(listener);
+        btn.addEventListener(eventType, listener);
       });
   });
 };
 
+/**
+ * Removes the event listener of all elements represented by the `triggerSelector`
+ * @param {String|null} triggerSelector - A valid CSS selector for the trigger Element. If ommited, '.${CLASS_NAMES.trigger}' will be used instead.
+ * @param {String} eventType - The event name. If ommited, 'click' is the default value.
+ */
+const end = (triggerSelector = null, eventType = 'click') => {
+  const triggerList =
+    typeof triggerSelector === 'string'
+      ? document.querySelectorAll(triggerSelector)
+      : document.querySelectorAll(`.${CLASS_NAMES.trigger}`);
+
+  triggerList.forEach(trigger => {
+    LISTENERS[triggerSelector ?? `.${CLASS_NAMES.trigger}`].forEach(
+      listener => {
+        trigger.removeEventListener(eventType, listener);
+      }
+    );
+  });
+  delete LISTENERS[triggerSelector ?? `.${CLASS_NAMES.trigger}`];
+};
+
 export {
   init,
+  end,
   animate,
   preset,
   isEnabled,
@@ -688,7 +725,7 @@ <h2><a href="index.html">JS-CSS Animations</a></h2><h3>Modules</h3><ul><li><a hr
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 4.0.0</a> on Wed Nov 23 2022 20:32:22 GMT-0300 (Horário Padrão de Brasília)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 4.0.0</a> on Wed Dec 07 2022 15:22:18 GMT-0300 (Horário Padrão de Brasília)
 </footer>
 
 <script> prettyPrint(); </script>

jsdoc/doc/globals.js.html

@@ -81,7 +81,7 @@ <h1 class="page-title">Source: globals.js</h1>
  */
 export const PROPERTY_NAMES = Object.freeze({
   duration: '--js-css-animation--duration',
-  timingFunction: '--js-css-animation--timing-function',
+  easing: '--js-css-animation--timing-function',
   delay: '--js-css-animation--delay',
   fillMode: '--js-css-animation--fill-mode',
   cursor: '--js-css-animation--cursor',
@@ -193,7 +193,7 @@ <h2><a href="index.html">JS-CSS Animations</a></h2><h3>Modules</h3><ul><li><a hr
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 4.0.0</a> on Wed Nov 23 2022 20:32:22 GMT-0300 (Horário Padrão de Brasília)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 4.0.0</a> on Wed Dec 07 2022 15:22:18 GMT-0300 (Horário Padrão de Brasília)
 </footer>
 
 <script> prettyPrint(); </script>

jsdoc/doc/index.html

@@ -56,7 +56,7 @@ <h2><a href="index.html">JS-CSS Animations</a></h2><h3>Modules</h3><ul><li><a hr
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 4.0.0</a> on Wed Nov 23 2022 20:32:22 GMT-0300 (Horário Padrão de Brasília)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 4.0.0</a> on Wed Dec 07 2022 15:22:18 GMT-0300 (Horário Padrão de Brasília)
 </footer>
 
 <script> prettyPrint(); </script>

jsdoc/doc/js-css-animations.js.html

@@ -32,6 +32,7 @@ <h1 class="page-title">Source: js-css-animations.js</h1>
  */
 import {
   init,
+  end,
   animate,
   preset,
   isEnabled,
@@ -126,11 +127,11 @@ <h1 class="page-title">Source: js-css-animations.js</h1>
  *  duration: number|string|undefined,
  *  delay: number|string|undefined,
  *  staggerDelay: number|string|undefined,
- *  timingFunction: string|undefined,
+ *  easing: string|undefined,
  *  blur: string|undefined,
  *  angle: string|undefined,
  *  iteration: string|undefined,
- *  keepSpace: boolean|undefined,
+ *  maintainSpace: boolean|undefined,
  *  overflowHidden: boolean|undefined,
  *  dimensionsTransition: boolean|undefined,
  *  widthTransition: boolean|undefined,
@@ -143,13 +144,13 @@ <h1 class="page-title">Source: js-css-animations.js</h1>
     'duration',
     'delay',
     'staggerDelay',
-    'timingFunction',
+    'easing',
     'blur',
     'angle',
     'iteration',
     'direction',
     'transfOrigin',
-    'keepSpace',
+    'maintainSpace',
     'overflowHidden',
     'dimensionsTransition',
     'widthTransition',
@@ -209,7 +210,7 @@ <h1 class="page-title">Source: js-css-animations.js</h1>
         [
           'start',
           'complete',
-          'keepSpace',
+          'maintainSpace',
           'overflowHidden',
           'staggerDelay',
           'widthTransition',
@@ -365,6 +366,7 @@ <h1 class="page-title">Source: js-css-animations.js</h1>
   const animationsHandler = Object.freeze({
     config,
     reset,
+    end,
     init: eventAnimations,
     ...animationFunctions,
     show: showVisibilityAnim,
@@ -403,7 +405,7 @@ <h2><a href="index.html">JS-CSS Animations</a></h2><h3>Modules</h3><ul><li><a hr
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 4.0.0</a> on Wed Nov 23 2022 20:32:22 GMT-0300 (Horário Padrão de Brasília)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 4.0.0</a> on Wed Dec 07 2022 15:22:18 GMT-0300 (Horário Padrão de Brasília)
 </footer>
 
 <script> prettyPrint(); </script>

jsdoc/doc/measurements.js.html

@@ -273,7 +273,7 @@ <h2><a href="index.html">JS-CSS Animations</a></h2><h3>Modules</h3><ul><li><a hr
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 4.0.0</a> on Wed Nov 23 2022 20:32:22 GMT-0300 (Horário Padrão de Brasília)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 4.0.0</a> on Wed Dec 07 2022 15:22:18 GMT-0300 (Horário Padrão de Brasília)
 </footer>
 
 <script> prettyPrint(); </script>