mirror of
https://github.com/MichMich/MagicMirror.git
synced 2025-06-27 03:39:55 +00:00
0b70274a1a
In the latest versions of ESLint, more and more formatting rules were removed or declared deprecated. These rules have been integrated into the new Stylistic package (https://eslint.style/guide/why) and expanded. Stylistic acts as a better formatter for JavaScript as Prettier. With this PR there are many changes that make the code more uniform, but it may be difficult to review due to the large amount. Even if I have no worries about the changes, perhaps this would be something for the release after next. Let me know what you think.
165 lines
3.2 KiB
JavaScript
165 lines
3.2 KiB
JavaScript
/* MagicMirror²
|
|
* AnimateCSS System from https://animate.style/
|
|
* by @bugsounet
|
|
* for Michael Teeuw https://michaelteeuw.nl
|
|
* MIT Licensed.
|
|
*/
|
|
|
|
/* enumeration of animations in Array **/
|
|
const AnimateCSSIn = [
|
|
// Attention seekers
|
|
"bounce",
|
|
"flash",
|
|
"pulse",
|
|
"rubberBand",
|
|
"shakeX",
|
|
"shakeY",
|
|
"headShake",
|
|
"swing",
|
|
"tada",
|
|
"wobble",
|
|
"jello",
|
|
"heartBeat",
|
|
// Back entrances
|
|
"backInDown",
|
|
"backInLeft",
|
|
"backInRight",
|
|
"backInUp",
|
|
// Bouncing entrances
|
|
"bounceIn",
|
|
"bounceInDown",
|
|
"bounceInLeft",
|
|
"bounceInRight",
|
|
"bounceInUp",
|
|
// Fading entrances
|
|
"fadeIn",
|
|
"fadeInDown",
|
|
"fadeInDownBig",
|
|
"fadeInLeft",
|
|
"fadeInLeftBig",
|
|
"fadeInRight",
|
|
"fadeInRightBig",
|
|
"fadeInUp",
|
|
"fadeInUpBig",
|
|
"fadeInTopLeft",
|
|
"fadeInTopRight",
|
|
"fadeInBottomLeft",
|
|
"fadeInBottomRight",
|
|
// Flippers
|
|
"flip",
|
|
"flipInX",
|
|
"flipInY",
|
|
// Lightspeed
|
|
"lightSpeedInRight",
|
|
"lightSpeedInLeft",
|
|
// Rotating entrances
|
|
"rotateIn",
|
|
"rotateInDownLeft",
|
|
"rotateInDownRight",
|
|
"rotateInUpLeft",
|
|
"rotateInUpRight",
|
|
// Specials
|
|
"jackInTheBox",
|
|
"rollIn",
|
|
// Zooming entrances
|
|
"zoomIn",
|
|
"zoomInDown",
|
|
"zoomInLeft",
|
|
"zoomInRight",
|
|
"zoomInUp",
|
|
// Sliding entrances
|
|
"slideInDown",
|
|
"slideInLeft",
|
|
"slideInRight",
|
|
"slideInUp"
|
|
];
|
|
|
|
const AnimateCSSOut = [
|
|
// Back exits
|
|
"backOutDown",
|
|
"backOutLeft",
|
|
"backOutRight",
|
|
"backOutUp",
|
|
// Bouncing exits
|
|
"bounceOut",
|
|
"bounceOutDown",
|
|
"bounceOutLeft",
|
|
"bounceOutRight",
|
|
"bounceOutUp",
|
|
// Fading exits
|
|
"fadeOut",
|
|
"fadeOutDown",
|
|
"fadeOutDownBig",
|
|
"fadeOutLeft",
|
|
"fadeOutLeftBig",
|
|
"fadeOutRight",
|
|
"fadeOutRightBig",
|
|
"fadeOutUp",
|
|
"fadeOutUpBig",
|
|
"fadeOutTopLeft",
|
|
"fadeOutTopRight",
|
|
"fadeOutBottomRight",
|
|
"fadeOutBottomLeft",
|
|
// Flippers
|
|
"flipOutX",
|
|
"flipOutY",
|
|
// Lightspeed
|
|
"lightSpeedOutRight",
|
|
"lightSpeedOutLeft",
|
|
// Rotating exits
|
|
"rotateOut",
|
|
"rotateOutDownLeft",
|
|
"rotateOutDownRight",
|
|
"rotateOutUpLeft",
|
|
"rotateOutUpRight",
|
|
// Specials
|
|
"hinge",
|
|
"rollOut",
|
|
// Zooming exits
|
|
"zoomOut",
|
|
"zoomOutDown",
|
|
"zoomOutLeft",
|
|
"zoomOutRight",
|
|
"zoomOutUp",
|
|
// Sliding exits
|
|
"slideOutDown",
|
|
"slideOutLeft",
|
|
"slideOutRight",
|
|
"slideOutUp"
|
|
];
|
|
|
|
/**
|
|
* Create an animation with Animate CSS
|
|
* @param {string} [element] div element to animate.
|
|
* @param {string} [animation] animation name.
|
|
* @param {number} [animationTime] animation duration.
|
|
*/
|
|
function addAnimateCSS (element, animation, animationTime) {
|
|
const animationName = `animate__${animation}`;
|
|
const node = document.getElementById(element);
|
|
if (!node) {
|
|
// don't execute animate: we don't find div
|
|
Log.warn("addAnimateCSS: node not found for", element);
|
|
return;
|
|
}
|
|
node.style.setProperty("--animate-duration", `${animationTime}s`);
|
|
node.classList.add("animate__animated", animationName);
|
|
}
|
|
|
|
/**
|
|
* Remove an animation with Animate CSS
|
|
* @param {string} [element] div element to animate.
|
|
* @param {string} [animation] animation name.
|
|
*/
|
|
function removeAnimateCSS (element, animation) {
|
|
const animationName = `animate__${animation}`;
|
|
const node = document.getElementById(element);
|
|
if (!node) {
|
|
// don't execute animate: we don't find div
|
|
Log.warn("removeAnimateCSS: node not found for", element);
|
|
return;
|
|
}
|
|
node.classList.remove("animate__animated", animationName);
|
|
node.style.removeProperty("--animate-duration");
|
|
}
|