ScoDoc/app/templates/assiduites/widgets/prompt.j2

248 lines
7.2 KiB
Plaintext
Raw Permalink Normal View History

2023-04-17 15:44:55 +02:00
{% block promptModal %}
<div id="promptModal" class="promptModal">
<!-- promptModal content -->
<div class="promptModal-content">
<div class="promptModal-header">
<span class="promptModal-close">&times;</span>
<h2 class="promptModal-title">promptModal Header</h2>
</div>
<div class="promptModal-body">
<p>Some text in the promptModal Body</p>
<p>Some other text...</p>
</div>
<div class="promptModal-footer">
<h3>promptModal Footer</h3>
</div>
</div>
</div>
<style>
/* The promptModal (background) */
.promptModal {
display: none;
/* Hidden by default */
position: fixed;
/* Stay in place */
z-index: 750;
2023-04-17 15:44:55 +02:00
/* Sit on top */
2023-06-23 16:12:36 +02:00
padding-top: 3vh;
2023-04-17 15:44:55 +02:00
/* Location of the box */
left: 0;
top: 0;
width: 100%;
/* Full width */
height: 100%;
/* Full height */
overflow: auto;
/* Enable scroll if needed */
background-color: rgb(0, 0, 0);
/* Fallback color */
background-color: rgba(0, 0, 0, 0.4);
/* Black w/ opacity */
}
/* promptModal Content */
.promptModal-content {
border-radius: 8px;
overflow: hidden;
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
border: 1px solid #888;
width: 45%;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s;
animation-name: animatetop;
animation-duration: 0.4s
}
/* Add Animation */
@-webkit-keyframes animatetop {
from {
top: -300px;
opacity: 0
}
to {
top: 0;
opacity: 1
}
}
@keyframes animatetop {
from {
top: -300px;
opacity: 0
}
to {
top: 0;
opacity: 1
}
}
/* The Close Button */
.promptModal-close {
color: white;
position: absolute;
right: 10px;
font-size: 28px;
font-weight: bold;
}
.promptModal-close:hover,
.promptModal-close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.promptModal-header {
padding: 2px 16px;
color: white;
display: flex;
justify-content: center;
align-items: center;
}
.promptModal-body {
padding: 2px 16px;
}
.promptModal-footer {
padding: 2px 16px;
color: white;
display: flex;
justify-content: space-evenly;
align-items: center;
}
.promptModal.is-active {
display: block;
}
.btnPrompt {
display: inline-block;
padding: 6px 12px;
font-size: 14px;
font-weight: 500;
text-align: center;
text-decoration: none;
color: #ffffff;
background-color: #6c757d;
border: none;
border-radius: 4px;
cursor: pointer;
transition: all 0.2s ease ease;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.2);
}
.btnPrompt:hover {
background-color: #5a6268;
}
.btnPrompt:active {
transform: translateY(1px);
}
.btnPrompt:disabled {
2023-07-26 07:32:32 +02:00
color: black;
opacity: 0.8;
2023-04-17 15:44:55 +02:00
background-color: whitesmoke;
2023-07-26 07:32:32 +02:00
background-image: repeating-linear-gradient(135deg, transparent, transparent 5px, rgba(81, 81, 81, 0.337) 5px, rgba(81, 81, 81, 0.337) 10px)
2023-04-17 15:44:55 +02:00
}
</style>
<script>
// Récupère l'élément modal par son ID
2023-04-17 15:44:55 +02:00
const promptModal = document.getElementById("promptModal");
/**
* Ouvre la fenêtre modale avec les paramètres spécifiés.
* @param {string} titre - Le titre de la modale.
* @param {HTMLElement} contenu - Le contenu de la modale.
* @param {Function} success - La fonction à appeler en cas de succès.
* @param {Function} [cancel] - La fonction à appeler en cas d'annulation (optionnelle).
* @param {string} [color="var(--color-error)"] - La couleur de fond des bannières de la modale (optionnelle).
*/
function openPromptModal(titre, contenu, success, cancel = () => { }, color = "var(--color-error)") {
// Active la modale en ajoutant une classe
2023-04-17 15:44:55 +02:00
promptModal.classList.add('is-active');
// Met à jour le titre et le contenu de la modale
2023-04-17 15:44:55 +02:00
promptModal.querySelector('.promptModal-title').textContent = titre;
promptModal.querySelector('.promptModal-body').innerHTML = "";
2023-04-17 15:44:55 +02:00
promptModal.querySelector('.promptModal-body').appendChild(contenu);
// Vide le pied de page et ajoute les boutons d'action
promptModal.querySelector('.promptModal-footer').innerHTML = "";
2023-04-17 15:44:55 +02:00
promptModalButtonAction(success, cancel).forEach((btnPrompt) => {
promptModal.querySelector('.promptModal-footer').appendChild(btnPrompt);
});
2023-04-17 15:44:55 +02:00
// Change la couleur de fond des bannières de la modale
const banners = Array.from(promptModal.querySelectorAll('.promptModal-footer, .promptModal-header'));
2023-04-17 15:44:55 +02:00
banners.forEach((ban) => {
ban.style.backgroundColor = color;
});
2023-06-30 14:38:56 +02:00
// Ajoute un écouteur d'événement pour fermer la modale en cliquant en dehors
2023-06-30 14:38:56 +02:00
promptModal.addEventListener('click', (e) => {
if (e.target.id == promptModal.id) {
promptModal.classList.remove('is-active');
promptModal.removeEventListener('click', this);
2023-06-30 14:38:56 +02:00
}
});
// Désactive le défilement de la page principale
document.body.style.overflow = "hidden";
2023-04-17 15:44:55 +02:00
}
/**
* Crée les boutons de validation et d'annulation pour la modale.
* @param {Function} success - La fonction à appeler en cas de succès.
* @param {Function} cancel - La fonction à appeler en cas d'annulation.
* @returns {HTMLElement[]} - Les boutons de validation et d'annulation.
*/
2023-04-17 15:44:55 +02:00
function promptModalButtonAction(success, cancel) {
const succBtn = document.createElement('button');
succBtn.classList.add("btnPrompt");
succBtn.textContent = "Valider";
2023-04-17 15:44:55 +02:00
succBtn.addEventListener('click', () => {
const retour = success(closePromptModal);
2023-06-23 16:12:36 +02:00
if (retour == null || retour == false || retour == undefined) {
closePromptModal();
}
});
const cancelBtn = document.createElement('button');
cancelBtn.classList.add("btnPrompt");
cancelBtn.textContent = "Annuler";
2023-04-17 15:44:55 +02:00
cancelBtn.addEventListener('click', () => {
cancel();
closePromptModal();
});
2023-04-17 15:44:55 +02:00
return [succBtn, cancelBtn];
2023-04-17 15:44:55 +02:00
}
/**
* Ferme la fenêtre modale.
*/
2023-04-17 15:44:55 +02:00
function closePromptModal() {
promptModal.classList.remove("is-active");
document.body.style.overflow = "auto";
2023-04-17 15:44:55 +02:00
}
// Ajoute un écouteur d'événement pour fermer la modale en cliquant sur le bouton de fermeture
2023-04-17 15:44:55 +02:00
const promptClose = document.querySelector(".promptModal-close");
promptClose.onclick = function () {
closePromptModal();
};
2023-06-30 14:38:56 +02:00
2023-04-17 15:44:55 +02:00
</script>
{% endblock promptModal %}