# HG changeset patch # User drewp@bigasterisk.com # Date 1733463240 28800 # Node ID 1d2c65d260d16f96dee652e4d4b8cde58e785de4 # Parent 44bd161e4779b8431b725338578206989858b8f7 factor out breadcrumbs diff -r 44bd161e4779 -r 1d2c65d260d1 src/VBreadcrumbs.ts --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/src/VBreadcrumbs.ts Thu Dec 05 21:34:00 2024 -0800 @@ -0,0 +1,40 @@ +import { html, LitElement, TemplateResult } from "lit"; +import { customElement, property } from "lit/decorators.js"; + +@customElement("v-breadcrumbs") +export class VBreadcrumbs extends LitElement { + // Like "/dir1/dir2/" or "/dir1/dir2/vid1", each of which will make two + // crumbs: TOP and dir1 (because dir2 appears elsewhere on the page) + @property() dirPath?: string; + + render() { + if (this.dirPath == null) return html` dirpath==null `; + + const crumbs = this.getCrumbs(); + return html` ${crumbs.map((c) => html` ${c.label} `)} `; + } + + private getCrumbs() { + if (this.dirPath == null) throw new Error("dirPath is null"); + const segs: Array = this.dirPath.split("/"); + if (segs[0] != "") { + throw new Error(`bad path: ${this.dirPath}`); + } + + segs[0] = html` TOP`; + const tailSegCount = 1; + + const currentPageSegCount = 1; + segs.splice(segs.length - (tailSegCount + currentPageSegCount), tailSegCount + currentPageSegCount); + const crumbs = []; + let cur = "/"; + for (const seg of segs) { + if (seg !== segs[0]) { + cur += seg + "/"; + } + const href = "/video" + cur; + crumbs.push({ href: href, label: seg }); + } + return crumbs; + } +} diff -r 44bd161e4779 -r 1d2c65d260d1 src/VideoPage.ts --- a/src/VideoPage.ts Thu Dec 05 21:33:25 2024 -0800 +++ b/src/VideoPage.ts Thu Dec 05 21:34:00 2024 -0800 @@ -6,7 +6,7 @@ export { PagePlayer } from "./PagePlayer"; export { VideoSection } from "./VideoSection"; import { Routes, Router } from "@lit-labs/router"; - +export { VBreadcrumbs } from "./VBreadcrumbs"; interface VideoFile { webRelPath: string; webDataPath: string; @@ -71,21 +71,12 @@ private _router = new Router(this, [new route()], {}); render() { - const requestedPath = this._router.params[0]; - const segs = ["."].concat(requestedPath || "".split("/")); - const crumbs = []; - // todo: goal is to have '🏠 TOP' and every level not including current dir - for (let i = 0; i < segs.length; i++) { - const seg = segs[i]; - const href = "../".repeat(segs.length - i - 1); - const label = i == 0 ? html`` : seg; - console.log(href, label); - crumbs.push(html`${label}`); - } + const requestedPath = "/" + this._router.params[0]; + return html`
- - ${crumbs} + +
${this._router.outlet()}