https://ghonchehoil.com/backend/web/rest_library/toast/jquery.toast.js

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">&times;</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();
170                });
171            };
172
173            if ( typeof this.options.afterShown == 'function' ) {
174                this._toastEl.on('afterShown', function () {
175                    that.options.afterShown();
176                });
177            };
178
179            if ( typeof this.options.beforeHide == 'function' ) {
180                this._toastEl.on('beforeHide', function () {
181                    that.options.beforeHide();
182                });
183            };
184
185            if ( typeof this.options.afterHidden == 'function' ) {
186                this._toastEl.on('afterHidden', function () {
187                    that.options.afterHidden();
188                });
189            };          
190        },
191
192        addToDom: function () {
193
194             var _container = $('.jq-toast-wrap');
195             

196             if ( _container.length === 0 ) {
197                
198                _container = $('<div></div>',{
199                    class: "jq-toast-wrap",
200                    role: "alert",
201                    "aria-live": "polite"
202                });
203
204                $('body').append( _container );
205
206             } else if ( !this.options.stack || isNaN( parseInt(this.options.stack, 10) ) ) {
207                _container.empty();
208             }
209
210             _container.find('.jq-toast-single:hidden').remove();
211
212             _container.append( this._toastEl );
213
214            if ( this.options.stack && !isNaN( parseInt( this.options.stack ), 10 ) ) {
215                
216                var _prevToastCount = _container.find('.jq-toast-single').length,
217                    _extToastCount = _prevToastCount - this.options.stack;
218
219                if ( _extToastCount > 0 ) {
220                    $('.jq-toast-wrap').find('.jq-toast-single').slice(0, _extToastCount).remove();
221                };
222
223            }
224
225            this._container = _container;
226        },
227
228        canAutoHide: function () {
229            return ( this.options.hideAfter !== false ) && !isNaN( parseInt( this.options.hideAfter, 10 ) );
230        },
231
232        processLoader: function () {
233            // Show the loader only, if auto-hide is on and loader is demanded
234            if (!this.canAutoHide() || this.options.loader === false) {
235                return false;
236            }
237
238            var loader = this._toastEl.find('.jq-toast-loader');
239
240            // 400 is the default time that jquery uses for fade/slide
241            // Divide by 1000 for milliseconds to seconds conversion
242            var transitionTime = (this.options.hideAfter - 400) / 1000 + 's';
243            var loaderBg = this.options.loaderBg;
244
245            var style = loader.attr('style') || '';
246            style = style.substring(0, style.indexOf('-webkit-transition')); // Remove the last transition definition
247
248            style += '-webkit-transition: width ' + transitionTime + ' ease-in; \
249                      -o-transition: width ' + transitionTime + ' ease-in; \
250                      transition: width ' + transitionTime + ' ease-in; \
251                      background-color: ' + loaderBg + ';';
252
253
254            loader.attr('style', style).addClass('jq-toast-loaded');
255        },
256
257        animate: function () {
258
259            var that = this;
260
261            this._toastEl.hide();
262
263            this._toastEl.trigger('beforeShow');
264
265            if ( this.options.showHideTransition.toLowerCase() === 'fade' ) {
266                this._toastEl.fadeIn(function ( ){
267                    that._toastEl.trigger('afterShown');
268                });
269            } else if ( this.options.showHideTransition.toLowerCase() === 'slide' ) {
270                this._toastEl.slideDown(function ( ){
271                    that._toastEl.trigger('afterShown');
272                });
273            } else {
274                this._toastEl.show(function ( ){
275                    that._toastEl.trigger('afterShown');
276                });
277            }
278
279            if (this.canAutoHide()) {
280
281                var that = this;
282
283                window.setTimeout(function(){
284                    
285                    if ( that.options.showHideTransition.toLowerCase() === 'fade' ) {
286                        that._toastEl.trigger('beforeHide');
287                        that._toastEl.fadeOut(function () {
288                            that._toastEl.trigger('afterHidden');
289                        });
290                    } else if ( that.options.showHideTransition.toLowerCase() === 'slide' ) {
291                        that._toastEl.trigger('beforeHide');
292                        that._toastEl.slideUp(function () {
293                            that._toastEl.trigger('afterHidden');
294                        });
295                    } else {
296                        that._toastEl.trigger('beforeHide');
297                        that._toastEl.hide(function () {
298                            that._toastEl.trigger('afterHidden');
299                        });
300                    }
301
302                }, this.options.hideAfter);
303            };
304        },
305
306        reset: function ( resetWhat ) {
307
308            if ( resetWhat === 'all' ) {
309                $('.jq-toast-wrap').remove();
310            } else {
311                this._toastEl.remove();
312            }
313
314        },
315
316        update: function(options) {
317            this.prepareOptions(options, this.options);
318            this.setup();
319            this.bindToast();
320        }
321    };
322    
323    $.toast = function(options) {
324        var toast = Object.create(Toast);
325        toast.init(options, this);
326
327        return {
328            
329            reset: function ( what ) {
330                toast.reset( what );
331            },
332
333            update: function( options ) {
334                toast.update( options );
335            }
336        }
337    };
338
339    $.toast.options = {
340        text: '',
341        heading: '',
342        showHideTransition: 'fade',
343        allowToastClose: true,
344        hideAfter: 3000,
345        loader: true,
346        loaderBg: '#9EC600',
347        stack: 5,
348        position: 'bottom-left',
349        bgColor: false,
350        textColor: false,
351        textAlign: 'left',
352        icon: false,
353        beforeShow: function () {},
354        afterShown: function () {},
355        beforeHide: function () {},
356        afterHidden: function () {}
357    };
358
359})( jQuery, window, document );