https://www.lamare.at/static/js/components/modal.js

1(function(UI) {
2
3    "use strict";
4
5    var active = false, activeCount = 0, $html = UI.$html, body;
6
7    UI.$win.on('resize orientationchange', UI.Utils.debounce(function(){
8        UI.$('.uk-modal.uk-open').each(function(){
9            return UI.$(this).data('modal') && UI.$(this).data('modal').resize();
10        });
11    }, 150));
12
13    UI.component('modal', {
14
15        defaults: {
16            keyboard: true,
17            bgclose: true,
18            minScrollHeight: 150,
19            center: false,
20            modal: true
21        },
22
23        scrollable: false,
24        transition: false,
25        hasTransitioned: true,
26
27        init: function() {
28
29            if (!body) body = UI.$('body');
30
31            if (!this.element.length) return;
32
33            var $this = this;
34
35            this.paddingdir = 'padding-' + (UI.langdirection == 'left' ? 'right':'left');
36            this.dialog     = this.find('.uk-modal-dialog');
37
38            this.active     = false;
39
40            // Update ARIA
41            this.element.attr('aria-hidden', this.element.hasClass('uk-open'));
42
43            this.on('click', '.uk-modal-close', function(e) {
44                e.preventDefault();
45                $this.hide();
46            }).on('click', function(e) {
47
48                var target = UI.$(e.target);
49
50                if (target[0] == $this.element[0] && $this.options.bgclose) {
51                    $this.hide();
52                }
53            });
54
55            UI.domObserve(this.element, function(e) { $this.resize(); });
56        },
57
58        toggle: function() {
59            return this[this.isActive() ? 'hide' : 'show']();
60        },
61
62        show: function() {
63
64            if (!this.element.length) return;
65
66            var $this = this;
67
68            if (this.isActive()) return;
69
70            if (this.options.modal && active) {
71                active.hide(true);
72            }
73
74            this.element.removeClass('uk-open').show();
75            this.resize(true);
76
77            if (this.options.modal) {
78                active = this;
79            }
80
81            this.active = true;
82
83            activeCount++;
84
85            if (UI.support.transition) {
86                this.hasTransitioned = false;
87                this.element.one(UI.support.transition.end, function(){
88                    $this.hasTransitioned = true;
89                    UI.Utils.focus($this.dialog, 'a[href]');
90                }).addClass('uk-open');
91            } else {
92                this.element.addClass('uk-open');
93                UI.Utils.focus(this.dialog, 'a[href]');
94            }
95
96            $html.addClass('uk-modal-page').height(); // force browser engine redraw
97
98            // Update ARIA
99            this.element.attr('aria-hidden', 'false');
100
101            this.element.trigger('show.uk.modal');
102
103            UI.Utils.checkDisplay(this.dialog, true);
104
105            return this;
106        },
107
108        hide: function(force) {
109
110            if (!force && UI.support.transition && this.hasTransitioned) {
111
112                var $this = this;
113
114                this.one(UI.support.transition.end, function() {
115                    $this._hide();
116                }).removeClass('uk-open');
117
118            } else {
119
120                this._hide();
121            }
122
123            return this;
124        },
125
126        resize: function(force) {
127
128            if (!this.isActive() && !force) return;
129
130            var bodywidth  = body.width();
131
132            this.scrollbarwidth = window.innerWidth - bodywidth;
133
134            body.css(this.paddingdir, this.scrollbarwidth);
135
136            this.element.css('overflow-y', this.scrollbarwidth ? 'scroll' : 'auto');
137
138            if (!this.updateScrollable() && this.options.center) {
139
140                var dh  = this.dialog.outerHeight(),
141                pad = parseInt(this.dialog.css('margin-top'), 10) + parseInt(this.dialog.css('margin-bottom'), 10);
142
143                if ((dh + pad) < window.innerHeight) {
144                    this.dialog.css({top: (window.innerHeight/2 - dh/2) - pad });
145                } else {
146                    this.dialog.css({top: ''});
147                }
148            }
149        },
150
151        updateScrollable: function() {
152
153            // has scrollable?
154            var scrollable = this.dialog.find('.uk-overflow-container:visible:first');
155
156            if (scrollable.length) {
157
158                scrollable.css('height', 0);
159
160                var offset = Math.abs(parseInt(this.dialog.css('margin-top'), 10)),
161                dh     = this.dialog.outerHeight(),
162                wh     = window.innerHeight,
163                h      = wh - 2*(offset < 20 ? 20:offset) - dh;
164
165                scrollable.css({
166                    maxHeight: (h < this.options.minScrollHeight ? '':h),
167                    height:''
168                });
169
170                return true;
171            }
172
173            return false;

174        },
175
176        _hide: function() {
177
178            this.active = false;
179            if (activeCount > 0) activeCount--;
180            else activeCount = 0;
181
182            this.element.hide().removeClass('uk-open');
183
184            // Update ARIA
185            this.element.attr('aria-hidden', 'true');
186
187            if (!activeCount) {
188                $html.removeClass('uk-modal-page');
189                body.css(this.paddingdir, "");
190            }
191
192            if (active===this) active = false;
193
194            this.trigger('hide.uk.modal');
195        },
196
197        isActive: function() {
198            return this.element.hasClass('uk-open');
199        }
200
201    });
202
203    UI.component('modalTrigger', {
204
205        boot: function() {
206
207            // init code
208            UI.$html.on('click.modal.uikit', '[data-uk-modal]', function(e) {
209
210                var ele = UI.$(this);
211
212                if (ele.is('a')) {
213                    e.preventDefault();
214                }
215
216                if (!ele.data('modalTrigger')) {
217                    var modal = UI.modalTrigger(ele, UI.Utils.options(ele.attr('data-uk-modal')));
218                    modal.show();
219                }
220
221            });
222
223            // close modal on esc button
224            UI.$html.on('keydown.modal.uikit', function (e) {
225
226                if (active && e.keyCode === 27 && active.options.keyboard) { // ESC
227                    e.preventDefault();
228                    active.hide();
229                }
230            });
231        },
232
233        init: function() {
234
235            var $this = this;
236
237            this.options = UI.$.extend({
238                target: $this.element.is('a') ? $this.element.attr('href') : false
239            }, this.options);
240
241            this.modal = UI.modal(this.options.target, this.options);
242
243            this.on("click", function(e) {
244                e.preventDefault();
245                $this.show();
246            });
247
248            //methods
249            this.proxy(this.modal, 'show hide isActive');
250        }
251    });
252
253    UI.modal.dialog = function(content, options) {
254
255        var modal = UI.modal(UI.$(UI.modal.dialog.template).appendTo('body'), options);
256
257        modal.on('hide.uk.modal', function(){
258            if (modal.persist) {
259                modal.persist.appendTo(modal.persist.data('modalPersistParent'));
260                modal.persist = false;
261            }
262            modal.element.remove();
263        });
264
265        setContent(content, modal);
266
267        return modal;
268    };
269
270    UI.modal.dialog.template = '<div class="uk-modal"><div class="uk-modal-dialog" style="min-height:0;"></div></div>';
271
272    UI.modal.alert = function(content, options) {
273
274        options = UI.$.extend(true, {bgclose:false, keyboard:false, modal:false, labels:UI.modal.labels}, options);
275
276        var modal = UI.modal.dialog(([
277            '<div class="uk-margin uk-modal-content">'+String(content)+'</div>',
278            '<div class="uk-modal-footer uk-text-right"><button class="uk-button uk-button-primary uk-modal-close">'+options.labels.Ok+'</button></div>'
279        ]).join(""), options);
280
281        modal.on('show.uk.modal', function(){
282            setTimeout(function(){
283                modal.element.find('button:first').focus();
284            }, 50);
285        });
286
287        return modal.show();
288    };
289
290    UI.modal.confirm = function(content, onconfirm, oncancel) {
291
292        var options = arguments.length > 1 && arguments[arguments.length-1] ? arguments[arguments.length-1] : {};
293
294        onconfirm = UI.$.isFunction(onconfirm) ? onconfirm : function(){};
295        oncancel  = UI.$.isFunction(oncancel) ? oncancel : function(){};
296        options   = UI.$.extend(true, {bgclose:false, keyboard:false, modal:false, labels:UI.modal.labels}, UI.$.isFunction(options) ? {}:options);
297
298        var modal = UI.modal.dialog(([
299            '<div class="uk-margin uk-modal-content">'+String(content)+'</div>',
300            '<div class="uk-modal-footer uk-text-right">

300<button class="uk-button js-modal-confirm-cancel">'+options.labels.Cancel+'</button> <button class="uk-button uk-button-primary js-modal-confirm">'+options.labels.Ok+'</button></div>'
301        ]).join(""), options);
302
303        modal.element.find(".js-modal-confirm, .js-modal-confirm-cancel").on("click", function(){
304            UI.$(this).is('.js-modal-confirm') ? onconfirm() : oncancel();
305            modal.hide();
306        });
307
308        modal.on('show.uk.modal', function(){
309            setTimeout(function(){
310                modal.element.find('.js-modal-confirm').focus();
311            }, 50);
312        });
313
314        return modal.show();
315    };
316
317    UI.modal.prompt = function(text, value, onsubmit, options) {
318
319        onsubmit = UI.$.isFunction(onsubmit) ? onsubmit : function(value){};
320        options  = UI.$.extend(true, {bgclose:false, keyboard:false, modal:false, labels:UI.modal.labels}, options);
321
322        var modal = UI.modal.dialog(([
323            text ? '<div class="uk-modal-content uk-form">'+String(text)+'</div>':'',
324            '<div class="uk-margin-small-top uk-modal-content uk-form"><p><input type="text" class="uk-width-1-1"></p></div>',
325            '<div class="uk-modal-footer uk-text-right"><button class="uk-button uk-modal-close">'+options.labels.Cancel+'</button> <button class="uk-button uk-button-primary js-modal-ok">'+options.labels.Ok+'</button></div>'
326        ]).join(""), options),
327
328        input = modal.element.find("input[type='text']").val(value || '').on('keyup', function(e){
329            if (e.keyCode == 13) {
330                modal.element.find('.js-modal-ok').trigger('click');
331            }
332        });
333
334        modal.element.find('.js-modal-ok').on('click', function(){
335            if (onsubmit(input.val())!==false){
336                modal.hide();
337            }
338        });
339
340        return modal.show();
341    };
342
343    UI.modal.blockUI = function(content, options) {
344
345        var modal = UI.modal.dialog(([
346            '<div class="uk-margin uk-modal-content">'+String(content || '<div class="uk-text-center">...</div>')+'</div>'
347        ]).join(""), UI.$.extend({bgclose:false, keyboard:false, modal:false}, options));
348
349        modal.content = modal.element.find('.uk-modal-content:first');
350
351        return modal.show();
352    };
353
354    UI.modal.labels = {
355        Ok: 'Ok',
356        Cancel: 'Cancel'
357    };
358
359    // helper functions
360    function setContent(content, modal){
361
362        if(!modal) return;
363
364        if (typeof content === 'object') {
365
366            // convert DOM object to a jQuery object
367            content = content instanceof jQuery ? content : UI.$(content);
368
369            if(content.parent().length) {
370                modal.persist = content;
371                modal.persist.data('modalPersistParent', content.parent());
372            }
373        }else if (typeof content === 'string' || typeof content === 'number') {
374                // just insert the data as innerHTML
375                content = UI.$('<div></div>').html(content);
376        }else {
377                // unsupported data type!
378                content = UI.$('<div></div>').html('UIkit.modal Error: Unsupported data type: ' + typeof content);
379        }
380
381        content.appendTo(modal.element.find('.uk-modal-dialog'));
382
383        return modal;
384    }
385
386})(UIkit);