Skip to content

Commit 1acd40c

Browse files
marcelodolzamarcelodolza
committed
Update v1.3.3
1 parent a22722d commit 1acd40c

File tree

5 files changed

+123
-70
lines changed

5 files changed

+123
-70
lines changed

‎css/iziModal.css‎

Lines changed: 26 additions & 15 deletions
Large diffs are not rendered by default.

‎css/iziModal.min.css‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎js/iziModal.js‎

Lines changed: 92 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/*
2-
* iziModal | v1.3.2
2+
* iziModal | v1.3.3
33
* http://izimodal.marcelodolce.com
44
* by Marcelo Dolce.
55
*/
@@ -72,6 +72,8 @@
7272
index: null,
7373
ids: []
7474
};
75+
this.$element.attr('aria-hidden', 'true');
76+
7577
if(this.group.name === undefined && options.group !== ""){
7678
this.group.name = options.group;
7779
this.$element.attr('data-'+PLUGIN_NAME+'-group', options.group);
@@ -85,6 +87,9 @@
8587
if(this.$element.attr('data-'+PLUGIN_NAME+'-icon') !== undefined){
8688
options.icon = this.$element.attr('data-'+PLUGIN_NAME+'-icon');
8789
}
90+
if(this.$element.attr('data-'+PLUGIN_NAME+'-iconText') !== undefined){
91+
options.iconText = this.$element.attr('data-'+PLUGIN_NAME+'-iconText');
92+
}
8893
if(this.options.loop === true){
8994
this.$element.attr('data-'+PLUGIN_NAME+'-loop', true);
9095
}
@@ -120,10 +125,17 @@
120125
this.$element.css('border-bottom', '3px solid ' + options.headerColor + '');
121126
this.$header.css('background', this.options.headerColor);
122127
}
123-
if (options.icon !== null) {
124-
this.$header.prepend('<i class="'+PLUGIN_NAME+'-header-icon ' + options.icon + '"></i>');
125-
this.$header.find('.'+PLUGIN_NAME+'-header-icon').css('color', options.iconColor);
126-
}
128+
if (options.icon !== null || options.iconText !== null){
129+
130+
this.$header.prepend('<i class="'+PLUGIN_NAME+'-header-icon"></i>');
131+
132+
if (options.icon !== null) {
133+
this.$header.find('.'+PLUGIN_NAME+'-header-icon').addClass(options.icon).css('color', options.iconColor);
134+
}
135+
if (options.iconText !== null){
136+
this.$header.find('.'+PLUGIN_NAME+'-header-icon').html(options.iconText);
137+
}
138+
}
127139
this.$element.css('overflow', 'hidden').prepend(this.$header);
128140
}
129141

@@ -142,11 +154,13 @@
142154
}
143155

144156
if(options.theme !== ""){
145-
this.$element.addClass(options.theme);
157+
if(options.theme === "light"){
158+
this.$element.addClass(PLUGIN_NAME+"-light");
159+
} else {
160+
this.$element.addClass(options.theme);
161+
}
146162
}
147163

148-
this.$element.addClass(PLUGIN_NAME);
149-
150164
if(options.openFullscreen === true){
151165
this.isFullscreen = true;
152166
this.$element.addClass('isFullscreen');
@@ -240,8 +254,9 @@
240254

241255
// console.info('[ '+PLUGIN_NAME+' | '+that.id+' ] Opened.');
242256

243-
that.$element.trigger(STATES.OPENED);
244257
that.state = STATES.OPENED;
258+
that.$element.trigger(STATES.OPENED);
259+
245260
if (that.options.onOpened && typeof(that.options.onOpened) === "function") {
246261
that.options.onOpened(that);
247262
}
@@ -299,9 +314,10 @@
299314

300315
bindEvents();
301316

302-
this.$element.trigger(STATES.OPENING);
303-
this.state = STATES.OPENING;
304317
this.setGroup();
318+
this.state = STATES.OPENING;
319+
this.$element.trigger(STATES.OPENING);
320+
this.$element.attr('aria-hidden', 'false');
305321

306322
// console.info('[ '+PLUGIN_NAME+' | '+this.id+' ] Opening...');
307323

@@ -329,11 +345,11 @@
329345
}
330346

331347
if (this.options.bodyOverflow || isMobile){
332-
$(document.body).css('overflow', 'hidden');
348+
$('html').addClass(PLUGIN_NAME+'-isOverflow');
333349
}
334350

335-
if (that.options.onOpening && typeof(that.options.onOpening) === "function") {
336-
that.options.onOpening(this);
351+
if (this.options.onOpening && typeof(this.options.onOpening) === "function") {
352+
this.options.onOpening(this);
337353
}
338354
(function open(){
339355

@@ -476,7 +492,7 @@
476492
})();
477493

478494
(function setUrlHash(){
479-
if(that.options.history || isMobile){
495+
if(that.options.history){
480496
var oldTitle = document.title;
481497
document.title = oldTitle + " - " + that.options.title;
482498
document.location.hash = that.id;
@@ -505,13 +521,13 @@
505521
}
506522

507523
if (that.options.bodyOverflow || isMobile){
508-
$(document.body).css('overflow', 'initial');
524+
$('html').removeClass(PLUGIN_NAME+'-isOverflow');
509525
}
510526

511-
$(document.body).removeClass(PLUGIN_NAME+'-attached');
527+
$('html').removeClass(PLUGIN_NAME+'-isAttached');
512528

513-
that.$element.trigger(STATES.CLOSED);
514529
that.state = STATES.CLOSED;
530+
that.$element.trigger(STATES.CLOSED);
515531

516532
// console.info('[ '+PLUGIN_NAME+' | '+that.id+' ] Closed.');
517533

@@ -530,6 +546,7 @@
530546

531547
this.state = STATES.CLOSING;
532548
this.$element.trigger(STATES.CLOSING);
549+
this.$element.attr('aria-hidden', 'true');
533550

534551
// console.info('[ '+PLUGIN_NAME+' | '+this.id+' ] Closing...');
535552

@@ -718,10 +735,19 @@
718735

719736
setIcon: function(icon){
720737

721-
if (this.options.icon !== null) {
722-
this.$header.find('.'+PLUGIN_NAME+'-header-icon').attr('class', PLUGIN_NAME+'-header-icon ' + icon);
723-
this.options.icon = icon;
738+
console.log(this.$header.find('.'+PLUGIN_NAME+'-header-icon').length);
739+
740+
if( this.$header.find('.'+PLUGIN_NAME+'-header-icon').length === 0 ){
741+
this.$header.prepend('<i class="'+PLUGIN_NAME+'-header-icon"></i>');
724742
}
743+
this.$header.find('.'+PLUGIN_NAME+'-header-icon').attr('class', PLUGIN_NAME+'-header-icon ' + icon);
744+
this.options.icon = icon;
745+
},
746+
747+
setIconText: function(iconText){
748+
749+
this.$header.find('.'+PLUGIN_NAME+'-header-icon').html(iconText);
750+
this.options.iconText = iconText;
725751
},
726752

727753
setHeaderColor: function(headerColor){
@@ -792,14 +818,14 @@
792818
// Se a altura da janela é menor que o modal com iframe
793819
if(windowHeight < (this.options.iframeHeight + this.headerHeight) || this.isFullscreen === true){
794820

795-
$(document.body).addClass(PLUGIN_NAME+'-attached');
821+
$('html').addClass(PLUGIN_NAME+'-isAttached');
796822

797823
this.$element.find('.'+PLUGIN_NAME+'-iframe').css({
798824
'height': parseInt(windowHeight - this.headerHeight) + 'px',
799825
});
800826

801827
} else {
802-
$(document.body).removeClass(PLUGIN_NAME+'-attached');
828+
$('html').removeClass(PLUGIN_NAME+'-isAttached');
803829

804830
this.$element.find('.'+PLUGIN_NAME+'-iframe').css({
805831
'height': parseInt(this.options.iframeHeight) + 'px',
@@ -809,16 +835,16 @@
809835
} else {
810836

811837
if (windowHeight > (contentHeight + this.headerHeight) && this.isFullscreen !== true) {
812-
$(document.body).removeClass(PLUGIN_NAME+'-attached');
838+
$('html').removeClass(PLUGIN_NAME+'-isAttached');
813839
this.$element.find('.'+PLUGIN_NAME+'-wrap').css({'height': 'auto'});
814840
}
815841

816842
// subistuido (contentHeight + this.headerHeight) por this.$element.innerHeight()
817843
// Se o modal é maior que a altura da janela ou
818844
if ((contentHeight + this.headerHeight) > windowHeight || this.$element.innerHeight() < contentHeight || this.isFullscreen === true) {
819845

820-
if( !$(document.body).hasClass(PLUGIN_NAME+'-attached') ){
821-
$(document.body).addClass(PLUGIN_NAME+'-attached');
846+
if( !$('html').hasClass(PLUGIN_NAME+'-isAttached') ){
847+
$('html').addClass(PLUGIN_NAME+'-isAttached');
822848
}
823849

824850
this.$element.find('.'+PLUGIN_NAME+'-wrap').css({
@@ -849,23 +875,33 @@
849875

850876
$window.off('hashchange load').on('hashchange load', function(e) {
851877

878+
var modalHash = document.location.hash;
879+
852880
if(autoOpenModal === 0){
853881

854-
if(document.location.hash !== ""){
882+
if(modalHash !== ""){
855883

856884
$.each( $('.'+PLUGIN_NAME) , function(index, modal) {
857885
var state = $(modal).iziModal('getState');
858886
if(state == 'opened' || state == 'opening'){
859887

860-
if( "#" + $(modal).attr('id') !== document.location.hash){
888+
if( "#" + $(modal).attr('id') !== modalHash){
861889
$(modal).iziModal('close');
862890
}
863891
}
864892
});
865893

866-
setTimeout(function(){
867-
$(document.location.hash).iziModal("open");
868-
},200);
894+
var data = $(modalHash).data();
895+
896+
if(e.type === 'load'){
897+
if(data.iziModal.options.autoOpen !== false){
898+
$(modalHash).iziModal("open");
899+
}
900+
} else {
901+
setTimeout(function(){
902+
$(modalHash).iziModal("open");
903+
},200);
904+
}
869905

870906
} else {
871907

@@ -933,32 +969,37 @@
933969

934970
$.fn[PLUGIN_NAME] = function(option, args) {
935971

936-
var $this = $(this),
937-
data = $this.data(PLUGIN_NAME),
938-
options = $.extend({}, $.fn.iziModal.defaults, $this.data(), typeof option == 'object' && option);
972+
var objs = this;
973+
974+
for (var i=0; i<objs.length; i++) {
975+
976+
var $this = $(objs[i]);
977+
var data = $this.data(PLUGIN_NAME);
978+
var options = $.extend({}, $.fn[PLUGIN_NAME].defaults, $this.data(), typeof option == 'object' && option);
939979

940-
if (!data && (!option || typeof option == 'object')){
980+
if (!data && (!option || typeof option == 'object')){
941981

942-
$this.data(PLUGIN_NAME, (data = new iziModal(this, options)));
943-
}
944-
else if (typeof option == 'string' && typeof data != 'undefined'){
982+
$this.data(PLUGIN_NAME, (data = new iziModal($this, options)));
983+
}
984+
else if (typeof option == 'string' && typeof data != 'undefined'){
945985

946-
return data[option].apply(data, [].concat(args));
947-
}
986+
return data[option].apply(data, [].concat(args));
987+
}
988+
if (options.autoOpen){ // Automatically open the modal if autoOpen setted true or ms
948989

949-
if (options.autoOpen){ // Automatically open the modal if autoOpen setted true
990+
if( !isNaN(parseInt(options.autoOpen)) ){
991+
992+
setTimeout(function(){
993+
data.open();
994+
}, options.autoOpen);
950995

951-
if( !isNaN(parseInt(options.autoOpen)) ){
952-
953-
setTimeout(function(){
996+
} else if(options.autoOpen === true ) {
954997
data.open();
955-
}, options.autoOpen);
956-
957-
} else if(options.autoOpen === true ) {
958-
data.open();
998+
}
999+
autoOpenModal++;
9591000
}
960-
autoOpenModal++;
9611001
}
1002+
9621003
return this;
9631004
};
9641005

@@ -968,7 +1009,8 @@
9681009
headerColor: '#88A0B9',
9691010
theme: '', // light
9701011
attached: '', // bottom, top
971-
icon: '',
1012+
icon: null,
1013+
iconText: null,
9721014
iconColor: '',
9731015
width: 600,
9741016
padding: 0,

0 commit comments

Comments
 (0)