vendor: 15,314 bytes, lines 1-597
1/* 2* iziToast | v1.5.0 3* http://izitoast.marcelodolza.com 4* by Marcelo Dolza. 5*/ 6 7(function (root, factory) { 8 if(typeof define === 'function' && define.amd) { 9 define([], factory(root)); 10 } else if(typeof exports === 'object') { 11 module.exports = factory(root); 12 } else { 13 root.iziToast = factory(root); 14 } 15})(typeof global !== 'undefined' ? global : window || this.window || this.global, function (root) { 16 17 'use strict'; 18 19 // 20 // Variables 21 // 22 var $iziToast = {}, 23 PLUGIN_NAME = 'iziToast', 24 ISMOBILE = (/Mobi/.test(navigator.userAgent)) ? true : false, 25 ISCHROME = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor), 26 ISFIREFOX = typeof InstallTrigger !== 'undefined', 27 ACCEPTSTOUCH = 'ontouchstart' in document.documentElement, 28 POSITIONS = ['bottomRight','bottomLeft','bottomCenter','topRight','topLeft','topCenter','center'], 29 THEMES = { 30 info: { 31 color: 'blue', 32 icon: 'ico-info' 33 }, 34 success: { 35 color: 'green', 36 icon: 'ico-success' 37 }, 38 warning: { 39 color: 'orange', 40 icon: 'ico-warning' 41 }, 42 error: { 43 color: 'red', 44 icon: 'ico-error' 45 }, 46 question: { 47 color: 'yellow', 48 icon: 'ico-question' 49 } 50 }, 51 MOBILEWIDTH = 568, 52 CONFIG = {}; 53 54 $iziToast.children = {}; 55 56 // Default settings 57 var defaults = { 58 id: null, 59 class: '', 60 title: '', 61 titleColor: '', 62 titleSize: '', 63 titleLineHeight: '', 64 message: '', 65 messageColor: '', 66 messageSize: '', 67 messageLineHeight: '', 68 backgroundColor: '', 69 theme: 'light', // dark 70 color: '', // blue, red, green, yellow 71 icon: '', 72 iconText: '', 73 iconColor: '', 74 iconUrl: null, 75 image: '', 76 imageWidth: 50, 77 maxWidth: null, 78 zindex: null, 79 layout: 1, 80 balloon: false, 81 close: true, 82 closeOnEscape: false, 83 closeOnClick: false, 84 displayMode: 0, 85 position: 'bottomRight', // bottomRight, bottomLeft, topRight, topLeft, topCenter, bottomCenter, center 86 target: '', 87 targetFirst: true, 88 timeout: 5000, 89 rtl: false, 90 animateInside: true, 91 drag: true, 92 pauseOnHover: true, 93 resetOnHover: false, 94 progressBar: true, 95 progressBarColor: '', 96 progressBarEasing: 'linear', 97 overlay: false, 98 overlayClose: false, 99 overlayColor: 'rgba(0, 0, 0, 0.6)', 100 transitionIn: 'fadeInUp', // bounceInLeft, bounceInRight, bounceInUp, bounceInDown, fadeIn, fadeInDown, fadeInUp, fadeInLeft, fadeInRight, flipInX 101 transitionOut: 'fadeOut', // fadeOut, fadeOutUp, fadeOutDown, fadeOutLeft, fadeOutRight, flipOutX 102 transitionInMobile: 'fadeInUp', 103 transitionOutMobile: 'fadeOutDown', 104 buttons: {}, 105 inputs: {}, 106 onOpening: function () {}, 107 onOpened: function () {}, 108 onClosing: function () {}, 109 onClosed: function () {}, 110 onClick: function () {} 111 }; 112 113 114 // 115 // Methods 116 // 117 118 119 /** 120 * Polyfill for remove() method 121 */ 122 if(!('remove' in Element.prototype)) { 123 Element.prototype.remove = function() { 124 if(this.parentNode) { 125 this.parentNode.removeChild(this); 126 } 127 }; 128 } 129 130 /* 131 * Polyfill for CustomEvent for IE >= 9 132 * https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent#Polyfill 133 */ 134 if(typeof window.CustomEvent !== 'function') { 135 var CustomEventPolyfill = function (event, params) { 136 params = params || { bubbles: false, cancelable: false, detail: undefined }; 137 var evt = document.createEvent('CustomEvent'); 138 evt.initCustomEvent(event, params.bubbles, params.cancelable, params.detail); 139 return evt; 140 }; 141 142 CustomEventPolyfill.prototype = window.Event.prototype; 143 144 window.CustomEvent = CustomEventPolyfill; 145 } 146 147 /** 148 * A simple forEach() implementation for Arrays, Objects and NodeLists 149 * @private 150 * @param {Array|Object|NodeList} collection Collection of items to iterate 151 * @param {Function} callback Callback function for each iteration 152 * @param {Array|Object|NodeList} scope Object/NodeList/Array that forEach is iterating over (aka `this`) 153 */ 154 var forEach = function (collection, callback, scope) { 155 if(Object.prototype.toString.call(collection) === '[object Object]') { 156 for (var prop in collection) { 157 if(Object.prototype.hasOwnProperty.call(collection, prop)) { 158 callback.call(scope, collection[prop], prop, collection); 159 } 160 } 161 } else { 162 if(collection){ 163 for (var i = 0, len = collection.length; i < len; i++) { 164 callback.call(scope, collection[i], i, collection); 165 } 166 } 167 } 168 }; 169 170 /** 171 * Merge defaults with user options 172 * @private 173 * @param {Object} defaults Default settings 174 * @param {Object} options User options 175 * @returns {Object} Merged values of defaults and options 176 */ 177 var extend = function (defaults, options) { 178 var extended = {}; 179 forEach(defaults, function (value, prop) { 180 extended[prop] = defaults[prop]; 181 }); 182 forEach(options, function (value, prop) { 183 extended[prop] = options[prop]; 184 }); 185 return extended; 186 }; 187 188 /** 189 * Create inputs 190 * @private 191 */ 192 var createInput = function(inputObj) { 193 var allowedAttributes = ['type', 'id', 'class', 'name', 'style', 'placeholder', 'min', 'max', 'minlength', 'maxlength', 'min', 'disabled', 'readonly', 'required', 'size', 'multiple', 'value'], 194 allowedInputs = ['select', 'checkbox', 'color', 'date', 'datetime-local', 'email', 'file', 'hidden', 'image', 'month', 'number', 'password', 'radio', 'range', 'search', 'tel', 'text', 'time', 'url', 'week'], 195 wrap = document.createElement('div'), 196 input; 197 198 if(inputObj.type && allowedInputs.indexOf(inputObj.type) !== -1){ 199 200 var type = inputObj.type === 'select' ? 'select' : 'input' 201 input = document.createElement(type); 202 Object.keys(inputObj).forEach( function(key) { 203 if(allowedAttributes.indexOf(key) !== -1){ 204 input.setAttribute(key, inputObj[key]) 205 } 206 }); 207 208 if(inputObj.options && inputObj.options.length > 0 && inputObj.type === 'select'){ 209 210 inputObj.options.forEach( function(item) { 211 var option = document.createElement('option'); 212 option.textContent = item.text; 213 option.value = item.value 214 215 input.appendChild(option); 216 }); 217 } 218 } 219 wrap.appendChild(input); 220 221 if(inputObj.label){ 222 var label = document.createElement('label'); 223 if(inputObj.for){ 224 label.setAttribute('for', inputObj.for); 225 label.textContent = inputObj.label; 226 } 227 input.parentNode.insertBefore(label, input.nextSibling); 228 } 229 return wrap 230 }; 231 232 /** 233 * Generates new ID 234 * @private 235 */ 236 var generateId = function(params) { 237 var newId = btoa(encodeURIComponent(params)); 238 return newId.replace(/=/g, ""); 239 }; 240 241 /** 242 * Checks if is a color 243 * @private 244 */ 245 var isColor = function(color){ 246 if( color.substring(0,1) == '#' || color.substring(0,3) == 'rgb' || color.substring(0,3) == 'hsl' ){ 247 return true; 248 } else { 249 return false; 250 } 251 }; 252 253 /** 254 * Checks if is a Base64 string 255 * @private 256 */ 257 var isBase64 = function(str) { 258 try { 259 return btoa(atob(str)) == str; 260 } catch (err) { 261 return false; 262 } 263 }; 264 265 /** 266 * Displays a log message 267 * @private 268 */ 269 var Log = function(str) { 270 return console.warn('['+PLUGIN_NAME+']', str); 271 }; 272 273 /** 274 * Drag method of toasts 275 * @private 276 */ 277 var drag = function() { 278 279 return { 280 move: function(toast, instance, settings, xpos) { 281 282 var opacity, 283 opacityRange = 0.3, 284 distance = 180; 285 286 if(xpos !== 0){ 287 288 toast.classList.add(PLUGIN_NAME+'-dragged'); 289 290 toast.style.transform = 'translateX('+xpos + 'px)'; 291 292 if(xpos > 0){ 293 opacity = (distance-xpos) / distance; 294 if(opacity < opacityRange){ 295 instance.hide(extend(settings, { transitionOut: 'fadeOutRight', transitionOutMobile: 'fadeOutRight' }), toast, 'drag'); 296 } 297 } else { 298 opacity = (distance+xpos) / distance; 299 if(opacity < opacityRange){ 300 instance.hide(extend(settings, { transitionOut: 'fadeOutLeft', transitionOutMobile: 'fadeOutLeft' }), toast, 'drag'); 301 } 302 } 303 toast.style.opacity = opacity; 304 305 if(opacity < opacityRange){ 306 307 if(ISCHROME || ISFIREFOX) toast.style.left = xpos+'px'; 308 309 toast.parentNode.style.opacity = opacityRange; 310 311 this.stopMoving(toast, null); 312 } 313 } 314 }, 315 startMoving: function(toast, instance, settings, e) { 316 317 e = e || window.event; 318 var posX = ((ACCEPTSTOUCH) ? e.touches[0].clientX : e.clientX), 319 toastLeft = toast.style.transform.replace('px)', ''); 320 toastLeft = toastLeft.replace('translateX(', ''); 321 var offsetX = posX - toastLeft; 322 323 if(settings.transitionIn){ 324 toast.classList.remove(settings.transitionIn); 325 } 326 if(settings.transitionInMobile){ 327 toast.classList.remove(settings.transitionInMobile); 328 } 329 toast.style.transition = ''; 330 331 if(ACCEPTSTOUCH) { 332 document.ontouchmove = function(e) { 333 e.preventDefault(); 334 e = e || window.event; 335 var posX = e.touches[0].clientX, 336 finalX = posX - offsetX; 337 drag.move(toast, instance, settings, finalX); 338 }; 339 } else { 340 document.onmousemove = function(e) { 341 e.preventDefault(); 342 e = e || window.event; 343 var posX = e.clientX, 344 finalX = posX - offsetX; 345 drag.move(toast, instance, settings, finalX); 346 }; 347 } 348 349 }, 350 stopMoving: function(toast, e) { 351 352 if(ACCEPTSTOUCH) { 353 document.ontouchmove = function() {}; 354 } else { 355 document.onmousemove = function() {}; 356 } 357 358 toast.style.opacity = ''; 359 toast.style.transform = ''; 360 361 if(toast.classList.contains(PLUGIN_NAME+'-dragged')){ 362 363 toast.classList.remove(PLUGIN_NAME+'-dragged'); 364 365 toast.style.transition = 'transform 0.4s ease, opacity 0.4s ease'; 366 setTimeout(function() { 367 toast.style.transition = ''; 368 }, 400); 369 } 370 371 } 372 }; 373 374 }(); 375 376 377 /** 378 * Set settings 379 * @public 380 */ 381 $iziToast.setSetting = function (ref, option, value) { 382 383 $iziToast.children[ref][option] = value; 384 385 }; 386 387 388 /** 389 * Get settings 390 * @public 391 */ 392 $iziToast.getSettings = function (ref, option) { 393 394 if(option){ 395 try { 396 return $iziToast.children[ref][option]; 397 } catch (error) { 398 console.warn(error) 399 Log('invalid option.') 400 } 401 } else { 402 return $iziToast.children[ref]; 403 } 404 405 406 }; 407 408 409 /** 410 * Destroy the current initialization. 411 * @public 412 */ 413 $iziToast.destroy = function () { 414 415 forEach(document.querySelectorAll('.'+PLUGIN_NAME+'-overlay'), function(element, index) { 416 element.remove(); 417 }); 418 419 forEach(document.querySelectorAll('.'+PLUGIN_NAME+'-wrapper'), function(element, index) { 420 element.remove(); 421 }); 422 423 forEach(document.querySelectorAll('.'+PLUGIN_NAME), function(element, index) { 424 element.remove(); 425 }); 426 427 this.children = {}; 428 429 // Remove event listeners 430 document.removeEventListener(PLUGIN_NAME+'-opened', {}, false); 431 document.removeEventListener(PLUGIN_NAME+'-opening', {}, false); 432 document.removeEventListener(PLUGIN_NAME+'-closing', {}, false); 433 document.removeEventListener(PLUGIN_NAME+'-closed', {}, false); 434 document.removeEventListener('keyup', {}, false); 435 436 // Reset variables 437 CONFIG = {}; 438 }; 439 440 441 /** 442 * Initialize Plugin 443 * @public 444 * @param {Object} options User settings 445 */ 446 $iziToast.settings = function (options) { 447 448 // Destroy any existing initializations 449 $iziToast.destroy(); 450 451 CONFIG = options; 452 defaults = extend(defaults, options || {}); 453 }; 454 455 456 /** 457 * Building themes functions. 458 * @public 459 * @param {Object} options User settings 460 */ 461 forEach(THEMES, function (theme, name) { 462 463 $iziToast[name] = function (options) { 464 465 var settings = extend(CONFIG, options || {}); 466 settings = extend(theme, settings || {}); 467 468 this.show(settings); 469 }; 470 471 }); 472 473 474 /** 475 * Do the calculation to move the progress bar 476 * @private 477 */ 478 $iziToast.progress = function (options, $toast, callback) { 479 480 var that = this, 481 ref = $toast.getAttribute('data-iziToast-ref'), 482 settings = extend(this.children[ref], options || {}), 483 $elem = $toast.querySelector('.'+PLUGIN_NAME+'-progressbar div'); 484 485 return { 486 start: function() { 487 488 if(typeof settings.time.REMAINING == 'undefined'){ 489 490 $toast.classList.remove(PLUGIN_NAME+'-reseted'); 491 492 if($elem !== null){ 493 $elem.style.transition = 'width '+ settings.timeout +'ms '+settings.progressBarEasing; 494 $elem.style.width = '0%'; 495 } 496 settings.time.START = new Date().getTime(); 497 settings.time.END = settings.time.START + settings.timeout; 498 settings.time.TIMER = setTimeout(function() { 499 500 clearTimeout(settings.time.TIMER); 501 502 if(!$toast.classList.contains(PLUGIN_NAME+'-closing')){ 503 that.hide(settings, $toast, 'timeout'); 504 505 if(typeof callback === 'function'){ 506 callback.apply(that); 507 } 508 } 509 }, settings.timeout); 510 511 that.setSetting(ref, 'time', settings.time); 512 } 513 }, 514 pause: function() { 515 516 if(typeof settings.time.START !== 'undefined' && !$toast.classList.contains(PLUGIN_NAME+'-paused') && !$toast.classList.contains(PLUGIN_NAME+'-reseted')){ 517 518 $toast.classList.add(PLUGIN_NAME+'-paused'); 519 520 settings.time.REMAINING = settings.time.END - new Date().getTime(); 521 522 clearTimeout(settings.time.TIMER); 523 524 that.setSetting(ref, 'time', settings.time); 525 526 if($elem !== null){ 527 var computedStyle = window.getComputedStyle($elem), 528 propertyWidth = computedStyle.getPropertyValue('width'); 529 530 $elem.style.transition = 'none'; 531 $elem.style.width = propertyWidth; 532 } 533 534 if(typeof callback === 'function'){ 535 setTimeout(function() { 536 callback.apply(that); 537 }, 10); 538 } 539 } 540 }, 541 resume: function() { 542 543 if(typeof settings.time.REMAINING !== 'undefined'){ 544 545 $toast.classList.remove(PLUGIN_NAME+'-paused'); 546 547 if($elem !== null){ 548 $elem.style.transition = 'width '+ settings.time.REMAINING +'ms '+settings.progressBarEasing; 549 $elem.style.width = '0%'; 550 } 551 552 settings.time.END = new Date().getTime() + settings.time.REMAINING; 553 settings.time.TIMER = setTimeout(function() { 554 555 clearTimeout(settings.time.TIMER); 556 557 if(!$toast.classList.contains(PLUGIN_NAME+'-closing')){ 558 559 that.hide(settings, $toast, 'timeout'); 560 561 if(typeof callback === 'function'){ 562 callback.apply(that); 563 } 564 } 565 566 }, settings.time.REMAINING); 567 568 that.setSetting(ref, 'time', settings.time); 569 570 } else { 571 this.start(); 572 } 573 }, 574 reset: function(){ 575 576 clearTimeout(settings.time.TIMER); 577 578 delete settings.time.REMAINING; 579 580 that.setSetting(ref, 'time', settings.time); 581 582 $toast.classList.add(PLUGIN_NAME+'-reseted'); 583 584 $toast.classList.remove(PLUGIN_NAME+'-paused'); 585 586 if($elem !== null){ 587 $elem.style.transition = 'none'; 588 $elem.style.width = '100%'; 589 } 590 591 if(typeof callback === 'function'){ 592 setTimeout(function() { 593 callback.apply(that); 594 }, 10); 595 } 596 } 597
vendor: 2,494 bytes, lines 597-694
597}; 598 599 }; 600 601 602 /** 603 * Close the specific Toast 604 * @public 605 * @param {Object} options User settings 606 */ 607 $iziToast.hide = function (options, $toast, closedBy) { 608 609 if(typeof $toast != 'object'){ 610 $toast = document.querySelector($toast); 611 } 612 613 var that = this, 614 settings = extend(this.children[$toast.getAttribute('data-iziToast-ref')], options || {}); 615 settings.closedBy = closedBy || null; 616 617 delete settings.time.REMAINING; 618 619 $toast.classList.add(PLUGIN_NAME+'-closing'); 620 621 // Overlay 622 (function(){ 623 624 var $overlay = document.querySelector('.'+PLUGIN_NAME+'-overlay'); 625 if($overlay !== null){ 626 var refs = $overlay.getAttribute('data-iziToast-ref'); 627 refs = refs.split(','); 628 var index = refs.indexOf(String(settings.ref)); 629 630 if(index !== -1){ 631 refs.splice(index, 1); 632 } 633 $overlay.setAttribute('data-iziToast-ref', refs.join()); 634 635 if(refs.length === 0){ 636 $overlay.classList.remove('fadeIn'); 637 $overlay.classList.add('fadeOut'); 638 setTimeout(function() { 639 $overlay.remove(); 640 }, 700); 641 } 642 } 643 644 })(); 645 646 if(settings.transitionIn){ 647 $toast.classList.remove(settings.transitionIn); 648 } 649 650 if(settings.transitionInMobile){ 651 $toast.classList.remove(settings.transitionInMobile); 652 } 653 654 if(ISMOBILE || window.innerWidth <= MOBILEWIDTH){ 655 if(settings.transitionOutMobile) 656 $toast.classList.add(settings.transitionOutMobile); 657 } else { 658 if(settings.transitionOut) 659 $toast.classList.add(settings.transitionOut); 660 } 661 var H = $toast.parentNode.offsetHeight; 662 $toast.parentNode.style.height = H+'px'; 663 $toast.style.pointerEvents = 'none'; 664 665 if(!ISMOBILE || window.innerWidth > MOBILEWIDTH){ 666 $toast.parentNode.style.transitionDelay = '0.2s'; 667 } 668 669 try { 670 var event = new CustomEvent(PLUGIN_NAME+'-closing', {detail: settings, bubbles: true, cancelable: true}); 671 document.dispatchEvent(event); 672 } catch(ex){ 673 console.warn(ex); 674 } 675 676 setTimeout(function() { 677 678 $toast.parentNode.style.height = '0px'; 679 $toast.parentNode.style.overflow = ''; 680 681 setTimeout(function(){ 682 683 delete that.children[settings.ref]; 684 685 $toast.parentNode.remove(); 686 687 try { 688 var event = new CustomEvent(PLUGIN_NAME+'-closed', {detail: settings, bubbles: true, cancelable: true}); 689 document.dispatchEvent(event); 690 } catch(ex){ 691 console.warn(ex); 692 } 693 694 if(typeof settings.onClosed !== 'undefined'
vendor: 19,493 bytes, lines 694-1374
694 && typeof $iziToast.children[settings.ref] !== 'undefined'){ 695 settings.onClosed.apply(null, [that, settings, $toast, closedBy]); 696 } 697 698 }, 1000); 699 }, 200); 700 701 702 if(typeof settings.onClosing !== 'undefined' && typeof $iziToast.children[settings.ref] !== 'undefined'){ 703 settings.onClosing.apply(null, [that, settings, $toast, closedBy]); 704 } 705 }; 706 707 708 /** 709 * Create and show the Toast 710 * @public 711 * @param {Object} options User settings 712 */ 713 $iziToast.show = function (options) { 714 715 var that = this; 716 717 // Merge user options with defaults 718 var settings = extend(CONFIG, options || {}); 719 settings = extend(defaults, settings); 720 settings.time = {}; 721 722 if(settings.id === null){ 723 settings.id = generateId(settings.title+settings.message+settings.color); 724 } 725 726 settings.ref = new Date().getTime() + Math.floor((Math.random() * 10000000) + 1); 727 728 $iziToast.children[settings.ref] = settings; 729 730 try { 731 if(settings.displayMode === 1 || settings.displayMode == 'once'){ 732 if(document.querySelectorAll('.'+PLUGIN_NAME+'#'+settings.id).length > 0){ 733 return false; 734 } 735 } 736 if(settings.displayMode === 2 || settings.displayMode == 'replace'){ 737 forEach(document.querySelectorAll('.'+PLUGIN_NAME+'#'+settings.id), function(element, index) { 738 that.hide(settings, element, 'replaced'); 739 }); 740 } 741 } catch (error) { 742 Log('Could not find an element with this selector: '+'#'+settings.id+'. Try to set an valid id.') 743 } 744 745 var $DOM = { 746 body: document.querySelector('body'), 747 overlay: document.createElement('div'), 748 toast: document.createElement('div'), 749 toastBody: document.createElement('div'), 750 toastTexts: document.createElement('div'), 751 toastCapsule: document.createElement('div'), 752 cover: document.createElement('div'), 753 buttons: document.createElement('div'), 754 inputs: document.createElement('div'), 755 icon: !settings.iconUrl ? document.createElement('i') : document.createElement('img'), 756 wrapper: null 757 }; 758 759 $DOM.toast.setAttribute('data-iziToast-ref', settings.ref); 760 $DOM.toast.setAttribute('role', 'alert'); 761 $DOM.toast.setAttribute('aria-live', 'assertive'); 762 $DOM.toast.setAttribute('aria-atomic', 'true'); 763 $DOM.toast.appendChild($DOM.toastBody); 764 $DOM.toastCapsule.appendChild($DOM.toast); 765 766 // CSS Settings 767 (function(){ 768 769 $DOM.toast.classList.add(PLUGIN_NAME); 770 $DOM.toast.classList.add(PLUGIN_NAME+'-opening'); 771 $DOM.toastCapsule.classList.add(PLUGIN_NAME+'-capsule'); 772 $DOM.toastBody.classList.add(PLUGIN_NAME + '-body'); 773 $DOM.toastTexts.classList.add(PLUGIN_NAME + '-texts'); 774 775 if(ISMOBILE || window.innerWidth <= MOBILEWIDTH){ 776 if(settings.transitionInMobile) 777 $DOM.toast.classList.add(settings.transitionInMobile); 778 } else { 779 if(settings.transitionIn) 780 $DOM.toast.classList.add(settings.transitionIn); 781 } 782 783 if(settings.class){ 784 var classes = settings.class.split(' '); 785 forEach(classes, function (value, index) { 786 $DOM.toast.classList.add(value); 787 }); 788 } 789 790 if(settings.id){ $DOM.toast.id = settings.id; } 791 792 if(settings.rtl){ 793 $DOM.toast.classList.add(PLUGIN_NAME + '-rtl'); 794 $DOM.toast.setAttribute('dir', 'rtl'); 795 } 796 797 if(settings.layout > 1){ $DOM.toast.classList.add(PLUGIN_NAME+'-layout'+settings.layout); } 798 799 if(settings.balloon){ $DOM.toast.classList.add(PLUGIN_NAME+'-balloon'); } 800 801 if(settings.maxWidth){ 802 if( !isNaN(settings.maxWidth) ){ 803 $DOM.toast.style.maxWidth = settings.maxWidth+'px'; 804 } else { 805 $DOM.toast.style.maxWidth = settings.maxWidth; 806 } 807 } 808 809 if(settings.theme !== '' || settings.theme !== 'light') { 810 811 $DOM.toast.classList.add(PLUGIN_NAME+'-theme-'+settings.theme); 812 } 813 814 if(settings.color) { //#, rgb, rgba, hsl 815 816 if( isColor(settings.color) ){ 817 $DOM.toast.style.background = settings.color; 818 } else { 819 $DOM.toast.classList.add(PLUGIN_NAME+'-color-'+settings.color); 820 } 821 } 822 823 if(settings.backgroundColor) { 824 $DOM.toast.style.background = settings.backgroundColor; 825 if(settings.balloon){ 826 $DOM.toast.style.borderColor = settings.backgroundColor; 827 } 828 } 829 })(); 830 831 // Cover image 832 (function(){ 833 if(settings.image) { 834 $DOM.cover.classList.add(PLUGIN_NAME + '-cover'); 835 $DOM.cover.style.width = settings.imageWidth + 'px'; 836 837 if(isBase64(settings.image.replace(/ /g,''))){ 838 $DOM.cover.style.backgroundImage = 'url(data:image/png;base64,' + settings.image.replace(/ /g,'') + ')'; 839 } else { 840 $DOM.cover.style.backgroundImage = 'url(' + settings.image + ')'; 841 } 842 843 if(settings.rtl){ 844 $DOM.toastBody.style.marginRight = (settings.imageWidth + 10) + 'px'; 845 } else { 846 $DOM.toastBody.style.marginLeft = (settings.imageWidth + 10) + 'px'; 847 } 848 $DOM.toast.appendChild($DOM.cover); 849 } 850 })(); 851 852 // Button close 853 (function(){ 854 if(settings.close){ 855 856 $DOM.buttonClose = document.createElement('button'); 857 $DOM.buttonClose.type = 'button'; 858 $DOM.buttonClose.classList.add(PLUGIN_NAME + '-close'); 859 $DOM.buttonClose.setAttribute('aria-label', 'Close'); 860 $DOM.buttonClose.addEventListener('click', function (e) { 861 e.stopPropagation(); 862 var button = e.target; 863 that.hide(settings, $DOM.toast, 'button'); 864 }); 865 $DOM.toast.appendChild($DOM.buttonClose); 866 } else { 867 if(settings.rtl){ 868 $DOM.toast.style.paddingLeft = '18px'; 869 } else { 870 $DOM.toast.style.paddingRight = '18px'; 871 } 872 } 873 })(); 874 875 // Progress Bar & Timeout 876 (function(){ 877 878 if(settings.progressBar){ 879 $DOM.progressBar = document.createElement('div'); 880 $DOM.progressBarDiv = document.createElement('div'); 881 $DOM.progressBar.classList.add(PLUGIN_NAME + '-progressbar'); 882 $DOM.progressBarDiv.style.background = settings.progressBarColor; 883 $DOM.progressBar.appendChild($DOM.progressBarDiv); 884 $DOM.toast.appendChild($DOM.progressBar); 885 } 886 887 if(settings.timeout) { 888 889 if(settings.pauseOnHover && !settings.resetOnHover){ 890 891 $DOM.toast.addEventListener('mouseenter', function (e) { 892 that.progress(settings, $DOM.toast).pause(); 893 }); 894 $DOM.toast.addEventListener('mouseleave', function (e) { 895 that.progress(settings, $DOM.toast).resume(); 896 }); 897 } 898 899 if(settings.resetOnHover){ 900 901 $DOM.toast.addEventListener('mouseenter', function (e) { 902 that.progress(settings, $DOM.toast).reset(); 903 }); 904 $DOM.toast.addEventListener('mouseleave', function (e) { 905 that.progress(settings, $DOM.toast).start(); 906 }); 907 } 908 } 909 })(); 910 911 // Icon 912 (function(){ 913 914 if(settings.iconUrl) { 915 916 $DOM.icon.setAttribute('class', PLUGIN_NAME + '-icon'); 917 $DOM.icon.setAttribute('src', settings.iconUrl); 918 919 } else if(settings.icon) { 920 $DOM.icon.setAttribute('class', PLUGIN_NAME + '-icon ' + settings.icon); 921 922 if(settings.iconText){ 923 $DOM.icon.appendChild(document.createTextNode(settings.iconText)); 924 } 925 926 if(settings.iconColor){ 927 $DOM.icon.style.color = settings.iconColor; 928 } 929 } 930 931 if(settings.icon || settings.iconUrl) { 932 933 if(settings.rtl){ 934 $DOM.toastBody.style.paddingRight = '33px'; 935 } else { 936 $DOM.toastBody.style.paddingLeft = '33px'; 937 } 938 939 $DOM.toastBody.appendChild($DOM.icon); 940 } 941 942 })(); 943 944 // Title & Message 945 (function(){ 946 if(settings.title.length > 0) { 947 948 $DOM.strong = document.createElement('strong'); 949 $DOM.strong.classList.add(PLUGIN_NAME + '-title'); 950 $DOM.strong.textContent = settings.title; 951 $DOM.toastTexts.appendChild($DOM.strong); 952 953 if(settings.titleColor) { 954 $DOM.strong.style.color = settings.titleColor; 955 } 956 if(settings.titleSize) { 957 if( !isNaN(settings.titleSize) ){ 958 $DOM.strong.style.fontSize = settings.titleSize+'px'; 959 } else { 960 $DOM.strong.style.fontSize = settings.titleSize; 961 } 962 } 963 if(settings.titleLineHeight) { 964 if( !isNaN(settings.titleSize) ){ 965 $DOM.strong.style.lineHeight = settings.titleLineHeight+'px'; 966 } else { 967 $DOM.strong.style.lineHeight = settings.titleLineHeight; 968 } 969 } 970 } 971 972 if(settings.message.length > 0) { 973 974 $DOM.p = document.createElement('p'); 975 $DOM.p.classList.add(PLUGIN_NAME + '-message'); 976 $DOM.p.textContent = settings.message; 977 $DOM.toastTexts.appendChild($DOM.p); 978 979 if(settings.messageColor) { 980 $DOM.p.style.color = settings.messageColor; 981 } 982 if(settings.messageSize) { 983 if( !isNaN(settings.titleSize) ){ 984 $DOM.p.style.fontSize = settings.messageSize+'px'; 985 } else { 986 $DOM.p.style.fontSize = settings.messageSize; 987 } 988 } 989 if(settings.messageLineHeight) { 990 991 if( !isNaN(settings.titleSize) ){ 992 $DOM.p.style.lineHeight = settings.messageLineHeight+'px'; 993 } else { 994 $DOM.p.style.lineHeight = settings.messageLineHeight; 995 } 996 } 997 } 998 999 if(settings.title.length > 0 && settings.message.length > 0) { 1000 if(settings.rtl){ 1001 $DOM.strong.style.marginLeft = '10px'; 1002 } else if(settings.layout !== 2 && !settings.rtl) { 1003 $DOM.strong.style.marginRight = '10px'; 1004 } 1005 } 1006 })(); 1007 1008 $DOM.toastBody.appendChild($DOM.toastTexts); 1009 1010 // Inputs 1011 var $inputs; 1012 (function(){ 1013 if(settings.inputs.length > 0) { 1014 1015 $DOM.inputs.classList.add(PLUGIN_NAME + '-inputs'); 1016 1017 forEach(settings.inputs, function (value, index) { 1018 1019 $DOM.inputs.appendChild(createInput(value[0])); 1020 1021 $inputs = $DOM.inputs.childNodes; 1022 1023 $inputs[index].classList.add(PLUGIN_NAME + '-inputs-child'); 1024 1025 if(value[3]){ // Check if 'focus' param is true 1026 setTimeout(function() { 1027 $inputs[index].focus(); 1028 }, 300); 1029 } 1030 1031 $inputs[index].addEventListener(value[1], function (e) { 1032 var ts = value[2]; 1033 1034 var elements = { 1035 toast: $DOM.toast, 1036 currentInput: this, 1037 buttons: $DOM.buttons, 1038 inputs: $inputs 1039 } 1040 return ts(that, settings, elements, e); 1041 }); 1042 }); 1043 $DOM.toastBody.appendChild($DOM.inputs); 1044 } 1045 })(); 1046 1047 // Buttons 1048 (function(){ 1049 if(settings.buttons.length > 0) { 1050 1051 $DOM.buttons.classList.add(PLUGIN_NAME + '-buttons'); 1052 1053 forEach(settings.buttons, function (value, index) { 1054 1055 var btn = document.createElement('button'); 1056 btn.setAttribute('type', 'button'); 1057 btn.textContent = value[0] 1058 $DOM.buttons.appendChild(btn); 1059 1060 var $btns = $DOM.buttons.childNodes; 1061 1062 $btns[index].classList.add(PLUGIN_NAME + '-buttons-child'); 1063 1064 if(value[2]){ // Check if 'focus' param is true 1065 setTimeout(function() { 1066 $btns[index].focus(); 1067 }, 300); 1068 } 1069 1070 $btns[index].addEventListener('click', function (e) { 1071 e.preventDefault(); 1072 e.stopPropagation(); 1073 var ts = value[1]; 1074 // instance, settings, toast, e 1075 var elements = { 1076 toast: $DOM.toast, 1077 currentButton: this, 1078 buttons: $DOM.buttons, 1079 inputs: $inputs 1080 } 1081 return ts(that, settings, elements, e); 1082 }); 1083 }); 1084 } 1085 $DOM.toastBody.appendChild($DOM.buttons); 1086 })(); 1087 1088 // Margin adjustments 1089 (function(){ 1090 if(settings.message.length > 0 && (settings.inputs.length > 0 || settings.buttons.length > 0)) { 1091 $DOM.p.style.marginBottom = '0'; 1092 } 1093 1094 if(settings.inputs.length > 0 || settings.buttons.length > 0){ 1095 if(settings.rtl){ 1096 $DOM.toastTexts.style.marginLeft = '10px'; 1097 } else { 1098 $DOM.toastTexts.style.marginRight = '10px'; 1099 } 1100 if(settings.inputs.length > 0 && settings.buttons.length > 0){ 1101 if(settings.rtl){ 1102 $DOM.inputs.style.marginLeft = '8px'; 1103 } else { 1104 $DOM.inputs.style.marginRight = '8px'; 1105 } 1106 } 1107 } 1108 })(); 1109 1110 1111 // Wrap 1112 (function(){ 1113 $DOM.toastCapsule.style.visibility = 'hidden'; 1114 setTimeout(function() { 1115 var H = $DOM.toast.offsetHeight; 1116 var style = $DOM.toast.currentStyle || window.getComputedStyle($DOM.toast); 1117 var marginTop = style.marginTop; 1118 marginTop = marginTop.split('px'); 1119 marginTop = parseInt(marginTop[0]); 1120 var marginBottom = style.marginBottom; 1121 marginBottom = marginBottom.split('px'); 1122 marginBottom = parseInt(marginBottom[0]); 1123 1124 $DOM.toastCapsule.style.visibility = ''; 1125 $DOM.toastCapsule.style.height = (H+marginBottom+marginTop)+'px'; 1126 1127 setTimeout(function() { 1128 $DOM.toastCapsule.style.height = 'auto'; 1129 if(settings.target){ 1130 $DOM.toastCapsule.style.overflow = 'visible'; 1131 } 1132 }, 500); 1133 1134 if(settings.timeout) { 1135 that.progress(settings, $DOM.toast).start(); 1136 } 1137 }, 100); 1138 })(); 1139 1140 // Target 1141 (function(){ 1142 var position = settings.position; 1143 1144 if(settings.target){ 1145 1146 $DOM.wrapper = document.querySelector(settings.target); 1147 $DOM.wrapper.classList.add(PLUGIN_NAME + '-target'); 1148 1149 if(settings.targetFirst) { 1150 $DOM.wrapper.insertBefore($DOM.toastCapsule, $DOM.wrapper.firstChild); 1151 } else { 1152 $DOM.wrapper.appendChild($DOM.toastCapsule); 1153 } 1154 1155 } else { 1156 1157 if( POSITIONS.indexOf(settings.position) == -1 ){ 1158 Log('Incorrect position.\nIt can be ⺠' + POSITIONS) 1159 return; 1160 } 1161 1162 if(ISMOBILE || window.innerWidth <= MOBILEWIDTH){ 1163 if(settings.position == 'bottomLeft' || settings.position == 'bottomRight' || settings.position == 'bottomCenter'){ 1164 position = PLUGIN_NAME+'-wrapper-bottomCenter'; 1165 } 1166 else if(settings.position == 'topLeft' || settings.position == 'topRight' || settings.position == 'topCenter'){ 1167 position = PLUGIN_NAME+'-wrapper-topCenter'; 1168 } 1169 else { 1170 position = PLUGIN_NAME+'-wrapper-center'; 1171 } 1172 } else { 1173 position = PLUGIN_NAME+'-wrapper-'+position; 1174 } 1175 $DOM.wrapper = document.querySelector('.' + PLUGIN_NAME + '-wrapper.'+position); 1176 1177 if(!$DOM.wrapper) { 1178 $DOM.wrapper = document.createElement('div'); 1179 $DOM.wrapper.classList.add(PLUGIN_NAME + '-wrapper'); 1180 $DOM.wrapper.classList.add(position); 1181 document.body.appendChild($DOM.wrapper); 1182 } 1183 if(settings.position == 'topLeft' || settings.position == 'topCenter' || settings.position == 'topRight'){ 1184 $DOM.wrapper.insertBefore($DOM.toastCapsule, $DOM.wrapper.firstChild); 1185 } else { 1186 $DOM.wrapper.appendChild($DOM.toastCapsule); 1187 } 1188 } 1189 1190 if(!isNaN(settings.zindex)) { 1191 $DOM.wrapper.style.zIndex = settings.zindex; 1192 } else { 1193 Log('Invalid zIndex value.') 1194 } 1195 })(); 1196 1197 // Overlay 1198 (function(){ 1199 1200 if(settings.overlay) { 1201 1202 if( document.querySelector('.'+PLUGIN_NAME+'-overlay.fadeIn') !== null ){ 1203 1204 $DOM.overlay = document.querySelector('.'+PLUGIN_NAME+'-overlay'); 1205 $DOM.overlay.setAttribute('data-iziToast-ref', $DOM.overlay.getAttribute('data-iziToast-ref') + ',' + settings.ref); 1206 1207 if(!isNaN(settings.zindex) && settings.zindex !== null) { 1208 $DOM.overlay.style.zIndex = settings.zindex-1; 1209 } 1210 1211 } else { 1212 1213 $DOM.overlay.classList.add(PLUGIN_NAME+'-overlay'); 1214 $DOM.overlay.classList.add('fadeIn'); 1215 $DOM.overlay.style.background = settings.overlayColor; 1216 $DOM.overlay.setAttribute('data-iziToast-ref', settings.ref); 1217 if(!isNaN(settings.zindex) && settings.zindex !== null) { 1218 $DOM.overlay.style.zIndex = settings.zindex-1; 1219 } 1220 $DOM.body.appendChild($DOM.overlay); 1221 } 1222 1223 if(settings.overlayClose) { 1224 1225 $DOM.overlay.removeEventListener('click', {}); 1226 $DOM.overlay.addEventListener('click', function (e) { 1227 that.hide(settings, $DOM.toast, 'overlay'); 1228 }); 1229 } else { 1230 $DOM.overlay.removeEventListener('click', {}); 1231 } 1232 } 1233 })(); 1234 1235 // Inside animations 1236 (function(){ 1237 if(settings.animateInside){ 1238 $DOM.toast.classList.add(PLUGIN_NAME+'-animateInside'); 1239 1240 var animationTimes = [200, 100, 300]; 1241 if(settings.transitionIn == 'bounceInLeft' || settings.transitionIn == 'bounceInRight'){ 1242 animationTimes = [400, 200, 400]; 1243 } 1244 1245 if(settings.title.length > 0) { 1246 setTimeout(function(){ 1247 $DOM.strong.classList.add('slideIn'); 1248 }, animationTimes[0]); 1249 } 1250 1251 if(settings.message.length > 0) { 1252 setTimeout(function(){ 1253 $DOM.p.classList.add('slideIn'); 1254 }, animationTimes[1]); 1255 } 1256 1257 if(settings.icon || settings.iconUrl) { 1258 setTimeout(function(){ 1259 $DOM.icon.classList.add('revealIn'); 1260 }, animationTimes[2]); 1261 } 1262 1263 var counter = 150; 1264 if(settings.buttons.length > 0 && $DOM.buttons) { 1265 1266 setTimeout(function(){ 1267 1268 forEach($DOM.buttons.childNodes, function(element, index) { 1269 1270 setTimeout(function(){ 1271 element.classList.add('revealIn'); 1272 }, counter); 1273 counter = counter + 150; 1274 }); 1275 1276 }, settings.inputs.length > 0 ? 150 : 0); 1277 } 1278 1279 if(settings.inputs.length > 0 && $DOM.inputs) { 1280 counter = 150; 1281 forEach($DOM.inputs.childNodes, function(element, index) { 1282 1283 setTimeout(function(){ 1284 element.classList.add('revealIn'); 1285 }, counter); 1286 counter = counter + 150; 1287 }); 1288 } 1289 } 1290 })(); 1291 1292 if(typeof settings.onClick === 'function' && settings.onClick.length !== 0){ 1293 $DOM.toast.addEventListener('click', function (e) { 1294 e.stopPropagation(); 1295 settings.onClick.apply(null, [that, settings, $DOM.toast, e]); 1296 }); 1297 } 1298 1299 if(typeof settings.onOpening === 'function' && settings.onOpening.length !== 0){ 1300 settings.onOpening.apply(null, [that, settings, $DOM.toast]); 1301 } 1302 1303 try { 1304 var event = new CustomEvent(PLUGIN_NAME + '-opening', {detail: settings, bubbles: true, cancelable: true}); 1305 document.dispatchEvent(event); 1306 } catch(ex){ 1307 console.warn(ex); 1308 } 1309 1310 setTimeout(function() { 1311 1312 $DOM.toast.classList.remove(PLUGIN_NAME+'-opening'); 1313 $DOM.toast.classList.add(PLUGIN_NAME+'-opened'); 1314 1315 try { 1316 var event = new CustomEvent(PLUGIN_NAME + '-opened', {detail: settings, bubbles: true, cancelable: true}); 1317 document.dispatchEvent(event); 1318 } catch(ex){ 1319 console.warn(ex); 1320 } 1321 1322 if(typeof $iziToast.children[settings.ref] !== 'undefined'){ 1323 settings.onOpened.apply(null, [that, settings, $DOM.toast]); 1324 } 1325 }, 1000); 1326 1327 if(settings.drag){ 1328 if(ACCEPTSTOUCH) { 1329 1330 $DOM.toast.addEventListener('touchstart', function(e) { 1331 drag.startMoving(this, that, settings, e); 1332 }, false); 1333 1334 $DOM.toast.addEventListener('touchend', function(e) { 1335 drag.stopMoving(this, e); 1336 }, false); 1337 1338 } else { 1339 1340 $DOM.toast.addEventListener('mousedown', function(e) { 1341 e.preventDefault(); 1342 drag.startMoving(this, that, settings, e); 1343 }, false); 1344 1345 $DOM.toast.addEventListener('mouseup', function(e) { 1346 e.preventDefault(); 1347 drag.stopMoving(this, e); 1348 }, false); 1349 1350 } 1351 } 1352 1353 if(settings.closeOnEscape) { 1354 1355 document.addEventListener('keyup', function (evt) { 1356 evt = evt || window.event; 1357 if(evt.keyCode == 27) { 1358 that.hide(settings, $DOM.toast, 'esc'); 1359 } 1360 }); 1361 } 1362 1363 if(settings.closeOnClick) { 1364 $DOM.toast.addEventListener('click', function (evt) { 1365 that.hide(settings, $DOM.toast, 'toast'); 1366 }); 1367 } 1368 1369 that.toast = $DOM.toast; 1370 }; 1371 1372 1373 return $iziToast; 1374});
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.