API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Sep 4th, 2018
361
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
JavaScript 13.60 KB | None | 0 0
raw download clone embed print report
  1. // jQuery toast plugin created by Kamran Ahmed copyright MIT license 2015
  2. // !!! Requires Jquery timer plugin http://jchavannes.com/jquery-timer
  3.  
  4. if ( typeof Object.create !== 'function' ) {
  5.     Object.create = function( obj ) {
  6.         function F() {}
  7.         F.prototype = obj;
  8.         return new F();
  9.     };
  10. }
  11.  
  12. (function( $, window, document, undefined ) {
  13.  
  14.     "use strict";
  15.    
  16.     var Toast = {
  17.  
  18.         autoclosetimer: null,
  19.  
  20.         _positionClasses : ['bottom-left', 'bottom-right', 'top-right', 'top-left', 'bottom-center', 'top-center', 'mid-center'],
  21.         _defaultIcons : ['success', 'error', 'info', 'warning'],
  22.  
  23.         init: function (options, elem) {
  24.             this.prepareOptions(options, $.toast.options);
  25.             this.process();
  26.         },
  27.  
  28.         prepareOptions: function(options, options_to_extend) {
  29.             var _options = {};
  30.             if ( ( typeof options === 'string' ) || ( options instanceof Array ) ) {
  31.                 _options.text = options;
  32.             } else {
  33.                 _options = options;
  34.             }
  35.             this.options = $.extend( {}, options_to_extend, _options );
  36.         },
  37.  
  38.         process: function () {
  39.             this.setup();
  40.             this.addToDom();
  41.             this.position();
  42.             this.bindToast();
  43.             this.animate();
  44.         },
  45.  
  46.         setup: function () {
  47.            
  48.             var _toastContent = '';
  49.            
  50.             this._toastEl = this._toastEl || $('<div></div>', {
  51.                 class : 'jq-toast-single'
  52.             });
  53.  
  54.             // For the loader on top
  55.             _toastContent += '<span class="jq-toast-loader"></span>';            
  56.  
  57.             if ( this.options.allowToastClose ) {
  58.                 _toastContent += '<span class="close-jq-toast-single">&times;</span>';
  59.             };
  60.  
  61.             if ( this.options.text instanceof Array ) {
  62.  
  63.                 if ( this.options.heading ) {
  64.                     _toastContent +='<h2 class="jq-toast-heading">' + this.options.heading + '</h2>';
  65.                 };
  66.  
  67.                 _toastContent += '<ul class="jq-toast-ul">';
  68.                 for (var i = 0; i < this.options.text.length; i++) {
  69.                     _toastContent += '<li class="jq-toast-li" id="jq-toast-item-' + i + '">' + this.options.text[i] + '</li>';
  70.                 }
  71.                 _toastContent += '</ul>';
  72.  
  73.             } else {
  74.                 if ( this.options.heading ) {
  75.                     _toastContent +='<h2 class="jq-toast-heading">' + this.options.heading + '</h2>';
  76.                 };
  77.                 _toastContent += this.options.text;
  78.             }
  79.  
  80.             this._toastEl.html( _toastContent );
  81.  
  82.             if ( this.options.bgColor !== false ) {
  83.                 this._toastEl.css("background-color", this.options.bgColor);
  84.             };
  85.  
  86.             if ( this.options.textColor !== false ) {
  87.                 this._toastEl.css("color", this.options.textColor);
  88.             };
  89.  
  90.             if ( this.options.textAlign ) {
  91.                 this._toastEl.css('text-align', this.options.textAlign);
  92.             }
  93.  
  94.             if ( this.options.icon !== false ) {
  95.                 this._toastEl.addClass('jq-has-icon');
  96.  
  97.                 if ( $.inArray(this.options.icon, this._defaultIcons) !== -1 ) {
  98.                     this._toastEl.addClass('jq-icon-' + this.options.icon);
  99.                 };
  100.             };
  101.  
  102.             if ( this.options.class !== false ){
  103.                 this._toastEl.addClass(this.options.class)
  104.             }
  105.         },
  106.  
  107.         position: function () {
  108.             if ( ( typeof this.options.position === 'string' ) && ( $.inArray( this.options.position, this._positionClasses) !== -1 ) ) {
  109.  
  110.                 if ( this.options.position === 'bottom-center' ) {
  111.                     this._container.css({
  112.                         left: ( $(window).outerWidth() / 2 ) - this._container.outerWidth()/2,
  113.                         bottom: 20
  114.                     });
  115.                 } else if ( this.options.position === 'top-center' ) {
  116.                     this._container.css({
  117.                         left: ( $(window).outerWidth() / 2 ) - this._container.outerWidth()/2,
  118.                         top: 20
  119.                     });
  120.                 } else if ( this.options.position === 'mid-center' ) {
  121.                     this._container.css({
  122.                         left: ( $(window).outerWidth() / 2 ) - this._container.outerWidth()/2,
  123.                         top: ( $(window).outerHeight() / 2 ) - this._container.outerHeight()/2
  124.                     });
  125.                 } else {
  126.                     this._container.addClass( this.options.position );
  127.                 }
  128.  
  129.             } else if ( typeof this.options.position === 'object' ) {
  130.                 this._container.css({
  131.                     top : this.options.position.top ? this.options.position.top : 'auto',
  132.                     bottom : this.options.position.bottom ? this.options.position.bottom : 'auto',
  133.                     left : this.options.position.left ? this.options.position.left : 'auto',
  134.                     right : this.options.position.right ? this.options.position.right : 'auto'
  135.                 });
  136.             } else {
  137.                 this._container.addClass( 'bottom-left' );
  138.             }
  139.         },
  140.  
  141.         bindToast: function () {
  142.  
  143.             var that = this;
  144.  
  145.             this._toastEl.on('afterShown', function () {
  146.                 that.processLoader();
  147.             });
  148.  
  149.             this._toastEl.find('.close-jq-toast-single').on('click', function ( e ) {
  150.  
  151.                 e.preventDefault();
  152.  
  153.                 if( that.options.showHideTransition === 'fade') {
  154.                     that._toastEl.trigger('beforeHide');
  155.                     that._toastEl.fadeOut(function () {
  156.                         that._toastEl.trigger('afterHidden');
  157.                     });
  158.                 } else if ( that.options.showHideTransition === 'slide' ) {
  159.                     that._toastEl.trigger('beforeHide');
  160.                     that._toastEl.slideUp(function () {
  161.                         that._toastEl.trigger('afterHidden');
  162.                     });
  163.                 } else {
  164.                     that._toastEl.trigger('beforeHide');
  165.                     that._toastEl.hide(function () {
  166.                         that._toastEl.trigger('afterHidden');
  167.                     });
  168.                 }
  169.             });
  170.  
  171.             if ( typeof this.options.beforeShow == 'function' ) {
  172.                 this._toastEl.on('beforeShow', function () {
  173.                     that.options.beforeShow(that._toastEl);
  174.                 });
  175.             };
  176.  
  177.             if ( typeof this.options.afterShown == 'function' ) {
  178.                 this._toastEl.on('afterShown', function () {
  179.                     that.options.afterShown(that._toastEl);
  180.                 });
  181.             };
  182.  
  183.             if ( typeof this.options.beforeHide == 'function' ) {
  184.                 this._toastEl.on('beforeHide', function () {
  185.                     that.options.beforeHide(that._toastEl);
  186.                 });
  187.             };
  188.  
  189.             if ( typeof this.options.afterHidden == 'function' ) {
  190.                 this._toastEl.on('afterHidden', function () {
  191.                     that.options.afterHidden(that._toastEl);
  192.                 });
  193.             };
  194.  
  195.             if ( typeof this.options.onClick == 'function' ) {
  196.                 this._toastEl.on('click', function () {
  197.                     that.options.onClick(that._toastEl);
  198.                 });
  199.             };
  200.  
  201.             this._toastEl.on('mouseenter', function () {
  202.                 Toast.autoclosetimer.pause();
  203.             });
  204.  
  205.             this._toastEl.on('mouseleave', function () {
  206.                 Toast.autoclosetimer.once();
  207.             });
  208.  
  209.         },
  210.  
  211.         addToDom: function () {
  212.  
  213.              var _container = $('.jq-toast-wrap');
  214.              
  215.              if ( _container.length === 0 ) {
  216.                
  217.                 _container = $('<div></div>',{
  218.                     class: "jq-toast-wrap",
  219.                     role: "alert",
  220.                     "aria-live": "polite"
  221.                 });
  222.  
  223.                 $('body').append( _container );
  224.  
  225.              } else if ( !this.options.stack || isNaN( parseInt(this.options.stack, 10) ) ) {
  226.                 _container.empty();
  227.              }
  228.  
  229.              _container.find('.jq-toast-single:hidden').remove();
  230.  
  231.              _container.append( this._toastEl );
  232.  
  233.             if ( this.options.stack && !isNaN( parseInt( this.options.stack ), 10 ) ) {
  234.                
  235.                 var _prevToastCount = _container.find('.jq-toast-single').length,
  236.                     _extToastCount = _prevToastCount - this.options.stack;
  237.  
  238.                 if ( _extToastCount > 0 ) {
  239.                     $('.jq-toast-wrap').find('.jq-toast-single').slice(0, _extToastCount).remove();
  240.                 };
  241.  
  242.             }
  243.  
  244.             this._container = _container;
  245.         },
  246.  
  247.         canAutoHide: function () {
  248.             return ( this.options.hideAfter !== false ) && !isNaN( parseInt( this.options.hideAfter, 10 ) );
  249.         },
  250.  
  251.         processLoader: function () {
  252.             // Show the loader only, if auto-hide is on and loader is demanded
  253.             if (!this.canAutoHide() || this.options.loader === false) {
  254.                 return false;
  255.             }
  256.  
  257.             var loader = this._toastEl.find('.jq-toast-loader');
  258.  
  259.             // 400 is the default time that jquery uses for fade/slide
  260.             // Divide by 1000 for milliseconds to seconds conversion
  261.             var transitionTime = (this.options.hideAfter - 400) / 1000 + 's';
  262.             var loaderBg = this.options.loaderBg;
  263.  
  264.             var style = loader.attr('style') || '';
  265.             style = style.substring(0, style.indexOf('-webkit-transition')); // Remove the last transition definition
  266.  
  267.             style += '-webkit-transition: width ' + transitionTime + ' ease-in; \
  268.                      -o-transition: width ' + transitionTime + ' ease-in; \
  269.                      transition: width ' + transitionTime + ' ease-in; \
  270.                      background-color: ' + loaderBg + ';';
  271.  
  272.  
  273.             loader.attr('style', style).addClass('jq-toast-loaded');
  274.         },
  275.  
  276.         animate: function () {
  277.  
  278.             var that = this;
  279.  
  280.             this._toastEl.hide();
  281.  
  282.             this._toastEl.trigger('beforeShow');
  283.  
  284.             if ( this.options.showHideTransition.toLowerCase() === 'fade' ) {
  285.                 this._toastEl.fadeIn(function ( ){
  286.                     that._toastEl.trigger('afterShown');
  287.                 });
  288.             } else if ( this.options.showHideTransition.toLowerCase() === 'slide' ) {
  289.                 this._toastEl.slideDown(function ( ){
  290.                     that._toastEl.trigger('afterShown');
  291.                 });
  292.             } else {
  293.                 this._toastEl.show(function ( ){
  294.                     that._toastEl.trigger('afterShown');
  295.                 });
  296.             }
  297.  
  298.             if (this.canAutoHide()) {
  299.  
  300.                 var that = this;
  301.  
  302.                 Toast.autoclosetimer = $.timer(function() {
  303.  
  304.                     if ( that.options.showHideTransition.toLowerCase() === 'fade' ) {
  305.                         that._toastEl.trigger('beforeHide');
  306.                         that._toastEl.fadeOut(function () {
  307.                             that._toastEl.trigger('afterHidden');
  308.                         });
  309.                     } else if ( that.options.showHideTransition.toLowerCase() === 'slide' ) {
  310.                         that._toastEl.trigger('beforeHide');
  311.                         that._toastEl.slideUp(function () {
  312.                             that._toastEl.trigger('afterHidden');
  313.                         });
  314.                     } else {
  315.                         that._toastEl.trigger('beforeHide');
  316.                         that._toastEl.hide(function () {
  317.                             that._toastEl.trigger('afterHidden');
  318.                         });
  319.                     }
  320.  
  321.                 });
  322.  
  323.                 Toast.autoclosetimer.set({ time : this.options.hideAfter, autostart : true });
  324.  
  325.             };
  326.         },
  327.  
  328.         reset: function ( resetWhat ) {
  329.  
  330.             if ( resetWhat === 'all' ) {
  331.                 $('.jq-toast-wrap').remove();
  332.             } else {
  333.                 this._toastEl.remove();
  334.             }
  335.  
  336.         },
  337.  
  338.         update: function(options) {
  339.             this.prepareOptions(options, this.options);
  340.             this.setup();
  341.             this.bindToast();
  342.         },
  343.        
  344.         close: function() {
  345.             this._toastEl.find('.close-jq-toast-single').click();
  346.         }
  347.     };
  348.    
  349.     $.toast = function(options) {
  350.         var toast = Object.create(Toast);
  351.         toast.init(options, this);
  352.  
  353.         return {
  354.            
  355.             reset: function ( what ) {
  356.                 toast.reset( what );
  357.             },
  358.  
  359.             update: function( options ) {
  360.                 toast.update( options );
  361.             },
  362.            
  363.             close: function( ) {
  364.                 toast.close( );
  365.             }
  366.         }
  367.     };
  368.  
  369.     $.toast.options = {
  370.         text: '',
  371.         heading: '',
  372.         showHideTransition: 'fade',
  373.         allowToastClose: true,
  374.         hideAfter: 3000,
  375.         loader: true,
  376.         loaderBg: '#9EC600',
  377.         stack: 5,
  378.         position: 'bottom-left',
  379.         bgColor: false,
  380.         textColor: false,
  381.         textAlign: 'left',
  382.         icon: false,
  383.         beforeShow: function () {},
  384.         afterShown: function () {},
  385.         beforeHide: function () {},
  386.         afterHidden: function () {},
  387.         onClick: function () { }
  388.     };
  389.  
  390. })( jQuery, window, document );
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!