1
1
<!DOCTYPE html>
2
2
< html lang ="en ">
3
- < head >
4
- < meta charset ="utf-8 " / >
3
+ < head >
4
+ < meta charset ="utf-8 ">
5
5
< title > JSDoc: Source: animate.js</ title >
6
6
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 >
9
9
<!--[if lt IE 9]>
10
10
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
11
11
<![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 >
25
28
< article >
26
- < pre class ="prettyprint source linenums "> < code > /**
29
+ < pre class ="prettyprint source linenums "> < code > /**
27
30
* Handles all the animation process
28
31
* @module animate
29
32
*/
@@ -34,7 +37,12 @@ <h1 class="page-title">Source: animate.js</h1>
34
37
CUSTOM_CSS_PROPERTIES,
35
38
} from './globals.js';
36
39
37
- import { initParentResize, endParentResize } from './resize-parent.js';
40
+ import {
41
+ initParentResize,
42
+ endParentResize,
43
+ setOverflowHidden,
44
+ removeOverflowHidden,
45
+ } from './resize-parent.js';
38
46
39
47
import {
40
48
removeInlineTransition,
@@ -172,6 +180,12 @@ <h1 class="page-title">Source: animate.js</h1>
172
180
stack: {},
173
181
};
174
182
183
+ /**
184
+ * Keeps track of the EventListeners associated to a trigger selector
185
+ * @type {{[x: String]: EventListener[]}}
186
+ */
187
+ const LISTENERS = {};
188
+
175
189
/**
176
190
* Removes the CSS properties customized by the user
177
191
* @param {HTMLElement} element - The DOM element with the custom CSS properties
@@ -351,10 +365,12 @@ <h1 class="page-title">Source: animate.js</h1>
351
365
* @returns True if the element has an iteration CSS property set, False otherwise
352
366
*/
353
367
const hasIterationProp = element => {
368
+ const iterationProperty = element.style.getPropertyValue(
369
+ PROPERTY_NAMES.iteration
370
+ );
354
371
return (
355
- element.style
356
- .getPropertyValue(PROPERTY_NAMES.iteration)
357
- .match(/^(infinite|\d+)$/) !== null
372
+ iterationProperty != '1' &&
373
+ iterationProperty.match(/^(infinite|\d+)$/) !== null
358
374
);
359
375
};
360
376
@@ -368,17 +384,14 @@ <h1 class="page-title">Source: animate.js</h1>
368
384
* element: HTMLElement,
369
385
* parentMeasures: Object,
370
386
* action: string,
371
- * dimension: string | undefined,
372
- * maintainSpace: boolean
387
+ * dimension: string | undefined
373
388
* }} args - All the necessary arguments
374
389
*/
375
390
const handleVisibilityToggle = (element, args) => {
376
391
setTimeout(() => {
377
392
if (args.dimension) setParentMaxMeasures(args);
378
393
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);
382
395
}
383
396
}, 0);
384
397
};
@@ -397,6 +410,8 @@ <h1 class="page-title">Source: animate.js</h1>
397
410
}
398
411
if (opts.heightTransition || opts.widthTransition)
399
412
endParentResize(element, opts);
413
+ else if (opts.overflowHidden && element.parentElement)
414
+ removeOverflowHidden(element.parentElement);
400
415
};
401
416
402
417
/**
@@ -469,7 +484,8 @@ <h1 class="page-title">Source: animate.js</h1>
469
484
heightTransition,
470
485
overflowHidden,
471
486
}));
472
- }
487
+ } else if (overflowHidden && element.parentElement)
488
+ setOverflowHidden(element.parentElement);
473
489
},
474
490
motion: () => {
475
491
currentTransition = getCurrentTransition(element);
@@ -484,7 +500,6 @@ <h1 class="page-title">Source: animate.js</h1>
484
500
parentMeasures,
485
501
action,
486
502
dimension,
487
- maintainSpace,
488
503
});
489
504
},
490
505
motion: () => {
@@ -501,6 +516,7 @@ <h1 class="page-title">Source: animate.js</h1>
501
516
maintainSpace,
502
517
widthTransition,
503
518
heightTransition,
519
+ overflowHidden,
504
520
});
505
521
if (!hasIterationProp(element))
506
522
element.classList.remove(CLASS_NAMES[action][id]);
@@ -592,7 +608,7 @@ <h1 class="page-title">Source: animate.js</h1>
592
608
* @param {HTMLElement} el - The DOM element being animated
593
609
* @param {number} animationId - The ID of the animation in the *_ANIMS_ID
594
610
* @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
596
612
* @see {@link module:globals.VISIBILITY_ANIMS_ID}
597
613
* @see {@link module:globals.MOTION_ANIMS_ID}
598
614
*/
@@ -644,24 +660,48 @@ <h1 class="page-title">Source: animate.js</h1>
644
660
btn.setAttribute('target-selector', targetSelector);
645
661
}
646
662
663
+ if (!opts.trigger) opts.trigger = trigger;
664
+ LISTENERS[trigger] = [];
647
665
document
648
666
.querySelectorAll(getTargetSelector(btn))
649
667
.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 );
659
677
});
660
678
});
661
679
};
662
680
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
+
663
702
export {
664
703
init,
704
+ end,
665
705
animate,
666
706
preset,
667
707
isEnabled,
@@ -671,39 +711,24 @@ <h1 class="page-title">Source: animate.js</h1>
671
711
};
672
712
</ code > </ pre >
673
713
</ 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 >
709
734
</ html >
0 commit comments