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

217 lines
5.8 KiB
Django/Jinja

{% 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;
/* Sit on top */
padding-top: 3vh;
/* 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 {
color: black;
opacity: 0.8;
background-color: whitesmoke;
background-image: repeating-linear-gradient(135deg, transparent, transparent 5px, rgba(81, 81, 81, 0.337) 5px, rgba(81, 81, 81, 0.337) 10px)
}
</style>
<script>
const promptModal = document.getElementById("promptModal");
function openPromptModal(titre, contenu, success, cancel = () => { }, color = "var(--color-error)") {
promptModal.classList.add('is-active');
promptModal.querySelector('.promptModal-title').textContent = titre;
promptModal.querySelector('.promptModal-body').innerHTML = ""
promptModal.querySelector('.promptModal-body').appendChild(contenu);
promptModal.querySelector('.promptModal-footer').innerHTML = ""
promptModalButtonAction(success, cancel).forEach((btnPrompt) => {
promptModal.querySelector('.promptModal-footer').appendChild(btnPrompt)
})
const banners = Array.from(promptModal.querySelectorAll('.promptModal-footer,.promptModal-header'))
banners.forEach((ban) => {
ban.style.backgroundColor = color;
})
promptModal.addEventListener('click', (e) => {
if (e.target.id == promptModal.id) {
promptModal.classList.remove('is-active');
promptModal.removeEventListener('click', this)
}
})
}
function promptModalButtonAction(success, cancel) {
const succBtn = document.createElement('button')
succBtn.classList.add("btnPrompt")
succBtn.textContent = "Valider"
succBtn.addEventListener('click', () => {
const retour = success();
if (retour == null || retour == false || retour == undefined) {
closePromptModal();
}
})
const cancelBtn = document.createElement('button')
cancelBtn.classList.add("btnPrompt")
cancelBtn.textContent = "Annuler"
cancelBtn.addEventListener('click', () => {
cancel();
closePromptModal();
})
return [succBtn, cancelBtn]
}
function closePromptModal() {
promptModal.classList.remove("is-active")
}
const promptClose = document.querySelector(".promptModal-close");
promptClose.onclick = function () {
closePromptModal()
}
</script>
{% endblock promptModal %}