From dcaec58e364a96c53828fb1facc0901160c3b85b Mon Sep 17 00:00:00 2001
From: David Smadja <david.smadja@assemblee-nationale.fr>
Date: Thu, 17 Apr 2025 15:22:22 +0200
Subject: [PATCH] Adjust scroll position when closing pinned sticky node
---
.../VariableReferredNodeParameter.svelte | 37 ++++++++++++++++++-
src/routes/+page.svelte | 4 +-
2 files changed, 39 insertions(+), 2 deletions(-)
diff --git a/src/lib/components/legislation_view/parameters/VariableReferredNodeParameter.svelte b/src/lib/components/legislation_view/parameters/VariableReferredNodeParameter.svelte
index aa09e546a..b4d4cf02b 100644
--- a/src/lib/components/legislation_view/parameters/VariableReferredNodeParameter.svelte
+++ b/src/lib/components/legislation_view/parameters/VariableReferredNodeParameter.svelte
@@ -13,6 +13,7 @@
import VariableReferredValueParameter from "$lib/components/legislation_view/parameters/VariableReferredValueParameter.svelte"
import type { DisplayMode } from "$lib/displays"
+ import { onMount } from "svelte"
interface Props {
billParameter: NodeParameter
@@ -43,6 +44,8 @@
}: Props = $props()
let openChildrenParameters = $state(true)
+ let lawDiv: HTMLDivElement | undefined = $state()
+ let stickyDiv: HTMLDivElement | undefined = $state()
if (isOtherParametersSection) {
openChildrenParameters = false
@@ -96,12 +99,44 @@
yield [bothChild, lawChild, revaluationChild, billChild]
}
}
+
+ onMount(() => {
+ lawDiv = document.getElementById("law-div")! as HTMLDivElement
+ })
+
+ function isStickyActive() {
+ if (stickyDiv) {
+ const lawHeader = document.getElementById("law-header")!
+ const currentLawheaderBottom = lawHeader.getBoundingClientRect().bottom
+ const stickyDivStyle = window.getComputedStyle(stickyDiv)
+ const stickyDivTop = parseInt(stickyDivStyle.top, 10)
+ const currentStikyDivTop = stickyDiv.getBoundingClientRect().top
+ return currentStikyDivTop - currentLawheaderBottom <= stickyDivTop
+ }
+ return false
+ }
+
+ function showHide() {
+ const stickyWasActive = isStickyActive()
+ openChildrenParameters = !openChildrenParameters
+ if (stickyWasActive && lawDiv !== undefined && stickyDiv !== undefined) {
+ setTimeout(() => {
+ const stickyDivStyle = window.getComputedStyle(stickyDiv!)
+ const stickyDivTop = parseInt(stickyDivStyle.top, 10)
+ const offsetToScroll =
+ stickyDiv!.offsetTop - lawDiv!.offsetTop - stickyDivTop
+
+ lawDiv!.scrollTop = offsetToScroll
+ }, 0)
+ }
+ }
</script>
<section style="isolation: isolate;">
{#if depth !== 0}
{@const top = (depth - 1) * 2}
<div
+ bind:this={stickyDiv}
data-depth={depth}
class="sticky-element flex {depth === 1
? ''
@@ -110,7 +145,7 @@
>
<button
aria-label={openChildrenParameters ? "fermer" : "ouvrir"}
- onclick={() => (openChildrenParameters = !openChildrenParameters)}
+ onclick={showHide}
>
<iconify-icon
class="align-[-0.2rem] text-lg"
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 741ee5dcd..cb3bc4e1e 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -932,7 +932,7 @@
<div class="flex flex-1 overflow-x-hidden">
<!-- Panneau de gauche les zones éditables par l'utilisateur (amendement)-->
<section
- class="flex min-w-0 flex-[1_0_100%] overflow-y-scroll bg-white shadow-lg transition-transform duration-500 ease-out-quart md:z-10 md:!h-full md:flex-[0_0_33.3%] md:translate-x-0 md:overflow-visible md:!p-0"
+ class="flex min-w-0 flex-[1_0_100%] bg-white shadow-lg transition-transform duration-500 ease-out-quart md:z-10 md:!h-full md:flex-[0_0_33.3%] md:translate-x-0 md:overflow-visible md:!p-0"
class:-translate-x-full={!mobileLawTab}
class:!h-[calc(100vh-96px)]={!mobileLawTab}
class:pb-24={shared.testCasesIndex.length === 1 &&
@@ -942,6 +942,7 @@
<div class="flex min-h-full w-full flex-col">
<!-- Header (fixed) -->
<header
+ id="law-header"
class="flex w-screen items-center justify-between border-b border-black px-5 pb-2 pt-4 md:w-full md:px-5 2xl:pb-3 2xl:pt-5"
>
<!-- Titre -->
@@ -959,6 +960,7 @@
class="w-screen overflow-y-scroll bg-white px-2 pb-5 md:w-full"
out:fade={{ duration: 100 }}
in:fade={{ delay: 150, duration: 150 }}
+ id="law-div"
>
<!-- Vue par défaut - choix de dispositifs -->
{#if displayMode.parametersVariableName === undefined}
--
GitLab