separar Breadcrumbs a otro componente
This commit is contained in:
parent
3303165624
commit
2d0929c1fc
2 changed files with 72 additions and 80 deletions
|
@ -1,35 +1,15 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import type { XmlFragment } from "yjs";
|
import type { XmlFragment } from "yjs";
|
||||||
import { inject } from "regexparam";
|
import { inject } from "regexparam";
|
||||||
import ChevronRight from "eva-icons/fill/svg/chevron-right.svg";
|
|
||||||
import Editor from "../editor/Editor.svelte";
|
import Editor from "../editor/Editor.svelte";
|
||||||
import { getWorldPage, getWorldY, type WorldY } from "../lib/doc";
|
import { getWorldPage, getWorldY, type WorldY } from "../lib/doc";
|
||||||
import { routes } from "../lib/routes";
|
import { routes } from "../lib/routes";
|
||||||
import { loadWorlds } from "../lib/worldStorage";
|
import { loadWorlds } from "../lib/worldStorage";
|
||||||
import breadcrumbs from "../lib/breadcrumbs";
|
import Breadcrumbs from "./Page/Breadcrumbs.svelte";
|
||||||
import { pageStore } from "../lib/makeYdocStore";
|
|
||||||
import { derived } from "svelte/store";
|
|
||||||
import { getTitle } from "../lib/getTitle";
|
|
||||||
import { onMount, tick } from "svelte";
|
|
||||||
|
|
||||||
export let worldId: string;
|
export let worldId: string;
|
||||||
export let pageId: 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(
|
async function loadDoc(
|
||||||
worldId: string,
|
worldId: string,
|
||||||
pageId: string,
|
pageId: string,
|
||||||
|
@ -53,24 +33,6 @@
|
||||||
})
|
})
|
||||||
.catch((error) => (state = { error }));
|
.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>
|
</script>
|
||||||
|
|
||||||
<nav>
|
<nav>
|
||||||
|
@ -86,34 +48,7 @@
|
||||||
</ul>
|
</ul>
|
||||||
</details>
|
</details>
|
||||||
|
|
||||||
<!-- https://devdojo.com/pines/docs/breadcrumbs -->
|
<Breadcrumbs {pageId} {worldId} />
|
||||||
<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>
|
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
{#if state === "loading"}Cargando...{:else if "doc" in state}
|
{#if state === "loading"}Cargando...{:else if "doc" in state}
|
||||||
|
@ -122,16 +57,3 @@
|
||||||
{state.error}
|
{state.error}
|
||||||
<a href={routes.ChooseWorld}>Volver al inicio</a>
|
<a href={routes.ChooseWorld}>Volver al inicio</a>
|
||||||
{/if}
|
{/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
70
src/views/Page/Breadcrumbs.svelte
Normal 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>
|
Loading…
Reference in a new issue