partoschph68073/SmartMirror-Projektarbeit
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

added all files to project

Browse Source
This commit is contained in:
partoschph68073
2022-03-10 10:36:59 +01:00
parent 09dd957b33
commit 46a936d7de
25351 changed files with 3883356 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
modules/default/alert/README.md
+5
View File
@@ -0,0 +1,5 @@
# Module: Alert
The alert module is one of the default modules of the MagicMirror. This module displays notifications from other modules.
For configuration options, please check the [MagicMirror² documentation](https://docs.magicmirror.builders/modules/alert.html).
modules/default/alert/alert.js
+167
View File
@@ -0,0 +1,167 @@
/* global NotificationFx */
/* Magic Mirror
* Module: alert
*
* By Paul-Vincent Roll https://paulvincentroll.com/
* MIT Licensed.
*/
Module.register("alert", {
defaults: {
// scale|slide|genie|jelly|flip|bouncyflip|exploader
effect: "slide",
// scale|slide|genie|jelly|flip|bouncyflip|exploader
alert_effect: "jelly",
//time a notification is displayed in seconds
display_time: 3500,
//Position
position: "center",
//shown at startup
welcome_message: false
},
getScripts: function () {
return ["notificationFx.js"];
},
getStyles: function () {
return ["notificationFx.css", "font-awesome.css"];
},
// Define required translations.
getTranslations: function () {
return {
en: "translations/en.json",
de: "translations/de.json",
nl: "translations/nl.json"
};
},
show_notification: function (message) {
if (this.config.effect === "slide") {
this.config.effect = this.config.effect + "-" + this.config.position;
}
let msg = "";
if (message.title) {
msg += "<span class='thin dimmed medium'>" + message.title + "</span>";
}
if (message.message) {
if (msg !== "") {
msg += "<br />";
}
msg += "<span class='light bright small'>" + message.message + "</span>";
}
new NotificationFx({
message: msg,
layout: "growl",
effect: this.config.effect,
ttl: message.timer !== undefined ? message.timer : this.config.display_time
}).show();
},
show_alert: function (params, sender) {
let image = "";
//Set standard params if not provided by module
if (typeof params.timer === "undefined") {
params.timer = null;
}
if (typeof params.imageHeight === "undefined") {
params.imageHeight = "80px";
}
if (typeof params.imageUrl === "undefined" && typeof params.imageFA === "undefined") {
params.imageUrl = null;
} else if (typeof params.imageFA === "undefined") {
image = "<img src='" + params.imageUrl.toString() + "' height='" + params.imageHeight.toString() + "' style='margin-bottom: 10px;'/><br />";
} else if (typeof params.imageUrl === "undefined") {
image = "<span class='bright " + "fa fa-" + params.imageFA + "' style='margin-bottom: 10px;font-size:" + params.imageHeight.toString() + ";'/></span><br />";
}
//Create overlay
const overlay = document.createElement("div");
overlay.id = "overlay";
overlay.innerHTML += '<div class="black_overlay"></div>';
document.body.insertBefore(overlay, document.body.firstChild);
//If module already has an open alert close it
if (this.alerts[sender.name]) {
this.hide_alert(sender, false);
}
//Display title and message only if they are provided in notification parameters
let message = "";
if (params.title) {
message += "<span class='light dimmed medium'>" + params.title + "</span>";
}
if (params.message) {
if (message !== "") {
message += "<br />";
}
message += "<span class='thin bright small'>" + params.message + "</span>";
}
//Store alert in this.alerts
this.alerts[sender.name] = new NotificationFx({
message: image + message,
effect: this.config.alert_effect,
ttl: params.timer,
onClose: () => this.hide_alert(sender),
al_no: "ns-alert"
});
//Show alert
this.alerts[sender.name].show();
//Add timer to dismiss alert and overlay
if (params.timer) {
setTimeout(() => {
this.hide_alert(sender);
}, params.timer);
}
},
hide_alert: function (sender, close = true) {
//Dismiss alert and remove from this.alerts
if (this.alerts[sender.name]) {
this.alerts[sender.name].dismiss(close);
this.alerts[sender.name] = null;
//Remove overlay
const overlay = document.getElementById("overlay");
overlay.parentNode.removeChild(overlay);
}
},
setPosition: function (pos) {
//Add css to body depending on the set position for notifications
const sheet = document.createElement("style");
if (pos === "center") {
sheet.innerHTML = ".ns-box {margin-left: auto; margin-right: auto;text-align: center;}";
}
if (pos === "right") {
sheet.innerHTML = ".ns-box {margin-left: auto;text-align: right;}";
}
if (pos === "left") {
sheet.innerHTML = ".ns-box {margin-right: auto;text-align: left;}";
}
document.body.appendChild(sheet);
},
notificationReceived: function (notification, payload, sender) {
if (notification === "SHOW_ALERT") {
if (typeof payload.type === "undefined") {
payload.type = "alert";
}
if (payload.type === "alert") {
this.show_alert(payload, sender);
} else if (payload.type === "notification") {
this.show_notification(payload);
}
} else if (notification === "HIDE_ALERT") {
this.hide_alert(sender);
}
},
start: function () {
this.alerts = {};
this.setPosition(this.config.position);
if (this.config.welcome_message) {
if (this.config.welcome_message === true) {
this.show_notification({ title: this.translate("sysTitle"), message: this.translate("welcome") });
} else {
this.show_notification({ title: this.translate("sysTitle"), message: this.config.welcome_message });
}
}
Log.info("Starting module: " + this.name);
}
});
modules/default/alert/notificationFx.css
+932
View File
@@ -0,0 +1,932 @@
/* Based on work by https://tympanus.net/codrops/licensing/ */
.ns-box {
background-color: rgba(0, 0, 0, 0.93);
padding: 17px;
line-height: 1.4;
margin-bottom: 10px;
z-index: 1;
font-size: 70%;
position: relative;
display: table;
word-wrap: break-word;
max-width: 100%;
border-width: 1px;
border-radius: 5px;
border-style: solid;
border-color: var(--color-text-dimmed);
}
.ns-alert {
border-style: solid;
border-color: var(--color-text-bright);
padding: 17px;
line-height: 1.4;
margin-bottom: 10px;
z-index: 3;
color: var(--color-text-bright);
font-size: 70%;
position: fixed;
text-align: center;
right: 0;
left: 0;
margin-right: auto;
margin-left: auto;
top: 40%;
width: 40%;
height: auto;
word-wrap: break-word;
border-radius: 20px;
}
.black_overlay {
position: fixed;
z-index: 2;
background-color: rgba(0, 0, 0, 0.93);
width: 100%;
height: 100%;
}
[class^="ns-effect-"].ns-growl.ns-hide,
[class*=" ns-effect-"].ns-growl.ns-hide {
animation-direction: reverse;
}
.ns-effect-flip {
transform-origin: 50% 100%;
backface-visibility: hidden;
}
.ns-effect-flip.ns-show,
.ns-effect-flip.ns-hide {
animation-name: animFlipFront;
animation-duration: 0.3s;
}
.ns-effect-flip.ns-hide {
animation-name: animFlipBack;
}
@keyframes animFlipFront {
0% {
transform: perspective(1000px) rotate3d(1, 0, 0, -90deg);
}
100% {
transform: perspective(1000px);
}
}
@keyframes animFlipBack {
0% {
transform: perspective(1000px) rotate3d(1, 0, 0, 90deg);
}
100% {
transform: perspective(1000px);
}
}
.ns-effect-bouncyflip.ns-show,
.ns-effect-bouncyflip.ns-hide {
animation-name: flipInX;
animation-duration: 0.8s;
}
@keyframes flipInX {
0% {
transform: perspective(400px) rotate3d(1, 0, 0, -90deg);
transition-timing-function: ease-in;
}
40% {
transform: perspective(400px) rotate3d(1, 0, 0, 20deg);
transition-timing-function: ease-out;
}
60% {
transform: perspective(400px) rotate3d(1, 0, 0, -10deg);
transition-timing-function: ease-in;
opacity: 1;
}
80% {
transform: perspective(400px) rotate3d(1, 0, 0, 5deg);
transition-timing-function: ease-out;
}
100% {
transform: perspective(400px);
}
}
.ns-effect-bouncyflip.ns-hide {
animation-name: flipInXSimple;
animation-duration: 0.3s;
}
@keyframes flipInXSimple {
0% {
transform: perspective(400px) rotate3d(1, 0, 0, -90deg);
transition-timing-function: ease-in;
}
100% {
transform: perspective(400px);
}
}
.ns-effect-exploader {
transform-origin: 0 0;
}
.ns-effect-exploader p {
padding: 0.25em 2em 0.25em 3em;
}
.ns-effect-exploader.ns-show {
animation-name: animLoad;
animation-duration: 1s;
}
@keyframes animLoad {
0% {
opacity: 1;
transform: scale3d(0, 0.3, 1);
}
100% {
opacity: 1;
transform: scale3d(1, 1, 1);
}
}
.ns-effect-exploader.ns-hide {
animation-name: animFade;
animation-duration: 0.3s;
}
.ns-effect-exploader.ns-show .ns-box-inner,
.ns-effect-exploader.ns-show .ns-close {
animation-fill-mode: both;
animation-duration: 0.3s;
animation-delay: 0.6s;
}
.ns-effect-exploader.ns-show .ns-close {
animation-name: animFade;
}
.ns-effect-exploader.ns-show .ns-box-inner {
animation-name: animFadeMove;
animation-timing-function: ease-out;
}
@keyframes animFadeMove {
0% {
opacity: 0;
transform: translate3d(0, 10px, 0);
}
100% {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
@keyframes animFade {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.ns-effect-scale.ns-show,
.ns-effect-scale.ns-hide {
animation-name: animScale;
animation-duration: 0.25s;
}
@keyframes animScale {
0% {
opacity: 0;
transform: translate3d(0, 40px, 0) scale3d(0.1, 0.6, 1);
}
100% {
opacity: 1;
transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
}
}
.ns-effect-jelly.ns-show {
animation-name: animJelly;
animation-duration: 1s;
animation-timing-function: linear;
}
.ns-effect-jelly.ns-hide {
animation-name: animFade;
animation-duration: 0.3s;
}
@keyframes animFade {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes animJelly {
0% {
transform: matrix3d(0.7, 0, 0, 0, 0, 0.7, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
2.083333% {
transform: matrix3d(0.75266, 0, 0, 0, 0, 0.76342, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
4.166667% {
transform: matrix3d(0.81071, 0, 0, 0, 0, 0.84545, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
6.25% {
transform: matrix3d(0.86808, 0, 0, 0, 0, 0.9286, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
8.333333% {
transform: matrix3d(0.92038, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
10.416667% {
transform: matrix3d(0.96482, 0, 0, 0, 0, 1.05202, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
12.5% {
transform: matrix3d(1, 0, 0, 0, 0, 1.08204, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
14.583333% {
transform: matrix3d(1.02563, 0, 0, 0, 0, 1.09149, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
16.666667% {
transform: matrix3d(1.04227, 0, 0, 0, 0, 1.08453, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
18.75% {
transform: matrix3d(1.05102, 0, 0, 0, 0, 1.06666, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
20.833333% {
transform: matrix3d(1.05334, 0, 0, 0, 0, 1.04355, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
22.916667% {
transform: matrix3d(1.05078, 0, 0, 0, 0, 1.02012, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
25% {
transform: matrix3d(1.04487, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
27.083333% {
transform: matrix3d(1.03699, 0, 0, 0, 0, 0.98534, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
29.166667% {
transform: matrix3d(1.02831, 0, 0, 0, 0, 0.97688, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
31.25% {
transform: matrix3d(1.01973, 0, 0, 0, 0, 0.97422, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
33.333333% {
transform: matrix3d(1.01191, 0, 0, 0, 0, 0.97618, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
35.416667% {
transform: matrix3d(1.00526, 0, 0, 0, 0, 0.98122, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
37.5% {
transform: matrix3d(1, 0, 0, 0, 0, 0.98773, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
39.583333% {
transform: matrix3d(0.99617, 0, 0, 0, 0, 0.99433, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
41.666667% {
transform: matrix3d(0.99368, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
43.75% {
transform: matrix3d(0.99237, 0, 0, 0, 0, 1.00413, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
45.833333% {
transform: matrix3d(0.99202, 0, 0, 0, 0, 1.00651, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
47.916667% {
transform: matrix3d(0.99241, 0, 0, 0, 0, 1.00726, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
50% {
transform: matrix3d(0.99329, 0, 0, 0, 0, 1.00671, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
52.083333% {
transform: matrix3d(0.99447, 0, 0, 0, 0, 1.00529, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
54.166667% {
transform: matrix3d(0.99577, 0, 0, 0, 0, 1.00346, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
56.25% {
transform: matrix3d(0.99705, 0, 0, 0, 0, 1.0016, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
58.333333% {
transform: matrix3d(0.99822, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
60.416667% {
transform: matrix3d(0.99921, 0, 0, 0, 0, 0.99884, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
62.5% {
transform: matrix3d(1, 0, 0, 0, 0, 0.99816, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
64.583333% {
transform: matrix3d(1.00057, 0, 0, 0, 0, 0.99795, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
66.666667% {
transform: matrix3d(1.00095, 0, 0, 0, 0, 0.99811, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
68.75% {
transform: matrix3d(1.00114, 0, 0, 0, 0, 0.99851, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
70.833333% {
transform: matrix3d(1.00119, 0, 0, 0, 0, 0.99903, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
72.916667% {
transform: matrix3d(1.00114, 0, 0, 0, 0, 0.99955, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
75% {
transform: matrix3d(1.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
77.083333% {
transform: matrix3d(1.00083, 0, 0, 0, 0, 1.00033, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
79.166667% {
transform: matrix3d(1.00063, 0, 0, 0, 0, 1.00052, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
81.25% {
transform: matrix3d(1.00044, 0, 0, 0, 0, 1.00058, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
83.333333% {
transform: matrix3d(1.00027, 0, 0, 0, 0, 1.00053, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
85.416667% {
transform: matrix3d(1.00012, 0, 0, 0, 0, 1.00042, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
87.5% {
transform: matrix3d(1, 0, 0, 0, 0, 1.00027, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
89.583333% {
transform: matrix3d(0.99991, 0, 0, 0, 0, 1.00013, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
91.666667% {
transform: matrix3d(0.99986, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
93.75% {
transform: matrix3d(0.99983, 0, 0, 0, 0, 0.99991, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
95.833333% {
transform: matrix3d(0.99982, 0, 0, 0, 0, 0.99985, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
97.916667% {
transform: matrix3d(0.99983, 0, 0, 0, 0, 0.99984, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
100% {
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
}
.ns-effect-slide-left.ns-show {
animation-name: animSlideElasticLeft;
animation-duration: 1s;
animation-timing-function: linear;
}
@keyframes animSlideElasticLeft {
0% {
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -1000, 0, 0, 1);
}
1.666667% {
transform: matrix3d(1.92933, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -739.26805, 0, 0, 1);
}
3.333333% {
transform: matrix3d(1.96989, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -521.82545, 0, 0, 1);
}
5% {
transform: matrix3d(1.70901, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -349.26115, 0, 0, 1);
}
6.666667% {
transform: matrix3d(1.4235, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -218.3238, 0, 0, 1);
}
8.333333% {
transform: matrix3d(1.21065, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -123.29848, 0, 0, 1);
}
10% {
transform: matrix3d(1.08167, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -57.59273, 0, 0, 1);
}
11.666667% {
transform: matrix3d(1.0165, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -14.72371, 0, 0, 1);
}
13.333333% {
transform: matrix3d(0.99057, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 11.12794, 0, 0, 1);
}
15% {
transform: matrix3d(0.98478, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 24.86339, 0, 0, 1);
}
16.666667% {
transform: matrix3d(0.98719, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 30.40503, 0, 0, 1);
}
18.333333% {
transform: matrix3d(0.9916, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 30.75275, 0, 0, 1);
}
20% {
transform: matrix3d(0.99541, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 28.10141, 0, 0, 1);
}
21.666667% {
transform: matrix3d(0.99795, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 23.98271, 0, 0, 1);
}
23.333333% {
transform: matrix3d(0.99936, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 19.40752, 0, 0, 1);
}
25% {
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 14.99558, 0, 0, 1);
}
26.666667% {
transform: matrix3d(1.00021, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 11.08575, 0, 0, 1);
}
28.333333% {
transform: matrix3d(1.00022, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 7.82507, 0, 0, 1);
}
30% {
transform: matrix3d(1.00016, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 5.23737, 0, 0, 1);
}
31.666667% {
transform: matrix3d(1.0001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 3.27389, 0, 0, 1);
}
33.333333% {
transform: matrix3d(1.00005, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 1.84893, 0, 0, 1);
}
35% {
transform: matrix3d(1.00002, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.86364, 0, 0, 1);
}
36.666667% {
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.22079, 0, 0, 1);
}
38.333333% {
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.16687, 0, 0, 1);
}
40% {
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.37284, 0, 0, 1);
}
41.666667% {
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.45594, 0, 0, 1);
}
43.333333% {
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.46116, 0, 0, 1);
}
45% {
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.4214, 0, 0, 1);
}
46.666667% {
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.35963, 0, 0, 1);
}
48.333333% {
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.29103, 0, 0, 1);
}
50% {
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.22487, 0, 0, 1);
}
51.666667% {
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.16624, 0, 0, 1);
}
53.333333% {
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.11734, 0, 0, 1);
}
55% {
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.07854, 0, 0, 1);
}
56.666667% {
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.04909, 0, 0, 1);
}
58.333333% {
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.02773, 0, 0, 1);
}
60% {
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.01295, 0, 0, 1);
}
61.666667% {
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.00331, 0, 0, 1);
}
63.333333% {
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.0025, 0, 0, 1);
}
65% {
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.00559, 0, 0, 1);
}
66.666667% {
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.00684, 0, 0, 1);
}
68.333333% {
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.00692, 0, 0, 1);
}
70% {
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.00632, 0, 0, 1);
}
71.666667% {
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.00539, 0, 0, 1);
}
73.333333% {
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.00436, 0, 0, 1);
}
75% {
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.00337, 0, 0, 1);
}
76.666667% {
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.00249, 0, 0, 1);
}
78.333333% {
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.00176, 0, 0, 1);
}
80% {
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.00118, 0, 0, 1);
}
81.666667% {
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.00074, 0, 0, 1);
}
83.333333% {
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.00042, 0, 0, 1);
}
85% {
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.00019, 0, 0, 1);
}
86.666667% {
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.00005, 0, 0, 1);
}
88.333333% {
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.00004, 0, 0, 1);
}
90% {
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.00008, 0, 0, 1);
}
91.666667% {
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.0001, 0, 0, 1);
}
93.333333% {
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.0001, 0, 0, 1);
}
95% {
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.00009, 0, 0, 1);
}
96.666667% {
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.00008, 0, 0, 1);
}
98.333333% {
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.00007, 0, 0, 1);
}
100% {
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
}
.ns-effect-slide-left.ns-hide {
animation-name: animSlideLeft;
animation-duration: 0.25s;
}
@keyframes animSlideLeft {
0% {
transform: translate3d(-30px, 0, 0) translate3d(-100%, 0, 0);
}
100% {
transform: translate3d(0, 0, 0);
}
}
.ns-effect-slide-right.ns-show {
animation: animSlideElasticRight 2000ms linear both;
}
@keyframes animSlideElasticRight {
0% {
transform: matrix3d(2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 1000, 0, 0, 1);
}
2.15% {
transform: matrix3d(1.486, 0, 0, 0, 0, 0.514, 0, 0, 0, 0, 1, 0, 664.594, 0, 0, 1);
}
4.1% {
transform: matrix3d(1.147, 0, 0, 0, 0, 0.853, 0, 0, 0, 0, 1, 0, 419.708, 0, 0, 1);
}
4.3% {
transform: matrix3d(1.121, 0, 0, 0, 0, 0.879, 0, 0, 0, 0, 1, 0, 398.136, 0, 0, 1);
}
6.46% {
transform: matrix3d(0.948, 0, 0, 0, 0, 1.052, 0, 0, 0, 0, 1, 0, 206.714, 0, 0, 1);
}
8.11% {
transform: matrix3d(0.908, 0, 0, 0, 0, 1.092, 0, 0, 0, 0, 1, 0, 105.491, 0, 0, 1);
}
8.61% {
transform: matrix3d(0.907, 0, 0, 0, 0, 1.093, 0, 0, 0, 0, 1, 0, 81.572, 0, 0, 1);
}
12.11% {
transform: matrix3d(0.95, 0, 0, 0, 0, 1.05, 0, 0, 0, 0, 1, 0, -18.434, 0, 0, 1);
}
14.16% {
transform: matrix3d(0.979, 0, 0, 0, 0, 1.021, 0, 0, 0, 0, 1, 0, -38.734, 0, 0, 1);
}
16.12% {
transform: matrix3d(0.997, 0, 0, 0, 0, 1.003, 0, 0, 0, 0, 1, 0, -43.356, 0, 0, 1);
}
19.72% {
transform: matrix3d(1.006, 0, 0, 0, 0, 0.994, 0, 0, 0, 0, 1, 0, -34.155, 0, 0, 1);
}
27.23% {
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -7.839, 0, 0, 1);
}
30.83% {
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -1.951, 0, 0, 1);
}
38.34% {
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 1.037, 0, 0, 1);
}
41.99% {
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.812, 0, 0, 1);
}
50% {
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.159, 0, 0, 1);
}
60.56% {
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.025, 0, 0, 1);
}
82.78% {
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.001, 0, 0, 1);
}
100% {
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
}
.ns-effect-slide-right.ns-hide {
animation-name: animSlideRight;
animation-duration: 0.25s;
}
@keyframes animSlideRight {
0% {
transform: translate3d(30px, 0, 0) translate3d(100%, 0, 0);
}
100% {
transform: translate3d(0, 0, 0);
}
}
.ns-effect-slide-center.ns-show {
animation: animSlideElasticCenter 2000ms linear both;
}
@keyframes animSlideElasticCenter {
0% {
transform: matrix3d(1, 0, 0, 0, 0, 3, 0, 0, 0, 0, 1, 0, 0, -300, 0, 1);
}
2.15% {
transform: matrix3d(1, 0, 0, 0, 0, 1.971, 0, 0, 0, 0, 1, 0, 0, -199.378, 0, 1);
}
4.1% {
transform: matrix3d(1, 0, 0, 0, 0, 1.294, 0, 0, 0, 0, 1, 0, 0, -125.912, 0, 1);
}
4.3% {
transform: matrix3d(1, 0, 0, 0, 0, 1.243, 0, 0, 0, 0, 1, 0, 0, -119.441, 0, 1);
}
6.46% {
transform: matrix3d(1, 0, 0, 0, 0, 0.895, 0, 0, 0, 0, 1, 0, 0, -62.014, 0, 1);
}
8.11% {
transform: matrix3d(1, 0, 0, 0, 0, 0.817, 0, 0, 0, 0, 1, 0, 0, -31.647, 0, 1);
}
8.61% {
transform: matrix3d(1, 0, 0, 0, 0, 0.813, 0, 0, 0, 0, 1, 0, 0, -24.472, 0, 1);
}
12.11% {
transform: matrix3d(1, 0, 0, 0, 0, 0.9, 0, 0, 0, 0, 1, 0, 0, 5.53, 0, 1);
}
14.16% {
transform: matrix3d(1, 0, 0, 0, 0, 0.959, 0, 0, 0, 0, 1, 0, 0, 11.62, 0, 1);
}
16.12% {
transform: matrix3d(1, 0, 0, 0, 0, 0.994, 0, 0, 0, 0, 1, 0, 0, 13.007, 0, 1);
}
19.72% {
transform: matrix3d(1, 0, 0, 0, 0, 1.012, 0, 0, 0, 0, 1, 0, 0, 10.247, 0, 1);
}
27.23% {
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 2.352, 0, 1);
}
30.83% {
transform: matrix3d(1, 0, 0, 0, 0, 0.999, 0, 0, 0, 0, 1, 0, 0, 0.585, 0, 1);
}
38.34% {
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.311, 0, 1);
}
41.99% {
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.244, 0, 1);
}
50% {
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.048, 0, 1);
}
60.56% {
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.007, 0, 1);
}
82.78% {
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
100% {
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
}
.ns-effect-slide-center.ns-hide {
animation-name: animSlideCenter;
animation-duration: 0.25s;
}
@keyframes animSlideCenter {
0% {
transform: translate3d(0, -30px, 0) translate3d(0, -100%, 0);
}
100% {
transform: translate3d(0, 0, 0);
}
}
.ns-effect-genie.ns-show,
.ns-effect-genie.ns-hide {
animation-name: animGenie;
animation-duration: 0.4s;
}
@keyframes animGenie {
0% {
opacity: 0;
transform: translate3d(0, calc(200% + 30px), 0) scale3d(0, 1, 1);
animation-timing-function: ease-in;
}
40% {
opacity: 0.5;
transform: translate3d(0, 0, 0) scale3d(0.02, 1.1, 1);
animation-timing-function: ease-out;
}
70% {
opacity: 0.6;
transform: translate3d(0, -40px, 0) scale3d(0.8, 1.1, 1);
}
100% {
opacity: 1;
transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
}
}
modules/default/alert/notificationFx.js
+158
View File
@@ -0,0 +1,158 @@
/**
* Based on work by
*
* notificationFx.js v1.0.0
* https://tympanus.net/codrops/
*
* Licensed under the MIT license.
* https://opensource.org/licenses/mit-license.php
*
* Copyright 2014, Codrops
* https://tympanus.net/codrops/
*/
(function (window) {
/**
* Extend one object with another one
*
* @param {object} a The object to extend
* @param {object} b The object which extends the other, overwrites existing keys
* @returns {object} The merged object
*/
function extend(a, b) {
for (let key in b) {
if (b.hasOwnProperty(key)) {
a[key] = b[key];
}
}
return a;
}
/**
* NotificationFx constructor
*
* @param {object} options The configuration options
* @class
*/
function NotificationFx(options) {
this.options = extend({}, this.options);
extend(this.options, options);
this._init();
}
/**
* NotificationFx options
*/
NotificationFx.prototype.options = {
// element to which the notification will be appended
// defaults to the document.body
wrapper: document.body,
// the message
message: "yo!",
// layout type: growl|attached|bar|other
layout: "growl",
// effects for the specified layout:
// for growl layout: scale|slide|genie|jelly
// for attached layout: flip|bouncyflip
// for other layout: boxspinner|cornerexpand|loadingcircle|thumbslider
// ...
effect: "slide",
// notice, warning, error, success
// will add class ns-type-warning, ns-type-error or ns-type-success
type: "notice",
// if the user doesn´t close the notification then we remove it
// after the following time
ttl: 6000,
al_no: "ns-box",
// callbacks
onClose: function () {
return false;
},
onOpen: function () {
return false;
}
};
/**
* Initialize and cache some vars
*/
NotificationFx.prototype._init = function () {
// create HTML structure
this.ntf = document.createElement("div");
this.ntf.className = this.options.al_no + " ns-" + this.options.layout + " ns-effect-" + this.options.effect + " ns-type-" + this.options.type;
let strinner = '<div class="ns-box-inner">';
strinner += this.options.message;
strinner += "</div>";
this.ntf.innerHTML = strinner;
// append to body or the element specified in options.wrapper
this.options.wrapper.insertBefore(this.ntf, this.options.wrapper.nextSibling);
// dismiss after [options.ttl]ms
if (this.options.ttl) {
this.dismissttl = setTimeout(() => {
if (this.active) {
this.dismiss();
}
}, this.options.ttl);
}
// init events
this._initEvents();
};
/**
* Init events
*/
NotificationFx.prototype._initEvents = function () {
// dismiss notification by tapping on it if someone has a touchscreen
this.ntf.querySelector(".ns-box-inner").addEventListener("click", () => {
this.dismiss();
});
};
/**
* Show the notification
*/
NotificationFx.prototype.show = function () {
this.active = true;
this.ntf.classList.remove("ns-hide");
this.ntf.classList.add("ns-show");
this.options.onOpen();
};
/**
* Dismiss the notification
*
* @param {boolean} [close] call the onClose callback at the end
*/
NotificationFx.prototype.dismiss = function (close = true) {
this.active = false;
clearTimeout(this.dismissttl);
this.ntf.classList.remove("ns-show");
setTimeout(() => {
this.ntf.classList.add("ns-hide");
// callback
if (close) this.options.onClose();
}, 25);
// after animation ends remove ntf from the DOM
const onEndAnimationFn = (ev) => {
if (ev.target !== this.ntf) {
return false;
}
this.ntf.removeEventListener("animationend", onEndAnimationFn);
if (ev.target.parentNode === this.options.wrapper) {
this.options.wrapper.removeChild(this.ntf);
}
};
this.ntf.addEventListener("animationend", onEndAnimationFn);
};
/**
* Add to global namespace
*/
window.NotificationFx = NotificationFx;
})(window);
modules/default/alert/translations/bg.json
+4
View File
@@ -0,0 +1,4 @@
{
"sysTitle": "MagicMirror нотификация",
"welcome": "Добре дошли, стартирането беше успешно"
}
modules/default/alert/translations/da.json
+4
View File
@@ -0,0 +1,4 @@
{
"sysTitle": "MagicMirror Notifikation",
"welcome": "Velkommen, modulet er succesfuldt startet!"
}
modules/default/alert/translations/de.json
+4
View File
@@ -0,0 +1,4 @@
{
"sysTitle": "MagicMirror Benachrichtigung",
"welcome": "Willkommen, Start war erfolgreich!"
}
modules/default/alert/translations/en.json
+4
View File
@@ -0,0 +1,4 @@
{
"sysTitle": "MagicMirror Notification",
"welcome": "Welcome, start was successful!"
}
modules/default/alert/translations/es.json
+4
View File
@@ -0,0 +1,4 @@
{
"sysTitle": "MagicMirror Notificaciones",
"welcome": "Bienvenido, ¡se iniciado correctamente!"
}
modules/default/alert/translations/fr.json
+4
View File
@@ -0,0 +1,4 @@
{
"sysTitle": "MagicMirror Notification",
"welcome": "Bienvenue, le démarrage a été un succès!"
}
modules/default/alert/translations/hu.json
+4
View File
@@ -0,0 +1,4 @@
{
"sysTitle": "MagicMirror értesítés",
"welcome": "Üdvözöljük, indulás sikeres!"
}
modules/default/alert/translations/nl.json
+4
View File
@@ -0,0 +1,4 @@
{
"sysTitle": "MagicMirror Notificatie",
"welcome": "Welkom, Succesvol gestart!"
}
modules/default/alert/translations/ru.json
+4
View File
@@ -0,0 +1,4 @@
{
"sysTitle": "MagicMirror Уведомление",
"welcome": "Добро пожаловать, старт был успешным!"
}