https://app.projectpegasus.com/Scripts/lib/widgster.js

1/**
2 * Widgster plugin.
3 */
4( function( global, factory ) {
5    "use strict";
6
7    if (global.jQuery && global.jQuery.fn) {
8        factory(global.jQuery);
9    } else {
10        console.warn("Widgster must be executed in a browser environment with jQuery defined");
11    }
12} )( typeof window !== "undefined" ? window : this, function( $ ) {
13    // WIDGSTER CLASS DEFINITION
14    // ======================
15
16    var Widgster = function (el, options) {
17        this.$element = $(el);
18        this.$collapse = this.$element.find('[data-widgster=collapse]');
19        this.$expand = this.$element.find('[data-widgster=expand]');
20        this.$fullscreen = this.$element.find('[data-widgster=fullscreen]');
21        this.$restore = this.$element.find('[data-widgster=restore]');
22        this.options = options;
23        this.collapsed = options.collapsed;
24        this.fullscreened = options.fullscreened;
25
26        this._initHandlers();
27
28        if (this.collapsed){
29            this.collapse(false);
30        } else {
31            this.$expand.hide();
32        }
33
34        if (this.fullscreened){
35            this.fullscreen();
36        } else {
37            this.$restore.hide();
38        }
39
40        this.options.autoload && this.load();
41        var interval = parseInt(this.options.autoload);
42        if (!isNaN(interval)){
43            var widgster = this;
44            this._autoloadInterval = setInterval(function(){
45                widgster.load();
46            }, interval)
47        }
48    };
49
50    Widgster.DEFAULTS = {
51        collapsed: false,
52        fullscreened: false,
53        transitionDuration: 150,
54        bodySelector: '.body',
55        showLoader: true,
56        autoload: false,
57        loaderTemplate: '<div style="text-align: center; margin-top: 10px;">Loading...</div>',
58        /**
59         * provide a way to insert a prompt before removing widget
60         * @param callback
61         */
62        closePrompt: function(callback){
63            callback()
64        }
65    };
66
67    Widgster.prototype.collapse = function(animate){
68        animate = typeof animate == "undefined" ? true : animate;
69        var e = $.Event('collapse.widgster');
70        this.$element.trigger(e);
71        if (e.isDefaultPrevented()) return;
72
73        var widgster = this,
74            duration = animate ? this.options.transitionDuration : 0;
75        this.$element.find(this.options.bodySelector).slideUp(duration, function(){
76            widgster.$element.addClass('collapsed');
77            widgster.$element.trigger($.Event('collapsed.widgster'));
78            widgster.collapsed = true;
79        });
80
81        this.$collapse.hide();
82        this.$expand.show();
83
84        return false;
85    };
86
87    Widgster.prototype.expand = function(animate){
88        animate = typeof animate == "undefined" ? true : animate;
89        var e = $.Event('expand.widgster');
90        this.$element.trigger(e);
91        if (e.isDefaultPrevented()) return;
92
93        var widgster = this,
94            duration = animate ? this.options.transitionDuration : 0;
95        this.$element.find(this.options.bodySelector).slideDown(duration, function(){
96            widgster.$element.removeClass('collapsed');
97            widgster.$element.trigger($.Event('expanded.widgster'));
98            widgster.collapsed = false;
99        });
100
101        this.$collapse.show();
102        this.$expand.hide();
103
104        return false;
105    };
106
107    Widgster.prototype.close = function(){
108
109        this.options.closePrompt && this.options.closePrompt($.proxy(this._doClose, this));
110
111        return false;
112    };
113
114    Widgster.prototype.load = function(){
115        var e = $.Event('load.widgster');
116
117        this.$element.trigger(e);
118
119        if (e.isDefaultPrevented()) return;
120
121        var widgster = this;
122        this.$element.find(this.options.bodySelector).load(this.options.load, function(responseText, textStatus, xhr){
123            widgster.expand();
124            widgster.options.showLoader && widgster._hideLoader();
125            widgster.$element.trigger($.Event('loaded.widgster', {
126                responseText: responseText,
127                textStatus: textStatus,
128                xhr: xhr
129            }))
130        });
131        this.options.showLoader && this._showLoader();
132
133        return false;
134    };
135
136    Widgster.prototype.fullscreen = function(){
137        var e = $.Event('fullscreen.widgster');
138
139        this.$element.trigger(e);
140
141        if (e.isDefaultPrevented()) return;
142
143        this.$element.css({
144            position: 'fixed',
145            top: 0,
146            right: 0,
147            bottom: 0,
148            left: 0,
149            margin: 0,
150            'z-index': 10000
151        });
152        $('body').css('overflow', 'hidden');
153
154        this.wasCollapsed = this.collapsed;
155        this.expand(false);
156
157        this.$fullscreen.hide();
158        this.$restore.show();
159
160        this.$collapse.hide(); this.$expand.hide();
161
162        this.$element.addClass('fullscreened');
163
164        this.$element.trigger($.Event('fullscreened.widgster'));
165
166        return false;
167    };
168
169    Widgster.prototype.restore = function(){
170        var e = $.Event('restore.widgster');
171
172        this.$element.trigger(e);
173
174        if (e.isDefaultPrevented()) return;
175
176        this.$element.css({
177            position: '',
178            top: '',
179            right: '',
180            bottom: '',
181            left: '',
182            margin: '',
183            'z-index': ''
184        });
185        $('body').css('overflow', '');
186
187        this.$fullscreen.show();
188        this.$restore.hide();
189
190        if (this.collapsed){
191            this.$collapse.hide(); this.$expand.show();
192        } else {
193            this.$collapse.show(); this.$expand.hide();
194        }
195
196        this.wasCollapsed && this.collapse(false);
197
198        this.$element.removeClass('fullscreened');
199
200        this.$element.trigger($.Event('restored.widgster'));
201
202        return false;
203    };
204
205    Widgster.prototype._doClose = function(){
206        //could have been remove.widgster, but http://bugs.jquery.com/ticket/14600
207        var e = $.Event('close.widgster');
208
209        this.$element.trigger(e);
210
211        if (e.isDefaultPrevented()) return;
212
213        $('body').css('overflow', '');
214
215        this.$element.detach();
216
217        e = $.Event('closed.widgster', {$element: this.$element});
218
219        this.$element.trigger(e);
220    };
221
222    Widgster.prototype._showLoader = function(){
223        var $body = this.$element.find(this.options.bodySelector);
224
225        this.$loaderWrap = this.$element.find('.widgster-loader-wrap');
226
227        //create loader html if does not exist
228        if (this.$loaderWrap.length == 0){
229            this.$loaderWrap = $('<div class="widgster-loader-wrap" style="position: absolute; top: 0; right: 0; bottom: 0; ' +
230                'left: 0; display: none"></div>');
231            this.$element.append(this.$loaderWrap);
232        }
233        this.$loaderWrap.html(this.options.loaderTemplate);
234        this.$loaderWrap.css({
235            'margin-top': $body.position().top
236        });
237        if (!this.collapsed){
238            $body.fadeTo(this.options.transitionDuration, 0);
239            this.$loaderWrap.fadeIn(this.options.transitionDuration)
240        }
241    };
242
243    Widgster.prototype._hideLoader = function(){
244        this.$loaderWrap.fadeOut(this.options.transitionDuration);
245        this.$element.find(this.options.bodySelector).fadeTo(this.options.transitionDuration, 1);
246    };
247
248    /**
249     * Attach all required widgster functions to data-widgster elements.
250     * @private
251     */
252    Widgster.prototype._initHandlers = function(){
253        this.$element.on('click.collapse.widgster', '[data-widgster=collapse]', $.proxy(this.collapse, this));
254        this.$element.on('click.expand.widgster', '[data-widgster=expand]', $.proxy(this.expand, this));
255        this.$element.on('click.close.widgster', '[data-widgster=close]', $.proxy(this.close, this));
256        this.$element.on('click.load.widgster', '[data-widgster=load]', $.proxy(this.load, this));
257        this.$element.on('click.fullscreen.widgster', '[data-widgster=fullscreen]', $.proxy(this.fullscreen, this));
258        this.$element.on('click.restore.widgster', '[data-widgster=restore]', $.proxy(this.restore, this));
259    };
260
261
262    // NAMESPACED DATA ATTRIBUTES
263    // =======================
264
265    function getNamespacedData(namespace, data){
266        var namespacedData = {};
267        for (var key in data){
268            // key starts with namespace
269            if (key.slice(0, namespace.length) == namespace){
270                var namespacedKey = key.slice(namespace.length, key.length);
271                namespacedKey = namespacedKey.charAt(0).toLowerCase() + namespacedKey.slice(1);
272                namespacedData[namespacedKey] = data[key];
273            }
274        }
275
276        return namespacedData;
277    }
278
279    // WIDGSTER PLUGIN DEFINITION
280    // =======================
281
282    $.fn.widgster = function (option) {
283        return this.each(function () {
284            var $this   = $(this);
285            var data    = $this.data('widgster');
286            var options = $.extend({}, Widgster.DEFAULTS, getNamespacedData('widgster', $this.data()), typeof option == 'object' && option);
287
288            if (!data) $this.data('widgster', new Widgster(this, options));
289            if (typeof option == 'string') data[option]();
290        })
291    };
292
293    $.fn.widgster.Constructor = Widgster;
294});