From 5341f976da92a60512e77c3cd3cb02f791488a84 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?C=C3=A9dric=20FAMIBELLE-PRONZOLA?= <c.pronzola@tuta.io>
Date: Sat, 12 Apr 2025 21:55:09 +0400
Subject: [PATCH] move categories script to a js file

---
 categories.php   | 105 +++++------------------------------------------
 js/categories.js |  91 ++++++++++++++++++++++++++++++++++++++++
 2 files changed, 101 insertions(+), 95 deletions(-)
 create mode 100644 js/categories.js
diff --git a/categories.php b/categories.php
index b07a2b9..c546858 100644
--- a/categories.php
+++ b/categories.php
@@ -12,7 +12,7 @@ $allCategories = PEERTUBE_CATEGORIES;
 if ($categoryId && isset($allCategories[$categoryId])) {
     // Récupérer le nom de la catégorie
     $categoryName = $allCategories[$categoryId];
-    
+
     // Récupérer les vidéos de cette catégorie via l'API PeerTube
     $videos = getVideosByCategory($categoryId, CATEGORY_VIDEOS_COUNT); // Récupérer le nombre défini dans la config
 } else {
@@ -30,7 +30,7 @@ if ($categoryId && isset($allCategories[$categoryId])) {
     <title><?php echo htmlspecialchars($categoryName); ?> - kaubuntu.re</title>
     <link rel="stylesheet" href="css/styles.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
-    
+
     <!-- Favicons -->
     <link rel="apple-touch-icon" sizes="180x180" href="img/apple-touch-icon.png">
     <link rel="icon" type="image/png" sizes="32x32" href="img/favicon-32x32.png">
@@ -41,11 +41,11 @@ if ($categoryId && isset($allCategories[$categoryId])) {
 </head>
 <body>
     <?php include 'includes/sidebar.php'; ?>
-    
+
     <!-- Contenu principal -->
     <div class="main-content">
         <?php include 'includes/header.php'; ?>
-        
+
         <!-- Section catégorie -->
         <div class="video-section category-page" data-category-id="<?php echo $categoryId; ?>">
             <div class="section-header">
@@ -54,7 +54,7 @@ if ($categoryId && isset($allCategories[$categoryId])) {
                 </div>
                 <h2 class="section-title">Catégorie : <?php echo htmlspecialchars($categoryName); ?></h2>
             </div>
-            
+
             <?php if (empty($videos)): ?>
             <div class="no-videos-message">
                 <i class="fas fa-video-slash"></i>
@@ -93,104 +93,19 @@ if ($categoryId && isset($allCategories[$categoryId])) {
                 </div>
                 <?php endforeach; ?>
             </div>
-            
+
             <?php if (count($videos) >= CATEGORY_VIDEOS_COUNT): ?>
             <button class="view-more" data-page="1">Voir plus</button>
             <?php endif; ?>
             <?php endif; ?>
         </div>
     </div>
-    
+
     <?php include 'includes/footer.php'; ?>
     <?php include 'includes/mobile-menu.php'; ?>
-    
+
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
     <script src="js/main.js"></script>
-    <script>
-    document.addEventListener('DOMContentLoaded', function() {
-        // Gestion des clics sur les vidéos
-        const videoCards = document.querySelectorAll('.video-card');
-        videoCards.forEach(card => {
-            card.addEventListener('click', function() {
-                const videoId = this.dataset.videoId;
-                if (videoId) {
-                    window.location.href = 'video.php?id=' + videoId;
-                }
-            });
-        });
-        
-        // Gestion du bouton "Voir plus"
-        const viewMoreBtn = document.querySelector('.view-more');
-        if (viewMoreBtn) {
-            viewMoreBtn.addEventListener('click', function() {
-                const page = parseInt(this.dataset.page);
-                const categoryId = document.querySelector('.video-section').dataset.categoryId;
-                
-                // Changer le texte du bouton pendant le chargement
-                this.textContent = 'Chargement...';
-                this.disabled = true;
-                
-                // Faire la requête AJAX
-                fetch(`ajax/load-more-videos.php?type=category&page=${page}&category=${categoryId}`, {
-                    headers: {
-                        'X-Requested-With': 'XMLHttpRequest'
-                    }
-                })
-                .then(response => response.json())
-                .then(data => {
-                    if (data.success) {
-                        // Ajouter les nouvelles vidéos à la grille
-                        const videoGrid = document.querySelector('.video-grid');
-                        const tempDiv = document.createElement('div');
-                        tempDiv.innerHTML = data.html;
-                        
-                        // Ajouter chaque vidéo à la grille
-                        while (tempDiv.firstChild) {
-                            videoGrid.appendChild(tempDiv.firstChild);
-                        }
-                        
-                        // Mettre à jour le numéro de page
-                        this.dataset.page = data.page + 1;
-                        
-                        // Réinitialiser le texte du bouton
-                        this.textContent = 'Voir plus';
-                        this.disabled = false;
-                        
-                        // Si plus de vidéos à charger, masquer le bouton
-                        if (!data.hasMore) {
-                            this.style.display = 'none';
-                        }
-                        
-                        // Initialiser les clics sur les nouvelles vidéos
-                        document.querySelectorAll('.video-card:not([data-click-initialized])').forEach(card => {
-                            card.setAttribute('data-click-initialized', 'true');
-                            card.addEventListener('click', function() {
-                                const videoId = this.dataset.videoId;
-                                if (videoId) {
-                                    window.location.href = 'video.php?id=' + videoId;
-                                }
-                            });
-                        });
-                    } else {
-                        // Gérer l'erreur
-                        this.textContent = 'Erreur lors du chargement';
-                        setTimeout(() => {
-                            this.textContent = 'Voir plus';
-                            this.disabled = false;
-                        }, 2000);
-                    }
-                })
-                .catch(error => {
-                    console.error('Erreur:', error);
-                    this.textContent = 'Erreur lors du chargement';
-                    setTimeout(() => {
-                        this.textContent = 'Voir plus';
-                        this.disabled = false;
-                    }, 2000);
-                });
-            });
-        }
-    });
-    </script>
+    <script src="js/categories.js"></script>
 </body>
-</html> 
\ No newline at end of file
+</html>
diff --git a/js/categories.js b/js/categories.js
new file mode 100644
index 0000000..66ce337
--- /dev/null
+++ b/js/categories.js
@@ -0,0 +1,91 @@
+document.addEventListener("DOMContentLoaded", () => {
+  // Gestion des clics sur les vidéos
+  const videoCards = document.querySelectorAll(".video-card");
+
+  for (const videoCard of videoCards) {
+    videoCard.addEventListener("click", function () {
+      const videoId = this.dataset.videoId;
+      if (videoId) {
+        window.location.href = `video.php?id=${videoId}`;
+      }
+    });
+  }
+  // Gestion du bouton "Voir plus"
+  const viewMoreBtn = document.querySelector(".view-more");
+  if (viewMoreBtn) {
+    viewMoreBtn.addEventListener("click", function () {
+      const page = Number.parseInt(this.dataset.page);
+      const categoryId =
+        document.querySelector(".video-section").dataset.categoryId;
+
+      // Changer le texte du bouton pendant le chargement
+      this.textContent = "Chargement...";
+      this.disabled = true;
+
+      // Faire la requête AJAX
+      fetch(
+        `ajax/load-more-videos.php?type=category&page=${page}&category=${categoryId}`,
+        {
+          headers: {
+            "X-Requested-With": "XMLHttpRequest",
+          },
+        }
+      )
+        .then((response) => response.json())
+        .then((data) => {
+          if (data.success) {
+            // Ajouter les nouvelles vidéos à la grille
+            const videoGrid = document.querySelector(".video-grid");
+            const tempDiv = document.createElement("div");
+            tempDiv.innerHTML = data.html;
+
+            // Ajouter chaque vidéo à la grille
+            while (tempDiv.firstChild) {
+              videoGrid.appendChild(tempDiv.firstChild);
+            }
+
+            // Mettre à jour le numéro de page
+            this.dataset.page = data.page + 1;
+
+            // Réinitialiser le texte du bouton
+            this.textContent = "Voir plus";
+            this.disabled = false;
+
+            // Si plus de vidéos à charger, masquer le bouton
+            if (!data.hasMore) {
+              this.style.display = "none";
+            }
+
+            // Initialiser les clics sur les nouvelles vidéos
+            const cards = document.querySelectorAll(".video-card:not([data-click-initialized])")
+
+            for (const card of cards) {
+              card.setAttribute("data-click-initialized", "true");
+              card.addEventListener("click", function () {
+                const videoId = this.dataset.videoId;
+                if (videoId) {
+                  window.location.href = `video.php?id=${videoId}`;
+                }
+              });
+
+            }
+          } else {
+            // Gérer l'erreur
+            this.textContent = "Erreur lors du chargement";
+            setTimeout(() => {
+              this.textContent = "Voir plus";
+              this.disabled = false;
+            }, 2000);
+          }
+        })
+        .catch((error) => {
+          console.error("Erreur:", error);
+          this.textContent = "Erreur lors du chargement";
+          setTimeout(() => {
+            this.textContent = "Voir plus";
+            this.disabled = false;
+          }, 2000);
+        });
+    });
+  }
+});
