ORGANISATION-KA-INTERNATIONALE/kaubuntu.re
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: load more button

Browse Source
This commit is contained in:
Cédric Famibelle-Pronzola
2026-01-15 19:38:55 +04:00
parent 10f0b9a6eb
commit b3eae9ea82
6 changed files with 64 additions and 136 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ajax/load-more-videos.php
+7 -1
View File
@@ -1,4 +1,9 @@
<?php
// Démarrer la session avant tout
if (session_status() === PHP_SESSION_NONE) {
session_start();
}
// Inclure la configuration
require_once '../includes/config.php';
@@ -44,7 +49,8 @@ if ($type === 'category' && $categoryId <= 0) {
// Récupérer les vidéos en fonction du type
$videos = [];
$offset = $page * LOAD_MORE_COUNT;
// Utiliser offset directement s'il est fourni, sinon calculer à partir de page
$offset = isset($_GET['offset']) ? intval($_GET['offset']) : $page * LOAD_MORE_COUNT;
switch ($type) {
case 'recent':
categories.php
+2 -2
View File
@@ -164,7 +164,7 @@ if ($categoryId && isset($allCategories[$categoryId])) {
<?php include 'includes/footer.php'; ?>
<?php include 'includes/mobile-menu.php'; ?>
<script src="js/main.js"></script>
<script src="js/categories.js"></script>
<script src="js/main.js?v=<?php echo filemtime('js/main.js'); ?>"></script>
<script src="js/categories.js?v=<?php echo filemtime('js/categories.js'); ?>"></script>
</body>
</html>
includes/security.php
+16 -3
View File
@@ -293,15 +293,28 @@ function setSecurityHeaders() {
* @return bool True si l'origine est valide
*/
function validateAjaxOrigin() {
$origin = $_SERVER['HTTP_ORIGIN'] ?? '';
$host = $_SERVER['HTTP_HOST'] ?? '';
if (empty($origin) || empty($host)) {
if (empty($host)) {
return false;
}
$expectedOrigin = (isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] === 'on' ? 'https' : 'http') . '://' . $host;
return $origin === $expectedOrigin;
// Vérifier l'en-tête Origin si présent
$origin = $_SERVER['HTTP_ORIGIN'] ?? '';
if (!empty($origin)) {
return $origin === $expectedOrigin;
}
// Si Origin est absent (requête same-origin), vérifier le Referer
$referer = $_SERVER['HTTP_REFERER'] ?? '';
if (!empty($referer)) {
return strpos($referer, $expectedOrigin) === 0;
}
// Accepter si ni Origin ni Referer (certains navigateurs/configs)
// La protection CSRF reste active via le token
return true;
}
?>
index.php
+3 -3
View File
@@ -424,7 +424,7 @@ setSecurityHeaders();
<hr class="section-divider">
<!-- Section Dernières vidéos -->
<section class="video-section" aria-labelledby="recent-videos-heading">
<section class="video-section" data-video-type="recent" aria-labelledby="recent-videos-heading">
<header class="section-header">
<div class="section-logo">
<img src="img/logo.png" alt="Logo kaubuntu.re" aria-hidden="true">
@@ -484,7 +484,7 @@ setSecurityHeaders();
<hr class="section-divider">
<!-- Section Tendances -->
<section class="video-section" aria-labelledby="trending-videos-heading">
<section class="video-section" data-video-type="trending" aria-labelledby="trending-videos-heading">
<header class="section-header">
<div class="section-logo">
<img src="img/logo.png" alt="Logo kaubuntu.re" aria-hidden="true">
@@ -642,7 +642,7 @@ setSecurityHeaders();
</main>
<?php include 'includes/footer.php'; ?>
<?php include 'includes/mobile-menu.php'; ?>
<script src="js/main.js"></script>
<script src="js/main.js?v=<?php echo filemtime('js/main.js'); ?>"></script>
<script src="js/mastodon-timeline.umd.js"></script>
<script src="js/mastodon-config.php"></script>
js/categories.js
+10 -90
View File
@@ -1,97 +1,17 @@
document.addEventListener("DOMContentLoaded", () => {
// Gestion des clics sur les vidéos
// Gestion des clics sur les vidéos initiales de la page catégorie
// Note: Le bouton "Voir Plus" est géré par main.js via data-category-id
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;
// Préparer les données avec token CSRF
const formData = new FormData();
formData.append('csrf_token', document.querySelector('meta[name="csrf-token"]').getAttribute('content'));
// Faire la requête AJAX
fetch(
`ajax/load-more-videos.php?type=category&page=${page}&category=${categoryId}`,
{
method: 'POST',
headers: {
"X-Requested-With": "XMLHttpRequest",
},
body: formData
if (!videoCard.hasAttribute("data-click-initialized")) {
videoCard.setAttribute("data-click-initialized", "true");
videoCard.addEventListener("click", function () {
const videoId = this.dataset.videoId;
if (videoId) {
window.location.href = `video.php?id=${videoId}`;
}
)
.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);
});
});
});
}
}
});
js/main.js
+17 -28
View File
@@ -320,51 +320,42 @@ document.addEventListener('DOMContentLoaded', function() {
viewMoreButtons.forEach(button => {
// Déterminer le type de vidéos à charger
const section = button.closest('.video-section');
const sectionTitle = section.querySelector('.section-title').textContent.trim().toLowerCase();
const videoGrid = section.querySelector('.video-grid');
let videoType = '';
let categoryId = null;
if (sectionTitle.includes('dernières')) {
videoType = 'recent';
} else if (sectionTitle.includes('tendances')) {
videoType = 'trending';
} else if (sectionTitle.includes('indépendance')) {
videoType = 'independence';
} else {
// Vérifier si c'est une section de catégorie
const categorySection = section.querySelector('[data-category-id]');
if (categorySection) {
videoType = 'category';
categoryId = categorySection.dataset.categoryId;
} else if (section.hasAttribute('data-category-id')) {
videoType = 'category';
categoryId = section.dataset.categoryId;
}
// Utiliser l'attribut data-video-type si présent (méthode prioritaire)
if (section.hasAttribute('data-video-type')) {
videoType = section.dataset.videoType;
} else if (section.hasAttribute('data-category-id')) {
// Section de catégorie
videoType = 'category';
categoryId = section.dataset.categoryId;
}
// Si aucun type reconnu, ne pas configurer l'événement
if (!videoType) return;
// Stocker le numéro de page actuel
button.dataset.page = '1';
button.addEventListener('click', function() {
const page = parseInt(this.dataset.page);
// Compter les vidéos déjà affichées pour calculer l'offset
const currentCount = videoGrid.querySelectorAll('.video-card').length;
// Changer le texte du bouton pendant le chargement
button.textContent = 'Chargement...';
button.disabled = true;
// Préparer l'URL avec les paramètres
let url = `ajax/load-more-videos.php?type=${videoType}&page=${page}`;
// Préparer l'URL avec les paramètres (utiliser offset au lieu de page)
let url = `ajax/load-more-videos?type=${videoType}&offset=${currentCount}`;
if (videoType === 'category' && categoryId) {
url += `&category=${categoryId}`;
}
// Préparer les données avec token CSRF
const formData = new FormData();
formData.append('csrf_token', document.querySelector('meta[name="csrf-token"]').getAttribute('content'));
const csrfMeta = document.querySelector('meta[name="csrf-token"]');
if (csrfMeta) {
formData.append('csrf_token', csrfMeta.getAttribute('content'));
}
// Faire la requête AJAX
fetch(url, {
@@ -372,7 +363,8 @@ document.addEventListener('DOMContentLoaded', function() {
headers: {
'X-Requested-With': 'XMLHttpRequest'
},
body: formData
body: formData,
credentials: 'same-origin'
})
.then(response => response.json())
.then(data => {
@@ -386,9 +378,6 @@ document.addEventListener('DOMContentLoaded', function() {
videoGrid.appendChild(tempDiv.firstChild);
}
// Mettre à jour le numéro de page
this.dataset.page = data.page + 1;
// Réinitialiser le texte du bouton
button.textContent = 'Voir plus';
button.disabled = false;