114 lines
3.6 KiB
JavaScript
114 lines
3.6 KiB
JavaScript
document.addEventListener('DOMContentLoaded', () => {
|
|
// Functions to open and close a modal
|
|
function openModal($el) {
|
|
$el.classList.add('is-active');
|
|
}
|
|
|
|
function closeModal($el) {
|
|
$el.classList.remove('is-active');
|
|
}
|
|
|
|
function closeAllModals() {
|
|
(document.querySelectorAll('.modal') || []).forEach(($modal) => {
|
|
closeModal($modal);
|
|
});
|
|
}
|
|
|
|
// Add a click event on buttons to open a specific modal
|
|
(document.querySelectorAll('.js-modal-trigger') || []).forEach(($trigger) => {
|
|
const modal = $trigger.dataset.target;
|
|
const $target = document.getElementById(modal);
|
|
|
|
$trigger.addEventListener('click', () => {
|
|
openModal($target);
|
|
});
|
|
});
|
|
|
|
// Add a click event on various child elements to close the parent modal
|
|
(document.querySelectorAll('.modal-background, .modal-close, .modal-card-head .delete, .modal-card-foot .button') || []).forEach(($close) => {
|
|
const $target = $close.closest('.modal');
|
|
|
|
$close.addEventListener('click', () => {
|
|
closeModal($target);
|
|
});
|
|
});
|
|
|
|
// Add a keyboard event to close all modals
|
|
document.addEventListener('keydown', (event) => {
|
|
if(event.key === "Escape") {
|
|
closeAllModals();
|
|
}
|
|
});
|
|
});
|
|
|
|
function openModalFromTemplate() {
|
|
const $target = document.getElementById('modal-article');
|
|
$target.classList.add('is-active');
|
|
}
|
|
|
|
(document.querySelectorAll('.modal-background, .modal-close, .modal-card-head .delete, .modal-card-foot .button') || []).forEach(($close) => {
|
|
const $target = $close.closest('.modal');
|
|
|
|
$close.addEventListener('click', () => {
|
|
closeModal($target);
|
|
});
|
|
});
|
|
|
|
document.addEventListener('keydown', (event) => {
|
|
if(event.key === "Escape") {
|
|
closeAllModals();
|
|
}
|
|
});
|
|
|
|
function closeModal($el) {
|
|
$el.classList.remove('is-active');
|
|
}
|
|
|
|
function closeAllModals() {
|
|
(document.querySelectorAll('.modal') || []).forEach(($modal) => {
|
|
closeModal($modal);
|
|
});
|
|
}
|
|
|
|
document.addEventListener('htmx:afterSwap', function(event) {
|
|
if (event.detail.target.classList[0] === 'modal-request') {
|
|
const articleTitre = document.querySelector('#article-titre');
|
|
const articleChapeau = document.querySelector('#article-chapeau');
|
|
const articleContenu = document.querySelector('#article-contenu');
|
|
const articleCouverture = document.querySelector('#article-couverture');
|
|
|
|
const response = JSON.parse(event.detail.xhr.response);
|
|
document.querySelector('.modal-request').innerHTML = ''
|
|
|
|
articleTitre.innerHTML = response.data.attributes.titre;
|
|
articleChapeau.innerHTML = response.data.attributes.chapeau;
|
|
articleContenu.innerHTML = response.data.attributes.contenu;
|
|
|
|
articleCouverture.setAttribute("src", `https://api.gong.gp${response.data.attributes.couverture.data.attributes.url}`);
|
|
if (response.data.attributes.couverture.data.attributes.alternativeText) {
|
|
articleCouverture.setAttribute("alt", response.data.attributes.couverture.data.attributes.alternativeText);
|
|
}
|
|
|
|
const fichiers = response.data.attributes.fichiers.data;
|
|
|
|
const articleFichiers = document.querySelector('#article-fichiers');
|
|
articleFichiers.innerHTML = '';
|
|
|
|
if (fichiers) {
|
|
|
|
articleFichiers.innerHTML = '';
|
|
|
|
fichiers.forEach(fichier => {
|
|
articleFichiers.insertAdjacentHTML('beforeend', `
|
|
<p id="fichier-${fichier.id}">
|
|
<span class="icon">
|
|
<ion-icon name="document"></ion-icon>
|
|
</span>
|
|
<a class="has-text-success" href="https://api.gong.gp${fichier.attributes.url}">${fichier.attributes.name}</a>
|
|
</p>
|
|
`);
|
|
});
|
|
}
|
|
}
|
|
});
|