vendor/assets/javascripts/iziModal.js in izimodal-1.3.3 vs vendor/assets/javascripts/iziModal.js in izimodal-1.4.0
- old
+ new
@@ -1,7 +1,7 @@
/*
-* iziModal | v1.3.3
+* iziModal | v1.4.0
* http://izimodal.marcelodolce.com
* by Marcelo Dolce.
*/
(function($){
@@ -71,11 +71,16 @@
name: this.$element.attr('data-'+PLUGIN_NAME+'-group'),
index: null,
ids: []
};
this.$element.attr('aria-hidden', 'true');
+ this.$element.attr('aria-labelledby', this.id);
+ this.$element.attr('role', 'dialog');
+ if( !this.$element.hasClass('iziModal') ){
+ this.$element.addClass('iziModal');
+ }
if(this.group.name === undefined && options.group !== ""){
this.group.name = options.group;
this.$element.attr('data-'+PLUGIN_NAME+'-group', options.group);
}
if(this.$element.attr('data-'+PLUGIN_NAME+'-title') !== undefined){
@@ -96,11 +101,16 @@
this.$header = $('<div class="'+PLUGIN_NAME+'-header"><h2 class="'+PLUGIN_NAME+'-header-title">' + options.title + '</h2><p class="'+PLUGIN_NAME+'-header-subtitle">' + options.subtitle + '</p><a href="javascript:void(0)" class="'+PLUGIN_NAME+'-button '+PLUGIN_NAME+'-button-close" data-'+PLUGIN_NAME+'-close></a></div>');
if (options.fullscreen === true) {
this.$header.append('<a href="javascript:void(0)" class="'+PLUGIN_NAME+'-button '+PLUGIN_NAME+'-button-fullscreen" data-'+PLUGIN_NAME+'-fullscreen></a>');
- this.$header.css('padding-right', '76px');
+
+ if (options.rtl === true) {
+ this.$header.css('padding-left', '76px');
+ } else {
+ this.$header.css('padding-right', '76px');
+ }
}
if (options.timeoutProgressbar === true && !isNaN(parseInt(options.timeout)) && options.timeout !== false && options.timeout !== 0) {
this.$header.prepend('<div class="'+PLUGIN_NAME+'-progressbar"><div style="background-color:'+options.timeoutProgressbarColor+'"></div></div>');
}
@@ -153,21 +163,25 @@
this.$element.find('.'+PLUGIN_NAME+'-content').css('padding', options.padding);
}
if(options.theme !== ""){
if(options.theme === "light"){
- this.$element.addClass(PLUGIN_NAME+"-light");
+ this.$element.addClass(PLUGIN_NAME+'-light');
} else {
this.$element.addClass(options.theme);
}
}
if(options.openFullscreen === true){
this.isFullscreen = true;
this.$element.addClass('isFullscreen');
}
+ if(options.rtl === true) {
+ this.$element.addClass(PLUGIN_NAME+'-rtl');
+ }
+
if(options.attached === 'top' || this.$element.attr('data-'+PLUGIN_NAME+'-attached') == 'top' ){
this.$element.addClass('isAttachedTop');
}
if(options.attached === 'bottom' || this.$element.attr('data-'+PLUGIN_NAME+'-attached') == 'bottom'){
@@ -198,12 +212,16 @@
'max-width': parseInt(wClear) + medida
});
that.width = that.$element.outerWidth();
- that.mediaQueries = '<style rel="' + that.id + '">@media handheld, only screen and (max-width: ' + that.width + 'px) { #' + that.id + '{ width: 100% !important; max-width: 100% !important; margin-left: 0 !important; left: 0 !important; border-radius:0!important} #' + that.id + ' .'+PLUGIN_NAME+'-header{border-radius:0!important} }</style>';
+ if(parseInt(wClear) > that.width){
+ that.width = parseInt(wClear);
+ }
+ that.mediaQueries = '<style rel="' + that.id + '">@media handheld, only screen and (max-width: ' + that.width + 'px) { #' + that.id + '{ width:100% !important; max-width:100% !important; margin-left:0 !important; left:0 !important; right:0 !important; border-radius:0!important} #' + that.id + ' .'+PLUGIN_NAME+'-header{border-radius:0!important} }</style>';
+
$(document.body).append(that.mediaQueries);
// Adjusting vertical positioning
that.$element.css('margin-top', parseInt(-(that.$element.innerHeight() / 2)) + 'px');
})();
@@ -344,10 +362,13 @@
this.$element.find('.'+PLUGIN_NAME+'-iframe').attr('src', href);
}
if (this.options.bodyOverflow || isMobile){
$('html').addClass(PLUGIN_NAME+'-isOverflow');
+ if(isMobile){
+ $('body').css('overflow', 'hidden');
+ }
}
if (this.options.onOpening && typeof(this.options.onOpening) === "function") {
this.options.onOpening(this);
}
@@ -514,32 +535,37 @@
close: function (param) {
var that = this;
function closed(){
+
+ // console.info('[ '+PLUGIN_NAME+' | '+that.id+' ] Closed.');
+ that.state = STATES.CLOSED;
+ that.$element.trigger(STATES.CLOSED);
+
if (that.options.iframe === true) {
that.$element.find('.'+PLUGIN_NAME+'-iframe').attr('src', "");
}
if (that.options.bodyOverflow || isMobile){
$('html').removeClass(PLUGIN_NAME+'-isOverflow');
- }
-
- $('html').removeClass(PLUGIN_NAME+'-isAttached');
-
- that.state = STATES.CLOSED;
- that.$element.trigger(STATES.CLOSED);
-
- // console.info('[ '+PLUGIN_NAME+' | '+that.id+' ] Closed.');
-
+ if(isMobile){
+ $('body').css('overflow','auto');
+ }
+ }
+
if (that.options.onClosed && typeof(that.options.onClosed) === "function") {
that.options.onClosed(that);
}
if(that.options.restoreDefaultContent === true){
that.$element.find('.'+PLUGIN_NAME+'-content').html( that.content );
}
+
+ if( $('.'+PLUGIN_NAME+':visible').attr('id') === undefined){
+ $('html').removeClass(PLUGIN_NAME+'-isAttached');
+ }
}
if(this.state == STATES.OPENED || this.state == STATES.OPENING){
$document.off("keydown");
@@ -565,11 +591,11 @@
}
}
if (transitionOut !== '') {
- this.$element.attr('class', PLUGIN_NAME + " transitionOut " + transitionOut + " " + this.options.theme + " " + String((this.isFullscreen === true) ? 'isFullscreen' : '') + " " + String((this.options.attached === 'top') ? 'isAttachedTop' : '') + " " + String((this.options.attached === 'bottom') ? 'isAttachedBottom' : ''));
+ this.$element.attr('class', PLUGIN_NAME + " transitionOut " + transitionOut + " " + this.options.theme + " " + String((this.isFullscreen === true) ? 'isFullscreen' : '') + " " + String(this.$element.hasClass('isAttached') ? "isAttached" : "") + " " + String((this.options.attached === 'top') ? 'isAttachedTop' : '') + " " + String((this.options.attached === 'bottom') ? 'isAttachedBottom' : '') + (this.options.rtl ? PLUGIN_NAME+'-rtl' : ''));
this.$overlay.attr('class', PLUGIN_NAME + "-overlay " + this.options.transitionOutOverlay);
this.$navigate.attr('class', PLUGIN_NAME + "-navigate " + this.options.transitionOutOverlay);
this.$element.one(animationEvent, function () {
@@ -616,21 +642,38 @@
this.close({transition:transitionOut});
setTimeout(function(){
var loop = $('.'+PLUGIN_NAME+'[data-'+PLUGIN_NAME+'-group="'+that.group.name+'"][data-'+PLUGIN_NAME+'-loop]').length;
+ for (var i = that.group.index+1; i <= that.group.ids.length; i++) {
- if((loop > 0 || that.options.loop === true) && (that.group.index+1) === that.group.ids.length){
+ try {
+ modals.in = $("#"+that.group.ids[i]).data().iziModal;
+ } catch(log) {
+ console.warn("No next modal");
+ }
+ if(typeof modals.in !== 'undefined'){
- $("#"+that.group.ids[0]).iziModal('open', { transition: transitionIn });
- modals.in = $("#"+that.group.ids[0]).data().iziModal;
+ $("#"+that.group.ids[i]).iziModal('open', { transition: transitionIn });
+ break;
- } else if(that.group.index+1 < that.group.ids.length){
+ } else {
- $("#"+that.group.ids[that.group.index+1]).iziModal('open', { transition: transitionIn });
- modals.in = $("#"+that.group.ids[that.group.index+1]).data().iziModal;
+ if(i == that.group.ids.length && loop > 0 || that.options.loop === true){
+
+ for (var index = 0; index <= that.group.ids.length; index++) {
+
+ modals.in = $("#"+that.group.ids[index]).data().iziModal;
+ if(typeof modals.in !== 'undefined'){
+ $("#"+that.group.ids[index]).iziModal('open', { transition: transitionIn });
+ break;
+ }
+ }
+ }
+ }
}
+
}, 200);
$(document).trigger( PLUGIN_NAME + "-group-change", modals );
},
@@ -645,11 +688,13 @@
if(e !== undefined && typeof e !== 'object'){
e.preventDefault();
modal = $(e.currentTarget);
transitionIn = modal.attr('data-'+PLUGIN_NAME+'-transitionIn');
transitionOut = modal.attr('data-'+PLUGIN_NAME+'-transitionOut');
+
} else if(e !== undefined){
+
if(e.transitionIn !== undefined){
transitionIn = e.transitionIn;
}
if(e.transitionOut !== undefined){
transitionOut = e.transitionOut;
@@ -657,22 +702,41 @@
}
this.close({transition:transitionOut});
setTimeout(function(){
+
var loop = $('.'+PLUGIN_NAME+'[data-'+PLUGIN_NAME+'-group="'+that.group.name+'"][data-'+PLUGIN_NAME+'-loop]').length;
- if( (loop > 0 || that.options.loop === true) && that.group.index === 0){
+ for (var i = that.group.index; i >= 0; i--) {
- $("#"+that.group.ids[that.group.ids.length-1]).iziModal('open', { transition: transitionIn });
- modals.in = $("#"+that.group.ids[that.group.ids.length-1]).data().iziModal;
+ try {
+ modals.in = $("#"+that.group.ids[i-1]).data().iziModal;
+ } catch(log) {
+ console.warn("No previous modal");
+ }
+ if(typeof modals.in !== 'undefined'){
- } else if(that.group.index > 0){
+ $("#"+that.group.ids[i-1]).iziModal('open', { transition: transitionIn });
+ break;
- $("#"+that.group.ids[that.group.index-1]).iziModal('open', { transition: transitionIn });
- modals.in = $("#"+that.group.ids[that.group.index-1]).data().iziModal;
+ } else {
+
+ if(i === 0 && loop > 0 || that.options.loop === true){
+
+ for (var index = that.group.ids.length-1; index >= 0; index--) {
+
+ modals.in = $("#"+that.group.ids[index]).data().iziModal;
+ if(typeof modals.in !== 'undefined'){
+ $("#"+that.group.ids[index]).iziModal('open', { transition: transitionIn });
+ break;
+ }
+ }
+ }
+ }
}
+
}, 200);
$(document).trigger( PLUGIN_NAME + "-group-change", modals );
},
@@ -733,12 +797,10 @@
}
},
setIcon: function(icon){
- console.log(this.$header.find('.'+PLUGIN_NAME+'-header-icon').length);
-
if( this.$header.find('.'+PLUGIN_NAME+'-header-icon').length === 0 ){
this.$header.prepend('<i class="'+PLUGIN_NAME+'-header-icon"></i>');
}
this.$header.find('.'+PLUGIN_NAME+'-header-icon').attr('class', PLUGIN_NAME+'-header-icon ' + icon);
this.options.icon = icon;
@@ -817,36 +879,40 @@
// Se a altura da janela é menor que o modal com iframe
if(windowHeight < (this.options.iframeHeight + this.headerHeight) || this.isFullscreen === true){
$('html').addClass(PLUGIN_NAME+'-isAttached');
+ this.$element.addClass('isAttached');
this.$element.find('.'+PLUGIN_NAME+'-iframe').css({
'height': parseInt(windowHeight - this.headerHeight) + 'px',
});
} else {
$('html').removeClass(PLUGIN_NAME+'-isAttached');
+ this.$element.removeClass('isAttached');
this.$element.find('.'+PLUGIN_NAME+'-iframe').css({
'height': parseInt(this.options.iframeHeight) + 'px',
});
}
} else {
if (windowHeight > (contentHeight + this.headerHeight) && this.isFullscreen !== true) {
$('html').removeClass(PLUGIN_NAME+'-isAttached');
+ this.$element.removeClass('isAttached');
this.$element.find('.'+PLUGIN_NAME+'-wrap').css({'height': 'auto'});
}
// subistuido (contentHeight + this.headerHeight) por this.$element.innerHeight()
// Se o modal é maior que a altura da janela ou
if ((contentHeight + this.headerHeight) > windowHeight || this.$element.innerHeight() < contentHeight || this.isFullscreen === true) {
if( !$('html').hasClass(PLUGIN_NAME+'-isAttached') ){
$('html').addClass(PLUGIN_NAME+'-isAttached');
+ this.$element.addClass('isAttached');
}
this.$element.find('.'+PLUGIN_NAME+'-wrap').css({
'height': parseInt(windowHeight - this.headerHeight) + 'px',
});
@@ -864,11 +930,11 @@
}
}
// Corrige margin-top caso o modal sofra alterações na altura de seu conteúdo
- if (this.$element.css('margin-top') != modalMargin && this.$element.css('margin-top') != "0px") {
+ if (this.$element.css('margin-top') != modalMargin && this.$element.css('margin-top') != "0px" && !$('html').hasClass(PLUGIN_NAME+'-isAttached')) {
this.$element.css('margin-top', modalMargin);
}
}
};
@@ -889,20 +955,25 @@
$(modal).iziModal('close');
}
}
});
- var data = $(modalHash).data();
-
- if(e.type === 'load'){
- if(data.iziModal.options.autoOpen !== false){
- $(modalHash).iziModal("open");
+ try {
+ var data = $(modalHash).data();
+ if(typeof data !== 'undefined'){
+ if(e.type === 'load'){
+ if(data.iziModal.options.autoOpen !== false){
+ $(modalHash).iziModal("open");
+ }
+ } else {
+ setTimeout(function(){
+ $(modalHash).iziModal("open");
+ },200);
+ }
}
- } else {
- setTimeout(function(){
- $(modalHash).iziModal("open");
- },200);
+ } catch(log) {
+ console.info(log);
}
} else {
$.each( $('.'+PLUGIN_NAME) , function(index, modal) {
@@ -1010,9 +1081,10 @@
theme: '', // light
attached: '', // bottom, top
icon: null,
iconText: null,
iconColor: '',
+ rtl: false,
width: 600,
padding: 0,
radius: 3,
zindex: 999,
iframe: false,
\ No newline at end of file