ajout d'une fonctionnalité pour l'affichage des diapositives des présentations dans la page présentations lors du clic sur un hyperlien

- modification du Makefile pour ajouter un template pour les pages
- ajout d'un script JS pour capturer l'événement du clic sur un hyperlien avec la classe 'load-content'
- ajout de propriété css pour que la div contenant l'iframe n'apparaisse que lorsqu'il y a une iframe à l'intérieur
- réglage de l'affichage des slides en css
- la commande 'make html' a mis à jour toutes les pages du site utilisant le template page.html

2 files changed, 41 insertions, 0 deletions

diff --git a/static/css/styles.css b/static/css/styles.css
index c18f08e..8ed60a7 100644
--- a/static/css/styles.css
+++ b/static/css/styles.css
@@ -33,6 +33,7 @@ img {
     grid-row: 2;
     background-color: rgb(255, 255, 255);
     border: 3px solid black;
+    height: fit-content;
 }
 
 .content {
@@ -149,6 +150,23 @@ footer a:hover, footer a:active {
     grid-row: 2;
 }
 
+.side-page.has-iframe {
+    position: -webkit-sticky;
+    position: sticky;
+    height: fit-content;
+    top: 0;
+    border: 3px solid black;
+    background-color: rgb(255, 255, 255);
+    grid-column: 1;
+    grid-row: 2;
+}
+
+.side-page iframe {
+    width: 100%;
+    height: 350px;
+    border: 0;
+}
+
 .toc ul {
     list-style: none;
 }
diff --git a/static/js/script.js b/static/js/script.js
new file mode 100644
index 0000000..f388be4
--- /dev/null
+++ b/static/js/script.js
@@ -0,0 +1,23 @@
+document.addEventListener('DOMContentLoaded', function () {
+    // Sélectionner tous les hyperliens avec la classe 'load-content'
+    const links = document.querySelectorAll('a.load-content');
+
+    // Ajouter un gestionnaire d'événements pour chaque lien
+    links.forEach(function(link) {
+        link.addEventListener('click', function(event) {
+            event.preventDefault(); // Empêcher le comportement par défaut du lien
+
+            const url = this.href; // Récupérer l'URL du lien
+
+            // Créer une nouvelle iframe
+            const iframe = document.createElement('iframe');
+            iframe.src = url;
+
+            // Vider la div 'contentDiv' et y ajouter la nouvelle iframe
+            const contentDiv = document.getElementById('contentIframe');
+            contentDiv.innerHTML = ''; // Effacer le contenu précédent
+            contentDiv.appendChild(iframe);
+            contentDiv.classList.add('has-iframe');
+        });
+    });
+});
\ No newline at end of file