Component-Builder/admin/custom/uikit-v2/js/core/modal.js

388 lines
12 KiB
JavaScript
Raw Normal View History

2017-11-12 00:33:10 +00:00
/*! UIkit 2.27.4 | http://www.getuikit.com | (c) 2014 YOOtheme | MIT License */
2016-01-30 20:28:43 +00:00
(function(UI) {
"use strict";
var active = false, activeCount = 0, $html = UI.$html, body;
2017-11-12 00:33:10 +00:00
UI.$win.on('resize orientationchange', UI.Utils.debounce(function(){
UI.$('.uk-modal.uk-open').each(function(){
return UI.$(this).data('modal') && UI.$(this).data('modal').resize();
});
}, 150));
2016-01-30 20:28:43 +00:00
UI.component('modal', {
defaults: {
keyboard: true,
bgclose: true,
minScrollHeight: 150,
center: false,
modal: true
},
scrollable: false,
transition: false,
2016-03-19 01:51:35 +00:00
hasTransitioned: true,
2016-01-30 20:28:43 +00:00
init: function() {
if (!body) body = UI.$('body');
if (!this.element.length) return;
var $this = this;
2017-11-12 00:33:10 +00:00
this.paddingdir = 'padding-' + (UI.langdirection == 'left' ? 'right':'left');
this.dialog = this.find('.uk-modal-dialog');
2016-01-30 20:28:43 +00:00
this.active = false;
// Update ARIA
2017-11-12 00:33:10 +00:00
this.element.attr('aria-hidden', this.element.hasClass('uk-open'));
2016-01-30 20:28:43 +00:00
2017-11-12 00:33:10 +00:00
this.on('click', '.uk-modal-close', function(e) {
2016-01-30 20:28:43 +00:00
e.preventDefault();
$this.hide();
2017-11-12 00:33:10 +00:00
}).on('click', function(e) {
2016-01-30 20:28:43 +00:00
var target = UI.$(e.target);
if (target[0] == $this.element[0] && $this.options.bgclose) {
$this.hide();
}
});
2017-11-12 00:33:10 +00:00
UI.domObserve(this.element, function(e) { $this.resize(); });
2016-01-30 20:28:43 +00:00
},
toggle: function() {
2017-11-12 00:33:10 +00:00
return this[this.isActive() ? 'hide' : 'show']();
2016-01-30 20:28:43 +00:00
},
show: function() {
if (!this.element.length) return;
var $this = this;
if (this.isActive()) return;
if (this.options.modal && active) {
active.hide(true);
}
2017-11-12 00:33:10 +00:00
this.element.removeClass('uk-open').show();
this.resize(true);
2016-01-30 20:28:43 +00:00
if (this.options.modal) {
active = this;
}
this.active = true;
activeCount++;
2016-03-19 01:51:35 +00:00
if (UI.support.transition) {
this.hasTransitioned = false;
this.element.one(UI.support.transition.end, function(){
$this.hasTransitioned = true;
2017-11-12 00:33:10 +00:00
UI.Utils.focus($this.dialog, 'a[href]');
}).addClass('uk-open');
2016-03-19 01:51:35 +00:00
} else {
2017-11-12 00:33:10 +00:00
this.element.addClass('uk-open');
UI.Utils.focus(this.dialog, 'a[href]');
2016-03-19 01:51:35 +00:00
}
2016-01-30 20:28:43 +00:00
2017-11-12 00:33:10 +00:00
$html.addClass('uk-modal-page').height(); // force browser engine redraw
2016-01-30 20:28:43 +00:00
// Update ARIA
this.element.attr('aria-hidden', 'false');
2017-11-12 00:33:10 +00:00
this.element.trigger('show.uk.modal');
2016-01-30 20:28:43 +00:00
UI.Utils.checkDisplay(this.dialog, true);
return this;
},
hide: function(force) {
2016-03-19 01:51:35 +00:00
if (!force && UI.support.transition && this.hasTransitioned) {
2016-01-30 20:28:43 +00:00
var $this = this;
this.one(UI.support.transition.end, function() {
$this._hide();
2017-11-12 00:33:10 +00:00
}).removeClass('uk-open');
2016-01-30 20:28:43 +00:00
} else {
this._hide();
}
return this;
},
2017-11-12 00:33:10 +00:00
resize: function(force) {
if (!this.isActive() && !force) return;
2016-01-30 20:28:43 +00:00
var bodywidth = body.width();
this.scrollbarwidth = window.innerWidth - bodywidth;
body.css(this.paddingdir, this.scrollbarwidth);
this.element.css('overflow-y', this.scrollbarwidth ? 'scroll' : 'auto');
if (!this.updateScrollable() && this.options.center) {
var dh = this.dialog.outerHeight(),
pad = parseInt(this.dialog.css('margin-top'), 10) + parseInt(this.dialog.css('margin-bottom'), 10);
if ((dh + pad) < window.innerHeight) {
2017-11-12 00:33:10 +00:00
this.dialog.css({top: (window.innerHeight/2 - dh/2) - pad });
2016-01-30 20:28:43 +00:00
} else {
2017-11-12 00:33:10 +00:00
this.dialog.css({top: ''});
2016-01-30 20:28:43 +00:00
}
}
},
updateScrollable: function() {
// has scrollable?
var scrollable = this.dialog.find('.uk-overflow-container:visible:first');
if (scrollable.length) {
2016-03-19 01:51:35 +00:00
scrollable.css('height', 0);
2016-01-30 20:28:43 +00:00
2016-03-19 01:51:35 +00:00
var offset = Math.abs(parseInt(this.dialog.css('margin-top'), 10)),
2016-01-30 20:28:43 +00:00
dh = this.dialog.outerHeight(),
wh = window.innerHeight,
h = wh - 2*(offset < 20 ? 20:offset) - dh;
2016-03-19 01:51:35 +00:00
scrollable.css({
2017-11-12 00:33:10 +00:00
maxHeight: (h < this.options.minScrollHeight ? '':h),
height:''
2016-03-19 01:51:35 +00:00
});
2016-01-30 20:28:43 +00:00
return true;
}
return false;
},
_hide: function() {
this.active = false;
2016-03-19 01:51:35 +00:00
if (activeCount > 0) activeCount--;
else activeCount = 0;
2016-01-30 20:28:43 +00:00
2016-03-19 01:51:35 +00:00
this.element.hide().removeClass('uk-open');
2016-01-30 20:28:43 +00:00
// Update ARIA
this.element.attr('aria-hidden', 'true');
if (!activeCount) {
2016-03-19 01:51:35 +00:00
$html.removeClass('uk-modal-page');
2016-01-30 20:28:43 +00:00
body.css(this.paddingdir, "");
}
2017-11-12 00:33:10 +00:00
if (active===this) active = false;
2016-01-30 20:28:43 +00:00
2016-03-19 01:51:35 +00:00
this.trigger('hide.uk.modal');
2016-01-30 20:28:43 +00:00
},
isActive: function() {
2017-11-12 00:33:10 +00:00
return this.element.hasClass('uk-open');
2016-01-30 20:28:43 +00:00
}
});
UI.component('modalTrigger', {
boot: function() {
// init code
2017-11-12 00:33:10 +00:00
UI.$html.on('click.modal.uikit', '[data-uk-modal]', function(e) {
2016-01-30 20:28:43 +00:00
var ele = UI.$(this);
2017-11-12 00:33:10 +00:00
if (ele.is('a')) {
2016-01-30 20:28:43 +00:00
e.preventDefault();
}
2017-11-12 00:33:10 +00:00
if (!ele.data('modalTrigger')) {
var modal = UI.modalTrigger(ele, UI.Utils.options(ele.attr('data-uk-modal')));
2016-01-30 20:28:43 +00:00
modal.show();
}
});
// close modal on esc button
UI.$html.on('keydown.modal.uikit', function (e) {
if (active && e.keyCode === 27 && active.options.keyboard) { // ESC
e.preventDefault();
active.hide();
}
});
},
init: function() {
var $this = this;
this.options = UI.$.extend({
2017-11-12 00:33:10 +00:00
target: $this.element.is('a') ? $this.element.attr('href') : false
2016-01-30 20:28:43 +00:00
}, this.options);
this.modal = UI.modal(this.options.target, this.options);
this.on("click", function(e) {
e.preventDefault();
$this.show();
});
//methods
2017-11-12 00:33:10 +00:00
this.proxy(this.modal, 'show hide isActive');
2016-01-30 20:28:43 +00:00
}
});
UI.modal.dialog = function(content, options) {
2017-11-12 00:33:10 +00:00
var modal = UI.modal(UI.$(UI.modal.dialog.template).appendTo('body'), options);
2016-01-30 20:28:43 +00:00
2017-11-12 00:33:10 +00:00
modal.on('hide.uk.modal', function(){
2016-01-30 20:28:43 +00:00
if (modal.persist) {
2017-11-12 00:33:10 +00:00
modal.persist.appendTo(modal.persist.data('modalPersistParent'));
2016-01-30 20:28:43 +00:00
modal.persist = false;
}
modal.element.remove();
});
setContent(content, modal);
return modal;
};
UI.modal.dialog.template = '<div class="uk-modal"><div class="uk-modal-dialog" style="min-height:0;"></div></div>';
UI.modal.alert = function(content, options) {
options = UI.$.extend(true, {bgclose:false, keyboard:false, modal:false, labels:UI.modal.labels}, options);
var modal = UI.modal.dialog(([
'<div class="uk-margin uk-modal-content">'+String(content)+'</div>',
'<div class="uk-modal-footer uk-text-right"><button class="uk-button uk-button-primary uk-modal-close">'+options.labels.Ok+'</button></div>'
]).join(""), options);
modal.on('show.uk.modal', function(){
setTimeout(function(){
modal.element.find('button:first').focus();
}, 50);
});
2016-03-19 01:51:35 +00:00
return modal.show();
2016-01-30 20:28:43 +00:00
};
2016-03-19 01:51:35 +00:00
UI.modal.confirm = function(content, onconfirm, oncancel) {
var options = arguments.length > 1 && arguments[arguments.length-1] ? arguments[arguments.length-1] : {};
2016-01-30 20:28:43 +00:00
onconfirm = UI.$.isFunction(onconfirm) ? onconfirm : function(){};
2016-03-19 01:51:35 +00:00
oncancel = UI.$.isFunction(oncancel) ? oncancel : function(){};
options = UI.$.extend(true, {bgclose:false, keyboard:false, modal:false, labels:UI.modal.labels}, UI.$.isFunction(options) ? {}:options);
2016-01-30 20:28:43 +00:00
var modal = UI.modal.dialog(([
'<div class="uk-margin uk-modal-content">'+String(content)+'</div>',
2016-03-19 01:51:35 +00:00
'<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>'
2016-01-30 20:28:43 +00:00
]).join(""), options);
2016-03-19 01:51:35 +00:00
modal.element.find(".js-modal-confirm, .js-modal-confirm-cancel").on("click", function(){
UI.$(this).is('.js-modal-confirm') ? onconfirm() : oncancel();
2016-01-30 20:28:43 +00:00
modal.hide();
});
modal.on('show.uk.modal', function(){
setTimeout(function(){
2016-03-19 01:51:35 +00:00
modal.element.find('.js-modal-confirm').focus();
2016-01-30 20:28:43 +00:00
}, 50);
});
2016-03-19 01:51:35 +00:00
return modal.show();
2016-01-30 20:28:43 +00:00
};
UI.modal.prompt = function(text, value, onsubmit, options) {
onsubmit = UI.$.isFunction(onsubmit) ? onsubmit : function(value){};
options = UI.$.extend(true, {bgclose:false, keyboard:false, modal:false, labels:UI.modal.labels}, options);
var modal = UI.modal.dialog(([
text ? '<div class="uk-modal-content uk-form">'+String(text)+'</div>':'',
'<div class="uk-margin-small-top uk-modal-content uk-form"><p><input type="text" class="uk-width-1-1"></p></div>',
2016-03-19 01:51:35 +00:00
'<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>'
2016-01-30 20:28:43 +00:00
]).join(""), options),
input = modal.element.find("input[type='text']").val(value || '').on('keyup', function(e){
if (e.keyCode == 13) {
2017-11-12 00:33:10 +00:00
modal.element.find('.js-modal-ok').trigger('click');
2016-01-30 20:28:43 +00:00
}
});
2017-11-12 00:33:10 +00:00
modal.element.find('.js-modal-ok').on('click', function(){
2016-01-30 20:28:43 +00:00
if (onsubmit(input.val())!==false){
modal.hide();
}
});
2016-03-19 01:51:35 +00:00
return modal.show();
2016-01-30 20:28:43 +00:00
};
UI.modal.blockUI = function(content, options) {
var modal = UI.modal.dialog(([
'<div class="uk-margin uk-modal-content">'+String(content || '<div class="uk-text-center">...</div>')+'</div>'
]).join(""), UI.$.extend({bgclose:false, keyboard:false, modal:false}, options));
modal.content = modal.element.find('.uk-modal-content:first');
2016-03-19 01:51:35 +00:00
return modal.show();
2016-01-30 20:28:43 +00:00
};
UI.modal.labels = {
2017-11-12 00:33:10 +00:00
Ok: 'Ok',
Cancel: 'Cancel'
2016-01-30 20:28:43 +00:00
};
// helper functions
function setContent(content, modal){
if(!modal) return;
if (typeof content === 'object') {
// convert DOM object to a jQuery object
content = content instanceof jQuery ? content : UI.$(content);
if(content.parent().length) {
modal.persist = content;
2017-11-12 00:33:10 +00:00
modal.persist.data('modalPersistParent', content.parent());
2016-01-30 20:28:43 +00:00
}
}else if (typeof content === 'string' || typeof content === 'number') {
// just insert the data as innerHTML
content = UI.$('<div></div>').html(content);
}else {
// unsupported data type!
2017-11-12 00:33:10 +00:00
content = UI.$('<div></div>').html('UIkit2.modal Error: Unsupported data type: ' + typeof content);
2016-01-30 20:28:43 +00:00
}
content.appendTo(modal.element.find('.uk-modal-dialog'));
return modal;
}
2017-11-12 00:33:10 +00:00
})(UIkit2);