1225 lines
32 KiB
JavaScript
1225 lines
32 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;
|
||
}); |