diff --git a/dist/css/modalizer.css b/dist/css/modalizer.css new file mode 100644 index 0000000..4acc169 --- /dev/null +++ b/dist/css/modalizer.css @@ -0,0 +1,103 @@ +/*! + * Modalizer.js v1.0.0 modalizerjs.jlgarridol.com + * Copyright 2011-2020 José Luis Garrido-Labrador + * Licensed under MIT (https://github.com/jlgarridol/modalizerjs/blob/main/LICENSE) + */ +body { + overflow-x: hidden; + overflow-y: scroll !important; +} + +.modal{ + padding-right: 0px !important; +} + +.modal-backdrop.show{ + display: none; +} + +.MOD_supreme-container.modal-open{ + filter:blur(.5rem); +} + + +.modal-content{ + border: 0px !important; +} + +.modal-optionable{ + z-index: 3000000000; + background-color: rgba(0,0,0,0.5); + padding: 0 !important; +} + +.modal-optionable > .modal-dialog { + --animate-duration: 0.5s; +} + +.modal-optionable .modal-dialog { + -webkit-transform: translate(0); + -moz-transform: translate(0); + transform: translate(0); +} + +.modal-dialog.fullscreen { + width: 100% !important; + height: 100% !important; + max-height: -moz-fit-content !important; + min-height: -moz-fit-content !important; + max-height: fit-content !important; + min-height: fit-content !important; + + margin: 0 !important; + padding: 0 !important; + max-width:none !important; + background-color: var(--white); + opacity: 1; + +} + +.modal-content.fullscreen { + height: auto !important; + min-height: 100% !important; + border-radius: 0 !important; +} + +.modal-header.fullscreen { + border-bottom: 1px solid #9ea2a2 !important; +} + +.modal-footer.fullscreen { + border-top: 1px solid #9ea2a2 !important; +} + +@media (max-width: 576px) { + + .modal-dialog.fullscreen-sm { + width: 100% !important; + height: 100% !important; + max-height: -moz-fit-content !important; + min-height: -moz-fit-content !important; + max-height: fit-content !important; + min-height: fit-content !important; + margin: 0 !important; + padding: 0 !important; + max-width:none !important; + + } + + .modal-content.fullscreen-sm { + height: auto !important; + min-height: 100% !important; + max-height: 100% !important; + border-radius: 0 !important; + } + + .modal-header.fullscreen-sm { + border-bottom: 1px solid #9ea2a2 !important; + } + + .modal-footer.fullscreen-sm { + border-top: 1px solid #9ea2a2 !important; + } +} \ No newline at end of file diff --git a/dist/css/modalizer.min.css b/dist/css/modalizer.min.css new file mode 100644 index 0000000..b7b9cda --- /dev/null +++ b/dist/css/modalizer.min.css @@ -0,0 +1,5 @@ +/*! + * Modalizer.js v1.0.0 modalizerjs.jlgarridol.com + * Copyright 2011-2020 José Luis Garrido-Labrador + * Licensed under MIT (https://github.com/jlgarridol/modalizerjs/blob/main/LICENSE) + */body{overflow-x:hidden;overflow-y:scroll!important}.modal{padding-right:0!important}.modal-backdrop.show{display:none}.MOD_supreme-container.modal-open{filter:blur(.5rem)}.modal-content{border:0!important}.modal-optionable{z-index:3000000000;background-color:rgba(0,0,0,.5);padding:0!important}.modal-optionable>.modal-dialog{--animate-duration:0.5s}.modal-optionable .modal-dialog{-webkit-transform:translate(0);-moz-transform:translate(0);transform:translate(0)}.modal-dialog.fullscreen{width:100%!important;height:100%!important;max-height:-moz-fit-content!important;min-height:-moz-fit-content!important;max-height:fit-content!important;min-height:fit-content!important;margin:0!important;padding:0!important;max-width:none!important;background-color:var(--white);opacity:1}.modal-content.fullscreen{height:auto!important;min-height:100%!important;border-radius:0!important}.modal-header.fullscreen{border-bottom:1px solid #9ea2a2!important}.modal-footer.fullscreen{border-top:1px solid #9ea2a2!important}@media (max-width:576px){.modal-dialog.fullscreen-sm{width:100%!important;height:100%!important;max-height:-moz-fit-content!important;min-height:-moz-fit-content!important;max-height:fit-content!important;min-height:fit-content!important;margin:0!important;padding:0!important;max-width:none!important}.modal-content.fullscreen-sm{height:auto!important;min-height:100%!important;max-height:100%!important;border-radius:0!important}.modal-header.fullscreen-sm{border-bottom:1px solid #9ea2a2!important}.modal-footer.fullscreen-sm{border-top:1px solid #9ea2a2!important}} \ No newline at end of file diff --git a/dist/js/modalizer.js b/dist/js/modalizer.js new file mode 100644 index 0000000..ed22d2c --- /dev/null +++ b/dist/js/modalizer.js @@ -0,0 +1,279 @@ +/*! + * Modalizer.js v1.0.0 modalizerjs.jlgarridol.com + * Copyright 2011-2020 José Luis Garrido-Labrador + * Licensed under MIT (https://github.com/jlgarridol/modalizerjs/blob/main/LICENSE) + */ + +let MOD_howManyModals = 0; +let MOD_modalz = 9999; +let MOD_animate = ""; +let MOD_oc = null; + +let MOD_optionable = null; +let MOD_actioned = false; + +if (typeof $().modal != 'function') { + // jQuery is not loaded + console.error("Bootstrap modals not loaded") +}else{ + $(document).ready(function(){ + /** + * Launch modals + */ + $(".modalinit").each(function(){ + $(this).click(function(){ + let btn = $(this); + let modal = $("#"+btn.data('modal')); + if(modal.length != 0) + launchModal(modal); + }) + }); + + /** + * Add funcionalitiy for all nextaction blocks + */ + $(".nextaction").each(function(){ + $(this).click(function(){ + let btn = $(this); + let stack = eval(MOD_CURRENTMODAL.peek().data('stack')); + let nexttext = btn.data('next') || ""; + let dialog = btn.closest("div.modal-dialog"); + MOD_optionable = {dialog: dialog, nexttext: nexttext, stack: stack, next:true}; + MOD_actioned = true; + boostrapAnimation(dialog, "fadeOutLeftBig"); + + }); + }); + + /** + * Add funcionalitiy for all nextaction blocks + */ + $(".beforeaction").each(function(){ + $(this).click(function(){ + let btn = $(this); + let stack = eval(MOD_CURRENTMODAL.peek().data('stack')); + let before = stack.pop() + let dialog = btn.closest("div.modal-dialog"); + MOD_optionable = {before: before, dialog: dialog, next:false}; + MOD_actioned = true; + boostrapAnimation(dialog, "fadeOutRightBig"); + }); + }); + + // Finish animation for modal dialog + $(".modal-dialog.animate__animated").each(function(){ + $(this).on('animationend', function(e) { + if (MOD_optionable != null && MOD_actioned){ + MOD_actioned = false; + MOD_optionable.dialog.hide(); + + if(MOD_optionable.next){ + MOD_optionable.stack.push(MOD_optionable.dialog.attr("id")); + if(MOD_optionable.nexttext != ""){ + let next = $("#"+MOD_optionable.nexttext); + boostrapAnimation(next, "fadeInRightBig"); + next.show(); + }else{ + resetmodals(); + } + }else{ + if(MOD_optionable.before != null){ + let before = $("#"+MOD_optionable.before) + boostrapAnimation(before, "fadeInLeftBig"); + before.show(); + }else{ + MOD_optionable.dialog.show(); + resetmodals(); + } + } + + } + + }) + }) + + // Add a show and bs function for each modal + $(".modal.modalizer").each(function(){ + $(this).on("show.bs.modal", function(){ + let it = $(this); + + if(!it.hasClass("modal-optionable")){ + // If modal is already open don't add in how_manyModals + $("#MOD_supreme-container").addClass("modal-open"); + it.css("z-index", ++MOD_modalz); + } + }); + + $(this).on("hide.bs.modal", function(e){ + e.preventDefault(); + let it = $(this); + var animation = it.data("animate-out") || null; + if(animation != null){ + it.addClass("animate__"+animation); + } + MOD_animate = animation; + MOD_oc = it; + it.removeClass("show"); + MOD_modalz--; + + if($('.modal[style*="display: block"]').length > 1){ + $("#MOD_supreme-container").addClass("modal-open"); + }else{ + $("#MOD_supreme-container").removeClass("modal-open"); + $("body").removeClass("modal-open"); + } + + }); + }) + + // Close modal function + $(".closemodal").each(function(){ + $(this).click(function(){ + let modal = $(this).closest("div.modal"); + modal.modal("hide"); + resetmodals(); + }); + }); + + //Finished animation + $(".modal.modalizer.animate__animated").each(function(){ + $(this).on('animationend', function(e) { + let it = $(this); + if (MOD_animate != null) + it.removeClass("animate__"+MOD_animate); + if(MOD_oc != null){ + MOD_oc.css("display","none"); + if (MOD_oc.hasClass("modal-optionable")){ + afterresetmodal(MOD_oc); + } + } + MOD_oc = null; + MOD_animate = null; + }) + }); + + $("#MOD_supreme-container").click(function(e){ + e.preventDefault(); + }) + + }); + +} + + +function boostrapAnimation(modal, animation){ + var cls = modal.attr("class").split(" "); + cls.pop(); + cls.push("animate__"+animation); + modal.attr("class", cls.join(" ")); +} + +function launchModal(modal){ + var animation = modal.data("animate-in") || null; + if(animation != null){ + modal.addClass("animate__"+animation); + } + if(modal.hasClass("show")){ + modal.removeClass("show"); + setTimeout(function() { + modal.css("z-index", ++MOD_modalz); + modal.addClass("show"); + }, 500); + }else{ + setCurrentModal(modal); + if(!modal.hasClass("modal-optionable")) + MOD_howManyModals++; + modal.modal("show"); + } + modal.css("display","block"); + setTimeout(function(){ + if(animation != null){ + modal.removeClass("animate__"+animation); + } + }, 1000); + $("#MOD_supreme-container").addClass("modal-open"); + +} + +function resetmodals(){ + let curmodal = MOD_CURRENTMODAL.pop(); + curmodal.modal("hide"); +} + +function afterresetmodal(curmodal){ + let stack = eval(curmodal.data('stack')); + if(stack != null){ + stack.clean(); + } + let loop = 0; + let anim = curmodal.data('animate-in') || null; + curmodal.children('div').each(function(){ + let modal = $(this); + boostrapAnimation(modal, "fadeInRight"); + if(loop == 0){ + modal.css("display", ""); + if(anim != null) + boostrapAnimation(modal, anim) + }else{ + modal.css("display", "none"); + } + loop++; + }); +} + +function setCurrentModal(modal){ + MOD_CURRENTMODAL.push(modal); +} + +// Utils + +class MOD_Stack { + constructor(){ + this.items = []; + } + + push(element) + { + // push element into the items + this.items.push(element); + } + + pop() + { + // return top most element in the stack + // and removes it from the stack + // Underflow if stack is empty + if (this.isEmpty()) + return null; + return this.items.pop(); + } + + peek() + { + // return the top most element from the stack + // but does'nt delete it. + return this.items[this.items.length - 1]; + } + + isEmpty() + { + // return true if stack is empty + return this.items.length == 0; + } + + clean(){ + this.items = []; + } + +} + +function removeItemOnce(arr, value) { + var index = arr.indexOf(value); + if (index > -1) { + arr.splice(index, 1); + } + return arr; +} + +// Current modal stack +const MOD_CURRENTMODAL = new MOD_Stack(); \ No newline at end of file diff --git a/dist/js/modalizer.min.js b/dist/js/modalizer.min.js new file mode 100644 index 0000000..4cc8e12 --- /dev/null +++ b/dist/js/modalizer.min.js @@ -0,0 +1,6 @@ +/*! + * Modalizer.js v1.0.0 modalizerjs.jlgarridol.com + * Copyright 2011-2020 José Luis Garrido-Labrador + * Licensed under MIT (https://github.com/jlgarridol/modalizerjs/blob/main/LICENSE) + */ +let MOD_howManyModals=0,MOD_modalz=9999,MOD_animate="",MOD_oc=null,MOD_optionable=null,MOD_actioned=!1;function boostrapAnimation(modal,animation){var cls=modal.attr("class").split(" ");cls.pop(),cls.push("animate__"+animation),modal.attr("class",cls.join(" "))}function launchModal(modal){var animation=modal.data("animate-in")||null;null!=animation&&modal.addClass("animate__"+animation),modal.hasClass("show")?(modal.removeClass("show"),setTimeout((function(){modal.css("z-index",++MOD_modalz),modal.addClass("show")}),500)):(setCurrentModal(modal),modal.hasClass("modal-optionable")||MOD_howManyModals++,modal.modal("show")),modal.css("display","block"),setTimeout((function(){null!=animation&&modal.removeClass("animate__"+animation)}),1e3),$("#MOD_supreme-container").addClass("modal-open")}function resetmodals(){let curmodal;MOD_CURRENTMODAL.pop().modal("hide")}function afterresetmodal(curmodal){let stack=eval(curmodal.data("stack"));null!=stack&&stack.clean();let loop=0,anim=curmodal.data("animate-in")||null;curmodal.children("div").each((function(){let modal=$(this);boostrapAnimation(modal,"fadeInRight"),0==loop?(modal.css("display",""),null!=anim&&boostrapAnimation(modal,anim)):modal.css("display","none"),loop++}))}function setCurrentModal(modal){MOD_CURRENTMODAL.push(modal)}"function"!=typeof $().modal?console.error("Bootstrap modals not loaded"):$(document).ready((function(){$(".modalinit").each((function(){$(this).click((function(){let btn=$(this),modal=$("#"+btn.data("modal"));0!=modal.length&&launchModal(modal)}))})),$(".nextaction").each((function(){$(this).click((function(){let btn=$(this),stack=eval(MOD_CURRENTMODAL.peek().data("stack")),nexttext=btn.data("next")||"",dialog=btn.closest("div.modal-dialog");MOD_optionable={dialog:dialog,nexttext:nexttext,stack:stack,next:!0},MOD_actioned=!0,boostrapAnimation(dialog,"fadeOutLeftBig")}))})),$(".beforeaction").each((function(){$(this).click((function(){let btn=$(this),stack=eval(MOD_CURRENTMODAL.peek().data("stack")),before=stack.pop(),dialog=btn.closest("div.modal-dialog");MOD_optionable={before:before,dialog:dialog,next:!1},MOD_actioned=!0,boostrapAnimation(dialog,"fadeOutRightBig")}))})),$(".modal-dialog.animate__animated").each((function(){$(this).on("animationend",(function(e){if(null!=MOD_optionable&&MOD_actioned)if(MOD_actioned=!1,MOD_optionable.dialog.hide(),MOD_optionable.next)if(MOD_optionable.stack.push(MOD_optionable.dialog.attr("id")),""!=MOD_optionable.nexttext){let next=$("#"+MOD_optionable.nexttext);boostrapAnimation(next,"fadeInRightBig"),next.show()}else resetmodals();else if(null!=MOD_optionable.before){let before=$("#"+MOD_optionable.before);boostrapAnimation(before,"fadeInLeftBig"),before.show()}else MOD_optionable.dialog.show(),resetmodals()}))})),$(".modal.modalizer").each((function(){$(this).on("show.bs.modal",(function(){let it=$(this);it.hasClass("modal-optionable")||($("#MOD_supreme-container").addClass("modal-open"),it.css("z-index",++MOD_modalz))})),$(this).on("hide.bs.modal",(function(e){e.preventDefault();let it=$(this);var animation=it.data("animate-out")||null;null!=animation&&it.addClass("animate__"+animation),MOD_animate=animation,MOD_oc=it,it.removeClass("show"),MOD_modalz--,$('.modal[style*="display: block"]').length>1?$("#MOD_supreme-container").addClass("modal-open"):($("#MOD_supreme-container").removeClass("modal-open"),$("body").removeClass("modal-open"))}))})),$(".closemodal").each((function(){$(this).click((function(){let modal;$(this).closest("div.modal").modal("hide"),resetmodals()}))})),$(".modal.modalizer.animate__animated").each((function(){$(this).on("animationend",(function(e){let it=$(this);null!=MOD_animate&&it.removeClass("animate__"+MOD_animate),null!=MOD_oc&&(MOD_oc.css("display","none"),MOD_oc.hasClass("modal-optionable")&&afterresetmodal(MOD_oc)),MOD_oc=null,MOD_animate=null}))})),$("#MOD_supreme-container").click((function(e){e.preventDefault()}))}));class MOD_Stack{constructor(){this.items=[]}push(element){this.items.push(element)}pop(){return this.isEmpty()?null:this.items.pop()}peek(){return this.items[this.items.length-1]}isEmpty(){return 0==this.items.length}clean(){this.items=[]}}function removeItemOnce(arr,value){var index=arr.indexOf(value);return index>-1&&arr.splice(index,1),arr}const MOD_CURRENTMODAL=new MOD_Stack; \ No newline at end of file diff --git a/doc/index.html b/doc/index.html index c9fa687..c9b5a9c 100644 --- a/doc/index.html +++ b/doc/index.html @@ -1,7 +1,7 @@ - Modalizer.js - Examples + Modalizer.js