Nulo/schreiben
1
0
Fork 0
Code Issues 13 Pull requests Projects Releases Packages Wiki Activity

separar Breadcrumbs a otro componente

Browse source
This commit is contained in:
Cat /dev/Nulo 2023-08-31 09:45:18 -03:00
parent 3303165624
commit 2d0929c1fc
2 changed files with 72 additions and 80 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

82
src/views/Page.svelte
View file

@ -1,35 +1,15 @@
<script lang="ts">
import type { XmlFragment } from "yjs";
import { inject } from "regexparam";
import ChevronRight from "eva-icons/fill/svg/chevron-right.svg";
import Editor from "../editor/Editor.svelte";
import { getWorldPage, getWorldY, type WorldY } from "../lib/doc";
import { routes } from "../lib/routes";
import { loadWorlds } from "../lib/worldStorage";
import breadcrumbs from "../lib/breadcrumbs";
import { pageStore } from "../lib/makeYdocStore";
import { derived } from "svelte/store";
import { getTitle } from "../lib/getTitle";
import { onMount, tick } from "svelte";
import Breadcrumbs from "./Page/Breadcrumbs.svelte";
export let worldId: string;
export let pageId: string;
$: pageBreadcrumbs = breadcrumbs.worldStore(worldId);
$: crumbsTitles = derived(
[pageBreadcrumbs],
([crumbs], set: (val: (string | undefined)[]) => void) => {
return derived(
crumbs.map((c) => pageStore(worldId, c)),
(crumbPages) =>
crumbPages.map(
(x, index) =>
x && x.doc && getTitle(x.doc, `page/${crumbs[index]}`),
),
).subscribe(set);
},
);
async function loadDoc(
worldId: string,
pageId: string,
@ -53,24 +33,6 @@
})
.catch((error) => (state = { error }));
}
let breadcrumbsEl: HTMLDivElement;
const crumbsScrollToEnd = async () => {
await tick();
breadcrumbsEl?.scroll({
left: breadcrumbsEl.scrollWidth,
behavior: "smooth",
});
};
onMount(() => {
crumbsScrollToEnd();
});
$: {
$crumbsTitles;
$pageBreadcrumbs;
crumbsScrollToEnd();
}
</script>
<nav>
@ -86,34 +48,7 @@
</ul>
</details>
<!-- https://devdojo.com/pines/docs/breadcrumbs -->
<div
class="flex justify-between overflow-x-auto rounded-md border border-neutral-200/60 px-3.5 py-1"
bind:this={breadcrumbsEl}
>
<ol
class="inline-flex items-center space-x-1 text-xs text-neutral-500 sm:mb-0 [&_.active-breadcrumb]:font-medium [&_.active-breadcrumb]:text-neutral-600"
>
{#each $pageBreadcrumbs as crumb, index}
<li
class:anchor-none={index !== $pageBreadcrumbs.length - 1}
class:anchor-auto={index === $pageBreadcrumbs.length - 1}
>
<a
href={inject(routes.Page, { worldId, pageId: crumb })}
class="inline-flex items-center text-ellipsis whitespace-nowrap py-1 font-normal hover:text-neutral-900 focus:outline-none"
class:active-breadcrumb={crumb === pageId}
>{$crumbsTitles[index] || crumb}</a
>
</li>
{#if index !== $pageBreadcrumbs.length - 1}
<ChevronRight
class="anchor-none h-5 w-5 fill-current text-gray-400/70"
/>
{/if}
{/each}
</ol>
</div>
<Breadcrumbs {pageId} {worldId} />
</nav>
{#if state === "loading"}Cargando...{:else if "doc" in state}
@ -122,16 +57,3 @@
{state.error}
<a href={routes.ChooseWorld}>Volver al inicio</a>
{/if}
<style>
nav a {
color: inherit;
}
.anchor-none {
overflow-anchor: none;
}
.anchor-auto {
overflow-anchor: auto;
}
</style>

70
src/views/Page/Breadcrumbs.svelte Normal file
View file

@ -0,0 +1,70 @@
<script lang="ts">
import { onMount, tick } from "svelte";
import ChevronRight from "eva-icons/fill/svg/chevron-right.svg";
import { inject } from "regexparam";
import breadcrumbs from "../../lib/breadcrumbs";
import { pageStore } from "../../lib/makeYdocStore";
import { derived } from "svelte/store";
import { getTitle } from "../../lib/getTitle";
import { routes } from "../../lib/routes";
export let worldId: string;
export let pageId: string;
$: pageBreadcrumbs = breadcrumbs.worldStore(worldId);
$: crumbsTitles = derived(
[pageBreadcrumbs],
([crumbs], set: (val: (string | undefined)[]) => void) => {
return derived(
crumbs.map((c) => pageStore(worldId, c)),
(crumbPages) =>
crumbPages.map(
(x, index) =>
x && x.doc && getTitle(x.doc, `page/${crumbs[index]}`),
),
).subscribe(set);
},
);
let breadcrumbsEl: HTMLDivElement;
const crumbsScrollToEnd = async () => {
await tick();
breadcrumbsEl?.scroll({
left: breadcrumbsEl.scrollWidth,
behavior: "smooth",
});
};
onMount(() => {
crumbsScrollToEnd();
});
$: {
$crumbsTitles;
$pageBreadcrumbs;
crumbsScrollToEnd();
}
</script>
<!-- https://devdojo.com/pines/docs/breadcrumbs -->
<div
class="flex justify-between overflow-x-auto rounded-md border border-neutral-200/60 px-3.5 py-1"
bind:this={breadcrumbsEl}
>
<ol
class="inline-flex items-center space-x-1 text-xs text-neutral-500 sm:mb-0 [&_.active-breadcrumb]:font-medium [&_.active-breadcrumb]:text-neutral-600"
>
{#each $pageBreadcrumbs as crumb, index}
<li>
<a
href={inject(routes.Page, { worldId, pageId: crumb })}
class="inline-flex items-center text-ellipsis whitespace-nowrap py-1 font-normal hover:text-neutral-900 focus:outline-none"
class:active-breadcrumb={crumb === pageId}
>{$crumbsTitles[index] || crumb}</a
>
</li>
{#if index !== $pageBreadcrumbs.length - 1}
<ChevronRight class="h-5 w-5 fill-current text-gray-400/70" />
{/if}
{/each}
</ol>
</div>