[O] Set initial breadcrumb wheel to show the end path

This commit is contained in:
Azalea Gui
2023-02-09 21:32:58 -05:00
parent d3e24ad781
commit f994721c31
+8 -5
View File
@@ -47,7 +47,7 @@ function getParent(level: number)
}
export default function App() {
let bcWheel: HTMLDivElement
let bcMax: number
const [api] = createResource(fetchApi)
const [bcLeft, setBcLeft] = createSignal(0)
const paths = [window.location.host, ...path.split("/").filter(it => it)]
@@ -56,11 +56,14 @@ export default function App() {
{
let direction = (e.detail < 0 || e.deltaY > 0) ? 1 : -1
let dx = direction * 20
const max = Math.round(bcWheel.clientWidth - bcWheel.parentElement.clientWidth)
setBcLeft(Math.max(Math.min(bcLeft() + dx, max), 0))
setBcLeft(Math.max(Math.min(bcLeft() + dx, bcMax), 0))
}
// Set initial breadcrumb wheel to show the end path
const initWheel = (w: HTMLDivElement) => setTimeout(() =>
setBcLeft(bcMax = Math.round(w.clientWidth - w.parentElement.clientWidth)), 100)
return (
// Full screen container
<div class="p-10 bg-dark-800 color-main min-h-full">
@@ -75,7 +78,7 @@ export default function App() {
<Icon icon="ion:wifi-outline" class="text-xl mr-2"/>
<div class="overflow-hidden flex-1">
<div class="w-min" onWheel={e => wheel(e)}
style={{'margin-left': -bcLeft() + 'px'}} ref={bcWheel}>
style={{'margin-left': -bcLeft() + 'px'}} ref={w => initWheel(w)}>
<For each={paths}>{(p, i) =>
<>
<a class="breadcrumb-link ml-2 first:ml-0"