+
+
+ mdi-arrow-up-drop-circle-outline
+
mdi-arrow-down-drop-circle-outline
@@ -53,34 +47,89 @@ const props = defineProps({
});
const actualites = ref([
- {title: 'Hoodie', description: 'Je suis fier de vous montrer les installations sur lesquelles nous avons travaillé si fort.', amount: 50, quantity: 5, date: '2024-09-19' },
- {title: 'Small Talk', description: 'Ceci est la description du contenu.', amount: null, quantity: null, date: '2024-09-18' },
- {title: 'Les vrais choses', description: 'Nous sommes dans les derniers préparatifs, mais demain nous allons vous dévoiler la première partie du studio qui est complétée.', amount: 100, quantity: 10, date: '2024-09-17' },
- {title: 'On va changer le monde', description: 'Deuxième contenu avec description.', amount: null, quantity: null, date: '2024-09-16' },
- {title: 'Séance photo', description: 'Je suis fier de vous montrer les installations sur lesquelles nous avons travaillé si fort.', amount: 150, quantity: 20, date: '2024-09-19' },
+ {
+ title: 'Hoodie',
+ description: 'Je suis fier de vous montrer les installations sur lesquelles nous avons travaillé si fort.',
+ amount: 50,
+ quantity: 5,
+ date: '2024-09-19',
+ },
+ {
+ title: 'Small Talk',
+ description: 'Ceci est la description du contenu.',
+ amount: null,
+ quantity: null,
+ date: '2024-09-18',
+ },
+ {
+ title: 'Les vrais choses',
+ description: 'Nous sommes dans les derniers préparatifs, mais demain nous allons vous dévoiler la première partie du studio qui est complétée.',
+ amount: 100,
+ quantity: 10,
+ date: '2024-09-17',
+ },
+ {
+ title: 'On va changer le monde',
+ description: 'Deuxième contenu avec description.',
+ amount: 150,
+ quantity: 1,
+ date: '2024-09-16',
+ },
+ {
+ title: 'Séance photo',
+ description: 'Je suis fier de vous montrer les installations sur lesquelles nous avons travaillé si fort.',
+ amount: 150,
+ quantity: 20,
+ date: '2024-09-19',
+ },
+ {
+ title: 'Séance photo',
+ description: 'Je suis fier de vous montrer les installations sur lesquelles nous avons travaillé si fort.',
+ amount: 150,
+ quantity: 20,
+ date: '2024-09-19',
+ },
]);
const startIndex = ref(0);
const cardsPerPage = 3;
-
-// Gestion de la position du scroll
const scrollPosition = ref(0);
-const cardHeight = 250; // Hauteur approximative d'une carte en pixels
+const cardHeight = 250;
const endIndex = computed(() => startIndex.value + cardsPerPage);
const visibleCards = computed(() => actualites.value.slice(startIndex.value, endIndex.value));
-function scrollDown() {
- if (endIndex.value < actualites.value.length) {
- startIndex.value += 1; // Défiler d'une carte à la fois
- scrollPosition.value += cardHeight; // Augmenter la position de défilement
- }
-}
+// Calculate whether navigation buttons should be shown
+const showNavigationButtons = computed(() => {
+ const totalHeight = actualites.value.length * cardHeight;
+ const containerHeight = cardsPerPage * cardHeight;
+ return totalHeight > containerHeight; // Only show buttons if content exceeds the container
+});
function scrollUp() {
if (startIndex.value > 0) {
- startIndex.value -= 1; // Défiler d'une carte à la fois
- scrollPosition.value -= cardHeight; // Diminuer la position de défilement
+ startIndex.value -= 1;
+ scrollPosition.value -= cardHeight;
+ }
+}
+
+function scrollDown() {
+ const totalHeight = actualites.value.length * cardHeight;
+ const containerHeight = cardsPerPage * cardHeight;
+
+ if (scrollPosition.value + containerHeight < totalHeight) {
+ startIndex.value += 1;
+ scrollPosition.value += cardHeight;
+ }
+}
+
+// Handle scroll wheel event to scroll up or down
+function handleScroll(event) {
+ event.preventDefault(); // Empêche le défilement de la page
+ if (event.deltaY < 0) {
+ scrollUp(); // Défilement vers le haut
+ } else if (event.deltaY > 0) {
+ scrollDown(); // Défilement vers le bas
}
}