CodeSolutionsProject/Modalizer.js
2
0
Fork 0
mirror of https://github.com/jlgarridol/Modalizer.js.git synced 2026-02-14 00:51:35 +01:00
Code Issues Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
José Luis Garrido Labrador
2020-08-29 19:45:15 +02:00
commit ffbfc08b31
7 changed files with 813 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.gitignore vendored Normal file
View File

@@ -0,0 +1,2 @@
node_modules/
package-lock.json

7
LICENCE Normal file
View File

@@ -0,0 +1,7 @@
Copyright 2020 José Luis Garrido-Labrador
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

2
README.md Normal file
View File

@@ -0,0 +1,2 @@
Modalizer.js
==

387
doc/index.html Normal file
View File

@@ -0,0 +1,387 @@
<html>
<head>
<meta charset="utf-8" />
<title>Modalizer.js - Examples</title>
<link href="https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootswatch/4.5.2/lux/bootstrap.min.css" integrity="sha384-9+PGKSqjRdkeAU7Eu4nkJU8RFaH8ace8HGXnkiKMP9I9Te0GJ4/km3L1Z8tXigpG" crossorigin="anonymous"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.0/animate.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@10.1.2/build/styles/solarized-dark.min.css">
<link rel="stylesheet" href="../src/modalizer.css" />
<meta content="width=device-width, initial-scale=1" name="viewport" />
<style>
body {
font-family: 'Source Sans Pro', sans-serif !important;
}
pre {
font-family: 'Source Code Pro', monospace !important;
}
code{
color:#268bd2;
}
code.hljs{
padding: 1rem;
border-radius: 5px;
}
.btn {
font-size: 1.76rem !important;
}
strong{
font-weight: bold;
}
</style>
</head>
<body>
<div class="MOD_supreme-container" id="MOD_supreme-container"> <!--All elements must be inside supreme-container except modals-->
<div class="container-md min-vh-100 d-flex align-items-stretch justify-content-center">
<div class="jumbotron container-fluid flex-fill my-0">
<div class="row justify-content-center">
<h1 class="col-12 text-center">Modalizer.js</h1>
<h5 class="col-7 text-center font-weight-normal">Lightweight extension over bootstrap's modals to improve of the control, animations and visualization of modal windows.</h5>
<h6 class="col-12 text-right font-weight-bold">Licensed under MIT, created by José Luis Garrido-Labrador</h6>
</div>
<hr>
<div class="row">
<h2 class="col-12 text-center font-weight-bold">Examples</h2>
<hr class="col-6 offset-3">
</div>
<div class="row text-center">
<div class="col-sm-12 col-md-4">
<h3>Defaults modals</h3>
<div class="container">
<div class="mx-2 my-5">
<button class="modalinit btn btn-lg btn-primary col-12 py-3 font-weight-bold" data-modal="standart" >Standart modal</button>
</div>
<div class="mx-2 my-5">
<button class="modalinit btn btn-lg btn-warning col-12 py-3 font-weight-bold" data-modal="fullscreen">Fullscreen modal</button>
</div>
<div class="mx-2 my-5">
<button class="modalinit btn btn-lg btn-success col-12 py-3 font-weight-bold" data-modal="fullscreen_mobile">Fullscreen on mobile modal</button>
</div>
</div>
</div>
<div class="col-sm-12 col-md-4">
<h3>Optionable modals</h3>
<div class="container">
<div class="mx-2 my-5">
<button class="modalinit btn btn-lg btn-danger col-12 py-3 font-weight-bold" data-modal="optionable">Optionable</button>
</div>
</div>
<h3 class="">Modal over modal</h3>
<div class="container">
<div class="mx-2 my-5">
<button class="modalinit btn btn-lg btn-secondary col-12 py-3 font-weight-bold" data-modal="overmodal">Modal over modal</button>
</div>
</div>
</div>
<div class="col-sm-12 col-md-4">
<h3>Custom animated modals</h3>
<div class="mx-2 my-5">
<button class="modalinit btn btn-lg btn-warning col-12 py-3 font-weight-bold" data-modal="updown">Up-Down modal</button>
</div>
<div class="mx-2 my-5">
<button class="modalinit btn btn-lg btn-info col-12 py-3 font-weight-bold" data-modal="flipflop">Flip modal</button>
</div>
<h4 class="">Customize with <br><a class="btn btn-link" href="https://animate.style/">Animate.css</a></h4>
</div>
</div>
<hr/>
<div class="row">
<h2 class="col-12 text-center font-weight-bold">Getting starting</h2>
<hr class="col-6 offset-3"/>
</div>
<div class="row">
<div class="col-12">
<div class="contiainer">
<div class="mx-4 my-2">
<h4>Installation</h4>
<p>Via npm</p>
<pre><code class="shell">$ npm install modalizer.js</code></pre>
<p>or add it directly using a CDN:</p>
<pre><code class="html">&lt;link rel="stylesheet" href="https://future/modalizer.min.css"/&gt;
&lt;script src="https://future/modalizer.min.js"&gt;&lt;/script&gt;</code></pre>
<h4>Basic usage</h4>
<h5>Launch modal</h5>
<p>Add class <code>modalinit</code> and modal's identifier in <code>data-modal</code> attribute to a <code>&lt;a&gt;</code>, <code>&lt;buttom&gt;</code> or any else HTML element.</p>
<p>Add class <code>modalizer</code> to the modal <code>div</code></p>
<p><strong>Example:</strong></p>
<pre><code class="html">&lt;a class="modalinit" data-modal="standart" href="#"&gt; Click to open&lt;/a&gt;
&lt;div class="modal modalizer fade" id="standart" tabindex= "-1" role="dialog"&gt;
...
&lt;/div&gt;</code></pre>
<h5>Close a modal</h5>
<p>Add class <code>closemodal</code> to a <code>&lt;a&gt;</code>, <code>&lt;buttom&gt;</code> or any else HTML element inside a modal <code>div</code></code>.</p>
<p><strong>Example:</strong></p>
<pre><code class="html">&lt;div class="modal modalizer fade" id="standart" tabindex= "-1" role="dialog"&gt;
...
&lt;button class="closemodal"&gt;Close&lt;/button&gt;
...
&lt;/div&gt;</code></pre>
<h5>Animate a modal</h5>
<p>Use a <strong>Animate.css</strong> animation for open and close animation</p>
<p>Add <code>data-animate-in</code> and <code>data-animate-out</code> with <i>Animate.css</i> animation (without animate__), remove class <code>fade</code> and add class <code>animate__animated</code> in modal</p>
<p><strong>Example:</strong></p>
<pre><code class="html">&lt;div class="modal modalizer animate__animated" id="standart" tabindex= "-1" role="dialog" data-animate-in="zoomIn" data-animate-out="zoomOut"&gt;
...
&lt;/div&gt;</code></pre>
<h4>Optionable modals</h4>
<p>A optionable modal is that have multiple submodals inside and the user can navigate it between their.<br>To transform a modal into an optionable you need to add the <code>modal-optionable</code> class and assign a <code>data-stack</code> to it.<br>It is necessary create a instance of <code>MOD_Stack</code> with the same name in the <i>javascript</i></p>
<p><strong>Example:</strong></p>
<pre><code class="html">&lt;div class="modal modalizer fade modal-optionable" data-stack="defaultStack" id="standart" tabindex= "-1" role="dialog"&gt;
...
&lt;/div&gt;
&lt;script&gt;
const defaultStack = new MOD_Stack();
&lt;/script&gt;</code></pre>
<h5>Create submodals</h5>
<p>
The submodals are the <code>modal-dialog</code> with <code>role="document"</code> and have full compatibility with classes for <code>modal-dialog</code> in <i>Bootstrap</i> like <code>centered</code> or <code>scrollable.</code>
<br>Any submodal, except the first, must have the style attribute <code>display: none</code>.
</p>
<p>To navigate between submodals exists two classes: <code>nextaction</code> and <code>beforeaction</code> to apply to a <code>&lt;a&gt;</code>, <code>&lt;button&gt;</code> or any alse HTML element.<br>
Also, it is necessary to add the attribute <code>data-next</code> with the identifier of the next submodal. If this attribute is not there then the modal will end.
<br>In the case of going backwards, the highest submodal in the stack will go. If the stack is empty then the modal will be closed.
<br>In addition, to enable the animation between submodals it is necessary add class <code>animate__animated</code> in the submodal.</p>
<p><strong>Example</strong></p>
<pre><code class="html">&lt;div class="modal modalizer fade modal-optionable" data-stack="defaultStack" id="standart" tabindex= "-1" role="dialog"&gt;
&lt;div class="modal-dialog animate__animated" id="first_submodal" role="document"&gt;
...
&lt;button class="beforeaction"&gt;Before&lt;/button&gt;
&lt;button class="nextaction" data-next="last_submodal"&gt;Next&lt;/button&gt;
...
&lt;/div&gt;
&lt;div class="modal-dialog animate__animated" id="last_submodal" role="document" style="display: none"&gt;
...
&lt;button class="beforeaction"&gt;Before&lt;/button&gt;
&lt;button class="nextaction"&gt;Next&lt;/button&gt;
...
&lt;/div&gt;
&lt;/div&gt;</code></pre>
<h4>Fullscreen modal</h4>
<p>For a fullscreen modal it is necessary add the class <code>fullscreen</code>to the <code>div</code>s with classes <code>modal-dialog</code>, <code>modal-content</code>, <code>modal-header</code> and <code>modal-footer</code>. To make it only for mobile screens you have to add <code>-sm</code> to fullscreen</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Footer -->
<footer class="page-footer font-small blue">
<!-- Copyright -->
<div class="footer-copyright text-center py-3">Licenced under MIT<br>© 2020 Copyright:
<a href="https://jlgarridol.com/">José Luis Garrido-Labrador</a>
</div>
<!-- Copyright -->
</footer>
<!-- Footer -->
</div>
<!--Modals-->
<div class="modal modalizer animate__animated animate__fast" id="standart" tabindex="-1" role="dialog" data-animate-in="zoomIn" data-animate-out="zoomOut">
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Standart modal</h5>
<button type="button" class="close align-self-end closemodal">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body mx-0 d-flex flex-column">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary closemodal">Close</button>
</div>
</div>
</div>
</div>
<div class="modal modalizer animate__animated animate__fast" id="fullscreen" tabindex="-1" role="dialog" data-animate-in="zoomIn" data-animate-out="zoomOut">
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable fullscreen" role="document">
<div class="modal-content fullscreen">
<div class="modal-header fullscreen">
<h5 class="modal-title">Fullscreen modal</h5>
<button type="button" class="close align-self-end closemodal">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body mx-0 d-flex flex-column">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer fullscreen">
<button type="button" class="btn btn-secondary closemodal">Close</button>
</div>
</div>
</div>
</div>
<div class="modal modalizer animate__animated animate__fast" id="fullscreen_mobile" tabindex="-1" role="dialog" data-animate-in="zoomIn" data-animate-out="zoomOut">
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable fullscreen-sm" role="document">
<div class="modal-content fullscreen-sm">
<div class="modal-header fullscreen-sm">
<h5 class="modal-title">Fullscreen on mobile modal</h5>
<button type="button" class="close align-self-end closemodal">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body mx-0 d-flex flex-column">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer fullscreen-sm">
<button type="button" class="btn btn-secondary closemodal">Close</button>
</div>
</div>
</div>
</div>
<div class="modal modalizer modal-optionable animate__animated animate__fast" tabindex="-1" id="optionable" data-stack="defaultstack" role="dialog" data-animate-in="fadeInRight" data-animate-out="fadeOutLeft">
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable animate__animated animate__faster" id="fpage" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Optionable modal</h5>
<button type="button" class="close align-self-end closemodal">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body mx-0">
</div>
<div class="modal-footer">
<div class="container-fluid">
<div class="row align-items-center">
<h5 class="col-3">Page 1/2</h5>
<div class="col-4 offset-1 d-flex justify-content-end">
<button type="button" class="btn btn-danger btn-block btn-sm beforeaction">Before</button>
</div>
<div class="col-4 d-flex justify-content-end">
<button type="button" class="btn btn-block btn-success btn-sm nextaction" data-next="lpage" >Next</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-dialog modal-dialog-centered modal-dialog-fullscreen modal-dialog-scrollable animate__animated animate__faster" id="lpage" style="display: none;" role="document">
<div class="modal-content fullscreen">
<div class="modal-header modal-header-fullscreen">
<h5 class="modal-title">Optionable modal</h5>
<button type="button" class="close align-self-end closemodal">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body mx-0">
<h1>Fullscreen block in optionable</h1>
</div>
<div class="modal-footer modal-footer-fullscreen">
<div class="container-fluid">
<div class="row align-items-center">
<h5 class="col-3">Page 2/2</h5>
<div class="col-4 offset-1 d-flex justify-content-end">
<button type="button" class="btn btn-danger btn-block btn-sm beforeaction">Before</button>
</div>
<div class="col-4 d-flex justify-content-end">
<button type="button" class="btn btn-block btn-success btn-sm nextaction" >Next</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal modalizer animate__animated animate__fast" id="overmodal" data-backdrop="static" tabindex="-1" role="dialog" data-animate-in="zoomIn" data-animate-out="zoomOut">
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal which launch another modal</h5>
<button type="button" class="close align-self-end closemodal">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body mx-0 d-flex flex-column">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary modalinit" data-modal="overmodal2">Go to another modal</button>
<button type="button" class="btn btn-secondary closemodal">Close</button>
</div>
</div>
</div>
</div>
<div class="modal modalizer animate__animated animate__fast" id="overmodal2" data-backdrop="static" tabindex="-1" role="dialog" data-animate-in="zoomIn" data-animate-out="zoomOut">
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable" role="document">
<div class="modal-content" style="width: 600px;">
<div class="modal-header">
<h5 class="modal-title">Another modal which launch a modal</h5>
<button type="button" class="close align-self-end closemodal">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body mx-0 d-flex flex-column">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet quam eget massa volutpat eleifend. Etiam dolor urna, fermentum at venenatis vitae, dignissim et quam. Curabitur eget mi ex. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Vivamus vitae risus ullamcorper, interdum erat nec, accumsan ligula. Vestibulum libero ligula, interdum nec urna non, porttitor consequat augue. Integer non dapibus dui, eget tempor erat. Aliquam at leo id dui bibendum semper. Fusce elementum nibh nec pharetra maximus. Vivamus sed ex erat. Integer eu sapien lacus.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary closemodal">Close</button>
</div>
</div>
</div>
</div>
<div class="modal modalizer animate__animated animate__fast" id="updown" tabindex="-1" role="dialog" data-animate-in="slideInUp" data-animate-out="slideOutDown">
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Up-Down modal</h5>
<button type="button" class="close align-self-end closemodal">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body mx-0 d-flex flex-column">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary closemodal">Close</button>
</div>
</div>
</div>
</div>
<div class="modal modalizer animate__animated animate__fast" id="flipflop" tabindex="-1" role="dialog" data-animate-in="flipInY" data-animate-out="flipOutX">
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Flip modal</h5>
<button type="button" class="close align-self-end closemodal">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body mx-0 d-flex flex-column">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary closemodal">Close</button>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js" integrity="sha384-LtrjvnR4Twt/qOuYxE721u19sVFLVSA4hf/rRt6PrZTmiPltdZcI7q7PXQBYTKyf" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@10.1.2/build/highlight.min.js"></script>
<script src="../src/modalizer.js"></script>
<script>
const defaultstack = new MOD_Stack(); //Default stack for a modals
</script>
<script>hljs.initHighlightingOnLoad();</script>
</body>
</html>

33
package.json Normal file
View File

@@ -0,0 +1,33 @@
{
"name": "modalizer.js",
"version": "1.0.0",
"description": "Lightweight extension over bootstrap's modals to improve of the control, animations and visualization of modal windows.",
"main": "dist/js/modalizer.js",
"style": "dist/css/modalizer.css",
"scripts": {
"test": "echo \"No test specified\" && exit 0"
},
"repository": {
"type": "git",
"url": "git+https://github.com/jlgarridol/modalizerjs.git"
},
"keywords": [
"bootstrap",
"modals",
"animation",
"navigation",
"css",
"javascript"
],
"author": "Jose Luis Garrido-Labrador",
"license": "MIT",
"bugs": {
"url": "https://github.com/jlgarridol/modalizerjs/issues"
},
"homepage": "https://github.com/jlgarridol/modalizerjs#readme",
"dependencies": {
"animate.css": "^4.1.0",
"bootstrap": "^4.5.2",
"jquery": "^3.5.1"
}
}

103
src/modalizer.css Normal file
View File

@@ -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;
}
}

279
src/modalizer.js Normal file
View File

@@ -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();