move categories script to a js file
This commit is contained in:
+10
-95
@@ -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>
|
||||
</html>
|
||||
|
||||
@@ -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);
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
Reference in New Issue
Block a user