Replace old js files with modern code

This commit is contained in:
Veeck
2020-04-20 10:44:56 +02:00
parent c8a9c9b84e
commit 06e8308dc2
4 changed files with 31 additions and 148 deletions

View File

@@ -1,4 +1,6 @@
/**
* Code originally from
*
* notificationFx.js v1.0.0
* http://www.codrops.com
*
@@ -8,40 +10,13 @@
* Copyright 2014, Codrops
* http://www.codrops.com
*/
// jscs:disable
;(function(window) {
"use strict";
var docElem = window.document.documentElement,
support = {animations: Modernizr.cssanimations},
animEndEventNames = {
"WebkitAnimation": "webkitAnimationEnd",
"OAnimation": "oAnimationEnd",
"msAnimation": "MSAnimationEnd",
"animation": "animationend"
},
// animation end event name
animEndEventName = animEndEventNames[ Modernizr.prefixed("animation") ];
/**
* extend obj function
*/
function extend(a, b) {
for (var key in b) {
if (b.hasOwnProperty(key)) {
a[key] = b[key];
}
}
return a;
}
/**
* NotificationFx function
*/
function NotificationFx(options) {
this.options = extend({}, this.options);
extend(this.options, options);
this.options = { ...this.options, ...options };
this._init();
}
@@ -82,7 +57,7 @@
// 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;
var strinner = "<div class=\"ns-box-inner\">";
let strinner = "<div class=\"ns-box-inner\">";
strinner += this.options.message;
strinner += "</div>";
this.ntf.innerHTML = strinner;
@@ -91,13 +66,12 @@
this.options.wrapper.insertBefore(this.ntf, this.options.wrapper.nextSibling);
// dismiss after [options.ttl]ms
var self = this;
if (this.options.ttl) {
this.dismissttl = setTimeout(function() {
if (self.active) {
self.dismiss();
}
}, this.options.ttl);
this.dismissttl = setTimeout(() => {
if (this.active) {
this.dismiss();
}
}, this.options.ttl);
}
// init events
@@ -108,9 +82,8 @@
* init events
*/
NotificationFx.prototype._initEvents = function() {
var self = this;
// dismiss notification by tapping on it if someone has a touchscreen
this.ntf.querySelector(".ns-box-inner").addEventListener("click", function() { self.dismiss(); });
this.ntf.querySelector(".ns-box-inner").addEventListener("click", () => { this.dismiss(); });
};
/**
@@ -118,8 +91,8 @@
*/
NotificationFx.prototype.show = function() {
this.active = true;
classie.remove(this.ntf, "ns-hide");
classie.add(this.ntf, "ns-show");
this.ntf.classList.remove("ns-hide");
this.ntf.classList.add("ns-show");
this.options.onOpen();
};
@@ -127,34 +100,27 @@
* dismiss the notification
*/
NotificationFx.prototype.dismiss = function() {
var self = this;
this.active = false;
clearTimeout(this.dismissttl);
classie.remove(this.ntf, "ns-show");
setTimeout(function() {
classie.add(self.ntf, "ns-hide");
this.ntf.classList.remove("ns-show");
setTimeout(() => {
this.ntf.classList.add("ns-hide");
// callback
self.options.onClose();
this.options.onClose();
}, 25);
// after animation ends remove ntf from the DOM
var onEndAnimationFn = function(ev) {
if (support.animations) {
if (ev.target !== self.ntf) return false;
this.removeEventListener(animEndEventName, onEndAnimationFn);
}
const onEndAnimationFn = (ev) => {
if (ev.target !== this.ntf) return false;
this.ntf.removeEventListener("animationend", onEndAnimationFn);
if (this.parentNode === self.options.wrapper) {
self.options.wrapper.removeChild(this);
if (ev.target.parentNode === this.options.wrapper) {
this.options.wrapper.removeChild(this.ntf);
}
};
if (support.animations) {
this.ntf.addEventListener(animEndEventName, onEndAnimationFn);
} else {
onEndAnimationFn();
}
this.ntf.addEventListener("animationend", onEndAnimationFn);
};
/**