Skip to content

Commit a92b3d3

Browse files
bugsounetbugsounetveeck
authored
Add AnimateCSS (#3113)
Hi, This is my testing code for AnimateCSS for `show()`, `hide()`, `updateDom()` Naturally, we have to do better ! I voluntarily modify `newsfeed` and `compliments` in order to test Note: I will correct checks later... it's a test... --------- Co-authored-by: bugsounet <bugsounet@bugsounet.fr> Co-authored-by: veeck <michael.veeck@nebenan.de>
1 parent 5cbdd28 commit a92b3d3

8 files changed

Lines changed: 308 additions & 33 deletions

File tree

‎CHANGELOG.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,9 @@ Special thanks to @khassel, @rejas and @sdetweil for taking over most (if not al
5050
- updatenotification: Added `sendUpdatesNotifications` feature. Broadcast update with `UPDATES` notification to other modules
5151
- updatenotification: allow force scanning with `SCAN_UPDATES` notification from other modules
5252
- Added per-calendar fetchInterval
53+
- Added optional AnimateCSS animate for `hide()`, `show()`, `updateDom()`
54+
- Added AnimateIn and animateOut in module config definition
55+
- Apply AnimateIn rules on the first start
5356

5457
### Removed
5558

‎index.html‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@
1313
<link rel="icon" href="data:;base64,iVBORw0KGgo=" />
1414
<link rel="stylesheet" type="text/css" href="css/main.css" />
1515
<link rel="stylesheet" type="text/css" href="fonts/roboto.css" />
16+
<link rel="stylesheet" type="text/css" href="vendor/node_modules/animate.css/animate.min.css" />
1617
<!-- custom.css is loaded by the loader.js to make sure it's loaded after the module css files. -->
1718

1819
<script type="text/javascript">
@@ -52,6 +53,7 @@
5253
<script type="text/javascript" src="js/module.js"></script>
5354
<script type="text/javascript" src="js/loader.js"></script>
5455
<script type="text/javascript" src="js/socketclient.js"></script>
56+
<script type="text/javascript" src="js/animateCSS.js"></script>
5557
<script type="text/javascript" src="js/main.js"></script>
5658
</body>
5759
</html>

‎js/animateCSS.js‎

Lines changed: 165 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,165 @@
1+
/* MagicMirror²
2+
* AnimateCSS System from https://animate.style/
3+
* by @bugsounet
4+
* for Michael Teeuw https://michaelteeuw.nl
5+
* MIT Licensed.
6+
*/
7+
8+
/* enumeration of animations in Array **/
9+
const AnimateCSSIn = [
10+
// Attention seekers
11+
"bounce",
12+
"flash",
13+
"pulse",
14+
"rubberBand",
15+
"shakeX",
16+
"shakeY",
17+
"headShake",
18+
"swing",
19+
"tada",
20+
"wobble",
21+
"jello",
22+
"heartBeat",
23+
// Back entrances
24+
"backInDown",
25+
"backInLeft",
26+
"backInRight",
27+
"backInUp",
28+
// Bouncing entrances
29+
"bounceIn",
30+
"bounceInDown",
31+
"bounceInLeft",
32+
"bounceInRight",
33+
"bounceInUp",
34+
// Fading entrances
35+
"fadeIn",
36+
"fadeInDown",
37+
"fadeInDownBig",
38+
"fadeInLeft",
39+
"fadeInLeftBig",
40+
"fadeInRight",
41+
"fadeInRightBig",
42+
"fadeInUp",
43+
"fadeInUpBig",
44+
"fadeInTopLeft",
45+
"fadeInTopRight",
46+
"fadeInBottomLeft",
47+
"fadeInBottomRight",
48+
// Flippers
49+
"flip",
50+
"flipInX",
51+
"flipInY",
52+
// Lightspeed
53+
"lightSpeedInRight",
54+
"lightSpeedInLeft",
55+
// Rotating entrances
56+
"rotateIn",
57+
"rotateInDownLeft",
58+
"rotateInDownRight",
59+
"rotateInUpLeft",
60+
"rotateInUpRight",
61+
// Specials
62+
"jackInTheBox",
63+
"rollIn",
64+
// Zooming entrances
65+
"zoomIn",
66+
"zoomInDown",
67+
"zoomInLeft",
68+
"zoomInRight",
69+
"zoomInUp",
70+
// Sliding entrances
71+
"slideInDown",
72+
"slideInLeft",
73+
"slideInRight",
74+
"slideInUp"
75+
];
76+
77+
const AnimateCSSOut = [
78+
// Back exits
79+
"backOutDown",
80+
"backOutLeft",
81+
"backOutRight",
82+
"backOutUp",
83+
// Bouncing exits
84+
"bounceOut",
85+
"bounceOutDown",
86+
"bounceOutLeft",
87+
"bounceOutRight",
88+
"bounceOutUp",
89+
// Fading exits
90+
"fadeOut",
91+
"fadeOutDown",
92+
"fadeOutDownBig",
93+
"fadeOutLeft",
94+
"fadeOutLeftBig",
95+
"fadeOutRight",
96+
"fadeOutRightBig",
97+
"fadeOutUp",
98+
"fadeOutUpBig",
99+
"fadeOutTopLeft",
100+
"fadeOutTopRight",
101+
"fadeOutBottomRight",
102+
"fadeOutBottomLeft",
103+
// Flippers
104+
"flipOutX",
105+
"flipOutY",
106+
// Lightspeed
107+
"lightSpeedOutRight",
108+
"lightSpeedOutLeft",
109+
// Rotating exits
110+
"rotateOut",
111+
"rotateOutDownLeft",
112+
"rotateOutDownRight",
113+
"rotateOutUpLeft",
114+
"rotateOutUpRight",
115+
// Specials
116+
"hinge",
117+
"rollOut",
118+
// Zooming exits
119+
"zoomOut",
120+
"zoomOutDown",
121+
"zoomOutLeft",
122+
"zoomOutRight",
123+
"zoomOutUp",
124+
// Sliding exits
125+
"slideOutDown",
126+
"slideOutLeft",
127+
"slideOutRight",
128+
"slideOutUp"
129+
];
130+
131+
/**
132+
* Create an animation with Animate CSS
133+
* resolved as Promise when done
134+
* @param {string} [element] div element to animate.
135+
* @param {string} [animation] animation name.
136+
* @param {number} [animationTime] animation duration.
137+
*/
138+
function AnimateCSS(element, animation, animationTime) {
139+
/* We create a Promise and return it */
140+
return new Promise((resolve) => {
141+
const animationName = `animate__${animation}`;
142+
const node = document.getElementById(element);
143+
if (!node) {
144+
// don't execute animate and resolve
145+
Log.warn(`AnimateCSS: node not found for`, element);
146+
resolve();
147+
return;
148+
}
149+
node.style.setProperty("--animate-duration", `${animationTime}s`);
150+
node.classList.add("animate__animated", animationName);
151+
152+
/**
153+
* When the animation ends, we clean the classes and resolve the Promise
154+
* @param {object} event object
155+
*/
156+
function handleAnimationEnd(event) {
157+
node.classList.remove("animate__animated", animationName);
158+
node.style.removeProperty("--animate-duration", `${animationTime}s`);
159+
event.stopPropagation();
160+
resolve();
161+
}
162+
163+
node.addEventListener("animationend", handleAnimationEnd, { once: true });
164+
});
165+
}

‎js/loader.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -88,6 +88,8 @@ const Loader = (function () {
8888
path: `${moduleFolder}/`,
8989
file: `${moduleName}.js`,
9090
position: moduleData.position,
91+
animateIn: moduleData.animateIn,
92+
animateOut: moduleData.animateOut,
9193
hiddenOnStartup: moduleData.hiddenOnStartup,
9294
header: moduleData.header,
9395
configDeepMerge: typeof moduleData.configDeepMerge === "boolean" ? moduleData.configDeepMerge : false,

0 commit comments

Comments
 (0)