|
1
|
/*! UIkit 2.27.5 | http://www.getuikit.com | (c) 2014 YOOtheme | MIT License */
|
|
2
|
(function(UI) {
|
|
3
|
|
|
4
|
"use strict";
|
|
5
|
|
|
6
|
var active = false, activeCount = 0, $html = UI.$html, body;
|
|
7
|
|
|
8
|
UI.$win.on('resize orientationchange', UI.Utils.debounce(function(){
|
|
9
|
UI.$('.uk-modal.uk-open').each(function(){
|
|
10
|
return UI.$(this).data('modal') && UI.$(this).data('modal').resize();
|
|
11
|
});
|
|
12
|
}, 150));
|
|
13
|
|
|
14
|
UI.component('modal', {
|
|
15
|
|
|
16
|
defaults: {
|
|
17
|
keyboard: true,
|
|
18
|
bgclose: true,
|
|
19
|
minScrollHeight: 150,
|
|
20
|
center: false,
|
|
21
|
modal: true
|
|
22
|
},
|
|
23
|
|
|
24
|
scrollable: false,
|
|
25
|
transition: false,
|
|
26
|
hasTransitioned: true,
|
|
27
|
|
|
28
|
init: function() {
|
|
29
|
|
|
30
|
if (!body) body = UI.$('body');
|
|
31
|
|
|
32
|
if (!this.element.length) return;
|
|
33
|
|
|
34
|
var $this = this;
|
|
35
|
|
|
36
|
this.paddingdir = 'padding-' + (UI.langdirection == 'left' ? 'right':'left');
|
|
37
|
this.dialog = this.find('.uk-modal-dialog');
|
|
38
|
|
|
39
|
this.active = false;
|
|
40
|
|
|
41
|
// Update ARIA
|
|
42
|
this.element.attr('aria-hidden', this.element.hasClass('uk-open'));
|
|
43
|
|
|
44
|
this.on('click', '.uk-modal-close', function(e) {
|
|
45
|
|
|
46
|
e.preventDefault();
|
|
47
|
|
|
48
|
var modal = UI.$(e.target).closest('.uk-modal');
|
|
49
|
if (modal[0] === $this.element[0]) $this.hide();
|
|
50
|
|
|
51
|
}).on('click', function(e) {
|
|
52
|
|
|
53
|
var target = UI.$(e.target);
|
|
54
|
|
|
55
|
if (target[0] == $this.element[0] && $this.options.bgclose) {
|
|
56
|
$this.hide();
|
|
57
|
}
|
|
58
|
});
|
|
59
|
|
|
60
|
UI.domObserve(this.element, function(e) { $this.resize(); });
|
|
61
|
},
|
|
62
|
|
|
63
|
toggle: function() {
|
|
64
|
return this[this.isActive() ? 'hide' : 'show']();
|
|
65
|
},
|
|
66
|
|
|
67
|
show: function() {
|
|
68
|
|
|
69
|
if (!this.element.length) return;
|
|
70
|
|
|
71
|
var $this = this;
|
|
72
|
|
|
73
|
if (this.isActive()) return;
|
|
74
|
|
|
75
|
if (this.options.modal && active) {
|
|
76
|
active.hide(true);
|
|
77
|
}
|
|
78
|
|
|
79
|
this.element.removeClass('uk-open').show();
|
|
80
|
this.resize(true);
|
|
81
|
|
|
82
|
if (this.options.modal) {
|
|
83
|
active = this;
|
|
84
|
}
|
|
85
|
|
|
86
|
this.active = true;
|
|
87
|
|
|
88
|
activeCount++;
|
|
89
|
|
|
90
|
if (UI.support.transition) {
|
|
91
|
this.hasTransitioned = false;
|
|
92
|
this.element.one(UI.support.transition.end, function(){
|
|
93
|
$this.hasTransitioned = true;
|
|
94
|
UI.Utils.focus($this.dialog, 'a[href]');
|
|
95
|
}).addClass('uk-open');
|
|
96
|
} else {
|
|
97
|
this.element.addClass('uk-open');
|
|
98
|
UI.Utils.focus(this.dialog, 'a[href]');
|
|
99
|
}
|
|
100
|
|
|
101
|
$html.addClass('uk-modal-page').height(); // force browser engine redraw
|
|
102
|
|
|
103
|
// Update ARIA
|
|
104
|
this.element.attr('aria-hidden', 'false');
|
|
105
|
|
|
106
|
this.element.trigger('show.uk.modal');
|
|
107
|
|
|
108
|
UI.Utils.checkDisplay(this.dialog, true);
|
|
109
|
|
|
110
|
return this;
|
|
111
|
},
|
|
112
|
|
|
113
|
hide: function(force) {
|
|
114
|
|
|
115
|
if (!force && UI.support.transition && this.hasTransitioned) {
|
|
116
|
|
|
117
|
var $this = this;
|
|
118
|
|
|
119
|
this.one(UI.support.transition.end, function() {
|
|
120
|
$this._hide();
|
|
121
|
}).removeClass('uk-open');
|
|
122
|
|
|
123
|
} else {
|
|
124
|
|
|
125
|
this._hide();
|
|
126
|
}
|
|
127
|
|
|
128
|
return this;
|
|
129
|
},
|
|
130
|
|
|
131
|
resize: function(force) {
|
|
132
|
|
|
133
|
if (!this.isActive() && !force) return;
|
|
134
|
|
|
135
|
var bodywidth = body.width();
|
|
136
|
|
|
137
|
this.scrollbarwidth = window.innerWidth - bodywidth;
|
|
138
|
|
|
139
|
body.css(this.paddingdir, this.scrollbarwidth);
|
|
140
|
|
|
141
|
this.element.css('overflow-y', this.scrollbarwidth ? 'scroll' : 'auto');
|
|
142
|
|
|
143
|
if (!this.updateScrollable() && this.options.center) {
|
|
144
|
|
|
145
|
var dh = this.dialog.outerHeight(),
|
|
146
|
pad = parseInt(this.dialog.css('margin-top'), 10) + parseInt(this.dialog.css('margin-bottom'), 10);
|
|
147
|
|
|
148
|
if ((dh + pad) < window.innerHeight) {
|
|
149
|
this.dialog.css({top: (window.innerHeight/2 - dh/2) - pad });
|
|
150
|
} else {
|
|
151
|
this.dialog.css({top: ''});
|
|
152
|
}
|
|
153
|
}
|
|
154
|
},
|
|
155
|
|
|
156
|
updateScrollable: function() {
|
|
157
|
|
|
158
|
// has scrollable?
|
|
159
|
var scrollable = this.dialog.find('.uk-overflow-container:visible:first');
|
|
160
|
|
|
161
|
if (scrollable.length) {
|
|
162
|
|
|
163
|
scrollable.css('height', 0);
|
|
164
|
|
|
165
|
var offset = Math.abs(parseInt(this.dialog.css('margin-top'), 10)),
|
|
166
|
dh = this.dialog.outerHeight(),
|
|
167
|
wh = window.innerHeight,
|
|
168
|
h = wh - 2*(offset < 20 ? 20:offset) - dh;
|
|
169
|
|
|
170
|
scrollable.css({
|
|
171
|
maxHeight: (h < this.options.minScrollHeight ? '':h),
|
|
172
|
height:''
|
|
173
|
});
|
|
174
|
|
|
175
|
return true;
|
|
176
|
}
|
|
177
|
|
|
178
|
return false;
|
|
179
|
},
|
|
180
|
|
|
181
|
_hide: function() {
|
|
182
|
|
|
183
|
this.active = false;
|
|
184
|
if (activeCount > 0) activeCount--;
|
|
185
|
else activeCount = 0;
|
|
186
|
|
|
187
|
this.element.hide().removeClass('uk-open');
|
|
188
|
|
|
189
|
// Update ARIA
|
|
190
|
this.element.attr('aria-hidden', 'true');
|
|
191
|
|
|
192
|
if (!activeCount) {
|
|
193
|
$html.removeClass('uk-modal-page');
|
|
194
|
body.css(this.paddingdir, "");
|
|
195
|
}
|
|
196
|
|
|
197
|
if (active===this) active = false;
|
|
198
|
|
|
199
|
this.trigger('hide.uk.modal');
|
|
200
|
},
|
|
201
|
|
|
202
|
isActive: function() {
|
|
203
|
return this.element.hasClass('uk-open');
|
|
204
|
}
|
|
205
|
|
|
206
|
});
|
|
207
|
|
|
208
|
UI.component('modalTrigger', {
|
|
209
|
|
|
210
|
boot: function() {
|
|
211
|
|
|
212
|
// init code
|
|
213
|
UI.$html.on('click.modal.uikit', '[data-uk-modal]', function(e) {
|
|
214
|
|
|
215
|
var ele = UI.$(this);
|
|
216
|
|
|
217
|
if (ele.is('a')) {
|
|
218
|
e.preventDefault();
|
|
219
|
}
|
|
220
|
|
|
221
|
if (!ele.data('modalTrigger')) {
|
|
222
|
var modal = UI.modalTrigger(ele, UI.Utils.options(ele.attr('data-uk-modal')));
|
|
223
|
modal.show();
|
|
224
|
}
|
|
225
|
|
|
226
|
});
|
|
227
|
|
|
228
|
// close modal on esc button
|
|
229
|
UI.$html.on('keydown.modal.uikit', function (e) {
|
|
230
|
|
|
231
|
if (active && e.keyCode === 27 && active.options.keyboard) { // ESC
|
|
232
|
e.preventDefault();
|
|
233
|
active.hide();
|
|
234
|
}
|
|
235
|
});
|
|
236
|
},
|
|
237
|
|
|
238
|
init: function() {
|
|
239
|
|
|
240
|
var $this = this;
|
|
241
|
|
|
242
|
this.options = UI.$.extend({
|
|
243
|
target: $this.element.is('a') ? $this.element.attr('href') : false
|
|
244
|
}, this.options);
|
|
245
|
|
|
246
|
this.modal = UI.modal(this.options.target, this.options);
|
|
247
|
|
|
248
|
this.on("click", function(e) {
|
|
249
|
e.preventDefault();
|
|
250
|
$this.show();
|
|
251
|
});
|
|
252
|
|
|
253
|
//methods
|
|
254
|
this.proxy(this.modal, 'show hide isActive');
|
|
255
|
}
|
|
256
|
});
|
|
257
|
|
|
258
|
UI.modal.dialog = function(content, options) {
|
|
259
|
|
|
260
|
var modal = UI.modal(UI.$(UI.modal.dialog.template).appendTo('body'), options);
|
|
261
|
|
|
262
|
modal.on('hide.uk.modal', function(){
|
|
263
|
if (modal.persist) {
|
|
264
|
modal.persist.appendTo(modal.persist.data('modalPersistParent'));
|
|
265
|
modal.persist = false;
|
|
266
|
}
|
|
267
|
modal.element.remove();
|
|
268
|
});
|
|
269
|
|
|
270
|
setContent(content, modal);
|
|
271
|
|
|
272
|
return modal;
|
|
273
|
};
|
|
274
|
|
|
275
|
UI.modal.dialog.template = '<div class="uk-modal"><div class="uk-modal-dialog" style="min-height:0;"></div></div>';
|
|
276
|
|
|
277
|
UI.modal.alert = function(content, options) {
|
|
278
|
|
|
279
|
options = UI.$.extend(true, {bgclose:false, keyboard:false, modal:false, labels:UI.modal.labels}, options);
|
|
280
|
|
|
281
|
var modal = UI.modal.dialog(([
|
|
282
|
'<div class="uk-margin uk-modal-content">'+String(content)+'</div>',
|
|
283
|
'<div class="uk-modal-footer uk-text-right"><button class="uk-button uk-button-primary uk-modal-close">'+options.labels.Ok+'</button></div>'
|
|
284
|
]).join(""), options);
|
|
285
|
|
|
286
|
modal.on('show.uk.modal', function(){
|
|
287
|
setTimeout(function(){
|
|
288
|
modal.element.find('button:first').focus();
|
|
289
|
}, 50);
|
|
290
|
});
|
|
291
|
|
|
292
|
return modal.show();
|
|
293
|
};
|
|
294
|
|
|
295
|
UI.modal.confirm = function(content, onconfirm, oncancel) {
|
|
296
|
|
|
297
|
var options = arguments.length > 1 && arguments[arguments.length-1] ? arguments[arguments.length-1] : {};
|
|
298
|
|
|
299
|
onconfirm = UI.$.isFunction(onconfirm) ? onconfirm : function(){};
|
|
300
|
oncancel = UI.$.isFunction(oncancel) ? oncancel : function(){};
|
|
301
|
options = UI.$.extend(true, {bgclose:false, keyboard:false, modal:false, labels:UI.modal.labels}, UI.$.isFunction(options) ? {}:options);
|
|
302
|
|
|
303
|
var modal = UI.modal.dialog(([
|
|
304
|
'<div class="uk-margin uk-modal-content">'+String(content)+'</div>',
|
|
305
|
'<div class="uk-modal-footer uk-text-right"><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>'
|
|
306
|
]).join(""), options);
|
|
307
|
|
|
308
|
modal.element.find(".js-modal-confirm, .js-modal-confirm-cancel").on("click", function(){
|
|
309
|
UI.$(this).is('.js-modal-confirm') ? onconfirm() : oncancel();
|
|
310
|
modal.hide();
|
|
311
|
});
|
|
312
|
|
|
313
|
modal.on('show.uk.modal', function(){
|
|
314
|
setTimeout(function(){
|
|
315
|
modal.element.find('.js-modal-confirm').focus();
|
|
316
|
}, 50);
|
|
317
|
});
|
|
318
|
|
|
319
|
return modal.show();
|
|
320
|
};
|
|
321
|
|
|
322
|
UI.modal.prompt = function(text, value, onsubmit, options) {
|
|
323
|
|
|
324
|
onsubmit = UI.$.isFunction(onsubmit) ? onsubmit : function(value){};
|
|
325
|
options = UI.$.extend(true, {bgclose:false, keyboard:false, modal:false, labels:UI.modal.labels}, options);
|
|
326
|
|
|
327
|
var modal = UI.modal.dialog(([
|
|
328
|
text ? '<div class="uk-modal-content uk-form">'+String(text)+'</div>':'',
|
|
329
|
'<div class="uk-margin-small-top uk-modal-content uk-form"><p><input type="text" class="uk-width-1-1"></p></div>',
|
|
330
|
'<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>'
|
|
331
|
]).join(""), options),
|
|
332
|
|
|
333
|
input = modal.element.find("input[type='text']").val(value || '').on('keyup', function(e){
|
|
334
|
if (e.keyCode == 13) {
|
|
335
|
modal.element.find('.js-modal-ok').trigger('click');
|
|
336
|
}
|
|
337
|
});
|
|
338
|
|
|
339
|
modal.element.find('.js-modal-ok').on('click', function(){
|
|
340
|
if (onsubmit(input.val())!==false){
|
|
341
|
modal.hide();
|
|
342
|
}
|
|
343
|
});
|
|
344
|
|
|
345
|
return modal.show();
|
|
346
|
};
|
|
347
|
|
|
348
|
UI.modal.blockUI = function(content, options) {
|
|
349
|
|
|
350
|
var modal = UI.modal.dialog(([
|
|
351
|
'<div class="uk-margin uk-modal-content">'+String(content || '<div class="uk-text-center">...</div>')+'</div>'
|
|
352
|
]).join(""), UI.$.extend({bgclose:false, keyboard:false, modal:false}, options));
|
|
353
|
|
|
354
|
modal.content = modal.element.find('.uk-modal-content:first');
|
|
355
|
|
|
356
|
return modal.show();
|
|
357
|
};
|
|
358
|
|
|
359
|
UI.modal.labels = {
|
|
360
|
Ok: 'Ok',
|
|
361
|
Cancel: 'Cancel'
|
|
362
|
};
|
|
363
|
|
|
364
|
// helper functions
|
|
365
|
function setContent(content, modal){
|
|
366
|
|
|
367
|
if(!modal) return;
|
|
368
|
|
|
369
|
if (typeof content === 'object') {
|
|
370
|
|
|
371
|
// convert DOM object to a jQuery object
|
|
372
|
content = content instanceof jQuery ? content : UI.$(content);
|
|
373
|
|
|
374
|
if(content.parent().length) {
|
|
375
|
modal.persist = content;
|
|
376
|
modal.persist.data('modalPersistParent', content.parent());
|
|
377
|
}
|
|
378
|
}else if (typeof content === 'string' || typeof content === 'number') {
|
|
379
|
// just insert the data as innerHTML
|
|
380
|
content = UI.$('<div></div>').html(content);
|
|
381
|
}else {
|
|
382
|
// unsupported data type!
|
|
383
|
content = UI.$('<div></div>').html('UIkit2.modal Error: Unsupported data type: ' + typeof content);
|
|
384
|
}
|
|
385
|
|
|
386
|
content.appendTo(modal.element.find('.uk-modal-dialog'));
|
|
387
|
|
|
388
|
return modal;
|
|
389
|
}
|
|
390
|
|
|
391
|
})(UIkit2);
|