Fix map popups -- start scrolled to the top

acteng · Oct 2, 2024 · 8427025 · 8427025
1 parent b459d36
commit 8427025
Showing 1 changed file with 77 additions and 64 deletions.
diff --git a/src/lib/browse/schemes/InterventionPopup.svelte b/src/lib/browse/schemes/InterventionPopup.svelte
@@ -8,6 +8,7 @@
   import DescribePipelineTiming from "./DescribePipelineTiming.svelte";
   import DescribePipelineBudget from "./DescribePipelineBudget.svelte";
   import type { Schemes, SchemeData } from "types";
+  import { afterUpdate } from "svelte";
 
   export let props: { [name: string]: any };
   export let schemes: Map<string, SchemeData>;
@@ -17,6 +18,13 @@
 
   $: scheme = schemes.get(props.scheme_reference)!;
 
+  let div: HTMLDivElement | undefined;
+  afterUpdate(() => {
+    if (div) {
+      div.scrollTop = 0;
+    }
+  });
+
   // When the user is filtering name/description by freeform text, highlight the matching pieces.
   function highlightFilter(input: string, filter: string): string {
     if (!filter) {
@@ -63,86 +71,91 @@
   }
 </script>
 
-<div style="max-width: 30vw; max-height: 60vh; overflow: auto;">
-  <h2>
-    {@html highlightFilter(props.name, filterInterventionText)} ({props.intervention_type})
-  </h2>
-  {#if props.length_meters}
-    <p>
-      Length: <b>{prettyPrintMeters(props.length_meters)}</b>
-    </p>
-  {/if}
-  {#if props.description}
-    <p>{@html highlightFilter(props.description, filterInterventionText)}</p>
-  {/if}
-
-  {#if props.pipeline}
-    {@const p = props.pipeline}
-    {#if p.atf4_type}
+{#key props}
+  <div
+    style="max-width: 30vw; max-height: 60vh; overflow: auto;"
+    bind:this={div}
+  >
+    <h2>
+      {@html highlightFilter(props.name, filterInterventionText)} ({props.intervention_type})
+    </h2>
+    {#if props.length_meters}
       <p>
-        ATF4 type: <b>{p.atf4_type}</b>
+        Length: <b>{prettyPrintMeters(props.length_meters)}</b>
       </p>
     {/if}
-    {#if p.accuracy}
-      <p>
-        Accuracy: <b>{p.accuracy}</b>
-      </p>
+    {#if props.description}
+      <p>{@html highlightFilter(props.description, filterInterventionText)}</p>
     {/if}
-    {#if p.is_alternative}
-      <p>Represents an alternative route</p>
+
+    {#if props.pipeline}
+      {@const p = props.pipeline}
+      {#if p.atf4_type}
+        <p>
+          ATF4 type: <b>{p.atf4_type}</b>
+        </p>
+      {/if}
+      {#if p.accuracy}
+        <p>
+          Accuracy: <b>{p.accuracy}</b>
+        </p>
+      {/if}
+      {#if p.is_alternative}
+        <p>Represents an alternative route</p>
+      {/if}
+      <DescribePipelineBudget props={p} />
+      <DescribePipelineTiming props={p} />
     {/if}
-    <DescribePipelineBudget props={p} />
-    <DescribePipelineTiming props={p} />
-  {/if}
 
-  <hr />
+    <hr />
 
-  <p>
-    Part of scheme: {@html highlightFilter(
-      scheme.scheme_name ?? "",
-      filterSchemeText,
-    )} ({@html highlightFilter(props.scheme_reference, filterSchemeText)})
-  </p>
-  <p>
-    Authority or region: <b>{scheme.browse?.authority_or_region}</b>
-  </p>
-  {#if scheme.browse?.capital_scheme_id}
     <p>
-      Capital scheme ID: <b>{scheme.browse?.capital_scheme_id}</b>
+      Part of scheme: {@html highlightFilter(
+        scheme.scheme_name ?? "",
+        filterSchemeText,
+      )} ({@html highlightFilter(props.scheme_reference, filterSchemeText)})
     </p>
-  {/if}
-  <p>
-    Funding programme: <b>{scheme.browse?.funding_programme}</b>
-  </p>
-  {#if scheme.browse?.current_milestone}
     <p>
-      Current milestone: <b>{scheme.browse?.current_milestone}</b>
+      Authority or region: <b>{scheme.browse?.authority_or_region}</b>
     </p>
-  {/if}
-
-  {#if scheme.pipeline}
-    {@const p = scheme.pipeline}
-    {#if p.scheme_type}
+    {#if scheme.browse?.capital_scheme_id}
       <p>
-        Scheme type: <b>{p.scheme_type}</b>
+        Capital scheme ID: <b>{scheme.browse?.capital_scheme_id}</b>
       </p>
     {/if}
-    {#if p.atf4_lead_type}
+    <p>
+      Funding programme: <b>{scheme.browse?.funding_programme}</b>
+    </p>
+    {#if scheme.browse?.current_milestone}
       <p>
-        ATF4 lead type: <b>{p.atf4_lead_type}</b>
+        Current milestone: <b>{scheme.browse?.current_milestone}</b>
       </p>
     {/if}
-    {#if p.scheme_description}
-      <p>Descripton: {p.scheme_description}</p>
+
+    {#if scheme.pipeline}
+      {@const p = scheme.pipeline}
+      {#if p.scheme_type}
+        <p>
+          Scheme type: <b>{p.scheme_type}</b>
+        </p>
+      {/if}
+      {#if p.atf4_lead_type}
+        <p>
+          ATF4 lead type: <b>{p.atf4_lead_type}</b>
+        </p>
+      {/if}
+      {#if p.scheme_description}
+        <p>Descripton: {p.scheme_description}</p>
+      {/if}
+      <DescribePipelineBudget props={p} />
+      <DescribePipelineTiming props={p} />
     {/if}
-    <DescribePipelineBudget props={p} />
-    <DescribePipelineTiming props={p} />
-  {/if}
 
-  <SecondaryButton on:click={showScheme}>
-    Zoom to show entire scheme
-  </SecondaryButton>
-  <SecondaryButton on:click={editScheme}>
-    Edit a copy of this scheme
-  </SecondaryButton>
-</div>
+    <SecondaryButton on:click={showScheme}>
+      Zoom to show entire scheme
+    </SecondaryButton>
+    <SecondaryButton on:click={editScheme}>
+      Edit a copy of this scheme
+    </SecondaryButton>
+  </div>
+{/key}