Skip to content

Commit

Permalink
Meilleur système modal
Browse files Browse the repository at this point in the history
  • Loading branch information
@DridriLaBastos
DridriLaBastos committed Jul 19, 2022
1 parent 313fbfd commit 7214f34
Show file tree
Hide file tree
Showing 3 changed files with 108 additions and 104 deletions.
48 changes: 27 additions & 21 deletions public/css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2275,47 +2275,53 @@ body.modal-active {
overflow-y: hidden;
}

.modal-winwdows {
.modal-windows-container:not(.modal-active) {
display: none;
}

.el-modal-bg {
/*TODO: Generic rule ?*/
.modal-windows-container .el-modal-window #el-modal-edt:not(.modal-active),
.modal-windows-container .el-modal-window #el-modal-weather:not(.modal-active),
.modal-windows-container .el-modal-window #el-modal-transport:not(.modal-active) {
display: none;
}

.modal-windows-container.modal-active {
position: fixed;
width: 100%;
height: 100vh;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: 100000;
}

.el-modal-bg {
grid-area: 1/1;
width: 100%;
height: 100%;
background-color: var(--dark-page-color-alpha);
cursor: pointer;

display: none;
justify-content: center;
align-items: center;
}

.modal-quit-zone {
position: fixed;
width: 100%;
height: 100vh;
top: 0;
left: 0;
display: none;
}

.el-modal {
.el-modal-window {
grid-area: 1/1;
align-self: center;
justify-self: center;
justify-content: flex-start;
min-height: 66%;
min-width: 66%;
max-height: 66%;
max-width: 66%;
border-radius: 15px;
background-color: var(--page-color);
box-shadow: 0px 5px 50px -2px rgba(0, 0, 0, 0.75);
cursor: default;
}

.el-modal > .el-add {
justify-self: center;
}

.el-modal-close {
top: 0;
right: 0;
Expand Down
33 changes: 15 additions & 18 deletions public/js/app.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -384,27 +384,24 @@ child.push( async function () {
}
}

function closeModals () {
document.querySelectorAll('.el-modal-bg').forEach(elModalBg => {
elModalBg.style.display = 'none';
});
function toggleModal(modalWindowID) {
document.body.classList.toggle('modal-active');
document.querySelector('.modal-windows-container').classList.toggle('modal-active');
if (modalWindowID !== (null | ''))
document.getElementById(modalWindowID).classList.toggle('modal-active');
}

document.querySelectorAll('.el-modal-close').forEach(elModalClose => {
elModalClose.addEventListener('click',closeModals);
})
document.querySelectorAll('.el-modal-bg').forEach(elModalBg => {
elModalBg.addEventListener('click',closeModals);
})
document.querySelectorAll('.el-modal').forEach(elModal => {
elModal.onclick = event => { event.stopPropagation(); };
})

document.getElementById("el-utility-edt").onclick = () => {
document.getElementById("el-modal-edt").style.display = "flex";
document.body.classList.toggle('modal-active');
};
function closeModal() {
const openModal = document.querySelector('.modal-windows-container .el-modal-window .modal-active');
toggleModal(openModal.id.toString());
}

document.querySelector('.el-modal-bg').addEventListener('click', closeModal);
document.querySelector('.el-modal-close').addEventListener('click', closeModal);

document.getElementById('el-utility-edt').onclick = () => { toggleModal('el-modal-edt'); };
document.getElementById('el-utility-weather').onclick = () => { toggleModal('el-modal-weather'); };
document.getElementById('el-utility-transport').onclick = () => { toggleModal('el-modal-transport'); };
} );

child.run();
131 changes: 66 additions & 65 deletions views/home.ejs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@
</li>

<li class="element el-utility">
<a href="javascript:void(0);">
<a id="el-utility-weather" href="javascript:void(0);">
<div class="utility-logos">
<img class="el-utility-content dark-scheme-icon" src="img/icons/weather-icon-dsc.png" alt="weather icon for dark scheme" width="30" height="30"/>
<img class="el-utility-content light-scheme-icon" src="img/icons/weather-icon-lsc.png" alt="weather icon for light scheme" width="30" height="30"/>
Expand All @@ -29,7 +29,7 @@
</li>

<li class="element el-utility">
<a href="javascript:void(0);">
<a id="el-utility-transport" href="javascript:void(0);">
<div class="utility-logos">
<img class="el-utility-content dark-scheme-icon" src="img/icons/transport-icon-dsc.png" alt="transport icon for dark scheme" width="30" height="30">
<img class="el-utility-content light-scheme-icon" src="img/icons/transport-icon-lsc.png" alt="transport icon for light scheme" width="30" height="30">
Expand Down Expand Up @@ -73,74 +73,75 @@
</article>
</div>

<div class="el-modal-window">
<div class="el-modal-bg" id="el-modal-edt">
<div class ="el-modal element">
<a href="javascript:void(0);" class="el-modal-close">&times;</a>
<div class="el-add">
<div id="edt-container">
<div id="edt-form">
<div class="grade-block">
<select id="edt-grade">
<optgroup label="M2">
<option value="68419887" selected="">M2 SA</option>
<option value="68419888">M2 SR</option>
<option value="68419883">M2 MIAGE I.</option>
<option value="6">M2 MIAGE A.</option>
</optgroup>
<optgroup label="M1">
<option value="68425740">M1 INFO G1</option>
<option value="68425741">M1 INFO G2</option>
<option value="68426833">M1 INFO SA</option>
<option value="68426834">M1 INFO SR</option>
<option value="68419919">M1 MIAGE I.</option>
<option value="68419886">M1 MIAGE A.</option>
</optgroup>
<optgroup label="L3">
<option value="68419893">L3 SA</option>
<option value="68419892">L3 SR</option>
<option value="68419891">L3 MIAGE I.</option>
<option value="7">L3 MIAGE A.</option>
<option value="68426751">L3 DOUBLE</option>
</optgroup>
<optgroup label="L2">
<option value="68426361">L2 INFO G1</option>
<option value="68426362">L2 INFO G2</option>
<option value="68426891">L2 INFO G3</option>
<option value="68426987">L2 INFO G4</option>
</optgroup>
<optgroup label="L1">
<option value="18">L1 MI G1</option>
<option value="8">L1 MI G2</option>
<option value="68426495">L1 MI G3</option>
<option value="68426747">L1 MI G4</option>
<option value="68426748">L1 MI G5</option>
<option value="68426749">L1 MI G6</option>
</optgroup>
</select>
<input type="button" id="set-default-cookie" value="Conserver ce choix">
</div>
<div class="date-block">
<input type="button" id="edt-comeback" value="Aujourd'hui">
<input type="button" class="edt-backward" value="-">
<input type="button" class="edt-forward" value="+">
<input type="number" id="edt-week" min="1" max="52">
<input type="number" id="edt-year" min="2017" max="2099">
</div>
</div>
<div id="edt-img-cont"><img id="edt-img"
src="https://edt.univ-evry.fr/vue_etudiant_horizontale.php?current_year=2020&amp;current_student=68419887&amp;current_week=37&amp;lar=1920&amp;hau=1080"
alt="EDT">
<div class="modal-windows-container">
<div class="el-modal-bg"></div>
<div class="el-modal-window element">
<a href="javascript:void(0);" class="el-modal-close">&times;</a>
<div id="el-modal-edt">
<div id="edt-container">
<div id="edt-form">
<div class="grade-block">
<select id="edt-grade">
<optgroup label="M2">
<option value="68419887" selected="">M2 SA</option>
<option value="68419888">M2 SR</option>
<option value="68419883">M2 MIAGE I.</option>
<option value="6">M2 MIAGE A.</option>
</optgroup>
<optgroup label="M1">
<option value="68425740">M1 INFO G1</option>
<option value="68425741">M1 INFO G2</option>
<option value="68426833">M1 INFO SA</option>
<option value="68426834">M1 INFO SR</option>
<option value="68419919">M1 MIAGE I.</option>
<option value="68419886">M1 MIAGE A.</option>
</optgroup>
<optgroup label="L3">
<option value="68419893">L3 SA</option>
<option value="68419892">L3 SR</option>
<option value="68419891">L3 MIAGE I.</option>
<option value="7">L3 MIAGE A.</option>
<option value="68426751">L3 DOUBLE</option>
</optgroup>
<optgroup label="L2">
<option value="68426361">L2 INFO G1</option>
<option value="68426362">L2 INFO G2</option>
<option value="68426891">L2 INFO G3</option>
<option value="68426987">L2 INFO G4</option>
</optgroup>
<optgroup label="L1">
<option value="18">L1 MI G1</option>
<option value="8">L1 MI G2</option>
<option value="68426495">L1 MI G3</option>
<option value="68426747">L1 MI G4</option>
<option value="68426748">L1 MI G5</option>
<option value="68426749">L1 MI G6</option>
</optgroup>
</select>
<input type="button" id="set-default-cookie" value="Conserver ce choix">
</div>
<div id="modal-bar">
<div class="edt-backward">←</div>
<div id="modal-close">fermer</div>
<div class="edt-forward">→</div>
<div class="date-block">
<input type="button" id="edt-comeback" value="Aujourd'hui">
<input type="button" class="edt-backward" value="-">
<input type="button" class="edt-forward" value="+">
<input type="number" id="edt-week" min="1" max="52">
<input type="number" id="edt-year" min="2017" max="2099">
</div>
<div id="edt-info">Cliquer sur l’image pour agrandir.</div>
</div>
<div id="edt-img-cont"><img id="edt-img"
src="https://edt.univ-evry.fr/vue_etudiant_horizontale.php?current_year=2020&amp;current_student=68419887&amp;current_week=37&amp;lar=1920&amp;hau=1080"
alt="EDT">
</div>
<div id="modal-bar">
<div class="edt-backward">←</div>
<div id="modal-close">fermer</div>
<div class="edt-forward">→</div>
</div>
<div id="edt-info">Cliquer sur l’image pour agrandir.</div>
</div>
</div>
<div id="el-modal-weather"><p>Météo modale test</p></div>
<div id="el-modal-transport"><p>Transport modale test</p></div>
</div>
</div>
</main>
Expand Down

0 comments on commit 7214f34

Please sign in to comment.