vendor: 14,566 bytes, lines 1-457
1/* 2 * iziToast | v1.2.0 3 * http://izitoast.marcelodolce.com 4 * by Marcelo Dolce. 5 */ 6(function (root, factory) { 7 if (typeof define === 'function' && define.amd) { 8 define([], factory(root)); 9 } else if (typeof exports === 'object') { 10 module.exports = factory(root); 11 } else { 12 root.iziToast = factory(root); 13 } 14})(typeof global !== 'undefined' ? global : window || this.window || this.global, function (root) { 15 16 'use strict'; 17 18 // 19 // Variables 20 // 21 var $iziToast = {}, 22 PLUGIN_NAME = 'iziToast', 23 BODY = document.querySelector('body'), 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 55 // Default settings 56 var defaults = { 57 id: null, 58 class: '', 59 title: '', 60 titleColor: '', 61 titleSize: '', 62 titleLineHeight: '', 63 message: '', 64 messageColor: '', 65 messageSize: '', 66 messageLineHeight: '', 67 backgroundColor: '', 68 theme: 'light', // dark 69 color: '', // blue, red, green, yellow 70 icon: '', 71 iconText: '', 72 iconColor: '', 73 image: '', 74 imageWidth: 50, 75 maxWidth: null, 76 zindex: null, 77 layout: 1, 78 balloon: false, 79 close: true, 80 closeOnEscape: false, 81 rtl: false, 82 position: 'bottomRight', // bottomRight, bottomLeft, topRight, topLeft, topCenter, bottomCenter, center 83 target: '', 84 targetFirst: true, 85 toastOnce: false, 86 timeout: 5000, 87 animateInside: true, 88 drag: true, 89 pauseOnHover: true, 90 resetOnHover: false, 91 progressBar: true, 92 progressBarColor: '', 93 progressBarEasing: 'linear', 94 overlay: false, 95 overlayClose: false, 96 overlayColor: 'rgba(0, 0, 0, 0.6)', 97 transitionIn: 'fadeInUp', // bounceInLeft, bounceInRight, bounceInUp, bounceInDown, fadeIn, fadeInDown, fadeInUp, fadeInLeft, fadeInRight, flipInX 98 transitionOut: 'fadeOut', // fadeOut, fadeOutUp, fadeOutDown, fadeOutLeft, fadeOutRight, flipOutX 99 transitionInMobile: 'fadeInUp', 100 transitionOutMobile: 'fadeOutDown', 101 buttons: {}, 102 onOpening: function () {}, 103 onOpened: function () {}, 104 onClosing: function () {}, 105 onClosed: function () {} 106 }; 107 108 // 109 // Methods 110 // 111 112 113 /** 114 * Polyfill for remove() method 115 */ 116 if (!('remove' in Element.prototype)) { 117 Element.prototype.remove = function () { 118 if (this.parentNode) { 119 this.parentNode.removeChild(this); 120 } 121 }; 122 } 123 124 /* 125 * Polyfill for CustomEvent for IE >= 9 126 * https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent#Polyfill 127 */ 128 if (typeof window.CustomEvent !== 'function') { 129 var CustomEventPolyfill = function (event, params) { 130 params = params || {bubbles: false, cancelable: false, detail: undefined}; 131 var evt = document.createEvent('CustomEvent'); 132 evt.initCustomEvent(event, params.bubbles, params.cancelable, params.detail); 133 return evt; 134 }; 135 136 CustomEventPolyfill.prototype = window.Event.prototype; 137 138 window.CustomEvent = CustomEventPolyfill; 139 } 140 141 /** 142 * A simple forEach() implementation for Arrays, Objects and NodeLists 143 * @private 144 * @param {Array|Object|NodeList} collection Collection of items to iterate 145 * @param {Function} callback Callback function for each iteration 146 * @param {Array|Object|NodeList} scope Object/NodeList/Array that forEach is iterating over (aka `this`) 147 */ 148 var forEach = function (collection, callback, scope) { 149 if (Object.prototype.toString.call(collection) === '[object Object]') { 150 for (var prop in collection) { 151 if (Object.prototype.hasOwnProperty.call(collection, prop)) { 152 callback.call(scope, collection[prop], prop, collection); 153 } 154 } 155 } else { 156 if (collection) { 157 for (var i = 0, len = collection.length; i < len; i++) { 158 callback.call(scope, collection[i], i, collection); 159 } 160 } 161 } 162 }; 163 164 /** 165 * Merge defaults with user options 166 * @private 167 * @param {Object} defaults Default settings 168 * @param {Object} options User options 169 * @returns {Object} Merged values of defaults and options 170 */ 171 var extend = function (defaults, options) { 172 var extended = {}; 173 forEach(defaults, function (value, prop) { 174 extended[prop] = defaults[prop]; 175 }); 176 forEach(options, function (value, prop) { 177 extended[prop] = options[prop]; 178 }); 179 return extended; 180 }; 181 182 183 /** 184 * Create a fragment DOM elements 185 * @private 186 */ 187 var createFragElem = function (htmlStr) { 188 var frag = document.createDocumentFragment(), 189 temp = document.createElement('div'); 190 temp.innerHTML = htmlStr; 191 while (temp.firstChild) { 192 frag.appendChild(temp.firstChild); 193 } 194 return frag; 195 }; 196 197 198 /** 199 * Check if is a color 200 * @private 201 */ 202 var isColor = function (color) { 203 if (color.substring(0, 1) == '#' || color.substring(0, 3) == 'rgb' || color.substring(0, 3) == 'hsl') { 204 return true; 205 } else { 206 return false; 207 } 208 }; 209 210 211 /** 212 * Drag method of toasts 213 * @private 214 */ 215 var drag = function () { 216 217 return { 218 move: function (toast, instance, settings, xpos) { 219 220 var opacity, 221 opacityRange = 0.3, 222 distance = 180; 223 224 if (xpos !== 0) { 225 226 toast.classList.add(PLUGIN_NAME + '-dragged'); 227 228 toast.style.transform = 'translateX(' + xpos + 'px)'; 229 230 if (xpos > 0) { 231 opacity = (distance - xpos) / distance; 232 if (opacity < opacityRange) { 233 instance.hide(toast, extend(settings, {transitionOut: 'fadeOutRight', transitionOutMobile: 'fadeOutRight'}), 'drag'); 234 } 235 } else { 236 opacity = (distance + xpos) / distance; 237 if (opacity < opacityRange) { 238 instance.hide(toast, extend(settings, {transitionOut: 'fadeOutLeft', transitionOutMobile: 'fadeOutLeft'}), 'drag'); 239 } 240 } 241 toast.style.opacity = opacity; 242 243 if (opacity < opacityRange) { 244 245 if (ISCHROME || ISFIREFOX) 246 toast.style.left = xpos + 'px'; 247 248 toast.parentNode.style.opacity = opacityRange; 249 250 this.stopMoving(toast, null); 251 } 252 } 253 254 255 }, 256 startMoving: function (toast, instance, settings, e) { 257 258 e = e || window.event; 259 var posX = ((ACCEPTSTOUCH) ? e.touches[0].clientX : e.clientX), 260 toastLeft = toast.style.transform.replace('px)', ''); 261 toastLeft = toastLeft.replace('translateX(', ''); 262 var offsetX = posX - toastLeft; 263 264 toast.classList.remove(settings.transitionIn); 265 toast.classList.remove(settings.transitionInMobile); 266 toast.style.transition = ''; 267 268 if (ACCEPTSTOUCH) { 269 document.ontouchmove = function (e) { 270 e.preventDefault(); 271 e = e || window.event; 272 var posX = e.touches[0].clientX, 273 finalX = posX - offsetX; 274 drag.move(toast, instance, settings, finalX); 275 }; 276 } else { 277 document.onmousemove = function (e) { 278 e.preventDefault(); 279 e = e || window.event; 280 var posX = e.clientX, 281 finalX = posX - offsetX; 282 drag.move(toast, instance, settings, finalX); 283 }; 284 } 285 286 }, 287 stopMoving: function (toast, e) { 288 289 if (ACCEPTSTOUCH) { 290 document.ontouchmove = function () {}; 291 } else { 292 document.onmousemove = function () {}; 293 } 294 295 toast.style.opacity = ''; 296 toast.style.transform = ''; 297 298 if (toast.classList.contains(PLUGIN_NAME + '-dragged')) { 299 300 toast.classList.remove(PLUGIN_NAME + '-dragged'); 301 302 toast.style.transition = 'transform 0.4s ease, opacity 0.4s ease'; 303 setTimeout(function () { 304 toast.style.transition = ''; 305 }, 400); 306 } 307 308 } 309 }; 310 311 }(); 312 313 314 /** 315 * Destroy the current initialization. 316 * @public 317 */ 318 $iziToast.destroy = function () { 319 320 forEach(document.querySelectorAll('.' + PLUGIN_NAME + '-wrapper'), function (element, index) { 321 element.remove(); 322 }); 323 324 forEach(document.querySelectorAll('.' + PLUGIN_NAME), function (element, index) { 325 element.remove(); 326 }); 327 328 // Remove event listeners 329 document.removeEventListener(PLUGIN_NAME + '-opened', {}, false); 330 document.removeEventListener(PLUGIN_NAME + '-opening', {}, false); 331 document.removeEventListener(PLUGIN_NAME + '-closing', {}, false); 332 document.removeEventListener(PLUGIN_NAME + '-closed', {}, false); 333 document.removeEventListener('keyup', {}, false); 334 335 // Reset variables 336 CONFIG = {}; 337 }; 338 339 /** 340 * Initialize Plugin 341 * @public 342 * @param {Object} options User settings 343 */ 344 $iziToast.settings = function (options) { 345 346 // Destroy any existing initializations 347 $iziToast.destroy(); 348 349 CONFIG = options; 350 defaults = extend(defaults, options || {}); 351 }; 352 353 354 /** 355 * Building themes functions. 356 * @public 357 * @param {Object} options User settings 358 */ 359 forEach(THEMES, function (theme, name) { 360 361 $iziToast[name] = function (options) { 362 363 var settings = extend(CONFIG, options || {}); 364 settings = extend(theme, settings || {}); 365 366 this.show(settings); 367 }; 368 369 }); 370 371 372 /** 373 * Do the calculation to move the progress bar 374 * @private 375 */ 376 $iziToast.progress = function ($toast, options, callback) { 377 378 var that = this, 379 settings = extend(that.settings, options || {}), 380 $elem = $toast.querySelector('.' + PLUGIN_NAME + '-progressbar div'); 381 382 return { 383 start: function () { 384 385 if ($elem !== null) { 386 $elem.style.transition = 'width ' + settings.timeout + 'ms ' + settings.progressBarEasing; 387 $elem.style.width = '0%'; 388 } 389 settings.TIME.START = new Date().getTime(); 390 settings.TIME.END = settings.TIME.START + settings.timeout; 391 settings.TIME.TIMER = setTimeout(function () { 392 393 clearTimeout(settings.TIME.TIMER); 394 395 if (!$toast.classList.contains(PLUGIN_NAME + '-closing')) { 396 397 that.hide($toast, settings, 'timeout'); 398 399 if (typeof callback === 'function') { 400 callback.apply(that); 401 } 402 } 403 404 }, settings.timeout); 405 406 }, 407 pause: function () { 408 409 settings.TIME.REMAINING = settings.TIME.END - new Date().getTime(); 410 411 clearTimeout(settings.TIME.TIMER); 412 413 if ($elem !== null) { 414 var computedStyle = window.getComputedStyle($elem), 415 propertyWidth = computedStyle.getPropertyValue('width'); 416 417 $elem.style.transition = 'none'; 418 $elem.style.width = propertyWidth; 419 } 420 421 if (typeof callback === 'function') { 422 setTimeout(function () { 423 callback.apply(that); 424 }, 10); 425 } 426 427 }, 428 resume: function () { 429 430 if ($elem !== null) { 431 $elem.style.transition = 'width ' + settings.TIME.REMAINING + 'ms ' + settings.progressBarEasing; 432 $elem.style.width = '0%'; 433 } 434 435 settings.TIME.END = new Date().getTime() + settings.TIME.REMAINING; 436 settings.TIME.TIMER = setTimeout(function () { 437 438 clearTimeout(settings.TIME.TIMER); 439 440 if (!$toast.classList.contains(PLUGIN_NAME + '-closing')) { 441 442 that.hide($toast, settings, 'timeout'); 443 444 if (typeof callback === 'function') { 445 callback.apply(that); 446 } 447 } 448 449 450 }, settings.TIME.REMAINING); 451 452 }, 453 reset: function () { 454 455 clearTimeout(settings.TIME.TIMER); 456 457 if ($elem !== null) {
458 $elem.style.transition = 'none'; 459 $elem.style.width = '100%'; 460 } 461 462 if (typeof callback === 'function') { 463 setTimeout(function () { 464 callback.apply(that); 465 }, 10); 466 } 467 468 } 469 }; 470 471 }; 472 473 474 /** 475 * Close the specific Toast 476 * @public 477 * @param {Object} options User settings 478 */ 479 $iziToast.hide = function ($toast, options, closedBy) { 480 481 var settings = extend(this.settings, options || {}); 482 closedBy = closedBy || null; 483 484 if (typeof $toast != 'object') { 485 $toast = document.querySelector($toast); 486 } 487 488 if ($toast.classList.contains(PLUGIN_NAME + '-opening') && closedBy !== 'timeout') 489 return false; 490 491 $toast.classList.add(PLUGIN_NAME + '-closing'); 492 493 settings.closedBy = closedBy; 494 settings.REF = $toast.getAttribute('data-iziToast-ref'); 495 496 // Overlay 497 (function () { 498
vendor: 23,246 bytes, lines 499-1132
499 var $overlay = document.querySelector('.' + PLUGIN_NAME + '-overlay'); 500 if ($overlay !== null) { 501 var refs = $overlay.getAttribute('data-iziToast-ref'); 502 refs = refs.split(','); 503 var index = refs.indexOf(settings.REF); 504 505 if (index !== -1) { 506 refs.splice(index, 1); 507 } 508 $overlay.setAttribute('data-iziToast-ref', refs.join()); 509 510 if (refs.length === 0) { 511 $overlay.classList.remove('fadeIn'); 512 $overlay.classList.add('fadeOut'); 513 setTimeout(function () { 514 $overlay.remove(); 515 }, 700); 516 } 517 } 518 519 })(); 520 521 if (settings.transitionIn || settings.transitionInMobile) { 522 $toast.classList.remove(settings.transitionIn); 523 $toast.classList.remove(settings.transitionInMobile); 524 } 525 526 if (ISMOBILE || window.innerWidth <= MOBILEWIDTH) { 527 if (settings.transitionOutMobile) 528 $toast.classList.add(settings.transitionOutMobile); 529 } else { 530 if (settings.transitionOut) 531 $toast.classList.add(settings.transitionOut); 532 } 533 var H = $toast.parentNode.offsetHeight; 534 $toast.parentNode.style.height = H + 'px'; 535 $toast.style.pointerEvents = 'none'; 536 537 if (!ISMOBILE || window.innerWidth > MOBILEWIDTH) { 538 $toast.parentNode.style.transitionDelay = '0.2s'; 539 } 540 541 try { 542 settings.closedBy = closedBy; 543 var event = new CustomEvent(PLUGIN_NAME + '-closing', {detail: settings, bubbles: true, cancelable: true}); 544 document.dispatchEvent(event); 545 } catch (ex) { 546 console.warn(ex); 547 } 548 549 setTimeout(function () { 550 551 $toast.parentNode.style.height = '0px'; 552 $toast.parentNode.style.overflow = ''; 553 554 setTimeout(function () { 555 556 $toast.parentNode.remove(); 557 try { 558 settings.closedBy = closedBy; 559 var event = new CustomEvent(PLUGIN_NAME + '-closed', {detail: settings, bubbles: true, cancelable: true}); 560 document.dispatchEvent(event); 561 } catch (ex) { 562 console.warn(ex); 563 } 564 565 if (typeof settings.onClosed !== 'undefined') { 566 settings.onClosed.apply(null, [settings, $toast, closedBy]); 567 } 568 569 }, 1000); 570 }, 200); 571 572 573 if (typeof settings.onClosing !== 'undefined') { 574 settings.onClosing.apply(null, [settings, $toast, closedBy]); 575 } 576 }; 577 578 /** 579 * Create and show the Toast 580 * @public 581 * @param {Object} options User settings 582 */ 583 $iziToast.show = function (options) { 584 585 var that = this; 586 587 // Merge user options with defaults 588 var settings = extend(CONFIG, options || {}); 589 settings = extend(defaults, settings); 590 591 settings.TIME = {}; 592 593 if (settings.toastOnce && settings.id && document.querySelectorAll('.' + PLUGIN_NAME + '#' + settings.id).length > 0) { 594 return false; 595 } 596 597 settings.REF = new Date().getTime(); 598 599 that.settings = settings; 600 601 var $DOM = { 602 body: document.querySelector('body'), 603 overlay: document.createElement('div'), 604 toast: document.createElement('div'), 605 toastBody: document.createElement('div'), 606 toastTexts: document.createElement('div'), 607 toastCapsule: document.createElement('div'), 608 icon: document.createElement('i'), 609 cover: document.createElement('div'), 610 buttons: document.createElement('div'), 611 wrapper: null 612 }; 613 614 $DOM.toast.setAttribute('data-iziToast-ref', settings.REF); 615 $DOM.toast.appendChild($DOM.toastBody); 616 $DOM.toastCapsule.appendChild($DOM.toast); 617 618 // CSS Settings 619 (function () { 620 621 $DOM.toast.classList.add(PLUGIN_NAME); 622 $DOM.toast.classList.add(PLUGIN_NAME + '-opening'); 623 $DOM.toastCapsule.classList.add(PLUGIN_NAME + '-capsule'); 624 $DOM.toastBody.classList.add(PLUGIN_NAME + '-body'); 625 $DOM.toastTexts.classList.add(PLUGIN_NAME + '-texts'); 626 627 if (ISMOBILE || window.innerWidth <= MOBILEWIDTH) { 628 if (settings.transitionInMobile) 629 $DOM.toast.classList.add(settings.transitionInMobile); 630 } else { 631 if (settings.transitionIn) 632 $DOM.toast.classList.add(settings.transitionIn); 633 } 634 635 if (settings.class) { 636 var classes = settings.class.split(' '); 637 forEach(classes, function (value, index) { 638 $DOM.toast.classList.add(value); 639 }); 640 } 641 642 if (settings.id) { 643 $DOM.toast.id = settings.id; 644 } 645 646 if (settings.rtl) { 647 $DOM.toast.classList.add(PLUGIN_NAME + '-rtl'); 648 } 649 650 if (settings.layout > 1) { 651 $DOM.toast.classList.add(PLUGIN_NAME + '-layout' + settings.layout); 652 } 653 654 if (settings.balloon) { 655 $DOM.toast.classList.add(PLUGIN_NAME + '-balloon'); 656 } 657 658 if (settings.maxWidth) { 659 if (!isNaN(settings.maxWidth)) { 660 $DOM.toast.style.maxWidth = settings.maxWidth + 'px'; 661 } else { 662 $DOM.toast.style.maxWidth = settings.maxWidth; 663 } 664 } 665 666 if (settings.theme !== '' || settings.theme !== 'light') { 667 668 $DOM.toast.classList.add(PLUGIN_NAME + '-theme-' + settings.theme); 669 } 670 671 if (settings.color) { //#, rgb, rgba, hsl 672 673 if (isColor(settings.color)) { 674 $DOM.toast.style.background = settings.color; 675 } else { 676 $DOM.toast.classList.add(PLUGIN_NAME + '-color-' + settings.color); 677 } 678 } 679 680 if (settings.backgroundColor) { 681 $DOM.toast.style.background = settings.backgroundColor; 682 if (settings.balloon) { 683 $DOM.toast.style.borderColor = settings.backgroundColor; 684 } 685 } 686 })(); 687 688 // Cover image 689 (function () { 690 if (settings.image) { 691 $DOM.cover.classList.add(PLUGIN_NAME + '-cover'); 692 $DOM.cover.style.width = settings.imageWidth + 'px'; 693 $DOM.cover.style.backgroundImage = 'url(' + settings.image + ')'; 694 695 if (settings.rtl) { 696 $DOM.toastBody.style.marginRight = (settings.imageWidth + 10) + 'px'; 697 } else { 698 $DOM.toastBody.style.marginLeft = (settings.imageWidth + 10) + 'px'; 699 } 700 $DOM.toast.appendChild($DOM.cover); 701 } 702 })(); 703 704 // Button close 705 (function () { 706 if (settings.close) { 707 708 $DOM.buttonClose = document.createElement('button'); 709 710 $DOM.buttonClose.classList.add(PLUGIN_NAME + '-close'); 711 $DOM.buttonClose.addEventListener('click', function (e) { 712 var button = e.target; 713 that.hide($DOM.toast, {}, 'button'); 714 }); 715 $DOM.toast.appendChild($DOM.buttonClose); 716 } else { 717 if (settings.rtl) { 718 $DOM.toast.style.paddingLeft = '20px'; 719 } else { 720 $DOM.toast.style.paddingRight = '20px'; 721 } 722 } 723 })(); 724 725 // Progress Bar & Timeout 726 (function () { 727 if (settings.timeout) { 728 729 if (settings.progressBar) { 730 $DOM.progressBar = document.createElement('div'); 731 $DOM.progressBarDiv = document.createElement('div'); 732 $DOM.progressBar.classList.add(PLUGIN_NAME + '-progressbar'); 733 $DOM.progressBarDiv.style.background = settings.progressBarColor; 734 $DOM.progressBar.appendChild($DOM.progressBarDiv); 735 $DOM.toast.appendChild($DOM.progressBar); 736 } 737 738 if (settings.pauseOnHover && !settings.resetOnHover) { 739 740 $DOM.toast.addEventListener('mouseenter', function (e) { 741 this.classList.add(PLUGIN_NAME + '-paused'); 742 743 that.progress($DOM.toast, settings).pause(); 744 }); 745 $DOM.toast.addEventListener('mouseleave', function (e) { 746 this.classList.remove(PLUGIN_NAME + '-paused'); 747 748 that.progress($DOM.toast, settings).resume(); 749 }); 750 } 751 752 if (settings.resetOnHover) { 753 754 $DOM.toast.addEventListener('mouseenter', function (e) { 755 this.classList.add(PLUGIN_NAME + '-reseted'); 756 757 that.progress($DOM.toast, settings).reset(); 758 }); 759 $DOM.toast.addEventListener('mouseleave', function (e) { 760 this.classList.remove(PLUGIN_NAME + '-reseted'); 761 762 that.progress($DOM.toast, settings).start(); 763 }); 764 } 765 } 766 })(); 767 768 // Icon 769 (function () { 770 if (settings.icon) { 771 $DOM.icon.setAttribute('class', PLUGIN_NAME + '-icon ' + settings.icon); 772 773 if (settings.iconText) { 774 $DOM.icon.appendChild(document.createTextNode(settings.iconText)); 775 } 776 777 if (settings.rtl) { 778 $DOM.toastBody.style.paddingRight = '33px'; 779 } else { 780 $DOM.toastBody.style.paddingLeft = '33px'; 781 } 782 783 if (settings.iconColor) { 784 $DOM.icon.style.color = settings.iconColor; 785 } 786 $DOM.toastBody.appendChild($DOM.icon); 787 } 788 })(); 789 790 // Title 791 (function () { 792 if (settings.title.length > 0) { 793 794 $DOM.strong = document.createElement('strong'); 795 $DOM.strong.classList.add(PLUGIN_NAME + '-title'); 796 $DOM.strong.appendChild(createFragElem(settings.title)); 797 $DOM.toastTexts.appendChild($DOM.strong); 798 799 if (settings.titleColor) { 800 $DOM.strong.style.color = settings.titleColor; 801 } 802 if (settings.titleSize) { 803 if (!isNaN(settings.titleSize)) { 804 $DOM.strong.style.fontSize = settings.titleSize + 'px'; 805 } else { 806 $DOM.strong.style.fontSize = settings.titleSize; 807 } 808 } 809 if (settings.titleLineHeight) { 810 if (!isNaN(settings.titleSize)) { 811 $DOM.strong.style.lineHeight = settings.titleLineHeight + 'px'; 812 } else { 813 $DOM.strong.style.lineHeight = settings.titleLineHeight; 814 } 815 } 816 } 817 })(); 818 819 // Message 820 (function () { 821 if (settings.message.length > 0) { 822 823 $DOM.p = document.createElement('p'); 824 $DOM.p.classList.add(PLUGIN_NAME + '-message'); 825 $DOM.p.appendChild(createFragElem(settings.message)); 826 $DOM.toastTexts.appendChild($DOM.p); 827 828 if (settings.messageColor) { 829 $DOM.p.style.color = settings.messageColor; 830 } 831 if (settings.messageSize) { 832 if (!isNaN(settings.titleSize)) { 833 $DOM.p.style.fontSize = settings.messageSize + 'px'; 834 } else { 835 $DOM.p.style.fontSize = settings.messageSize; 836 } 837 } 838 if (settings.messageLineHeight) { 839 840 if (!isNaN(settings.titleSize)) { 841 $DOM.p.style.lineHeight = settings.messageLineHeight + 'px'; 842 } else { 843 $DOM.p.style.lineHeight = settings.messageLineHeight; 844 } 845 } 846 } 847 })(); 848 849 if (settings.title.length > 0 && settings.message.length > 0) { 850 if (settings.rtl) { 851 $DOM.strong.style.marginLeft = '10px'; 852 } else if (settings.layout !== 2 && !settings.rtl) { 853 $DOM.strong.style.marginRight = '10px'; 854 } 855 } 856 857 $DOM.toastBody.appendChild($DOM.toastTexts); 858 859 // Buttons 860 (function () { 861 if (settings.buttons.length > 0) { 862 863 $DOM.buttons.classList.add(PLUGIN_NAME + '-buttons'); 864 865 if (settings.title.length > 0 && settings.message.length === 0) { 866 if (settings.rtl) { 867 $DOM.strong.style.marginLeft = '15px'; 868 } else { 869 $DOM.strong.style.marginRight = '15px'; 870 } 871 } 872 if (settings.message.length > 0) { 873 if (settings.rtl) { 874 $DOM.p.style.marginLeft = '15px'; 875 } else { 876 $DOM.p.style.marginRight = '15px'; 877 } 878 $DOM.p.style.marginBottom = '0'; 879 } 880 881 forEach(settings.buttons, function (value, index) { 882 $DOM.buttons.appendChild(createFragElem(value[0])); 883 884 var $btns = $DOM.buttons.childNodes; 885 886 $btns[index].classList.add(PLUGIN_NAME + '-buttons-child'); 887 888 if (value[2]) { 889 setTimeout(function () { 890 $btns[index].focus(); 891 }, 300); 892 } 893 894 $btns[index].addEventListener('click', function (e) { 895 e.preventDefault(); 896 var ts = value[1]; 897 return new ts(that, $DOM.toast); 898 }); 899 }); 900 } 901 $DOM.toastBody.appendChild($DOM.buttons); 902 })(); 903 904 // Target 905 (function () { 906 $DOM.toastCapsule.style.visibility = 'hidden'; 907 setTimeout(function () { 908 var H = $DOM.toast.offsetHeight; 909 var style = $DOM.toast.currentStyle || window.getComputedStyle($DOM.toast); 910 var marginTop = style.marginTop; 911 marginTop = marginTop.split('px'); 912 marginTop = parseInt(marginTop[0]); 913 var marginBottom = style.marginBottom; 914 marginBottom = marginBottom.split('px'); 915 marginBottom = parseInt(marginBottom[0]); 916 917 $DOM.toastCapsule.style.visibility = ''; 918 $DOM.toastCapsule.style.height = (H + marginBottom + marginTop) + 'px'; 919 920 setTimeout(function () { 921 $DOM.toastCapsule.style.height = 'auto'; 922 if (settings.target) { 923 $DOM.toastCapsule.style.overflow = 'visible'; 924 } 925 }, 500); 926 927 if (settings.timeout) { 928 that.progress($DOM.toast).start(); 929 } 930 }, 100); 931 })(); 932 933 // Target 934 (function () { 935 var position = settings.position; 936 937 if (settings.target) { 938 939 $DOM.wrapper = document.querySelector(settings.target); 940 $DOM.wrapper.classList.add(PLUGIN_NAME + '-target'); 941 942 if (settings.targetFirst) { 943 $DOM.wrapper.insertBefore($DOM.toastCapsule, $DOM.wrapper.firstChild); 944 } else { 945 $DOM.wrapper.appendChild($DOM.toastCapsule); 946 } 947 948 } else { 949 950 if (POSITIONS.indexOf(settings.position) == -1) { 951 console.warn('[' + PLUGIN_NAME + '] Incorrect position.\nIt can be ⺠' + POSITIONS); 952 return; 953 } 954 955 if (ISMOBILE || window.innerWidth <= MOBILEWIDTH) { 956 if (settings.position == 'bottomLeft' || settings.position == 'bottomRight' || settings.position == 'bottomCenter') { 957 position = PLUGIN_NAME + '-wrapper-bottomCenter'; 958 } else if (settings.position == 'topLeft' || settings.position == 'topRight' || settings.position == 'topCenter') { 959 position = PLUGIN_NAME + '-wrapper-topCenter'; 960 } else { 961 position = PLUGIN_NAME + '-wrapper-center'; 962 } 963 } else { 964 position = PLUGIN_NAME + '-wrapper-' + position; 965 } 966 $DOM.wrapper = document.querySelector('.' + PLUGIN_NAME + '-wrapper.' + position); 967 968 if (!$DOM.wrapper) { 969 $DOM.wrapper = document.createElement('div'); 970 $DOM.wrapper.classList.add(PLUGIN_NAME + '-wrapper'); 971 $DOM.wrapper.classList.add(position); 972 document.body.appendChild($DOM.wrapper); 973 } 974 if (settings.position == 'topLeft' || settings.position == 'topCenter' || settings.position == 'topRight') { 975 $DOM.wrapper.insertBefore($DOM.toastCapsule, $DOM.wrapper.firstChild); 976 } else { 977 $DOM.wrapper.appendChild($DOM.toastCapsule); 978 } 979 } 980 981 if (!isNaN(settings.zindex)) { 982 $DOM.wrapper.style.zIndex = settings.zindex; 983 } else { 984 console.warn('[' + PLUGIN_NAME + '] Invalid zIndex.'); 985 } 986 })(); 987 988 // Overlay 989 (function () { 990 991 if (settings.overlay) { 992 993 if (document.querySelector('.' + PLUGIN_NAME + '-overlay.fadeIn') !== null) { 994 995 $DOM.overlay = document.querySelector('.' + PLUGIN_NAME + '-overlay'); 996 $DOM.overlay.setAttribute('data-iziToast-ref', $DOM.overlay.getAttribute('data-iziToast-ref') + ',' + settings.REF); 997 998 if (!isNaN(settings.zindex) && settings.zindex !== null) { 999 $DOM.overlay.style.zIndex = settings.zindex - 1; 1000 } 1001 } else { 1002 1003 $DOM.overlay.classList.add(PLUGIN_NAME + '-overlay'); 1004 $DOM.overlay.classList.add('fadeIn'); 1005 $DOM.overlay.style.background = settings.overlayColor; 1006 $DOM.overlay.setAttribute('data-iziToast-ref', settings.REF); 1007 if (!isNaN(settings.zindex) && settings.zindex !== null) { 1008 $DOM.overlay.style.zIndex = settings.zindex - 1; 1009 } 1010 document.querySelector('body').appendChild($DOM.overlay); 1011 } 1012 1013 if (settings.overlayClose) { 1014 1015 $DOM.overlay.removeEventListener('click', {}); 1016 $DOM.overlay.addEventListener('click', function (e) { 1017 that.hide($DOM.toast, {}, 'overlay'); 1018 }); 1019 } else { 1020 $DOM.overlay.removeEventListener('click', {}); 1021 } 1022 1023 } 1024 1025 })(); 1026 1027 // Inside animations 1028 (function () { 1029 if (settings.animateInside) { 1030 $DOM.toast.classList.add(PLUGIN_NAME + '-animateInside'); 1031 1032 var animationTimes = [200, 100, 300]; 1033 if (settings.transitionIn == 'bounceInLeft') { 1034 animationTimes = [400, 200, 400]; 1035 } 1036 1037 if (settings.title.length > 0) { 1038 setTimeout(function () { 1039 $DOM.strong.classList.add('slideIn'); 1040 }, animationTimes[0]); 1041 } 1042 1043 if (settings.message.length > 0) { 1044 setTimeout(function () { 1045 $DOM.p.classList.add('slideIn'); 1046 }, animationTimes[1]); 1047 } 1048 1049 if (settings.icon) { 1050 setTimeout(function () { 1051 $DOM.icon.classList.add('revealIn'); 1052 }, animationTimes[2]); 1053 } 1054 1055 if (settings.buttons.length > 0 && $DOM.buttons) { 1056 var counter = 150; 1057 forEach($DOM.buttons.childNodes, function (element, index) { 1058 1059 setTimeout(function () { 1060 element.classList.add('revealIn'); 1061 }, counter); 1062 counter = counter + 150; 1063 }); 1064 } 1065 } 1066 })(); 1067 1068 settings.onOpening.apply(null, [settings, $DOM.toast]); 1069 1070 try { 1071 var event = new CustomEvent(PLUGIN_NAME + '-opening', {detail: settings, bubbles: true, cancelable: true}); 1072 document.dispatchEvent(event); 1073 } catch (ex) { 1074 console.warn(ex); 1075 } 1076 1077 setTimeout(function () { 1078 1079 $DOM.toast.classList.remove(PLUGIN_NAME + '-opening'); 1080 $DOM.toast.classList.add(PLUGIN_NAME + '-opened'); 1081 1082 try { 1083 var event = new CustomEvent(PLUGIN_NAME + '-opened', {detail: settings, bubbles: true, cancelable: true}); 1084 document.dispatchEvent(event); 1085 } catch (ex) { 1086 console.warn(ex); 1087 } 1088 1089 settings.onOpened.apply(null, [settings, $DOM.toast]); 1090 }, 1000); 1091 1092 if (settings.drag) { 1093 1094 if (ACCEPTSTOUCH) { 1095 1096 $DOM.toast.addEventListener('touchstart', function (e) { 1097 drag.startMoving(this, that, settings, e); 1098 }, false); 1099 1100 $DOM.toast.addEventListener('touchend', function (e) { 1101 drag.stopMoving(this, e); 1102 }, false); 1103 } else { 1104 1105 $DOM.toast.addEventListener('mousedown', function (e) { 1106 e.preventDefault(); 1107 drag.startMoving(this, that, settings, e); 1108 }, false); 1109 1110 $DOM.toast.addEventListener('mouseup', function (e) { 1111 e.preventDefault(); 1112 drag.stopMoving(this, e); 1113 }, false); 1114 } 1115 } 1116 1117 if (settings.closeOnEscape) { 1118 1119 document.addEventListener('keyup', function (evt) { 1120 evt = evt || window.event; 1121 if (evt.keyCode == 27) { 1122 that.hide($DOM.toast, {}, 'esc'); 1123 } 1124 }); 1125 } 1126 1127 that.toast = $DOM.toast; 1128 }; 1129 1130 1131 return $iziToast; 1132});
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.