74 lines
2.1 KiB
JavaScript
74 lines
2.1 KiB
JavaScript
import { defineStore } from 'pinia';
|
|
|
|
export const useHeaderStore = defineStore('header', {
|
|
state: () => ({
|
|
isHeaderVisible: true,
|
|
isAutoHideEnabled: false,
|
|
lastScrollY: 0,
|
|
scrollDirection: 'up'
|
|
}),
|
|
|
|
getters: {
|
|
shouldShowHeader: (state) => {
|
|
// Si l'auto-hide n'est pas activé, toujours afficher le header
|
|
if (!state.isAutoHideEnabled) {
|
|
return true;
|
|
}
|
|
|
|
// Si l'auto-hide est activé, suivre la visibilité
|
|
return state.isHeaderVisible;
|
|
}
|
|
},
|
|
|
|
actions: {
|
|
enableAutoHide() {
|
|
this.isAutoHideEnabled = true;
|
|
},
|
|
|
|
disableAutoHide() {
|
|
this.isAutoHideEnabled = false;
|
|
this.isHeaderVisible = true; // Toujours visible quand désactivé
|
|
},
|
|
|
|
updateScrollDirection(scrollY) {
|
|
// Éviter les calculs inutiles si pas d'auto-hide
|
|
if (!this.isAutoHideEnabled) {
|
|
this.lastScrollY = scrollY;
|
|
return;
|
|
}
|
|
|
|
// Détecter la direction du scroll avec un seuil pour éviter les micro-mouvements
|
|
const scrollDifference = Math.abs(scrollY - this.lastScrollY);
|
|
|
|
if (scrollDifference < 5) {
|
|
// Mouvement trop petit, on ignore
|
|
return;
|
|
}
|
|
|
|
if (scrollY > this.lastScrollY && scrollY > 100) {
|
|
// Scroll vers le bas et suffisamment de scroll
|
|
if (this.scrollDirection !== 'down') {
|
|
this.scrollDirection = 'down';
|
|
this.isHeaderVisible = false;
|
|
}
|
|
} else if (scrollY < this.lastScrollY) {
|
|
// Scroll vers le haut
|
|
if (this.scrollDirection !== 'up') {
|
|
this.scrollDirection = 'up';
|
|
this.isHeaderVisible = true;
|
|
}
|
|
}
|
|
|
|
this.lastScrollY = scrollY;
|
|
},
|
|
|
|
showHeader() {
|
|
this.isHeaderVisible = true;
|
|
},
|
|
|
|
hideHeader() {
|
|
this.isHeaderVisible = false;
|
|
}
|
|
}
|
|
});
|