[ui] navigating from the middle replaces browsing on the right
parent
a202eb720c
commit
700c8931e5
|
@ -5,10 +5,18 @@
|
||||||
import { UpType } from "../lib/types";
|
import { UpType } from "../lib/types";
|
||||||
import type { IEntry } from "upend/types";
|
import type { IEntry } from "upend/types";
|
||||||
import BlobPreview from "./BlobPreview.svelte";
|
import BlobPreview from "./BlobPreview.svelte";
|
||||||
|
import { setContext } from "svelte";
|
||||||
|
import { writable } from "svelte/store";
|
||||||
|
|
||||||
export let address: string;
|
export let address: string;
|
||||||
|
export let index: number | undefined;
|
||||||
export let editable = false;
|
export let editable = false;
|
||||||
|
|
||||||
|
let indexStore = writable(index);
|
||||||
|
$: $indexStore = index;
|
||||||
|
|
||||||
|
setContext("browse", { index: indexStore });
|
||||||
|
|
||||||
const { error, revalidate, attributes, backlinks } = useEntity(address);
|
const { error, revalidate, attributes, backlinks } = useEntity(address);
|
||||||
|
|
||||||
$: allTypeAddresses = $attributes
|
$: allTypeAddresses = $attributes
|
||||||
|
|
|
@ -1,20 +1,31 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { Link, useLocation } from "svelte-navigator";
|
import { getContext } from "svelte";
|
||||||
import type { Address, VALUE_TYPE } from "upend/types";
|
|
||||||
export let to: IPointer;
|
|
||||||
|
|
||||||
interface IPointer {
|
import { Link, useLocation, useParams } from "svelte-navigator";
|
||||||
|
import type { Writable } from "svelte/store";
|
||||||
|
import type { Address, VALUE_TYPE } from "upend/types";
|
||||||
|
const params = useParams();
|
||||||
|
const location = useLocation();
|
||||||
|
|
||||||
|
export let to: {
|
||||||
entity?: Address;
|
entity?: Address;
|
||||||
attribute?: string;
|
attribute?: string;
|
||||||
value?: { t: VALUE_TYPE; c: string };
|
value?: { t: VALUE_TYPE; c: string };
|
||||||
}
|
};
|
||||||
|
|
||||||
const location = useLocation();
|
const { index } = getContext("browse") as { index: Writable<number> };
|
||||||
|
|
||||||
let routerTo = "#";
|
let routerTo = "#";
|
||||||
$: {
|
$: {
|
||||||
if ($location.pathname.startsWith("/browse") && to.entity) {
|
if ($location.pathname.startsWith("/browse") && to.entity) {
|
||||||
routerTo = `${$location.pathname},${to.entity}`;
|
let addresses = $params.addresses.split(",");
|
||||||
|
|
||||||
|
routerTo =
|
||||||
|
"/browse/" +
|
||||||
|
addresses
|
||||||
|
.slice(0, $index + 1)
|
||||||
|
.concat([to.entity])
|
||||||
|
.join(",");
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -29,28 +29,28 @@
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="browser" bind:this={root}>
|
<div class="browser" bind:this={root}>
|
||||||
{#each addresses as address, idx (address)}
|
{#each addresses as address, index (address)}
|
||||||
<div class="view" data-address={address}>
|
<div class="view" data-address={address}>
|
||||||
<header>
|
<header>
|
||||||
<sl-icon-button
|
<sl-icon-button
|
||||||
class="edit-button"
|
class="edit-button"
|
||||||
name="pencil"
|
name="pencil"
|
||||||
on:click={() => (editable[idx] = !editable[idx])}
|
on:click={() => (editable[index] = !editable[index])}
|
||||||
/>
|
/>
|
||||||
<sl-icon-button
|
<sl-icon-button
|
||||||
class="this-button"
|
class="this-button"
|
||||||
name="bookmark"
|
name="bookmark"
|
||||||
on:click={visit(idx)}
|
on:click={visit(index)}
|
||||||
:disabled="addresses.length === 1"
|
:disabled="addresses.length === 1"
|
||||||
/>
|
/>
|
||||||
<sl-icon-button
|
<sl-icon-button
|
||||||
class="close-button"
|
class="close-button"
|
||||||
name="x-circle"
|
name="x-circle"
|
||||||
on:click={close(idx)}
|
on:click={close(index)}
|
||||||
disabled={addresses.length === 1}
|
disabled={addresses.length === 1}
|
||||||
/>
|
/>
|
||||||
</header>
|
</header>
|
||||||
<Inspect {address} editable={editable[idx] || false} />
|
<Inspect {address} editable={editable[index] || false} {index} />
|
||||||
</div>
|
</div>
|
||||||
{/each}
|
{/each}
|
||||||
</div>
|
</div>
|
||||||
|
|
Loading…
Reference in New Issue