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