layui.define([], function (exports) {
|
var PLUGIN_NAME = 'iziToast'; // 样式类名
|
var BODY = document.querySelector('body');
|
var ISMOBILE = (/Mobi/.test(navigator.userAgent)) ? true : false;
|
var MOBILEWIDTH = 568;
|
var ISCHROME = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
|
var ISFIREFOX = typeof InstallTrigger !== 'undefined';
|
var ACCEPTSTOUCH = 'ontouchstart' in document.documentElement;
|
// 显示区域
|
var POSITIONS = ['bottomRight', 'bottomLeft', 'bottomCenter', 'topRight', 'topLeft', 'topCenter', 'center'];
|
// 默认主题
|
var 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'
|
}
|
};
|
var CONFIG = {}; // 全局配置
|
// 默认配置
|
var defaults = {
|
id: null,
|
className: '', // 自定义class，用空格分割
|
title: '', // 标题
|
titleColor: '', // 标题文字颜色
|
titleSize: '', // 标题文字大小
|
titleLineHeight: '', // 标题高度
|
message: '', // 内容
|
messageColor: '', // 内容文字颜色
|
messageSize: '', // 内容文字大小
|
messageLineHeight: '', // 内容高度
|
backgroundColor: '', // 背景颜色
|
theme: 'light', // dark
|
color: '', // 背景颜色
|
icon: '', // 图标
|
iconText: '', // 图标文字
|
iconColor: '', // 图标颜色
|
iconUrl: null, // 图标地址
|
image: '', // 是否显示图片
|
imageWidth: 60, // 图片宽度
|
maxWidth: null, // 最大宽度
|
zindex: null, //
|
layout: 2, // 布局类型
|
balloon: false, // 气泡
|
close: true, // 是否显示关闭按钮
|
closeOnEscape: false,
|
closeOnClick: false, // 点击关闭
|
displayMode: 0, // 0无限制,1存在就不发出,2销毁之前
|
position: 'topRight', // bottomRight, bottomLeft, topRight, topLeft, topCenter, bottomCenter, center
|
target: '', // 显示位置
|
targetFirst: null, // 插入顺序
|
timeout: 5000, // 关闭时间，false不自动关闭
|
rtl: false, // 内容居右
|
animateInside: false, // 进入动画效果
|
drag: true, // 是否可滑动移除
|
pauseOnHover: true, // 鼠标移入暂停进度条时间
|
resetOnHover: false, // 鼠标移入重置进度条时间
|
progressBar: true, // 是否显示进度条
|
progressBarColor: '', // 进度条颜色
|
progressBarEasing: 'linear', // 进度条动画效果
|
overlay: false, // 是否显示遮罩层
|
overlayClose: false, // 点击遮罩层是否关闭
|
overlayColor: 'rgba(0, 0, 0, 0.1)', // 遮罩层颜色
|
transitionIn: 'fadeInLeft', // bounceInLeft, bounceInRight, bounceInUp, bounceInDown, fadeIn, fadeInDown, fadeInUp, fadeInLeft, fadeInRight, flipInX
|
transitionOut: 'fadeOutRight', // fadeOut, fadeOutUp, fadeOutDown, fadeOutLeft, fadeOutRight, flipOutX
|
transitionInMobile: 'bounceInDown', // 移动端进入动画
|
transitionOutMobile: 'fadeOutUp', // 移动端退出动画
|
buttons: {}, // 操作按钮
|
inputs: {}, // 输入框
|
audio: '', // 音效
|
onOpening: function () {
|
},
|
onOpened: function () {
|
},
|
onClosing: function () {
|
},
|
onClosed: function () {
|
}
|
};
|
|
var $iziToast = {
|
children: {},
|
setSetting: function (ref, option, value) {
|
$iziToast.children[ref][option] = value;
|
},
|
getSetting: function (ref, option) {
|
return $iziToast.children[ref][option];
|
},
|
// 全局设置
|
settings: function (options) {
|
$iziToast.destroy(); // 全部销毁之前的通知
|
CONFIG = options;
|
defaults = extend(defaults, options || {});
|
},
|
// 关闭所有通知
|
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 = {};
|
// 移除事件监听
|
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);
|
CONFIG = {}; // 移除全局配置
|
},
|
// msg类型
|
msg: function (msg, options) {
|
if (options.icon == 4) {
|
options.overlay = true;
|
options.timeout = false;
|
options.drag = false;
|
options.displayMode = 0;
|
}
|
var icons = ['ico-success', 'ico-error', 'ico-warning', 'ico-load', 'ico-info'];
|
options.icon = icons[options.icon - 1];
|
var theme = {
|
message: msg,
|
position: 'topCenter',
|
transitionIn: 'bounceInDown',
|
transitionOut: 'fadeOut',
|
transitionOutMobile: 'fadeOut',
|
progressBar: false,
|
close: false,
|
layout: 1,
|
audio: ''
|
};
|
var settings = extend(CONFIG, options || {});
|
settings = extend(theme, settings || {});
|
this.show(settings);
|
}
|
};
|
|
// 关闭指定的通知
|
$iziToast.hide = function (options, $toast, closedBy) {
|
if (typeof $toast != 'object') {
|
$toast = document.querySelector($toast);
|
}
|
var that = this;
|
var settings = extend(this.children[$toast.getAttribute('data-iziToast-ref')], options || {});
|
settings.closedBy = closedBy || null;
|
delete settings.time.REMAINING;
|
$toast.classList.add(PLUGIN_NAME + '-closing');
|
// 移除遮罩层
|
(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]);
|
}
|
};
|
|
// 显示通知
|
$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.className) {
|
var classes = settings.className.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) + 'px';
|
} else {
|
$DOM.toastBody.style.marginLeft = (settings.imageWidth) + 'px';
|
}
|
$DOM.toast.appendChild($DOM.cover);
|
}
|
})();
|
// Button close
|
(function () {
|
if (settings.close) {
|
$DOM.buttonClose = document.createElement('button');
|
// $DOM.buttonClose.type = 'button';
|
$DOM.buttonClose.setAttribute('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.strong.style.marginBottom = '0px';
|
}
|
}
|
})();
|
$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.toastTexts.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);
|
}
|
var targetFirst = settings.targetFirst;
|
if ((targetFirst == undefined || targetFirst == null) && (settings.position == 'topLeft' || settings.position == 'topCenter' || settings.position == 'topRight')) {
|
targetFirst = true;
|
}
|
if (targetFirst) {
|
$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');
|
});
|
}
|
// 播放声音
|
if (settings.audio) {
|
that.playSound(settings.audio);
|
}
|
that.toast = $DOM.toast;
|
};
|
|
// 控制进度条
|
$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);
|
}
|
}
|
};
|
};
|
|
// 判断是否是ie9以下版本
|
var isIE9_ = function () {
|
var userAgent = navigator.userAgent;
|
if (window.navigator.userAgent.indexOf("MSIE") >= 1) {
|
var reIE = new RegExp("MSIE (\\d+\\.\\d+);");
|
reIE.test(userAgent);
|
var fIEVersion = parseFloat(RegExp["$1"]);
|
if (fIEVersion != 10) {
|
return true;
|
}
|
}
|
return false;
|
};
|
|
// 给Element添加remove方法
|
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;
|
};
|
|
// 生成ID
|
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;
|
}
|
};
|
|
// 判断是否是base64字符串
|
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);
|
}
|
}
|
};
|
}();
|
|
// 兼容IE
|
var Base64 = {
|
_keyStr: "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=", encode: function (e) {
|
var t = "";
|
var n, r, i, s, o, u, a;
|
var f = 0;
|
e = Base64._utf8_encode(e);
|
while (f < e.length) {
|
n = e.charCodeAt(f++);
|
r = e.charCodeAt(f++);
|
i = e.charCodeAt(f++);
|
s = n >> 2;
|
o = (n & 3) << 4 | r >> 4;
|
u = (r & 15) << 2 | i >> 6;
|
a = i & 63;
|
if (isNaN(r)) {
|
u = a = 64
|
} else if (isNaN(i)) {
|
a = 64
|
}
|
t = t + this._keyStr.charAt(s) + this._keyStr.charAt(o) + this._keyStr.charAt(u) + this._keyStr.charAt(a)
|
}
|
return t
|
}, decode: function (e) {
|
var t = "";
|
var n, r, i;
|
var s, o, u, a;
|
var f = 0;
|
e = e.replace(/[^A-Za-z0-9+/=]/g, "");
|
while (f < e.length) {
|
s = this._keyStr.indexOf(e.charAt(f++));
|
o = this._keyStr.indexOf(e.charAt(f++));
|
u = this._keyStr.indexOf(e.charAt(f++));
|
a = this._keyStr.indexOf(e.charAt(f++));
|
n = s << 2 | o >> 4;
|
r = (o & 15) << 4 | u >> 2;
|
i = (u & 3) << 6 | a;
|
t = t + String.fromCharCode(n);
|
if (u != 64) {
|
t = t + String.fromCharCode(r)
|
}
|
if (a != 64) {
|
t = t + String.fromCharCode(i)
|
}
|
}
|
t = Base64._utf8_decode(t);
|
return t
|
}, _utf8_encode: function (e) {
|
e = e.replace(/rn/g, "n");
|
var t = "";
|
for (var n = 0; n < e.length; n++) {
|
var r = e.charCodeAt(n);
|
if (r < 128) {
|
t += String.fromCharCode(r)
|
} else if (r > 127 && r < 2048) {
|
t += String.fromCharCode(r >> 6 | 192);
|
t += String.fromCharCode(r & 63 | 128)
|
} else {
|
t += String.fromCharCode(r >> 12 | 224);
|
t += String.fromCharCode(r >> 6 & 63 | 128);
|
t += String.fromCharCode(r & 63 | 128)
|
}
|
}
|
return t
|
}, _utf8_decode: function (e) {
|
var t = "";
|
var n = 0;
|
var r = c1 = c2 = 0;
|
while (n < e.length) {
|
r = e.charCodeAt(n);
|
if (r < 128) {
|
t += String.fromCharCode(r);
|
n++
|
} else if (r > 191 && r < 224) {
|
c2 = e.charCodeAt(n + 1);
|
t += String.fromCharCode((r & 31) << 6 | c2 & 63);
|
n += 2
|
} else {
|
c2 = e.charCodeAt(n + 1);
|
c3 = e.charCodeAt(n + 2);
|
t += String.fromCharCode((r & 15) << 12 | (c2 & 63) << 6 | c3 & 63);
|
n += 3
|
}
|
}
|
return t
|
}
|
};
|
if (isIE9_()) {
|
// 兼容btoa和atob方法
|
window.btoa = function (str) {
|
return Base64.encode(str);
|
};
|
window.atob = function (str) {
|
return Base64.decode(str);
|
};
|
// 兼容classList属性
|
if (!("classList" in document.documentElement)) {
|
Object.defineProperty(window.Element.prototype, 'classList', {
|
get: function () {
|
var self = this;
|
|
function update(fn) {
|
return function () {
|
var className = self.className.replace(/^\s+|\s+$/g, ''),
|
valArr = arguments;
|
return fn(className, valArr)
|
}
|
}
|
|
function add_rmv(className, valArr, tag) {
|
for (var i in valArr) {
|
if (typeof valArr[i] !== 'string' || !!~valArr[i].search(/\s+/g)) throw TypeError('the type of value is error')
|
var temp = valArr[i]
|
var flag = !!~className.search(new RegExp('(\\s+)?' + temp + '(\\s+)?'))
|
if (tag === 1) {
|
!flag ? className += ' ' + temp : ''
|
} else if (tag === 2) {
|
flag ? className = className.replace(new RegExp('(\\s+)?' + temp), '') : ''
|
}
|
}
|
self.className = className;
|
return tag;
|
}
|
|
return {
|
add: update(function (className, valArr) {
|
add_rmv(className, valArr, 1)
|
}),
|
remove: update(function (className, valArr) {
|
add_rmv(className, valArr, 2)
|
}),
|
toggle: function (value) {
|
if (typeof value !== 'string' || arguments.length === 0) throw TypeError("Failed to execute 'toggle' on 'DOMTokenList': 1 argument(string) required, but only 0 present.")
|
if (arguments.length === 1) {
|
this.contains(value) ? this.remove(value) : this.add(value)
|
return
|
}
|
!arguments[1] ? this.remove(value) : this.add(value)
|
},
|
contains: update(function (className, valArr) {
|
if (valArr.length === 0) throw TypeError("Failed to execute 'contains' on 'DOMTokenList': 1 argument required, but only 0 present.")
|
if (typeof valArr[0] !== 'string' || !!~valArr[0].search(/\s+/g)) return false
|
return !!~className.search(new RegExp(valArr[0]))
|
}),
|
item: function (index) {
|
typeof index === 'string' ? index = parseInt(index) : ''
|
if (arguments.length === 0 || typeof index !== 'number') throw TypeError("Failed to execute 'toggle' on 'DOMTokenList': 1 argument required, but only 0 present.")
|
var claArr = self.className.replace(/^\s+|\s+$/, '').split(/\s+/)
|
var len = claArr.length
|
if (index < 0 || index >= len) return null
|
return claArr[index]
|
}
|
}
|
}
|
});
|
}
|
}
|
|
// 播放声音
|
$iziToast.playSound = function (src) {
|
if (!(src.indexOf('http') == 0)) {
|
src = layui.cache.base + 'notice/' + src + '.wav';
|
}
|
if (!!window.ActiveXObject || "ActiveXObject" in window) { // IE
|
var embed = document.noticePlay;
|
if (embed) {
|
embed.remove();
|
}
|
embed = document.createElement('embed');
|
embed.setAttribute('name', 'noticePlay');
|
embed.setAttribute('src', src);
|
embed.setAttribute('autostart', true);
|
embed.setAttribute('loop', false);
|
embed.setAttribute('hidden', true);
|
document.body.appendChild(embed);
|
embed = document.noticePlay;
|
embed.volume = 100;
|
} else { // 非IE
|
var audio = document.createElement('audio');
|
audio.setAttribute('hidden', true);
|
audio.setAttribute('src', src);
|
document.body.appendChild(audio);
|
audio.addEventListener('ended', function () {
|
audio.parentNode.removeChild(audio);
|
}, false);
|
audio.play();
|
}
|
};
|
|
// 不同主题的通知
|
forEach(THEMES, function (theme, name) {
|
$iziToast[name] = function (options) {
|
var settings = extend(CONFIG, options || {});
|
settings = extend(theme, settings || {});
|
this.show(settings);
|
};
|
});
|
|
layui.link(layui.cache.base + 'notice/notice.css'); // 加载css
|
exports('notice', $iziToast);
|
});
|
