web

commit 8a8f957cc89e83c3d8445b4cdfb711f76838c56d
parent c31b7425c07897ecf3ea098c9b684ded697e24bb
Author: triesap <137732411+triesap@users.noreply.github.com>
Date:   Fri, 15 Nov 2024 01:02:32 +0000

Fix trade product list card focus  position.

Diffstat:
M
src/lib/components/trade_product_list_card.svelte
 | 
24
+++++++++++++++++-------

1 file changed, 17 insertions(+), 7 deletions(-)
diff --git a/src/lib/components/trade_product_list_card.svelte b/src/lib/components/trade_product_list_card.svelte
@@ -4,6 +4,7 @@
     import {
         app_layout,
         el_id,
+        els_id_pref,
         els_id_pref_index,
         fmt_geol_latitude,
         fmt_geol_longitude,
@@ -25,6 +26,8 @@
 
     const id_pref = `trade-product-list-card`;
 
+    let el_c: HTMLDivElement;
+
     export let basis: {
         index: number;
         result: TradeProductBundle;
@@ -36,11 +39,19 @@
     $: tradeproduct_qty_sold = 0;
     $: tradeproduct_qty_avail =
         num_min(trade_product.qty_avail, 1) - tradeproduct_qty_sold;
+
+    const handle_scroll = (): void => {
+        console.log(`el_c.scrollTop `, el_c.scrollTop);
+    };
 </script>
 
-<div class={`relative flex flex-col w-full justify-center items-center`}>
+<div
+    bind:this={el_c}
+    on:scroll={handle_scroll}
+    class={`relative flex flex-col w-full justify-center items-center`}
+>
     <div
-        id={`${id_pref}-control-${basis.index}-${trade_product.id}`}
+        id={`${id_pref}-control-${trade_product.id}`}
         class={`hidden absolute top-0 left-0 flex flex-row h-12 w-full justify-center items-start el-re`}
     >
         <button
@@ -61,16 +72,15 @@
         class={`flex flex-col min-h-[22rem] w-${$app_layout} justify-start items-start bg-layer-1-surface focus-layer-1 focus-layer-1-raise-less round-44 focus:translate-y-12`}
         on:click={async ({ currentTarget: el }) => {
             el.focus();
-            const el_ctr = el_id(
-                `${id_pref}-control-${basis.index}-${trade_product.id}`,
-            );
+            el_c.scrollTo();
+            const el_ctr = el_id(`${id_pref}-control-${trade_product.id}`);
             if (el_ctr) el_ctr.classList.remove(`hidden`);
             const els = els_id_pref_index(`${id_pref}-display`, basis.index);
             if (els) els.forEach((el) => el.classList.add(`translate-y-12`));
         }}
         on:blur={async () => {
-            const el_ctr = el_id(`${id_pref}-control-${trade_product.id}`);
-            if (el_ctr) el_ctr.classList.add(`hidden`);
+            const els_ctr = els_id_pref(`${id_pref}-control`);
+            if (els_ctr) els_ctr.forEach((el) => el.classList.add(`hidden`));
             const els = els_id_pref_index(`${id_pref}-display`, basis.index);
             if (els) els.forEach((el) => el.classList.remove(`translate-y-12`));
         }}