Handle articles

js/main.js

@@ -18,7 +18,7 @@ document.addEventListener('DOMContentLoaded', () => {
     (document.querySelectorAll('.js-modal-trigger') || []).forEach(($trigger) => {
       const modal = $trigger.dataset.target;
       const $target = document.getElementById(modal);
-  
+
       $trigger.addEventListener('click', () => {
         openModal($target);
       });
@@ -40,3 +40,74 @@ document.addEventListener('DOMContentLoaded', () => {
       }
     });
 });
+
+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", `http://localhost:1337${response.data.attributes.couverture.data.attributes.url}`);
+    articleCouverture.setAttribute("alt", `http://localhost:1337${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 = '';
+
+      articleFichiers.insertAdjacentHTML('beforeend', '<h3 class="title is-4 has-text-centered">Documents</h3>');
+
+      fichiers.forEach(fichier => {
+        articleFichiers.insertAdjacentHTML('beforeend', `
+          <p id="fichier-${fichier.id}">
+            <span class="icon">
+              <ion-icon name="document"></ion-icon>
+            </span>
+            <a href="http://localhost:1337${fichier.attributes.url}">${fichier.attributes.name}</a>
+          </p>
+        `);
+    });
+    }
+  }
+});