Handle articles

css/main.css

@@ -1,3 +1,14 @@
+.card {
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.card-content {
+  flex-grow: 1;
+}
+
 .charte-modal {
   color: #07892f;
   transition: color 0.3s ease;

index.html

@@ -38,16 +38,18 @@
           <div class="columns is-multiline p-3">
             {{#data}}
               <div class="column is-one-third">
-                <div class="card">
+                <div class="card" onclick="openModalFromTemplate()"
+                  hx-target=".modal-request"
+                  hx-get="http://localhost:1337/api/articles/{{id}}?populate=couverture,fichiers">
                   <div class="card-image">
-                    <figure class="image is-square">
+                    <figure id="info-details" class="image is-3by2">
                       <img src="http://localhost:1337{{attributes.couverture.data.attributes.url}}" alt="{{attributes.couverture.data.attributes.alternativeText}}">
                     </figure>
                   </div>
                   <div class="card-content">
                     <div class="content">
                       <h2 class="title">{{attributes.titre}}</h2>
-                      {{{attributes.chapeau}}}
+                      <p class="is-italic">{{{attributes.chapeau}}}</p>
                     </div>
                   </div>
                   <footer class="card-footer">
@@ -793,6 +795,28 @@
         </footer>
       </div>
     </div>
+    <div id="modal-article" class="modal">
+      <div class="modal-background"></div>
+      <div class="modal-card">
+        <header class="modal-card-head">
+          <p id="article-titre" class="modal-card-title"></p>
+          <button class="delete" aria-label="close"></button>
+        </header>
+        <section id="modal-card-render" class="modal-card-body">
+          <figure class="image is-3by2 mx-auto mb-3">
+            <img id="article-couverture">
+          </figure>
+          <p id="article-chapeau" class="mb-5 is-italic subtitle"></p>
+          <p id="article-contenu"></p>
+          <hr>
+          <div id="article-fichiers"></div>
+        </section>
+        <section class="modal-request"></section>
+        <footer class="modal-card-foot">
+          <button class="button">Fermer</button>
+        </footer>
+      </div>
+    </div>
     <footer class="footer">
       <div class="content has-text-centered">
         <q>
@@ -805,7 +829,7 @@
         <br>
         <small>Serge GLAUDE (Co-fondateur du GONG)</small>
       </div>
-    </footer>    
+    </footer>
     <script src="./js/main.js"></script>
     <script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
     <script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>

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>
+        `);
+    });
+    }
+  }
+});