commit a7b31875ab02f0b054532e8f2b6a16ed843841c8
parent b004d2060a98bc3402726b65407b8a4a7dfb32e2
Author: triesap <137732411+triesap@users.noreply.github.com>
Date: Sun, 17 Nov 2024 04:19:36 +0000
Edit trade product list card add scroll handlers on media upload image elements. Add conf scroll into view params.
Diffstat:
4 files changed, 84 insertions(+), 68 deletions(-)
diff --git a/src/lib/components/trade_product_list_card.svelte b/src/lib/components/trade_product_list_card.svelte
@@ -1,4 +1,5 @@
<script lang="ts">
+ import { scroll_args } from "$lib/conf";
import type { TradeProductBundle } from "$lib/types";
import { fmt_location_gcs } from "@radroots/models";
import {
@@ -39,6 +40,44 @@
$: tradeproduct_qty_sold = 0;
$: tradeproduct_qty_avail =
num_min(trade_product.qty_avail, 1) - tradeproduct_qty_sold;
+
+ const handle_display_focus = async (
+ el: EventTarget & HTMLButtonElement,
+ ): Promise<void> => {
+ try {
+ // if (media_uploads?.length) return;
+ el.focus();
+ el_c.scrollTo();
+ el_id(
+ `${id_pref}-control-${basis.index}-${trade_product.id}`,
+ )?.classList.remove(`hidden`);
+ els_id_pref_index(
+ `${id_pref}-control`,
+ basis.index,
+ `not`,
+ )?.forEach((el) => el.classList.add(`hidden`));
+ els_id_pref_index(`${id_pref}-display`, basis.index)?.forEach(
+ (el) => el.classList.add(`translate-y-12`),
+ );
+ } catch (e) {
+ console.log(`(error) handle_display_focus `, e);
+ }
+ };
+
+ const handle_display_blur = async (): Promise<void> => {
+ try {
+ els_id_pref_index(
+ `${id_pref}-control`,
+ basis.index,
+ `not`,
+ )?.forEach((el) => el.classList.add(`hidden`));
+ els_id_pref_index(`${id_pref}-display`, basis.index)?.forEach(
+ (el) => el.classList.remove(`translate-y-12`),
+ );
+ } catch (e) {
+ console.log(`(error) handle_display_blur `, e);
+ }
+ };
</script>
<div
@@ -66,45 +105,40 @@
id={`${id_pref}-display-${basis.index}-${trade_product.id}`}
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|stopPropagation={async ({ currentTarget: el }) => {
- el.focus();
- el_c.scrollTo();
- el_id(
- `${id_pref}-control-${basis.index}-${trade_product.id}`,
- )?.classList.remove(`hidden`);
- els_id_pref_index(
- `${id_pref}-control`,
- basis.index,
- `not`,
- )?.forEach((el) => el.classList.add(`hidden`));
- els_id_pref_index(`${id_pref}-display`, basis.index)?.forEach(
- (el) => el.classList.add(`translate-y-12`),
- );
+ handle_display_focus(el);
}}
on:blur={async () => {
- els_id_pref_index(
- `${id_pref}-control`,
- basis.index,
- `not`,
- )?.forEach((el) => el.classList.add(`hidden`));
- els_id_pref_index(`${id_pref}-display`, basis.index)?.forEach(
- (el) => el.classList.remove(`translate-y-12`),
- );
+ await handle_display_blur();
}}
>
<div
- class={`flex flex-row h-[10rem] w-full justify-center items-center border-b-line border-b-layer-1-surface-edge`}
+ class={`flex flex-row min-h-[10rem] w-full justify-center items-center border-b-line border-b-layer-1-surface-edge`}
>
{#if media_uploads && media_uploads.length}
<div
- class={`flex flex-row h-full w-full justify-center items-center`}
+ class={`relative flex flex-row h-full w-full justify-center items-center`}
>
- {#each media_uploads as media_upload}
- <ImagePath
- basis={{
- path: `${media_upload.res_base}/${media_upload.res_path}.${media_upload.mime_type}`,
- }}
- />
- {/each}
+ <div
+ class={`flex flex-row justify-start items-center overflow-x-auto scroll-hide`}
+ >
+ {#each media_uploads as li, li_i (li.id)}
+ <ImagePath
+ basis={{
+ id: `${li.id}-index${li_i}`,
+ path: `${li.res_base}/${li.res_path}.${li.mime_type}`,
+ callback: async ({ currentTarget: el }) => {
+ const el_id_next = el.id.replace(
+ `-index${li_i}`,
+ `-index${li_i + 1}`,
+ );
+ el_id(el_id_next)?.scrollIntoView(
+ scroll_args.into_view,
+ );
+ },
+ }}
+ />
+ {/each}
+ </div>
</div>
{:else}
<button
diff --git a/src/lib/conf.ts b/src/lib/conf.ts
@@ -63,3 +63,12 @@ export const cfg = {
}
};
+export const scroll_args: {
+ into_view: ScrollIntoViewOptions
+} = {
+ into_view: {
+ behavior: `smooth`,
+ block: `nearest`,
+ inline: `start`,
+ }
+}
+\ No newline at end of file
diff --git a/src/routes/(app)/+page.svelte b/src/routes/(app)/+page.svelte
@@ -54,19 +54,10 @@
label: `Farm Products`,
key: `basket`,
callback: async () => {
- const trade_products = await db.trade_product_get({
- list: [`all`],
+ $nav_prev.push({
+ route: `/`,
+ label: `Home`,
});
- if (`results` in trade_products) {
- if (trade_products.results.length === 0) {
- $nav_prev.push({
- route: `/`,
- label: `Back`,
- });
- await route(`/models/trade-product/add`);
- return;
- }
- }
await route(`/models/trade-product/add`);
},
},
@@ -222,21 +213,21 @@
},
{
icon: `arrows-down-up`,
- label: `Transactions`,
+ label: `Products`,
callback: async () => {
await route(`/models/trade-product`);
},
},
{
icon: `cardholder`,
- label: `Wallet`,
+ label: `Test`,
callback: async () => {
await route(`/test`);
},
},
{
icon: `squares-four`,
- label: `Menu`,
+ label: `Settings`,
callback: async () => {
await route(`/settings`);
},
diff --git a/src/routes/(app)/test/+page.svelte b/src/routes/(app)/test/+page.svelte
@@ -1,36 +1,17 @@
<script lang="ts">
import { LayoutView, Nav, t } from "@radroots/svelte-lib";
-
- const test1 = async (): Promise<void> => {
- try {
- } catch (e) {
- console.log(`(error) test1 `, e);
- }
- };
</script>
-<LayoutView>
- <div class={`flex flex-col w-full justify-center items-center`}>
- <button
- class={`flex flex-row justify-center items-center`}
- on:click={async () => {
- await test1();
- }}
- >
- test1
- </button>
- </div>
-</LayoutView>
+<LayoutView>test</LayoutView>
+
<Nav
basis={{
prev: {
- label: `${$t(`common.home`)}`,
+ label: `${$t("common.home")}`,
route: `/`,
},
title: {
- label: {
- value: `Test`,
- },
+ label: { value: `Image Upload` },
},
}}
/>
