[ui] scroll detail-mode columns into view
This commit is contained in:
parent
4dcaeda3e9
commit
50aa34ef61
2 changed files with 30 additions and 15 deletions
|
@ -1,5 +1,5 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { createEventDispatcher } from "svelte";
|
import { createEventDispatcher, tick } from "svelte";
|
||||||
import { normUrl } from "../util/history";
|
import { normUrl } from "../util/history";
|
||||||
|
|
||||||
import Inspect from "./Inspect.svelte";
|
import Inspect from "./Inspect.svelte";
|
||||||
|
@ -14,6 +14,7 @@
|
||||||
let detail = only;
|
let detail = only;
|
||||||
let detailChanged = false;
|
let detailChanged = false;
|
||||||
$: if (!detailChanged) detail = only;
|
$: if (!detailChanged) detail = only;
|
||||||
|
$: if (detailChanged) tick().then(() => dispatch("detail", detail));
|
||||||
|
|
||||||
function visit() {
|
function visit() {
|
||||||
window.open(normUrl(`/browse/${address}`), "_blank");
|
window.open(normUrl(`/browse/${address}`), "_blank");
|
||||||
|
|
|
@ -19,14 +19,21 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
$: {
|
$: scrollToVisible(addresses.length - 1);
|
||||||
addresses;
|
|
||||||
|
|
||||||
|
function scrollToVisible(idx: number) {
|
||||||
|
console.log(`Scrolling to ${idx}`);
|
||||||
|
const target = root?.querySelector(
|
||||||
|
`[data-index='${idx}']`
|
||||||
|
)?.firstElementChild as HTMLElement;
|
||||||
|
|
||||||
|
if (target) {
|
||||||
root?.scrollTo({
|
root?.scrollTo({
|
||||||
left: root.scrollWidth,
|
left: target.offsetLeft,
|
||||||
behavior: "smooth",
|
behavior: "smooth",
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
function onIdentified(index: number, ev: CustomEvent<string[]>) {
|
function onIdentified(index: number, ev: CustomEvent<string[]>) {
|
||||||
for (let i = 0; i < addresses.length; i++) {
|
for (let i = 0; i < addresses.length; i++) {
|
||||||
|
@ -43,17 +50,20 @@
|
||||||
|
|
||||||
<div class="browser" bind:this={root}>
|
<div class="browser" bind:this={root}>
|
||||||
{#each addresses as address, index}
|
{#each addresses as address, index}
|
||||||
|
<div class="column" data-index={index}>
|
||||||
<BrowseColumn
|
<BrowseColumn
|
||||||
{address}
|
{address}
|
||||||
{index}
|
{index}
|
||||||
only={addresses.length === 1}
|
only={addresses.length === 1}
|
||||||
on:close={() => close(index)}
|
on:close={() => close(index)}
|
||||||
on:resolved={(ev) => onIdentified(index, ev)}
|
on:resolved={(ev) => onIdentified(index, ev)}
|
||||||
|
on:detail={(ev) => ev.detail && scrollToVisible(index)}
|
||||||
/>
|
/>
|
||||||
|
</div>
|
||||||
{/each}
|
{/each}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style lang="scss">
|
||||||
.browser {
|
.browser {
|
||||||
display: flex;
|
display: flex;
|
||||||
overflow-x: auto;
|
overflow-x: auto;
|
||||||
|
@ -65,4 +75,8 @@
|
||||||
margin-top: 1rem;
|
margin-top: 1rem;
|
||||||
margin-bottom: var(--footer-height);
|
margin-bottom: var(--footer-height);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.column {
|
||||||
|
display: contents;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
Loading…
Reference in a new issue