123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158 |
- /**
- * 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);
|