https://lk.spacenet.ru/lbweb-client/js/jquery.popbox.js

1/**
2 * Popup box plugin to set container visibility
3 * Valiable options in the a tag:
4 * data-popbox-id - use element with id as pop bax
5 * data-popbox-modal - set dialog in the center of the window othervise dialog will be shown behind the caller
6 * data-popbox-align -
7 *         tl - left top
8 *         bl - left bottom
9 *         tr - right top
10 *         br - right top
11 * data-popbox-close-on-out-click {Boolean} - close dialog if there was mouse click out the box
12 * data-popbox-close-on {String} - set close button class selector
13 */
14
15
16 (function($) {
17     // Global collection
18     var Dialog = $(),
19         API,
20         handler;
21
22     $.popbox = (function() {
23         var boxes = {};
24
25         return {
26             register: function(id, params) {
27                 boxes[id] = params;
28             },
29             show: function(id) {
30                 if (boxes[id]) {
31                     $.fn.showPopBox('#'+id, boxes[id]);
32                 }
33             }
34         };
35     }());
36
37     $(document).bind('keyup', function(event) {
38         if (event.keyCode == 27) {
39             Dialog.trigger('box:closeesc');
40         }
41     });
42
43     $(document).bind('click', function(event) {
44         var shouldClose = true;
45
46         if (!$(event.target).closest(Dialog.has(':visible')).length) {
47             Dialog.trigger('box:beforecloseout', {
48                 getTarget: function() {
49                     return $(event.target);
50                 },
51                 preventClose: function() {
52                     shouldClose = false;
53                 }
54             });
55
56             if (shouldClose) {
57                 Dialog.trigger('box:closeout');
58             }
59         }
60     });
61
62     // Add listener for the data-popbox-id
63     handler = function(e) {
64         e.preventDefault();
65         e.stopPropagation();
66
67         var caller = $(this),
68             boxId = caller.attr('data-popbox-id'),
69             boxEl;
70
71         if (
72             !boxId ||
73             caller.attr('data-popbox-event-type') != e.type
74         ) {
75             return;
76         }
77
78         boxEl = $('#' + boxId);
79
80         if (!Dialog.is(boxEl)) {
81             boxEl.initbox(caller);
82         }
83
84         Dialog.trigger('box:' + boxId, [ caller ]);
85     };
86     $(document).on('click', 'a[data-popbox-id]', handler);
87     $(document).on('mouseover', 'a[data-popbox-id]', handler);
88     $(document).on('mouseout', 'a[data-popbox-id]', function() {
89         if ($(this).attr('data-popbox-event-type') == 'mouseover') {
90             Dialog.trigger('box:closeon');
91         }
92     });
93     $(document).on('click', 'button[data-popbox-id]', handler);
94     $(document).on('mouseover', 'button[data-popbox-id]', handler);
95     $(document).on('mouseout', 'button[data-popbox-id]', function() {
96         if ($(this).attr('data-popbox-event-type') == 'mouseover') {
97             Dialog.trigger('box:closeon');
98         }
99     });
100
101     API = {
102         open: function(btn, box) {
103             var btn = btn || null,
104                 box = box || null;
105
106             if (!btn || !box) {
107                 return;
108             };
109
110             Dialog.trigger('box:close', [ btn ]);
111
112             if (box.data('popboxModal')) {
113                 if(box.data('popboxId') == 'popbox-password') {
114                     this.passwordRestore(box);
115                 } else {
116                     this.showModal(box, true);
117                 }
118             }
119             else {
120                 box.css({
121                     display: 'block'
122                 });
123                 this.showRelative(box, btn, true);
124             }
125         },
126
127         close: function(btn, box) {
128             var btn = btn || null,
129                 box = box || null;
130
131             if (btn && btn.data('popboxId') == box.attr('id')) {
132                 return;
133             }
134
135             if (box.data('popboxModal')) {
136                 this.showModal(box, false);
137             }
138             else {
139                 this.showRelative(box, null, false);
140             }
141
142             box.trigger('closed');
143         },
144
145         showModal: function(box, state) {
146             var box = box || null,
147                 state = state || false;
148
149             if (!box) {
150                 return;
151             }
152
153             if (state) {
154                 box.trigger('open');
155             }
156             box.css({
157                 display: state ? 'block' : 'none'
158             });
159
160             this.modalCenter(box);
161             this.mask(box, state);
162         },
163
164         modalCenter: function(box) {
165             box.position({
166                 my: 'center',
167                 at: 'center',
168                 of: window
169             });
170         },
171
172         showRelative: function(box, btn, state) {
173             var box = box || null,
174                 btn = btn || null,
175                 state = state || false,
176                 options = { };
177
178             if (!state) {
179                 box.css({
180                     display: 'none',
181                     top: 0,
182                     left: 0
183                 });
184             }
185             else {
186                 if (!btn) {
187                     return;
188                 }
189
190                 $.extend(options, {
191                     of: btn,
192                     collision: 'flip flip'
193                 });
194
195                 switch(box.data('popboxAlign')) {
196                     case 'tl':
197                     case 'lt':
198                         $.extend(options, {
199                             my: 'left bottom',
200                             at: 'left top'
201                         });
202                     break;
203
204                     case 'tr':
205                     case 'rt':
206                         $.extend(options, {
207                             my: 'right bottom',
208                             at: 'right top'
209                         });
210                     break;
211
212                     case 'br':
213                     case 'rb':
214                         $.extend(options, {
215                             my: 'right top',
216                             at: 'right bottom'
217                         });
218                     break;
219
220                     default:
221                         $.extend(options, {
222                             my: 'left top',
223                             at: 'left bottom'
224                         });
225                 }
226
227                 box.position(options);
228             }
229         },
230
231         mask: function(box, state) {
232             var box = box || null,
233                 state = state || false,
234                 mask;
235
236             if (!$('body').has('div.dialog-body-mask').length) {
237                 $('body').append('<div class="dialog-body-mask">&nbsp;</div>')
238             }
239
240             mask = $('div.dialog-body-mask');
241
242             if (state && box.data('popboxCloseOnOutClick')) {
243                 mask.bind('click', function(event) {
244                     Dialog.trigger('box:close');
245                 });
246             }
247
248             $('div.dialog-body-mask').css({
249                 display: state ? 'block' : 'none'
250             });
251         },
252
253
254        passwordRestore: function(box) {
255
256        var params, p, name
257
258        params = {
259            step:0
260        }
261
262        for (name in (p=box.data('popbox-params'))) {
263            params[name]=p[name];
264        }
265            $.ajax({
266                url: params['url'],
267                method: 'POST',
268                data: params,
269                cache: false,
270                success: function(html){
271                    $(".popbox-content-popbox-password").html(html);
272                    API.showModal(box, true);
273                }
274            });
275        }
276     };
277
278     $.fn.API = API;
279
280     $.fn.initbox = function(caller) {
281
282         // Return parsed each found element
283         return this.each(function() {
284             $(this).bind('box:' + $(this).attr('id'), { options: caller.data() }, function(event, src) {
285                 var box = $(this);
286
287                 box.data(event.data.options);
288                 API.open(src, box);
289             });
290
291             $(this).bind('box:close box:closeon box:closeout box:closeesc', { options: caller.data() }, function(event, src) {
292                 var src = src || null,
293                     box = $(this);
294
295                 if (!box.is(':visible')) {
296                     return;
297                 }
298
299                 switch (event.type) {
300                     case 'box:closeout':
301                     case 'box:closeesc':
302                     case 'box:close':
303                         if (box.data('popboxCloseOnOutClick') === false) {
304                             return;
305                         }
306                     break;
307                 }
308
309                 box.data(event.data.options);
310                 API.close(src, box);
311             });
312
313             if (typeof caller.data('popboxCloseOn') != 'undefined') {
314                 var selector = caller.data('popboxCloseOn') || 'popbox-close',
315                     close = $('#' + $(this).attr('id')).find('.' + selector);
316
317                 if (close) {
318                     close.bind('click', function(event) {
319                         event.preventDefault();
320
321                         Dialog.trigger('box:closeon');
322                     });
323                 }
324             }
325
326             Dialog = Dialog.add($(this))
327         });
328     };
329
330     // This is shortcut to init single popbox and show immediately
331     $.fn.showPopBox = function(id, params) {
332         var id = id || null,
333             box = $(id),
334             data = {
335                data: (function(data) {
336                        var data = data || {};
337                        return function(k) {
338                            if (!k) {
339                                return data;
340                            }
341
342                            return k in data ? data[k] : null;
343                        }
344                    })(params)
345             };
346
347         box.initbox(data);
348         box.API.showModal(box, true);
349     }
350
351    $.sendRestorePassData = function(params, callback) {
352        callback = callback || null;
353        $.ajax({
354            url: params['url'],
355            type: 'POST',
356            data: params,
357            cache: false,
358            success: function(html){
359                try {
360                    if (typeof callback === "function") {
361                        callback()
362                    }
363                    if(!html) {
364                        Dialog.trigger('box:closeon');
365                    }
366                    var json = $.parseJSON(html);
367                    $("#error-text").html((json && json.error) ? json.error : '');
368                    return;
369                } catch (e) {
370                    if(html) {
371                        $(".popbox-content-popbox-password").html(html);
372                        API.modalCenter($('#popbox-password'));
373                    } else {
374                        Dialog.trigger('box:closeon');
375                    }
376                }
377            }
378        });
379    }
380
381     $.fn.attrs = function(mask) {
382         var attrs = {},
383             mask = mask || ".*";
384
385         mask = new RegExp(mask);
386
387         $.each(this[0].attributes, function() {
388             if(this.specified && mask.test(this.name)) {
389                 attrs[this.name] = this.value;
390             }
391         });
392
393         return attrs;
394     };
395 })(jQuery);