forked from
pds.ls/pdsls
atmosphere explorer
rework schema anchor
+6
-16
+6
-16
src/components/lexicon-schema.tsx
+6
-16
src/components/lexicon-schema.tsx
···
294
294
props.def.items ||
295
295
props.def.knownValues;
296
296
297
-
const handleHeaderClick = () => {
298
-
window.history.replaceState(null, "", `#schema:${props.name}`);
299
-
const element = document.getElementById(`def-${props.name}`);
300
-
if (element) {
301
-
element.scrollIntoView({ behavior: "instant", block: "start" });
302
-
}
303
-
};
304
-
305
297
return (
306
298
<div class="flex flex-col gap-3" id={`def-${props.name}`}>
307
299
<div class="group flex items-center gap-2">
308
-
<button
309
-
type="button"
310
-
onClick={handleHeaderClick}
311
-
class="relative cursor-pointer text-lg font-semibold hover:underline"
312
-
>
300
+
<a href={`#schema:${props.name}`} class="relative text-lg font-semibold hover:underline">
313
301
<span class="iconify lucide--link absolute top-1/2 -left-6 -translate-y-1/2 text-base opacity-0 transition-opacity group-hover:opacity-100" />
314
302
{props.name === "main" ? "Main Definition" : props.name}
315
-
</button>
303
+
</a>
316
304
<span class={`rounded px-2 py-0.5 text-xs font-semibold uppercase ${defTypeColor()}`}>
317
305
{props.def.type}
318
306
</span>
···
523
511
const hash = location.hash;
524
512
if (hash.startsWith("#schema:")) {
525
513
const defName = hash.slice(8);
526
-
const element = document.getElementById(`def-${defName}`);
527
-
if (element) element.scrollIntoView({ behavior: "instant", block: "start" });
514
+
requestAnimationFrame(() => {
515
+
const element = document.getElementById(`def-${defName}`);
516
+
if (element) element.scrollIntoView({ behavior: "instant", block: "start" });
517
+
});
528
518
}
529
519
});
530
520