1316 lines
39 KiB
JavaScript
1316 lines
39 KiB
JavaScript
(function (root, factory) {
|
||
if (typeof define === "function" && define.amd) {
|
||
define([], factory(root));
|
||
} else if (typeof exports === "object") {
|
||
module.exports = factory(root);
|
||
} else if (window.layui && layui.define) {
|
||
layui.define(function (exports) {
|
||
exports("toast", factory(root));
|
||
});
|
||
} else {
|
||
root.iziToast = factory(root);
|
||
}
|
||
})(
|
||
typeof global !== "undefined" ? global : window || this.window || this.global,
|
||
function (root) {
|
||
"use strict";
|
||
|
||
var $iziToast = {},
|
||
PLUGIN_NAME = "iziToast",
|
||
BODY = document.querySelector("body"),
|
||
ISMOBILE = /Mobi/.test(navigator.userAgent) ? true : false,
|
||
ISCHROME =
|
||
/Chrome/.test(navigator.userAgent) &&
|
||
/Google Inc/.test(navigator.vendor),
|
||
ISFIREFOX = typeof InstallTrigger !== "undefined",
|
||
ACCEPTSTOUCH = "ontouchstart" in document.documentElement,
|
||
POSITIONS = [
|
||
"bottomRight",
|
||
"bottomLeft",
|
||
"bottomCenter",
|
||
"topRight",
|
||
"topLeft",
|
||
"topCenter",
|
||
"center",
|
||
],
|
||
THEMES = {
|
||
info: {
|
||
color: "blue",
|
||
icon: "ico-info",
|
||
},
|
||
success: {
|
||
color: "green",
|
||
icon: "ico-success",
|
||
},
|
||
warning: {
|
||
color: "orange",
|
||
icon: "ico-warning",
|
||
},
|
||
error: {
|
||
color: "red",
|
||
icon: "ico-error",
|
||
},
|
||
question: {
|
||
color: "yellow",
|
||
icon: "ico-question",
|
||
},
|
||
},
|
||
MOBILEWIDTH = 568,
|
||
CONFIG = {};
|
||
|
||
$iziToast.children = {};
|
||
|
||
// Default settings
|
||
var defaults = {
|
||
id: null,
|
||
class: "",
|
||
title: "",
|
||
titleColor: "",
|
||
titleSize: "",
|
||
titleLineHeight: "",
|
||
message: "",
|
||
messageColor: "",
|
||
messageSize: "",
|
||
messageLineHeight: "",
|
||
backgroundColor: "",
|
||
theme: "light", // dark
|
||
color: "", // blue, red, green, yellow
|
||
icon: "",
|
||
iconText: "",
|
||
iconColor: "",
|
||
iconUrl: null,
|
||
image: "",
|
||
imageWidth: 50,
|
||
maxWidth: null,
|
||
zindex: null,
|
||
layout: 2,
|
||
balloon: false,
|
||
close: true,
|
||
closeOnEscape: false,
|
||
closeOnClick: false,
|
||
displayMode: 0,
|
||
position: "topCenter", // bottomRight, bottomLeft, topRight, topLeft, topCenter, bottomCenter, center
|
||
target: "",
|
||
targetFirst: true,
|
||
timeout: 3000, // 默认3秒
|
||
rtl: false,
|
||
animateInside: false, // 动画效果
|
||
drag: true,
|
||
pauseOnHover: true,
|
||
resetOnHover: false,
|
||
progressBar: false,
|
||
progressBarColor: "",
|
||
progressBarEasing: "linear",
|
||
overlay: false,
|
||
overlayClose: false,
|
||
overlayColor: "rgba(0, 0, 0, 0.6)",
|
||
transitionIn: "fadeInDown", // bounceInLeft, bounceInRight, bounceInUp, bounceInDown, fadeIn, fadeInDown, fadeInUp, fadeInLeft, fadeInRight, flipInX
|
||
transitionOut: "fadeOut", // fadeOut, fadeOutUp, fadeOutDown, fadeOutLeft, fadeOutRight, flipOutX
|
||
transitionInMobile: "bounceInDown",
|
||
transitionOutMobile: "fadeOutUp",
|
||
buttons: {},
|
||
inputs: {},
|
||
onOpening: function () {},
|
||
onOpened: function () {},
|
||
onClosing: function () {},
|
||
onClosed: function () {},
|
||
};
|
||
|
||
if (!("remove" in Element.prototype)) {
|
||
Element.prototype.remove = function () {
|
||
if (this.parentNode) {
|
||
this.parentNode.removeChild(this);
|
||
}
|
||
};
|
||
}
|
||
|
||
if (typeof window.CustomEvent !== "function") {
|
||
var CustomEventPolyfill = function (event, params) {
|
||
params = params || {
|
||
bubbles: false,
|
||
cancelable: false,
|
||
detail: undefined,
|
||
};
|
||
var evt = document.createEvent("CustomEvent");
|
||
evt.initCustomEvent(
|
||
event,
|
||
params.bubbles,
|
||
params.cancelable,
|
||
params.detail,
|
||
);
|
||
return evt;
|
||
};
|
||
|
||
CustomEventPolyfill.prototype = window.Event.prototype;
|
||
|
||
window.CustomEvent = CustomEventPolyfill;
|
||
}
|
||
|
||
var forEach = function (collection, callback, scope) {
|
||
if (Object.prototype.toString.call(collection) === "[object Object]") {
|
||
for (var prop in collection) {
|
||
if (Object.prototype.hasOwnProperty.call(collection, prop)) {
|
||
callback.call(scope, collection[prop], prop, collection);
|
||
}
|
||
}
|
||
} else {
|
||
if (collection) {
|
||
for (var i = 0, len = collection.length; i < len; i++) {
|
||
callback.call(scope, collection[i], i, collection);
|
||
}
|
||
}
|
||
}
|
||
};
|
||
|
||
var extend = function (defaults, options) {
|
||
var extended = {};
|
||
forEach(defaults, function (value, prop) {
|
||
extended[prop] = defaults[prop];
|
||
});
|
||
forEach(options, function (value, prop) {
|
||
extended[prop] = options[prop];
|
||
});
|
||
return extended;
|
||
};
|
||
|
||
var createFragElem = function (htmlStr) {
|
||
var frag = document.createDocumentFragment(),
|
||
temp = document.createElement("div");
|
||
temp.innerHTML = htmlStr;
|
||
while (temp.firstChild) {
|
||
frag.appendChild(temp.firstChild);
|
||
}
|
||
return frag;
|
||
};
|
||
|
||
var generateId = function (params) {
|
||
var newId = btoa(encodeURIComponent(params));
|
||
return newId.replace(/=/g, "");
|
||
};
|
||
|
||
var isColor = function (color) {
|
||
if (
|
||
color.substring(0, 1) == "#" ||
|
||
color.substring(0, 3) == "rgb" ||
|
||
color.substring(0, 3) == "hsl"
|
||
) {
|
||
return true;
|
||
} else {
|
||
return false;
|
||
}
|
||
};
|
||
|
||
var isBase64 = function (str) {
|
||
try {
|
||
return btoa(atob(str)) == str;
|
||
} catch (err) {
|
||
return false;
|
||
}
|
||
};
|
||
|
||
var drag = (function () {
|
||
return {
|
||
move: function (toast, instance, settings, xpos) {
|
||
var opacity,
|
||
opacityRange = 0.3,
|
||
distance = 180;
|
||
|
||
if (xpos !== 0) {
|
||
toast.classList.add(PLUGIN_NAME + "-dragged");
|
||
|
||
toast.style.transform = "translateX(" + xpos + "px)";
|
||
|
||
if (xpos > 0) {
|
||
opacity = (distance - xpos) / distance;
|
||
if (opacity < opacityRange) {
|
||
instance.hide(
|
||
extend(settings, {
|
||
transitionOut: "fadeOutRight",
|
||
transitionOutMobile: "fadeOutRight",
|
||
}),
|
||
toast,
|
||
"drag",
|
||
);
|
||
}
|
||
} else {
|
||
opacity = (distance + xpos) / distance;
|
||
if (opacity < opacityRange) {
|
||
instance.hide(
|
||
extend(settings, {
|
||
transitionOut: "fadeOutLeft",
|
||
transitionOutMobile: "fadeOutLeft",
|
||
}),
|
||
toast,
|
||
"drag",
|
||
);
|
||
}
|
||
}
|
||
toast.style.opacity = opacity;
|
||
|
||
if (opacity < opacityRange) {
|
||
if (ISCHROME || ISFIREFOX) toast.style.left = xpos + "px";
|
||
|
||
toast.parentNode.style.opacity = opacityRange;
|
||
|
||
this.stopMoving(toast, null);
|
||
}
|
||
}
|
||
},
|
||
startMoving: function (toast, instance, settings, e) {
|
||
e = e || window.event;
|
||
var posX = ACCEPTSTOUCH ? e.touches[0].clientX : e.clientX,
|
||
toastLeft = toast.style.transform.replace("px)", "");
|
||
toastLeft = toastLeft.replace("translateX(", "");
|
||
var offsetX = posX - toastLeft;
|
||
|
||
if (settings.transitionIn) {
|
||
toast.classList.remove(settings.transitionIn);
|
||
}
|
||
if (settings.transitionInMobile) {
|
||
toast.classList.remove(settings.transitionInMobile);
|
||
}
|
||
toast.style.transition = "";
|
||
|
||
if (ACCEPTSTOUCH) {
|
||
document.ontouchmove = function (e) {
|
||
e.preventDefault();
|
||
e = e || window.event;
|
||
var posX = e.touches[0].clientX,
|
||
finalX = posX - offsetX;
|
||
drag.move(toast, instance, settings, finalX);
|
||
};
|
||
} else {
|
||
document.onmousemove = function (e) {
|
||
e.preventDefault();
|
||
e = e || window.event;
|
||
var posX = e.clientX,
|
||
finalX = posX - offsetX;
|
||
drag.move(toast, instance, settings, finalX);
|
||
};
|
||
}
|
||
},
|
||
stopMoving: function (toast, e) {
|
||
if (ACCEPTSTOUCH) {
|
||
document.ontouchmove = function () {};
|
||
} else {
|
||
document.onmousemove = function () {};
|
||
}
|
||
|
||
toast.style.opacity = "";
|
||
toast.style.transform = "";
|
||
|
||
if (toast.classList.contains(PLUGIN_NAME + "-dragged")) {
|
||
toast.classList.remove(PLUGIN_NAME + "-dragged");
|
||
|
||
toast.style.transition = "transform 0.4s ease, opacity 0.4s ease";
|
||
setTimeout(function () {
|
||
toast.style.transition = "";
|
||
}, 400);
|
||
}
|
||
},
|
||
};
|
||
})();
|
||
|
||
$iziToast.setSetting = function (ref, option, value) {
|
||
$iziToast.children[ref][option] = value;
|
||
};
|
||
|
||
$iziToast.getSetting = function (ref, option) {
|
||
return $iziToast.children[ref][option];
|
||
};
|
||
|
||
$iziToast.destroy = function () {
|
||
forEach(
|
||
document.querySelectorAll("." + PLUGIN_NAME + "-overlay"),
|
||
function (element, index) {
|
||
element.remove();
|
||
},
|
||
);
|
||
|
||
forEach(
|
||
document.querySelectorAll("." + PLUGIN_NAME + "-wrapper"),
|
||
function (element, index) {
|
||
element.remove();
|
||
},
|
||
);
|
||
|
||
forEach(
|
||
document.querySelectorAll("." + PLUGIN_NAME),
|
||
function (element, index) {
|
||
element.remove();
|
||
},
|
||
);
|
||
|
||
this.children = {};
|
||
|
||
// Remove event listeners
|
||
document.removeEventListener(PLUGIN_NAME + "-opened", {}, false);
|
||
document.removeEventListener(PLUGIN_NAME + "-opening", {}, false);
|
||
document.removeEventListener(PLUGIN_NAME + "-closing", {}, false);
|
||
document.removeEventListener(PLUGIN_NAME + "-closed", {}, false);
|
||
document.removeEventListener("keyup", {}, false);
|
||
|
||
// Reset variables
|
||
CONFIG = {};
|
||
};
|
||
|
||
/**
|
||
* Initialize Plugin
|
||
* @public
|
||
* @param {Object} options User settings
|
||
*/
|
||
$iziToast.settings = function (options) {
|
||
// Destroy any existing initializations
|
||
$iziToast.destroy();
|
||
|
||
CONFIG = options;
|
||
defaults = extend(defaults, options || {});
|
||
};
|
||
|
||
/**
|
||
* Building themes functions.
|
||
* @public
|
||
* @param {Object} options User settings
|
||
*/
|
||
forEach(THEMES, function (theme, name) {
|
||
$iziToast[name] = function (options) {
|
||
var settings = extend(CONFIG, options || {});
|
||
settings = extend(theme, settings || {});
|
||
|
||
this.show(settings);
|
||
};
|
||
});
|
||
|
||
/**
|
||
* Do the calculation to move the progress bar
|
||
* @private
|
||
*/
|
||
$iziToast.progress = function (options, $toast, callback) {
|
||
var that = this,
|
||
ref = $toast.getAttribute("data-iziToast-ref"),
|
||
settings = extend(this.children[ref], options || {}),
|
||
$elem = $toast.querySelector("." + PLUGIN_NAME + "-progressbar div");
|
||
|
||
return {
|
||
start: function () {
|
||
if (typeof settings.time.REMAINING == "undefined") {
|
||
$toast.classList.remove(PLUGIN_NAME + "-reseted");
|
||
|
||
if ($elem !== null) {
|
||
$elem.style.transition =
|
||
"width " +
|
||
settings.timeout +
|
||
"ms " +
|
||
settings.progressBarEasing;
|
||
$elem.style.width = "0%";
|
||
}
|
||
|
||
settings.time.START = new Date().getTime();
|
||
settings.time.END = settings.time.START + settings.timeout;
|
||
settings.time.TIMER = setTimeout(function () {
|
||
clearTimeout(settings.time.TIMER);
|
||
|
||
if (!$toast.classList.contains(PLUGIN_NAME + "-closing")) {
|
||
that.hide(settings, $toast, "timeout");
|
||
|
||
if (typeof callback === "function") {
|
||
callback.apply(that);
|
||
}
|
||
}
|
||
}, settings.timeout);
|
||
that.setSetting(ref, "time", settings.time);
|
||
}
|
||
},
|
||
pause: function () {
|
||
if (
|
||
typeof settings.time.START !== "undefined" &&
|
||
!$toast.classList.contains(PLUGIN_NAME + "-paused") &&
|
||
!$toast.classList.contains(PLUGIN_NAME + "-reseted")
|
||
) {
|
||
$toast.classList.add(PLUGIN_NAME + "-paused");
|
||
|
||
settings.time.REMAINING = settings.time.END - new Date().getTime();
|
||
|
||
clearTimeout(settings.time.TIMER);
|
||
|
||
that.setSetting(ref, "time", settings.time);
|
||
|
||
if ($elem !== null) {
|
||
var computedStyle = window.getComputedStyle($elem),
|
||
propertyWidth = computedStyle.getPropertyValue("width");
|
||
|
||
$elem.style.transition = "none";
|
||
$elem.style.width = propertyWidth;
|
||
}
|
||
|
||
if (typeof callback === "function") {
|
||
setTimeout(function () {
|
||
callback.apply(that);
|
||
}, 10);
|
||
}
|
||
}
|
||
},
|
||
resume: function () {
|
||
if (typeof settings.time.REMAINING !== "undefined") {
|
||
$toast.classList.remove(PLUGIN_NAME + "-paused");
|
||
|
||
if ($elem !== null) {
|
||
$elem.style.transition =
|
||
"width " +
|
||
settings.time.REMAINING +
|
||
"ms " +
|
||
settings.progressBarEasing;
|
||
$elem.style.width = "0%";
|
||
}
|
||
|
||
settings.time.END = new Date().getTime() + settings.time.REMAINING;
|
||
settings.time.TIMER = setTimeout(function () {
|
||
clearTimeout(settings.time.TIMER);
|
||
|
||
if (!$toast.classList.contains(PLUGIN_NAME + "-closing")) {
|
||
that.hide(settings, $toast, "timeout");
|
||
|
||
if (typeof callback === "function") {
|
||
callback.apply(that);
|
||
}
|
||
}
|
||
}, settings.time.REMAINING);
|
||
|
||
that.setSetting(ref, "time", settings.time);
|
||
} else {
|
||
this.start();
|
||
}
|
||
},
|
||
reset: function () {
|
||
clearTimeout(settings.time.TIMER);
|
||
|
||
delete settings.time.REMAINING;
|
||
|
||
that.setSetting(ref, "time", settings.time);
|
||
|
||
$toast.classList.add(PLUGIN_NAME + "-reseted");
|
||
|
||
$toast.classList.remove(PLUGIN_NAME + "-paused");
|
||
|
||
if ($elem !== null) {
|
||
$elem.style.transition = "none";
|
||
$elem.style.width = "100%";
|
||
}
|
||
|
||
if (typeof callback === "function") {
|
||
setTimeout(function () {
|
||
callback.apply(that);
|
||
}, 10);
|
||
}
|
||
},
|
||
};
|
||
};
|
||
|
||
/**
|
||
* Close the specific Toast
|
||
* @public
|
||
* @param {Object} options User settings
|
||
*/
|
||
$iziToast.hide = function (options, $toast, closedBy) {
|
||
if (typeof $toast != "object") {
|
||
$toast = document.querySelector($toast);
|
||
}
|
||
|
||
var that = this,
|
||
settings = extend(
|
||
this.children[$toast.getAttribute("data-iziToast-ref")],
|
||
options || {},
|
||
);
|
||
settings.closedBy = closedBy || null;
|
||
|
||
delete settings.time.REMAINING;
|
||
|
||
$toast.classList.add(PLUGIN_NAME + "-closing");
|
||
|
||
// Overlay
|
||
(function () {
|
||
var $overlay = document.querySelector("." + PLUGIN_NAME + "-overlay");
|
||
if ($overlay !== null) {
|
||
var refs = $overlay.getAttribute("data-iziToast-ref");
|
||
refs = refs.split(",");
|
||
var index = refs.indexOf(String(settings.ref));
|
||
|
||
if (index !== -1) {
|
||
refs.splice(index, 1);
|
||
}
|
||
$overlay.setAttribute("data-iziToast-ref", refs.join());
|
||
|
||
if (refs.length === 0) {
|
||
$overlay.classList.remove("fadeIn");
|
||
$overlay.classList.add("fadeOut");
|
||
setTimeout(function () {
|
||
$overlay.remove();
|
||
}, 700);
|
||
}
|
||
}
|
||
})();
|
||
|
||
if (settings.transitionIn) {
|
||
$toast.classList.remove(settings.transitionIn);
|
||
}
|
||
|
||
if (settings.transitionInMobile) {
|
||
$toast.classList.remove(settings.transitionInMobile);
|
||
}
|
||
|
||
if (ISMOBILE || window.innerWidth <= MOBILEWIDTH) {
|
||
if (settings.transitionOutMobile)
|
||
$toast.classList.add(settings.transitionOutMobile);
|
||
} else {
|
||
if (settings.transitionOut)
|
||
$toast.classList.add(settings.transitionOut);
|
||
}
|
||
var H = $toast.parentNode.offsetHeight;
|
||
$toast.parentNode.style.height = H + "px";
|
||
$toast.style.pointerEvents = "none";
|
||
|
||
if (!ISMOBILE || window.innerWidth > MOBILEWIDTH) {
|
||
$toast.parentNode.style.transitionDelay = "0.2s";
|
||
}
|
||
|
||
try {
|
||
var event = new CustomEvent(PLUGIN_NAME + "-closing", {
|
||
detail: settings,
|
||
bubbles: true,
|
||
cancelable: true,
|
||
});
|
||
document.dispatchEvent(event);
|
||
} catch (ex) {
|
||
console.warn(ex);
|
||
}
|
||
|
||
setTimeout(function () {
|
||
$toast.parentNode.style.height = "0px";
|
||
$toast.parentNode.style.overflow = "";
|
||
|
||
setTimeout(function () {
|
||
delete that.children[settings.ref];
|
||
|
||
$toast.parentNode.remove();
|
||
|
||
try {
|
||
var event = new CustomEvent(PLUGIN_NAME + "-closed", {
|
||
detail: settings,
|
||
bubbles: true,
|
||
cancelable: true,
|
||
});
|
||
document.dispatchEvent(event);
|
||
} catch (ex) {
|
||
console.warn(ex);
|
||
}
|
||
|
||
if (typeof settings.onClosed !== "undefined") {
|
||
settings.onClosed.apply(null, [settings, $toast, closedBy]);
|
||
}
|
||
}, 1000);
|
||
}, 200);
|
||
|
||
if (typeof settings.onClosing !== "undefined") {
|
||
settings.onClosing.apply(null, [settings, $toast, closedBy]);
|
||
}
|
||
};
|
||
|
||
/**
|
||
* Create and show the Toast
|
||
* @public
|
||
* @param {Object} options User settings
|
||
*/
|
||
$iziToast.show = function (options) {
|
||
var that = this;
|
||
|
||
// Merge user options with defaults
|
||
var settings = extend(CONFIG, options || {});
|
||
settings = extend(defaults, settings);
|
||
settings.time = {};
|
||
|
||
if (settings.id === null) {
|
||
settings.id = generateId(
|
||
settings.title + settings.message + settings.color,
|
||
);
|
||
}
|
||
|
||
if (settings.displayMode === 1 || settings.displayMode == "once") {
|
||
try {
|
||
if (
|
||
document.querySelectorAll("." + PLUGIN_NAME + "#" + settings.id)
|
||
.length > 0
|
||
) {
|
||
return false;
|
||
}
|
||
} catch (exc) {
|
||
console.warn(
|
||
"[" +
|
||
PLUGIN_NAME +
|
||
"] Could not find an element with this selector: " +
|
||
"#" +
|
||
settings.id +
|
||
". Try to set an valid id.",
|
||
);
|
||
}
|
||
}
|
||
|
||
if (settings.displayMode === 2 || settings.displayMode == "replace") {
|
||
try {
|
||
forEach(
|
||
document.querySelectorAll("." + PLUGIN_NAME + "#" + settings.id),
|
||
function (element, index) {
|
||
that.hide(settings, element, "replaced");
|
||
},
|
||
);
|
||
} catch (exc) {
|
||
console.warn(
|
||
"[" +
|
||
PLUGIN_NAME +
|
||
"] Could not find an element with this selector: " +
|
||
"#" +
|
||
settings.id +
|
||
". Try to set an valid id.",
|
||
);
|
||
}
|
||
}
|
||
|
||
settings.ref =
|
||
new Date().getTime() + Math.floor(Math.random() * 10000000 + 1);
|
||
|
||
$iziToast.children[settings.ref] = settings;
|
||
|
||
var $DOM = {
|
||
body: document.querySelector("body"),
|
||
overlay: document.createElement("div"),
|
||
toast: document.createElement("div"),
|
||
toastBody: document.createElement("div"),
|
||
toastTexts: document.createElement("div"),
|
||
toastCapsule: document.createElement("div"),
|
||
cover: document.createElement("div"),
|
||
buttons: document.createElement("div"),
|
||
inputs: document.createElement("div"),
|
||
icon: !settings.iconUrl
|
||
? document.createElement("i")
|
||
: document.createElement("img"),
|
||
wrapper: null,
|
||
};
|
||
|
||
$DOM.toast.setAttribute("data-iziToast-ref", settings.ref);
|
||
$DOM.toast.appendChild($DOM.toastBody);
|
||
$DOM.toastCapsule.appendChild($DOM.toast);
|
||
|
||
// CSS Settings
|
||
(function () {
|
||
$DOM.toast.classList.add(PLUGIN_NAME);
|
||
$DOM.toast.classList.add(PLUGIN_NAME + "-opening");
|
||
$DOM.toastCapsule.classList.add(PLUGIN_NAME + "-capsule");
|
||
$DOM.toastBody.classList.add(PLUGIN_NAME + "-body");
|
||
$DOM.toastTexts.classList.add(PLUGIN_NAME + "-texts");
|
||
|
||
if (ISMOBILE || window.innerWidth <= MOBILEWIDTH) {
|
||
if (settings.transitionInMobile)
|
||
$DOM.toast.classList.add(settings.transitionInMobile);
|
||
} else {
|
||
if (settings.transitionIn)
|
||
$DOM.toast.classList.add(settings.transitionIn);
|
||
}
|
||
|
||
if (settings.class) {
|
||
var classes = settings.class.split(" ");
|
||
forEach(classes, function (value, index) {
|
||
$DOM.toast.classList.add(value);
|
||
});
|
||
}
|
||
|
||
if (settings.id) {
|
||
$DOM.toast.id = settings.id;
|
||
}
|
||
|
||
if (settings.rtl) {
|
||
$DOM.toast.classList.add(PLUGIN_NAME + "-rtl");
|
||
$DOM.toast.setAttribute("dir", "rtl");
|
||
}
|
||
|
||
if (settings.layout > 1) {
|
||
$DOM.toast.classList.add(PLUGIN_NAME + "-layout" + settings.layout);
|
||
}
|
||
|
||
if (settings.balloon) {
|
||
$DOM.toast.classList.add(PLUGIN_NAME + "-balloon");
|
||
}
|
||
|
||
if (settings.maxWidth) {
|
||
if (!isNaN(settings.maxWidth)) {
|
||
$DOM.toast.style.maxWidth = settings.maxWidth + "px";
|
||
} else {
|
||
$DOM.toast.style.maxWidth = settings.maxWidth;
|
||
}
|
||
}
|
||
|
||
if (settings.theme !== "" || settings.theme !== "light") {
|
||
$DOM.toast.classList.add(PLUGIN_NAME + "-theme-" + settings.theme);
|
||
}
|
||
|
||
if (settings.color) {
|
||
//#, rgb, rgba, hsl
|
||
|
||
if (isColor(settings.color)) {
|
||
$DOM.toast.style.background = settings.color;
|
||
} else {
|
||
$DOM.toast.classList.add(PLUGIN_NAME + "-color-" + settings.color);
|
||
}
|
||
}
|
||
|
||
if (settings.backgroundColor) {
|
||
$DOM.toast.style.background = settings.backgroundColor;
|
||
if (settings.balloon) {
|
||
$DOM.toast.style.borderColor = settings.backgroundColor;
|
||
}
|
||
}
|
||
})();
|
||
|
||
// Cover image
|
||
(function () {
|
||
if (settings.image) {
|
||
$DOM.cover.classList.add(PLUGIN_NAME + "-cover");
|
||
$DOM.cover.style.width = settings.imageWidth + "px";
|
||
|
||
if (isBase64(settings.image.replace(/ /g, ""))) {
|
||
$DOM.cover.style.backgroundImage =
|
||
"url(data:image/png;base64," +
|
||
settings.image.replace(/ /g, "") +
|
||
")";
|
||
} else {
|
||
$DOM.cover.style.backgroundImage = "url(" + settings.image + ")";
|
||
}
|
||
|
||
if (settings.rtl) {
|
||
$DOM.toastBody.style.marginRight = settings.imageWidth + 10 + "px";
|
||
} else {
|
||
$DOM.toastBody.style.marginLeft = settings.imageWidth + 10 + "px";
|
||
}
|
||
$DOM.toast.appendChild($DOM.cover);
|
||
}
|
||
})();
|
||
|
||
// Button close
|
||
(function () {
|
||
if (settings.close) {
|
||
$DOM.buttonClose = document.createElement("button");
|
||
$DOM.buttonClose.type = "button";
|
||
$DOM.buttonClose.classList.add(PLUGIN_NAME + "-close");
|
||
$DOM.buttonClose.addEventListener("click", function (e) {
|
||
var button = e.target;
|
||
that.hide(settings, $DOM.toast, "button");
|
||
});
|
||
$DOM.toast.appendChild($DOM.buttonClose);
|
||
} else {
|
||
if (settings.rtl) {
|
||
$DOM.toast.style.paddingLeft = "18px";
|
||
} else {
|
||
$DOM.toast.style.paddingRight = "18px";
|
||
}
|
||
}
|
||
})();
|
||
|
||
// Progress Bar & Timeout
|
||
(function () {
|
||
if (settings.progressBar) {
|
||
$DOM.progressBar = document.createElement("div");
|
||
$DOM.progressBarDiv = document.createElement("div");
|
||
$DOM.progressBar.classList.add(PLUGIN_NAME + "-progressbar");
|
||
$DOM.progressBarDiv.style.background = settings.progressBarColor;
|
||
$DOM.progressBar.appendChild($DOM.progressBarDiv);
|
||
$DOM.toast.appendChild($DOM.progressBar);
|
||
}
|
||
|
||
if (settings.timeout) {
|
||
if (settings.pauseOnHover && !settings.resetOnHover) {
|
||
$DOM.toast.addEventListener("mouseenter", function (e) {
|
||
that.progress(settings, $DOM.toast).pause();
|
||
});
|
||
$DOM.toast.addEventListener("mouseleave", function (e) {
|
||
that.progress(settings, $DOM.toast).resume();
|
||
});
|
||
}
|
||
|
||
if (settings.resetOnHover) {
|
||
$DOM.toast.addEventListener("mouseenter", function (e) {
|
||
that.progress(settings, $DOM.toast).reset();
|
||
});
|
||
$DOM.toast.addEventListener("mouseleave", function (e) {
|
||
that.progress(settings, $DOM.toast).start();
|
||
});
|
||
}
|
||
}
|
||
})();
|
||
|
||
// Icon
|
||
(function () {
|
||
if (settings.iconUrl) {
|
||
$DOM.icon.setAttribute("class", PLUGIN_NAME + "-icon");
|
||
$DOM.icon.setAttribute("src", settings.iconUrl);
|
||
} else if (settings.icon) {
|
||
$DOM.icon.setAttribute(
|
||
"class",
|
||
PLUGIN_NAME + "-icon " + settings.icon,
|
||
);
|
||
|
||
if (settings.iconText) {
|
||
$DOM.icon.appendChild(document.createTextNode(settings.iconText));
|
||
}
|
||
|
||
if (settings.iconColor) {
|
||
$DOM.icon.style.color = settings.iconColor;
|
||
}
|
||
}
|
||
|
||
if (settings.icon || settings.iconUrl) {
|
||
if (settings.rtl) {
|
||
$DOM.toastBody.style.paddingRight = "33px";
|
||
} else {
|
||
$DOM.toastBody.style.paddingLeft = "33px";
|
||
}
|
||
|
||
$DOM.toastBody.appendChild($DOM.icon);
|
||
}
|
||
})();
|
||
|
||
// Title & Message
|
||
(function () {
|
||
if (settings.title.length > 0) {
|
||
$DOM.strong = document.createElement("strong");
|
||
$DOM.strong.classList.add(PLUGIN_NAME + "-title");
|
||
$DOM.strong.appendChild(createFragElem(settings.title));
|
||
$DOM.toastTexts.appendChild($DOM.strong);
|
||
|
||
if (settings.titleColor) {
|
||
$DOM.strong.style.color = settings.titleColor;
|
||
}
|
||
if (settings.titleSize) {
|
||
if (!isNaN(settings.titleSize)) {
|
||
$DOM.strong.style.fontSize = settings.titleSize + "px";
|
||
} else {
|
||
$DOM.strong.style.fontSize = settings.titleSize;
|
||
}
|
||
}
|
||
if (settings.titleLineHeight) {
|
||
if (!isNaN(settings.titleSize)) {
|
||
$DOM.strong.style.lineHeight = settings.titleLineHeight + "px";
|
||
} else {
|
||
$DOM.strong.style.lineHeight = settings.titleLineHeight;
|
||
}
|
||
}
|
||
}
|
||
|
||
if (settings.message.length > 0) {
|
||
$DOM.p = document.createElement("p");
|
||
$DOM.p.classList.add(PLUGIN_NAME + "-message");
|
||
$DOM.p.appendChild(createFragElem(settings.message));
|
||
$DOM.toastTexts.appendChild($DOM.p);
|
||
|
||
if (settings.messageColor) {
|
||
$DOM.p.style.color = settings.messageColor;
|
||
}
|
||
if (settings.messageSize) {
|
||
if (!isNaN(settings.titleSize)) {
|
||
$DOM.p.style.fontSize = settings.messageSize + "px";
|
||
} else {
|
||
$DOM.p.style.fontSize = settings.messageSize;
|
||
}
|
||
}
|
||
if (settings.messageLineHeight) {
|
||
if (!isNaN(settings.titleSize)) {
|
||
$DOM.p.style.lineHeight = settings.messageLineHeight + "px";
|
||
} else {
|
||
$DOM.p.style.lineHeight = settings.messageLineHeight;
|
||
}
|
||
}
|
||
}
|
||
|
||
if (settings.title.length > 0 && settings.message.length > 0) {
|
||
if (settings.rtl) {
|
||
$DOM.strong.style.marginLeft = "10px";
|
||
} else if (settings.layout !== 2 && !settings.rtl) {
|
||
$DOM.strong.style.marginRight = "10px";
|
||
}
|
||
}
|
||
})();
|
||
|
||
$DOM.toastBody.appendChild($DOM.toastTexts);
|
||
|
||
// Inputs
|
||
var $inputs;
|
||
(function () {
|
||
if (settings.inputs.length > 0) {
|
||
$DOM.inputs.classList.add(PLUGIN_NAME + "-inputs");
|
||
|
||
forEach(settings.inputs, function (value, index) {
|
||
$DOM.inputs.appendChild(createFragElem(value[0]));
|
||
|
||
$inputs = $DOM.inputs.childNodes;
|
||
|
||
$inputs[index].classList.add(PLUGIN_NAME + "-inputs-child");
|
||
|
||
if (value[3]) {
|
||
setTimeout(function () {
|
||
$inputs[index].focus();
|
||
}, 300);
|
||
}
|
||
|
||
$inputs[index].addEventListener(value[1], function (e) {
|
||
var ts = value[2];
|
||
return ts(that, $DOM.toast, this, e);
|
||
});
|
||
});
|
||
$DOM.toastBody.appendChild($DOM.inputs);
|
||
}
|
||
})();
|
||
|
||
// Buttons
|
||
(function () {
|
||
if (settings.buttons.length > 0) {
|
||
$DOM.buttons.classList.add(PLUGIN_NAME + "-buttons");
|
||
|
||
forEach(settings.buttons, function (value, index) {
|
||
$DOM.buttons.appendChild(createFragElem(value[0]));
|
||
|
||
var $btns = $DOM.buttons.childNodes;
|
||
|
||
$btns[index].classList.add(PLUGIN_NAME + "-buttons-child");
|
||
|
||
if (value[2]) {
|
||
setTimeout(function () {
|
||
$btns[index].focus();
|
||
}, 300);
|
||
}
|
||
|
||
$btns[index].addEventListener("click", function (e) {
|
||
e.preventDefault();
|
||
var ts = value[1];
|
||
return ts(that, $DOM.toast, this, e, $inputs);
|
||
});
|
||
});
|
||
}
|
||
$DOM.toastBody.appendChild($DOM.buttons);
|
||
})();
|
||
|
||
if (
|
||
settings.message.length > 0 &&
|
||
(settings.inputs.length > 0 || settings.buttons.length > 0)
|
||
) {
|
||
$DOM.p.style.marginBottom = "0";
|
||
}
|
||
|
||
if (settings.inputs.length > 0 || settings.buttons.length > 0) {
|
||
if (settings.rtl) {
|
||
$DOM.toastTexts.style.marginLeft = "10px";
|
||
} else {
|
||
$DOM.toastTexts.style.marginRight = "10px";
|
||
}
|
||
if (settings.inputs.length > 0 && settings.buttons.length > 0) {
|
||
if (settings.rtl) {
|
||
$DOM.inputs.style.marginLeft = "8px";
|
||
} else {
|
||
$DOM.inputs.style.marginRight = "8px";
|
||
}
|
||
}
|
||
}
|
||
|
||
// Wrap
|
||
(function () {
|
||
$DOM.toastCapsule.style.visibility = "hidden";
|
||
setTimeout(function () {
|
||
var H = $DOM.toast.offsetHeight;
|
||
var style =
|
||
$DOM.toast.currentStyle || window.getComputedStyle($DOM.toast);
|
||
var marginTop = style.marginTop;
|
||
marginTop = marginTop.split("px");
|
||
marginTop = parseInt(marginTop[0]);
|
||
var marginBottom = style.marginBottom;
|
||
marginBottom = marginBottom.split("px");
|
||
marginBottom = parseInt(marginBottom[0]);
|
||
|
||
$DOM.toastCapsule.style.visibility = "";
|
||
$DOM.toastCapsule.style.height = H + marginBottom + marginTop + "px";
|
||
|
||
setTimeout(function () {
|
||
$DOM.toastCapsule.style.height = "auto";
|
||
if (settings.target) {
|
||
$DOM.toastCapsule.style.overflow = "visible";
|
||
}
|
||
}, 500);
|
||
|
||
if (settings.timeout) {
|
||
that.progress(settings, $DOM.toast).start();
|
||
}
|
||
}, 100);
|
||
})();
|
||
|
||
// Target
|
||
(function () {
|
||
var position = settings.position;
|
||
|
||
if (settings.target) {
|
||
$DOM.wrapper = document.querySelector(settings.target);
|
||
$DOM.wrapper.classList.add(PLUGIN_NAME + "-target");
|
||
|
||
if (settings.targetFirst) {
|
||
$DOM.wrapper.insertBefore(
|
||
$DOM.toastCapsule,
|
||
$DOM.wrapper.firstChild,
|
||
);
|
||
} else {
|
||
$DOM.wrapper.appendChild($DOM.toastCapsule);
|
||
}
|
||
} else {
|
||
if (POSITIONS.indexOf(settings.position) == -1) {
|
||
console.warn(
|
||
"[" +
|
||
PLUGIN_NAME +
|
||
"] Incorrect position.\nIt can be › " +
|
||
POSITIONS,
|
||
);
|
||
return;
|
||
}
|
||
|
||
if (ISMOBILE || window.innerWidth <= MOBILEWIDTH) {
|
||
if (
|
||
settings.position == "bottomLeft" ||
|
||
settings.position == "bottomRight" ||
|
||
settings.position == "bottomCenter"
|
||
) {
|
||
position = PLUGIN_NAME + "-wrapper-bottomCenter";
|
||
} else if (
|
||
settings.position == "topLeft" ||
|
||
settings.position == "topRight" ||
|
||
settings.position == "topCenter"
|
||
) {
|
||
position = PLUGIN_NAME + "-wrapper-topCenter";
|
||
} else {
|
||
position = PLUGIN_NAME + "-wrapper-center";
|
||
}
|
||
} else {
|
||
position = PLUGIN_NAME + "-wrapper-" + position;
|
||
}
|
||
$DOM.wrapper = document.querySelector(
|
||
"." + PLUGIN_NAME + "-wrapper." + position,
|
||
);
|
||
|
||
if (!$DOM.wrapper) {
|
||
$DOM.wrapper = document.createElement("div");
|
||
$DOM.wrapper.classList.add(PLUGIN_NAME + "-wrapper");
|
||
$DOM.wrapper.classList.add(position);
|
||
document.body.appendChild($DOM.wrapper);
|
||
}
|
||
if (
|
||
settings.position == "topLeft" ||
|
||
settings.position == "topCenter" ||
|
||
settings.position == "topRight"
|
||
) {
|
||
$DOM.wrapper.insertBefore(
|
||
$DOM.toastCapsule,
|
||
$DOM.wrapper.firstChild,
|
||
);
|
||
} else {
|
||
$DOM.wrapper.appendChild($DOM.toastCapsule);
|
||
}
|
||
}
|
||
|
||
if (!isNaN(settings.zindex)) {
|
||
$DOM.wrapper.style.zIndex = settings.zindex;
|
||
} else {
|
||
console.warn("[" + PLUGIN_NAME + "] Invalid zIndex.");
|
||
}
|
||
})();
|
||
|
||
// Overlay
|
||
(function () {
|
||
if (settings.overlay) {
|
||
if (
|
||
document.querySelector("." + PLUGIN_NAME + "-overlay.fadeIn") !==
|
||
null
|
||
) {
|
||
$DOM.overlay = document.querySelector(
|
||
"." + PLUGIN_NAME + "-overlay",
|
||
);
|
||
$DOM.overlay.setAttribute(
|
||
"data-iziToast-ref",
|
||
$DOM.overlay.getAttribute("data-iziToast-ref") +
|
||
"," +
|
||
settings.ref,
|
||
);
|
||
|
||
if (!isNaN(settings.zindex) && settings.zindex !== null) {
|
||
$DOM.overlay.style.zIndex = settings.zindex - 1;
|
||
}
|
||
} else {
|
||
$DOM.overlay.classList.add(PLUGIN_NAME + "-overlay");
|
||
$DOM.overlay.classList.add("fadeIn");
|
||
$DOM.overlay.style.background = settings.overlayColor;
|
||
$DOM.overlay.setAttribute("data-iziToast-ref", settings.ref);
|
||
if (!isNaN(settings.zindex) && settings.zindex !== null) {
|
||
$DOM.overlay.style.zIndex = settings.zindex - 1;
|
||
}
|
||
document.querySelector("body").appendChild($DOM.overlay);
|
||
}
|
||
|
||
if (settings.overlayClose) {
|
||
$DOM.overlay.removeEventListener("click", {});
|
||
$DOM.overlay.addEventListener("click", function (e) {
|
||
that.hide(settings, $DOM.toast, "overlay");
|
||
});
|
||
} else {
|
||
$DOM.overlay.removeEventListener("click", {});
|
||
}
|
||
}
|
||
})();
|
||
|
||
// Inside animations
|
||
(function () {
|
||
if (settings.animateInside) {
|
||
$DOM.toast.classList.add(PLUGIN_NAME + "-animateInside");
|
||
|
||
var animationTimes = [200, 100, 300];
|
||
if (
|
||
settings.transitionIn == "bounceInLeft" ||
|
||
settings.transitionIn == "bounceInRight"
|
||
) {
|
||
animationTimes = [400, 200, 400];
|
||
}
|
||
|
||
if (settings.title.length > 0) {
|
||
setTimeout(function () {
|
||
$DOM.strong.classList.add("slideIn");
|
||
}, animationTimes[0]);
|
||
}
|
||
|
||
if (settings.message.length > 0) {
|
||
setTimeout(function () {
|
||
$DOM.p.classList.add("slideIn");
|
||
}, animationTimes[1]);
|
||
}
|
||
|
||
if (settings.icon || settings.iconUrl) {
|
||
setTimeout(function () {
|
||
$DOM.icon.classList.add("revealIn");
|
||
}, animationTimes[2]);
|
||
}
|
||
|
||
var counter = 150;
|
||
if (settings.buttons.length > 0 && $DOM.buttons) {
|
||
setTimeout(
|
||
function () {
|
||
forEach($DOM.buttons.childNodes, function (element, index) {
|
||
setTimeout(function () {
|
||
element.classList.add("revealIn");
|
||
}, counter);
|
||
counter = counter + 150;
|
||
});
|
||
},
|
||
settings.inputs.length > 0 ? 150 : 0,
|
||
);
|
||
}
|
||
|
||
if (settings.inputs.length > 0 && $DOM.inputs) {
|
||
counter = 150;
|
||
forEach($DOM.inputs.childNodes, function (element, index) {
|
||
setTimeout(function () {
|
||
element.classList.add("revealIn");
|
||
}, counter);
|
||
counter = counter + 150;
|
||
});
|
||
}
|
||
}
|
||
})();
|
||
|
||
settings.onOpening.apply(null, [settings, $DOM.toast]);
|
||
|
||
try {
|
||
var event = new CustomEvent(PLUGIN_NAME + "-opening", {
|
||
detail: settings,
|
||
bubbles: true,
|
||
cancelable: true,
|
||
});
|
||
document.dispatchEvent(event);
|
||
} catch (ex) {
|
||
console.warn(ex);
|
||
}
|
||
|
||
setTimeout(function () {
|
||
$DOM.toast.classList.remove(PLUGIN_NAME + "-opening");
|
||
$DOM.toast.classList.add(PLUGIN_NAME + "-opened");
|
||
|
||
try {
|
||
var event = new CustomEvent(PLUGIN_NAME + "-opened", {
|
||
detail: settings,
|
||
bubbles: true,
|
||
cancelable: true,
|
||
});
|
||
document.dispatchEvent(event);
|
||
} catch (ex) {
|
||
console.warn(ex);
|
||
}
|
||
|
||
settings.onOpened.apply(null, [settings, $DOM.toast]);
|
||
}, 1000);
|
||
|
||
if (settings.drag) {
|
||
if (ACCEPTSTOUCH) {
|
||
$DOM.toast.addEventListener(
|
||
"touchstart",
|
||
function (e) {
|
||
drag.startMoving(this, that, settings, e);
|
||
},
|
||
false,
|
||
);
|
||
|
||
$DOM.toast.addEventListener(
|
||
"touchend",
|
||
function (e) {
|
||
drag.stopMoving(this, e);
|
||
},
|
||
false,
|
||
);
|
||
} else {
|
||
$DOM.toast.addEventListener(
|
||
"mousedown",
|
||
function (e) {
|
||
e.preventDefault();
|
||
drag.startMoving(this, that, settings, e);
|
||
},
|
||
false,
|
||
);
|
||
|
||
$DOM.toast.addEventListener(
|
||
"mouseup",
|
||
function (e) {
|
||
e.preventDefault();
|
||
drag.stopMoving(this, e);
|
||
},
|
||
false,
|
||
);
|
||
}
|
||
}
|
||
|
||
if (settings.closeOnEscape) {
|
||
document.addEventListener("keyup", function (evt) {
|
||
evt = evt || window.event;
|
||
if (evt.keyCode == 27) {
|
||
that.hide(settings, $DOM.toast, "esc");
|
||
}
|
||
});
|
||
}
|
||
|
||
if (settings.closeOnClick) {
|
||
$DOM.toast.addEventListener("click", function (evt) {
|
||
that.hide(settings, $DOM.toast, "toast");
|
||
});
|
||
}
|
||
|
||
that.toast = $DOM.toast;
|
||
};
|
||
return $iziToast;
|
||
},
|
||
);
|