vendor/assets/javascripts/iziModal.js in izimodal-1.3.2 vs vendor/assets/javascripts/iziModal.js in izimodal-1.3.3
- old
+ new
@@ -1,7 +1,7 @@
/*
-* iziModal | v1.3.2
+* iziModal | v1.3.3
* http://izimodal.marcelodolce.com
* by Marcelo Dolce.
*/
(function($){
@@ -70,10 +70,12 @@
this.group = {
name: this.$element.attr('data-'+PLUGIN_NAME+'-group'),
index: null,
ids: []
};
+ this.$element.attr('aria-hidden', 'true');
+
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){
@@ -83,10 +85,13 @@
options.subtitle = this.$element.attr('data-'+PLUGIN_NAME+'-subtitle');
}
if(this.$element.attr('data-'+PLUGIN_NAME+'-icon') !== undefined){
options.icon = this.$element.attr('data-'+PLUGIN_NAME+'-icon');
}
+ if(this.$element.attr('data-'+PLUGIN_NAME+'-iconText') !== undefined){
+ options.iconText = this.$element.attr('data-'+PLUGIN_NAME+'-iconText');
+ }
if(this.options.loop === true){
this.$element.attr('data-'+PLUGIN_NAME+'-loop', true);
}
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>');
@@ -118,14 +123,21 @@
if (options.headerColor !== null) {
this.$element.css('border-bottom', '3px solid ' + options.headerColor + '');
this.$header.css('background', this.options.headerColor);
}
- if (options.icon !== null) {
- this.$header.prepend('<i class="'+PLUGIN_NAME+'-header-icon ' + options.icon + '"></i>');
- this.$header.find('.'+PLUGIN_NAME+'-header-icon').css('color', options.iconColor);
- }
+ if (options.icon !== null || options.iconText !== null){
+
+ this.$header.prepend('<i class="'+PLUGIN_NAME+'-header-icon"></i>');
+
+ if (options.icon !== null) {
+ this.$header.find('.'+PLUGIN_NAME+'-header-icon').addClass(options.icon).css('color', options.iconColor);
+ }
+ if (options.iconText !== null){
+ this.$header.find('.'+PLUGIN_NAME+'-header-icon').html(options.iconText);
+ }
+ }
this.$element.css('overflow', 'hidden').prepend(this.$header);
}
if(options.zindex !== null && !isNaN(parseInt(options.zindex)) ){
this.$element.css('z-index', options.zindex);
@@ -140,15 +152,17 @@
if(options.padding !== ""){
this.$element.find('.'+PLUGIN_NAME+'-content').css('padding', options.padding);
}
if(options.theme !== ""){
- this.$element.addClass(options.theme);
+ if(options.theme === "light"){
+ this.$element.addClass(PLUGIN_NAME+"-light");
+ } else {
+ this.$element.addClass(options.theme);
+ }
}
- this.$element.addClass(PLUGIN_NAME);
-
if(options.openFullscreen === true){
this.isFullscreen = true;
this.$element.addClass('isFullscreen');
}
@@ -238,12 +252,13 @@
function opened(){
// console.info('[ '+PLUGIN_NAME+' | '+that.id+' ] Opened.');
- that.$element.trigger(STATES.OPENED);
that.state = STATES.OPENED;
+ that.$element.trigger(STATES.OPENED);
+
if (that.options.onOpened && typeof(that.options.onOpened) === "function") {
that.options.onOpened(that);
}
}
@@ -297,13 +312,14 @@
if(this.state == STATES.CLOSED){
bindEvents();
- this.$element.trigger(STATES.OPENING);
- this.state = STATES.OPENING;
this.setGroup();
+ this.state = STATES.OPENING;
+ this.$element.trigger(STATES.OPENING);
+ this.$element.attr('aria-hidden', 'false');
// console.info('[ '+PLUGIN_NAME+' | '+this.id+' ] Opening...');
if(this.options.iframe === true){
@@ -327,15 +343,15 @@
}
this.$element.find('.'+PLUGIN_NAME+'-iframe').attr('src', href);
}
if (this.options.bodyOverflow || isMobile){
- $(document.body).css('overflow', 'hidden');
+ $('html').addClass(PLUGIN_NAME+'-isOverflow');
}
- if (that.options.onOpening && typeof(that.options.onOpening) === "function") {
- that.options.onOpening(this);
+ if (this.options.onOpening && typeof(this.options.onOpening) === "function") {
+ this.options.onOpening(this);
}
(function open(){
if(that.group.ids.length > 1 ){
@@ -474,11 +490,11 @@
that.recalculateLayout();
that.timer = setTimeout(updateTimer, 300);
})();
(function setUrlHash(){
- if(that.options.history || isMobile){
+ if(that.options.history){
var oldTitle = document.title;
document.title = oldTitle + " - " + that.options.title;
document.location.hash = that.id;
document.title = oldTitle;
//history.pushState({}, that.options.title, "#"+that.id);
@@ -503,17 +519,17 @@
if (that.options.iframe === true) {
that.$element.find('.'+PLUGIN_NAME+'-iframe').attr('src', "");
}
if (that.options.bodyOverflow || isMobile){
- $(document.body).css('overflow', 'initial');
+ $('html').removeClass(PLUGIN_NAME+'-isOverflow');
}
- $(document.body).removeClass(PLUGIN_NAME+'-attached');
+ $('html').removeClass(PLUGIN_NAME+'-isAttached');
- that.$element.trigger(STATES.CLOSED);
that.state = STATES.CLOSED;
+ that.$element.trigger(STATES.CLOSED);
// console.info('[ '+PLUGIN_NAME+' | '+that.id+' ] Closed.');
if (that.options.onClosed && typeof(that.options.onClosed) === "function") {
that.options.onClosed(that);
@@ -528,10 +544,11 @@
$document.off("keydown");
this.state = STATES.CLOSING;
this.$element.trigger(STATES.CLOSING);
+ this.$element.attr('aria-hidden', 'true');
// console.info('[ '+PLUGIN_NAME+' | '+this.id+' ] Closing...');
clearTimeout(this.timer);
clearTimeout(this.timerTimeout);
@@ -716,16 +733,25 @@
}
},
setIcon: function(icon){
- if (this.options.icon !== null) {
- this.$header.find('.'+PLUGIN_NAME+'-header-icon').attr('class', PLUGIN_NAME+'-header-icon ' + icon);
- this.options.icon = 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;
},
+ setIconText: function(iconText){
+
+ this.$header.find('.'+PLUGIN_NAME+'-header-icon').html(iconText);
+ this.options.iconText = iconText;
+ },
+
setHeaderColor: function(headerColor){
this.$element.css('border-bottom', '3px solid ' + headerColor + '');
this.$header.css('background', headerColor);
this.options.headerColor = headerColor;
@@ -790,37 +816,37 @@
if (this.options.iframe === true) {
// Se a altura da janela é menor que o modal com iframe
if(windowHeight < (this.options.iframeHeight + this.headerHeight) || this.isFullscreen === true){
- $(document.body).addClass(PLUGIN_NAME+'-attached');
+ $('html').addClass(PLUGIN_NAME+'-isAttached');
this.$element.find('.'+PLUGIN_NAME+'-iframe').css({
'height': parseInt(windowHeight - this.headerHeight) + 'px',
});
} else {
- $(document.body).removeClass(PLUGIN_NAME+'-attached');
+ $('html').removeClass(PLUGIN_NAME+'-isAttached');
this.$element.find('.'+PLUGIN_NAME+'-iframe').css({
'height': parseInt(this.options.iframeHeight) + 'px',
});
}
} else {
if (windowHeight > (contentHeight + this.headerHeight) && this.isFullscreen !== true) {
- $(document.body).removeClass(PLUGIN_NAME+'-attached');
+ $('html').removeClass(PLUGIN_NAME+'-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( !$(document.body).hasClass(PLUGIN_NAME+'-attached') ){
- $(document.body).addClass(PLUGIN_NAME+'-attached');
+ if( !$('html').hasClass(PLUGIN_NAME+'-isAttached') ){
+ $('html').addClass(PLUGIN_NAME+'-isAttached');
}
this.$element.find('.'+PLUGIN_NAME+'-wrap').css({
'height': parseInt(windowHeight - this.headerHeight) + 'px',
});
@@ -847,28 +873,38 @@
};
$window.off('hashchange load').on('hashchange load', function(e) {
+ var modalHash = document.location.hash;
+
if(autoOpenModal === 0){
- if(document.location.hash !== ""){
+ if(modalHash !== ""){
$.each( $('.'+PLUGIN_NAME) , function(index, modal) {
var state = $(modal).iziModal('getState');
if(state == 'opened' || state == 'opening'){
- if( "#" + $(modal).attr('id') !== document.location.hash){
+ if( "#" + $(modal).attr('id') !== modalHash){
$(modal).iziModal('close');
}
}
});
- setTimeout(function(){
- $(document.location.hash).iziModal("open");
- },200);
+ var data = $(modalHash).data();
+ if(e.type === 'load'){
+ if(data.iziModal.options.autoOpen !== false){
+ $(modalHash).iziModal("open");
+ }
+ } else {
+ setTimeout(function(){
+ $(modalHash).iziModal("open");
+ },200);
+ }
+
} else {
$.each( $('.'+PLUGIN_NAME) , function(index, modal) {
var state = $(modal).iziModal('getState');
if(state == 'opened' || state == 'opening'){
@@ -931,45 +967,51 @@
}
});
$.fn[PLUGIN_NAME] = function(option, args) {
- var $this = $(this),
- data = $this.data(PLUGIN_NAME),
- options = $.extend({}, $.fn.iziModal.defaults, $this.data(), typeof option == 'object' && option);
+ var objs = this;
- if (!data && (!option || typeof option == 'object')){
+ for (var i=0; i<objs.length; i++) {
+
+ var $this = $(objs[i]);
+ var data = $this.data(PLUGIN_NAME);
+ var options = $.extend({}, $.fn[PLUGIN_NAME].defaults, $this.data(), typeof option == 'object' && option);
- $this.data(PLUGIN_NAME, (data = new iziModal(this, options)));
- }
- else if (typeof option == 'string' && typeof data != 'undefined'){
+ if (!data && (!option || typeof option == 'object')){
- return data[option].apply(data, [].concat(args));
- }
+ $this.data(PLUGIN_NAME, (data = new iziModal($this, options)));
+ }
+ else if (typeof option == 'string' && typeof data != 'undefined'){
- if (options.autoOpen){ // Automatically open the modal if autoOpen setted true
+ return data[option].apply(data, [].concat(args));
+ }
+ if (options.autoOpen){ // Automatically open the modal if autoOpen setted true or ms
- if( !isNaN(parseInt(options.autoOpen)) ){
-
- setTimeout(function(){
- data.open();
- }, options.autoOpen);
+ if( !isNaN(parseInt(options.autoOpen)) ){
+
+ setTimeout(function(){
+ data.open();
+ }, options.autoOpen);
- } else if(options.autoOpen === true ) {
- data.open();
+ } else if(options.autoOpen === true ) {
+ data.open();
+ }
+ autoOpenModal++;
}
- autoOpenModal++;
}
+
return this;
};
$.fn[PLUGIN_NAME].defaults = {
title: '',
subtitle: '',
headerColor: '#88A0B9',
theme: '', // light
attached: '', // bottom, top
- icon: '',
+ icon: null,
+ iconText: null,
iconColor: '',
width: 600,
padding: 0,
radius: 3,
zindex: 999,
\ No newline at end of file