Compare commits
No commits in common. "436a4371da29eb51b632c032f05b2580a6305a5a" and "01adf70585ba9d9967b2d5bd2f7198dfa4de358f" have entirely different histories.
436a4371da
...
01adf70585
2 changed files with 7 additions and 37 deletions
|
|
@ -38,11 +38,10 @@
|
||||||
let resizeTimer = null
|
let resizeTimer = null
|
||||||
|
|
||||||
// Active la transition seulement après le premier paint à la bonne position.
|
// Active la transition seulement après le premier paint à la bonne position.
|
||||||
// Double rAF : le premier laisse passer un paint avec le bon translateX,
|
// Sans ça, un chargement sur /expertise slide depuis l'accueil.
|
||||||
// le second active is-animated — évite l'animation parasite au chargement.
|
|
||||||
$effect(() => {
|
$effect(() => {
|
||||||
if (slides.all.length > 0 && !isReady) {
|
if (slides.all.length > 0 && !isReady) {
|
||||||
requestAnimationFrame(() => requestAnimationFrame(() => { isReady = true }))
|
requestAnimationFrame(() => { isReady = true })
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -15,27 +15,6 @@
|
||||||
const projects = $derived(data?.projects ?? [])
|
const projects = $derived(data?.projects ?? [])
|
||||||
const currentProject = $derived(projects[currentIndex] ?? null)
|
const currentProject = $derived(projects[currentIndex] ?? null)
|
||||||
|
|
||||||
// Capture du hash synchrone avant que tout effect puisse le modifier
|
|
||||||
const initialHash = window.location.hash.slice(1)
|
|
||||||
|
|
||||||
// --- Ancres ---
|
|
||||||
function setAnchor(index) {
|
|
||||||
const slug = projects[index]?.slug
|
|
||||||
if (!slug) return
|
|
||||||
history.replaceState(null, '', '#' + slug)
|
|
||||||
}
|
|
||||||
|
|
||||||
function clearAnchor() {
|
|
||||||
history.replaceState(null, '', window.location.pathname + window.location.search)
|
|
||||||
}
|
|
||||||
|
|
||||||
// Initialisation depuis l'ancre URL — une seule fois quand projects est prêt
|
|
||||||
$effect(() => {
|
|
||||||
if (projects.length === 0 || !initialHash) return
|
|
||||||
const idx = projects.findIndex(p => p.slug === initialHash)
|
|
||||||
if (idx > 0) currentIndex = idx
|
|
||||||
})
|
|
||||||
|
|
||||||
// --- Scroll nav composable ---
|
// --- Scroll nav composable ---
|
||||||
const nav = createScrollNav({
|
const nav = createScrollNav({
|
||||||
isActive: () => isActive,
|
isActive: () => isActive,
|
||||||
|
|
@ -45,7 +24,6 @@
|
||||||
: Math.max(currentIndex - 1, 0)
|
: Math.max(currentIndex - 1, 0)
|
||||||
if (next === currentIndex) return false
|
if (next === currentIndex) return false
|
||||||
currentIndex = next
|
currentIndex = next
|
||||||
setAnchor(next)
|
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|
@ -62,17 +40,10 @@
|
||||||
})
|
})
|
||||||
|
|
||||||
// --- Effect: reset when slide deactivated ---
|
// --- Effect: reset when slide deactivated ---
|
||||||
// wasActive évite que clearAnchor() s'exécute au montage initial
|
|
||||||
// (isActive est false avant l'initialisation des slides)
|
|
||||||
let wasActive = false
|
|
||||||
$effect(() => {
|
$effect(() => {
|
||||||
if (isActive) {
|
if (!isActive) {
|
||||||
wasActive = true
|
|
||||||
} else if (wasActive) {
|
|
||||||
nav.reset()
|
nav.reset()
|
||||||
currentIndex = 0
|
currentIndex = 0
|
||||||
clearAnchor()
|
|
||||||
wasActive = false
|
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
@ -126,7 +97,7 @@
|
||||||
<button
|
<button
|
||||||
class="portfolio-nav-item"
|
class="portfolio-nav-item"
|
||||||
class:active={i === currentIndex}
|
class:active={i === currentIndex}
|
||||||
onclick={() => { currentIndex = i; setAnchor(i) }}
|
onclick={() => { currentIndex = i }}
|
||||||
>
|
>
|
||||||
<span class="portfolio-nav-number">{String(i + 1).padStart(2, '0')}</span>
|
<span class="portfolio-nav-number">{String(i + 1).padStart(2, '0')}</span>
|
||||||
<img src={project.thumbnail} alt={project.title} />
|
<img src={project.thumbnail} alt={project.title} />
|
||||||
|
|
@ -236,7 +207,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.portfolio-nav-item.active {
|
.portfolio-nav-item.active {
|
||||||
transform: scale(1.25) translateX(-50%);
|
transform: scale(1.25);
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue