[ui] dynamic page title
parent
f1f89617ad
commit
36594cbc50
|
@ -4,7 +4,7 @@
|
||||||
import UpObject from "./display/UpObject.svelte";
|
import UpObject from "./display/UpObject.svelte";
|
||||||
import { UpType } from "../lib/types";
|
import { UpType } from "../lib/types";
|
||||||
import BlobPreview from "./display/BlobPreview.svelte";
|
import BlobPreview from "./display/BlobPreview.svelte";
|
||||||
import { onMount, setContext } from "svelte";
|
import { createEventDispatcher, onMount, setContext } from "svelte";
|
||||||
import { writable } from "svelte/store";
|
import { writable } from "svelte/store";
|
||||||
import type { UpEntry } from "upend";
|
import type { UpEntry } from "upend";
|
||||||
import Spinner from "./utils/Spinner.svelte";
|
import Spinner from "./utils/Spinner.svelte";
|
||||||
|
@ -175,7 +175,7 @@
|
||||||
<header>
|
<header>
|
||||||
<h2>
|
<h2>
|
||||||
{#if $entity}
|
{#if $entity}
|
||||||
<UpObject banner {address} />
|
<UpObject banner {address} on:resolved />
|
||||||
{:else}
|
{:else}
|
||||||
<Spinner />
|
<Spinner />
|
||||||
{/if}
|
{/if}
|
||||||
|
|
|
@ -0,0 +1,10 @@
|
||||||
|
export function updateTitle(route?: string, title?: string) {
|
||||||
|
let newTitle = "UpEnd";
|
||||||
|
if (route?.length) {
|
||||||
|
newTitle += ` | ${route}`;
|
||||||
|
}
|
||||||
|
if (title?.length) {
|
||||||
|
newTitle += ` - ${title}`;
|
||||||
|
}
|
||||||
|
document.title = newTitle;
|
||||||
|
}
|
|
@ -1,13 +1,15 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { useNavigate, useParams } from "svelte-navigator";
|
import { useNavigate, useParams } from "svelte-navigator";
|
||||||
import Inspect from "../components/Inspect.svelte";
|
import Inspect from "../components/Inspect.svelte";
|
||||||
import IconButton from "../components/utils/IconButton.svelte";
|
import IconButton from "../components/utils/IconButton.svelte";
|
||||||
import { normUrl as normURL } from "../util/history";
|
import { normUrl as normURL } from "../util/history";
|
||||||
|
import { updateTitle } from "../util/title";
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
const params = useParams();
|
const params = useParams();
|
||||||
|
|
||||||
let root: HTMLDivElement;
|
let root: HTMLDivElement;
|
||||||
let editable: boolean[] = [];
|
let editable: boolean[] = [];
|
||||||
|
let identities: string[] = [];
|
||||||
$: addresses = $params.addresses.split(",");
|
$: addresses = $params.addresses.split(",");
|
||||||
|
|
||||||
function visit(idx: number) {
|
function visit(idx: number) {
|
||||||
|
@ -28,6 +30,18 @@ import IconButton from "../components/utils/IconButton.svelte";
|
||||||
behavior: "smooth",
|
behavior: "smooth",
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function onIdentified(index: number, ev: CustomEvent<string[]>) {
|
||||||
|
for (let i = 0; i < addresses.length; i++) {
|
||||||
|
if (!identities[i]) {
|
||||||
|
identities[i] = "?";
|
||||||
|
}
|
||||||
|
identities[index] = ev.detail.join("/");
|
||||||
|
}
|
||||||
|
identities = identities;
|
||||||
|
}
|
||||||
|
|
||||||
|
$: updateTitle("Browse", identities.join(" / "));
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="browser" bind:this={root}>
|
<div class="browser" bind:this={root}>
|
||||||
|
@ -49,7 +63,12 @@ import IconButton from "../components/utils/IconButton.svelte";
|
||||||
disabled={addresses.length === 1}
|
disabled={addresses.length === 1}
|
||||||
/>
|
/>
|
||||||
</header>
|
</header>
|
||||||
<Inspect {address} editable={editable[index] || false} {index} />
|
<Inspect
|
||||||
|
{address}
|
||||||
|
editable={editable[index] || false}
|
||||||
|
{index}
|
||||||
|
on:resolved={(ev) => onIdentified(index, ev)}
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
{/each}
|
{/each}
|
||||||
</div>
|
</div>
|
||||||
|
@ -77,7 +96,7 @@ import IconButton from "../components/utils/IconButton.svelte";
|
||||||
background: var(--background-lighter);
|
background: var(--background-lighter);
|
||||||
color: var(--foreground-lighter);
|
color: var(--foreground-lighter);
|
||||||
border: 1px solid var(--foreground-lightest);
|
border: 1px solid var(--foreground-lightest);
|
||||||
border-radius: .5em;
|
border-radius: 0.5em;
|
||||||
padding: 1rem;
|
padding: 1rem;
|
||||||
|
|
||||||
header {
|
header {
|
||||||
|
|
|
@ -8,6 +8,7 @@
|
||||||
import Spinner from "../components/utils/Spinner.svelte";
|
import Spinner from "../components/utils/Spinner.svelte";
|
||||||
import { query } from "../lib/entity";
|
import { query } from "../lib/entity";
|
||||||
import { vaultInfo } from "../util/info";
|
import { vaultInfo } from "../util/info";
|
||||||
|
import { updateTitle } from "../util/title";
|
||||||
|
|
||||||
const roots = (async () => {
|
const roots = (async () => {
|
||||||
const response = await fetch("/api/hier_roots");
|
const response = await fetch("/api/hier_roots");
|
||||||
|
@ -37,6 +38,8 @@
|
||||||
const date = parseISO(dateString);
|
const date = parseISO(dateString);
|
||||||
return formatRelative(date, new Date());
|
return formatRelative(date, new Date());
|
||||||
}
|
}
|
||||||
|
|
||||||
|
updateTitle("Home");
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="home">
|
<div class="home">
|
||||||
|
|
|
@ -8,6 +8,7 @@
|
||||||
import UpObjectCard from "../components/display/UpObjectCard.svelte";
|
import UpObjectCard from "../components/display/UpObjectCard.svelte";
|
||||||
import { useNavigate } from "svelte-navigator";
|
import { useNavigate } from "svelte-navigator";
|
||||||
import { baseSearch, createLabelled, getObjects } from "../util/search";
|
import { baseSearch, createLabelled, getObjects } from "../util/search";
|
||||||
|
import { updateTitle } from "../util/title";
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
|
|
||||||
export let query: string;
|
export let query: string;
|
||||||
|
@ -41,6 +42,8 @@
|
||||||
const createdAddress = await createLabelled(query);
|
const createdAddress = await createLabelled(query);
|
||||||
navigate(`/browse/${createdAddress}`);
|
navigate(`/browse/${createdAddress}`);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
$: updateTitle("Search", query);
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
|
|
Loading…
Reference in New Issue