diff options
Diffstat (limited to 'src/clicks_display.ts')
| -rw-r--r-- | src/clicks_display.ts | 25 |
1 files changed, 24 insertions, 1 deletions
diff --git a/src/clicks_display.ts b/src/clicks_display.ts index 3478a0f..d13d790 100644 --- a/src/clicks_display.ts +++ b/src/clicks_display.ts @@ -47,18 +47,26 @@ class Display { private status: HTMLElement private frame_container: HTMLElement private frame: HTMLIFrameElement + private url: HTMLSelectElement private heatmap: HTMLElement private data: PageData[] | undefined private map: h337.Heatmap<"value", "x", "y"> + private current: PageData | undefined constructor() { this.status = document.getElementById("status")!! this.frame_container = document.getElementById("frame_container")!! this.frame = document.getElementById("frame")!! as HTMLIFrameElement this.heatmap = document.getElementById("heatmap")!! + this.url = document.getElementById("url")!! as HTMLSelectElement this.map = h337.create({ container: this.heatmap, }) + + this.url.addEventListener("change", (e) => { + if (this.data === undefined) return + this.show(this.data[this.url.selectedIndex]) + }) } loadFile(file: File) { @@ -104,8 +112,21 @@ class Display { this.data.push(new PageData(url, data.width, clicks)) } + while (this.url.options.length > 0) + this.url.options.remove(0) + + for (let i = 0; i < this.data.length; i++) { + const option = document.createElement("option") as HTMLOptionElement + option.value = `${i}` + option.innerText = this.data[i].url + this.url.options.add(option) + } + this.setStatus("Loaded") - if (this.data.length > 0) this.show(this.data[0]) + if (this.data.length > 0) { + this.url.selectedIndex = 0 + this.show(this.data[0]) + } }) reader.readAsText(file) } @@ -115,6 +136,8 @@ class Display { } private show(data: PageData) { + if (this.current === data) return + this.current = data this.frame_container.style.width = `${data.width}px` this.frame.src = data.url this.heatmap.style.transform = "translateY(0px)" |