11<!DOCTYPE html>
22< html lang ="en ">
3- < head >
4- < meta charset ="utf-8 " / >
3+ < head >
4+ < meta charset ="utf-8 ">
55 < title > JSDoc: Source: animate.js</ title >
66
7- < script src ="scripts/prettify/prettify.js "> </ script >
8- < script src ="scripts/prettify/lang-css.js "> </ script >
7+ < script src ="scripts/prettify/prettify.js "> </ script >
8+ < script src ="scripts/prettify/lang-css.js "> </ script >
99 <!--[if lt IE 9]>
1010 <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
1111 <![endif]-->
12- < link
13- type ="text/css "
14- rel ="stylesheet "
15- href ="styles/prettify-tomorrow.css "
16- />
17- < link type ="text/css " rel ="stylesheet " href ="styles/jsdoc-default.css " />
18- </ head >
19-
20- < body >
21- < div id ="main ">
22- < h1 class ="page-title "> Source: animate.js</ h1 >
23-
24- < section >
12+ < link type ="text/css " rel ="stylesheet " href ="styles/prettify-tomorrow.css ">
13+ < link type ="text/css " rel ="stylesheet " href ="styles/jsdoc-default.css ">
14+ </ head >
15+
16+ < body >
17+
18+ < div id ="main ">
19+
20+ < h1 class ="page-title "> Source: animate.js</ h1 >
21+
22+
23+
24+
25+
26+
27+ < section >
2528 < article >
26- < pre class ="prettyprint source linenums "> < code > /**
29+ < pre class ="prettyprint source linenums "> < code > /**
2730 * Handles all the animation process
2831 * @module animate
2932 */
@@ -34,7 +37,12 @@ <h1 class="page-title">Source: animate.js</h1>
3437 CUSTOM_CSS_PROPERTIES,
3538} from './globals.js';
3639
37- import { initParentResize, endParentResize } from './resize-parent.js';
40+ import {
41+ initParentResize,
42+ endParentResize,
43+ setOverflowHidden,
44+ removeOverflowHidden,
45+ } from './resize-parent.js';
3846
3947import {
4048 removeInlineTransition,
@@ -172,6 +180,12 @@ <h1 class="page-title">Source: animate.js</h1>
172180 stack: {},
173181};
174182
183+ /**
184+ * Keeps track of the EventListeners associated to a trigger selector
185+ * @type {{[x: String]: EventListener[]}}
186+ */
187+ const LISTENERS = {};
188+
175189/**
176190 * Removes the CSS properties customized by the user
177191 * @param {HTMLElement} element - The DOM element with the custom CSS properties
@@ -351,10 +365,12 @@ <h1 class="page-title">Source: animate.js</h1>
351365 * @returns True if the element has an iteration CSS property set, False otherwise
352366 */
353367const hasIterationProp = element => {
368+ const iterationProperty = element.style.getPropertyValue(
369+ PROPERTY_NAMES.iteration
370+ );
354371 return (
355- element.style
356- .getPropertyValue(PROPERTY_NAMES.iteration)
357- .match(/^(infinite|\d+)$/) !== null
372+ iterationProperty != '1' &&
373+ iterationProperty.match(/^(infinite|\d+)$/) !== null
358374 );
359375};
360376
@@ -368,17 +384,14 @@ <h1 class="page-title">Source: animate.js</h1>
368384 * element: HTMLElement,
369385 * parentMeasures: Object,
370386 * action: string,
371- * dimension: string | undefined,
372- * maintainSpace: boolean
387+ * dimension: string | undefined
373388 * }} args - All the necessary arguments
374389 */
375390const handleVisibilityToggle = (element, args) => {
376391 setTimeout(() => {
377392 if (args.dimension) setParentMaxMeasures(args);
378393 if (args.action === 'show') {
379- args.maintainSpace
380- ? element.classList.remove(CLASS_NAMES.hidden)
381- : element.classList.remove(CLASS_NAMES.collapsed);
394+ element.classList.remove(CLASS_NAMES.hidden, CLASS_NAMES.collapsed);
382395 }
383396 }, 0);
384397};
@@ -397,6 +410,8 @@ <h1 class="page-title">Source: animate.js</h1>
397410 }
398411 if (opts.heightTransition || opts.widthTransition)
399412 endParentResize(element, opts);
413+ else if (opts.overflowHidden && element.parentElement)
414+ removeOverflowHidden(element.parentElement);
400415};
401416
402417/**
@@ -469,7 +484,8 @@ <h1 class="page-title">Source: animate.js</h1>
469484 heightTransition,
470485 overflowHidden,
471486 }));
472- }
487+ } else if (overflowHidden && element.parentElement)
488+ setOverflowHidden(element.parentElement);
473489 },
474490 motion: () => {
475491 currentTransition = getCurrentTransition(element);
@@ -484,7 +500,6 @@ <h1 class="page-title">Source: animate.js</h1>
484500 parentMeasures,
485501 action,
486502 dimension,
487- maintainSpace,
488503 });
489504 },
490505 motion: () => {
@@ -501,6 +516,7 @@ <h1 class="page-title">Source: animate.js</h1>
501516 maintainSpace,
502517 widthTransition,
503518 heightTransition,
519+ overflowHidden,
504520 });
505521 if (!hasIterationProp(element))
506522 element.classList.remove(CLASS_NAMES[action][id]);
@@ -592,7 +608,7 @@ <h1 class="page-title">Source: animate.js</h1>
592608 * @param {HTMLElement} el - The DOM element being animated
593609 * @param {number} animationId - The ID of the animation in the *_ANIMS_ID
594610 * @param {Object} opts - The options passed by the user
595- * @returns A function to be passed to the addEventListener() as a handler
611+ * @returns {EventListener} A function to be passed to the addEventListener() as a handler
596612 * @see {@link module:globals.VISIBILITY_ANIMS_ID}
597613 * @see {@link module:globals.MOTION_ANIMS_ID}
598614 */
@@ -644,24 +660,48 @@ <h1 class="page-title">Source: animate.js</h1>
644660 btn.setAttribute('target-selector', targetSelector);
645661 }
646662
663+ if (!opts.trigger) opts.trigger = trigger;
664+ LISTENERS[trigger] = [];
647665 document
648666 .querySelectorAll(getTargetSelector(btn))
649667 .forEach((el, i, queryList) => {
650- btn.addEventListener(
651- eventType,
652- // @ts-ignore
653- eventHandler(el, animationId, {
654- ...opts ,
655- totalTargets: queryList.length,
656- queryIndex: i,
657- })
658- );
668+ // @ts-ignore
669+ const listener = eventHandler(el, animationId, {
670+ ...opts,
671+ totalTargets: queryList.length,
672+ queryIndex: i ,
673+ });
674+
675+ LISTENERS[trigger].push(listener);
676+ btn.addEventListener(eventType, listener );
659677 });
660678 });
661679};
662680
681+ /**
682+ * Removes the event listener of all elements represented by the `triggerSelector`
683+ * @param {String|null} triggerSelector - A valid CSS selector for the trigger Element. If ommited, '.${CLASS_NAMES.trigger}' will be used instead.
684+ * @param {String} eventType - The event name. If ommited, 'click' is the default value.
685+ */
686+ const end = (triggerSelector = null, eventType = 'click') => {
687+ const triggerList =
688+ typeof triggerSelector === 'string'
689+ ? document.querySelectorAll(triggerSelector)
690+ : document.querySelectorAll(`.${CLASS_NAMES.trigger}`);
691+
692+ triggerList.forEach(trigger => {
693+ LISTENERS[triggerSelector ?? `.${CLASS_NAMES.trigger}`].forEach(
694+ listener => {
695+ trigger.removeEventListener(eventType, listener);
696+ }
697+ );
698+ });
699+ delete LISTENERS[triggerSelector ?? `.${CLASS_NAMES.trigger}`];
700+ };
701+
663702export {
664703 init,
704+ end,
665705 animate,
666706 preset,
667707 isEnabled,
@@ -671,39 +711,24 @@ <h1 class="page-title">Source: animate.js</h1>
671711};
672712</ code > </ pre >
673713 </ article >
674- </ section >
675-
676- < footer >
677- Documentation generated by
678- < a href ="https://github.com/jsdoc/jsdoc "> JSDoc 4.0.0</ a > on Wed Nov 23
679- 2022 20:32:22 GMT-0300 (Horário Padrão de Brasília)
680- </ footer >
681- </ div >
682-
683- < nav >
684- < h2 > < a href ="index.html "> JS-CSS Animations</ a > </ h2 >
685- < h3 > Modules</ h3 >
686- < ul >
687- < li > < a href ="module-animate.html "> animate</ a > </ li >
688- < li > < a href ="module-globals.html "> globals</ a > </ li >
689- < li > < a href ="module-js-css-animations.html "> js-css-animations</ a > </ li >
690- < li > < a href ="module-measurements.html "> measurements</ a > </ li >
691- < li > < a href ="module-resize-parent.html "> resize-parent</ a > </ li >
692- < li > < a href ="module-transitions.html "> transitions</ a > </ li >
693- </ ul >
694- </ nav >
695-
696- < br class ="clear " />
697-
698- < footer >
699- Documentation generated by
700- < a href ="https://github.com/jsdoc/jsdoc "> JSDoc 4.0.0</ a > on Wed Nov 23
701- 2022 20:22:20 GMT-0300 (Horário Padrão de Brasília)
702- </ footer >
703-
704- < script >
705- prettyPrint ( ) ;
706- </ script >
707- < script src ="scripts/linenumber.js "> </ script >
708- </ body >
714+ </ section >
715+
716+
717+
718+
719+ </ div >
720+
721+ < nav >
722+ < h2 > < a href ="index.html "> JS-CSS Animations</ a > </ h2 > < h3 > Modules</ h3 > < ul > < li > < a href ="module-animate.html "> animate</ a > </ li > < li > < a href ="module-globals.html "> globals</ a > </ li > < li > < a href ="module-js-css-animations.html "> js-css-animations</ a > </ li > < li > < a href ="module-measurements.html "> measurements</ a > </ li > < li > < a href ="module-resize-parent.html "> resize-parent</ a > </ li > < li > < a href ="module-transitions.html "> transitions</ a > </ li > </ ul >
723+ </ nav >
724+
725+ < br class ="clear ">
726+
727+ < footer >
728+ 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)
729+ </ footer >
730+
731+ < script > prettyPrint ( ) ; </ script >
732+ < script src ="scripts/linenumber.js "> </ script >
733+ </ body >
709734</ html >
0 commit comments