123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275 |
- layui.define([], function (exports) {
-
- 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: 'dark', // dark light
- color: '', // blue, red, green, yellow
- icon: '',
- iconText: '',
- iconColor: '',
- iconUrl: null,
- image: '',
- imageWidth: 50,
- maxWidth: null,
- zindex: null,
- layout: 1,
- balloon: false,
- close: true,
- closeOnEscape: false,
- closeOnClick: false,
- displayMode: 0,
- position: 'topRight', // bottomRight, bottomLeft, topRight, topLeft, topCenter, bottomCenter, center
- target: '',
- targetFirst: true,
- timeout: 5000,
- rtl: false,
- animateInside: true,
- drag: true,
- pauseOnHover: true,
- resetOnHover: false,
- progressBar: true,
- progressBarColor: '',
- progressBarEasing: 'linear',
- overlay: false,
- overlayClose: false,
- overlayColor: 'rgba(0, 0, 0, 0.6)',
- transitionIn: 'fadeInUp', // bounceInLeft, bounceInRight, bounceInUp, bounceInDown, fadeIn, fadeInDown, fadeInUp, fadeInLeft, fadeInRight, flipInX
- transitionOut: 'fadeOut', // fadeOut, fadeOutUp, fadeOutDown, fadeOutLeft, fadeOutRight, flipOutX
- transitionInMobile: 'fadeInUp',
- transitionOutMobile: 'fadeOutDown',
- buttons: {},
- inputs: {},
- onOpening: function () {},
- onOpened: function () {},
- onClosing: function () {},
- onClosed: function () {}
- };
-
- //
- // Methods
- //
-
-
- /**
- * Polyfill for remove() method
- */
- if(!('remove' in Element.prototype)) {
- Element.prototype.remove = function() {
- if(this.parentNode) {
- this.parentNode.removeChild(this);
- }
- };
- }
-
- /*
- * Polyfill for CustomEvent for IE >= 9
- * https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent#Polyfill
- */
- 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;
- }
-
- /**
- * A simple forEach() implementation for Arrays, Objects and NodeLists
- * @private
- * @param {Array|Object|NodeList} collection Collection of items to iterate
- * @param {Function} callback Callback function for each iteration
- * @param {Array|Object|NodeList} scope Object/NodeList/Array that forEach is iterating over (aka `this`)
- */
- 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);
- }
- }
- }
- };
-
- /**
- * Merge defaults with user options
- * @private
- * @param {Object} defaults Default settings
- * @param {Object} options User options
- * @returns {Object} Merged values of defaults and options
- */
- 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;
- };
-
-
- /**
- * Create a fragment DOM elements
- * @private
- */
- var createFragElem = function(htmlStr) {
- var frag = document.createDocumentFragment(),
- temp = document.createElement('div');
- temp.innerHTML = htmlStr;
- while (temp.firstChild) {
- frag.appendChild(temp.firstChild);
- }
- return frag;
- };
-
-
- /**
- * Generate new ID
- * @private
- */
- var generateId = function(params) {
- var newId = btoa(encodeURIComponent(params));
- return newId.replace(/=/g, "");
- };
-
-
- /**
- * Check if is a color
- * @private
- */
- var isColor = function(color){
- if( color.substring(0,1) == '#' || color.substring(0,3) == 'rgb' || color.substring(0,3) == 'hsl' ){
- return true;
- } else {
- return false;
- }
- };
-
-
- /**
- * Check if is a Base64 string
- * @private
- */
- var isBase64 = function(str) {
- try {
- return btoa(atob(str)) == str;
- } catch (err) {
- return false;
- }
- };
-
-
- /**
- * Drag method of toasts
- * @private
- */
- 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];
-
- };
-
-
- /**
- * Destroy the current initialization.
- * @public
- */
- $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;
- };
-
- layui.link(layui.cache.base + 'notice/notice.css'); // 加载css
- window.notice = $iziToast;
- exports('notice',$iziToast);
- });
|