Spaces:
Running
Running
File size: 3,265 Bytes
70c137d |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 |
<script lang="ts">
import { createEventDispatcher, onMount, tick } from "svelte";
export let elem_classes: string[] = [];
export let value: string;
export let visible: boolean | "hidden" = true;
export let autoscroll = false;
export let selectable_elements: string[] | null = null;
const dispatch = createEventDispatcher<{
change: undefined;
click: undefined;
select: { index: string; value: Record<string, any> };
}>();
let div: HTMLDivElement;
let scrollable_parent: HTMLElement | null = null;
function extract_data_from_element(el: HTMLElement): Record<string, any> {
const payload = { ...el.dataset };
if (el.tagName === 'TR' && Object.keys(payload).length === 0) {
const cells = Array.from(el.querySelectorAll('td'));
cells.forEach((cell, index) => {
payload[`col_${index}`] = cell.textContent?.trim() || '';
});
}
if (Object.keys(payload).length === 0) {
payload['value'] = el.textContent?.trim() || '';
}
return payload;
}
function get_scrollable_parent(element: HTMLElement): HTMLElement | null {
let parent = element.parentElement;
while (parent) {
const style = window.getComputedStyle(parent);
if (
style.overflow === "auto" ||
style.overflow === "scroll" ||
style.overflowY === "auto" ||
style.overflowY === "scroll"
) {
return parent;
}
parent = parent.parentElement;
}
return null;
}
function is_at_bottom(): boolean {
if (!div) return true;
if (!scrollable_parent) {
return (
window.innerHeight + window.scrollY >=
document.documentElement.scrollHeight - 100
);
}
return (
scrollable_parent.offsetHeight + scrollable_parent.scrollTop >=
scrollable_parent.scrollHeight - 100
);
}
function scroll_to_bottom(): void {
if (!div) return;
if (scrollable_parent) {
scrollable_parent.scrollTo(0, scrollable_parent.scrollHeight);
} else {
window.scrollTo(0, document.documentElement.scrollHeight);
}
}
function handle_delegated_click(event: MouseEvent) {
if (!selectable_elements || selectable_elements.length === 0) {
dispatch("click");
return;
}
const target = event.target as HTMLElement;
for (const selector of selectable_elements) {
const clickable_element = target.closest(selector);
if (clickable_element) {
const data = extract_data_from_element(clickable_element as HTMLElement);
dispatch("select", { index: selector, value: data });
return;
}
}
dispatch("click");
}
async function scroll_on_value_update(): Promise<void> {
if (!autoscroll || !div) return;
if (!scrollable_parent) {
scrollable_parent = get_scrollable_parent(div);
}
if (is_at_bottom()) {
await new Promise((resolve) => setTimeout(resolve, 300));
scroll_to_bottom();
}
}
onMount(() => {
if (autoscroll) {
scroll_to_bottom();
}
scroll_on_value_update();
});
$: value, dispatch("change");
$: if (value && autoscroll) {
scroll_on_value_update();
}
</script>
<!-- svelte-ignore a11y-click-events-have-key-events a11y-no-static-element-interactions -->
<div
bind:this={div}
class="prose {elem_classes.join(' ')}"
class:hide={!visible}
on:click={handle_delegated_click}
>
{@html value}
</div>
<style>
.hide {
display: none;
}
</style>
|