web_lib

Common web application libraries
git clone https://radroots.dev/git/web_lib.git
Log | Files | Refs | LICENSE

layout-view.svelte (1416B)

      1 <script lang="ts">
      2     import { nav_blur, ph_blur, tabs_blur } from "$lib/stores/app";
      3     import { fmt_cl, type IBasisOpt, type IClOpt } from "@radroots/apps-lib";
      4     import { onDestroy, onMount, type Snippet } from "svelte";
      5 
      6     let {
      7         basis = undefined,
      8         el = $bindable(null),
      9         children,
     10     }: {
     11         el?: HTMLDivElement | null;
     12         basis?: IBasisOpt<IClOpt & { fade?: boolean }>;
     13         children: Snippet;
     14     } = $props();
     15 
     16     onMount(async () => {
     17         try {
     18             el?.addEventListener("scroll", on_scroll_change);
     19         } catch (e) {
     20         } finally {
     21         }
     22     });
     23 
     24     onDestroy(async () => {
     25         try {
     26             el?.removeEventListener("scroll", on_scroll_change);
     27         } catch (e) {
     28         } finally {
     29         }
     30     });
     31 
     32     const on_scroll_change = (): void => {
     33         if (Math.max(el?.scrollTop || 0, 0) > 10) nav_blur.set(true);
     34         else nav_blur.set(false);
     35         if (Math.max(el?.scrollTop || 0, 0) > 10) tabs_blur.set(true);
     36         else tabs_blur.set(false);
     37         if (Math.max(el?.scrollTop || 0, 0) > 30) ph_blur.set(true);
     38         else ph_blur.set(false);
     39     };
     40 </script>
     41 
     42 <div
     43     bind:this={el}
     44     class={`${fmt_cl(
     45         basis?.classes,
     46     )} absolute top-0 left-0 flex flex-col h-[100vh] w-full justify-start items-center scroll-hide overflow-auto`}
     47     class:fade-in={basis?.fade}
     48 >
     49     {@render children()}
     50 </div>