From 71131d3e1348a207c64f3f11c83731f035351957 Mon Sep 17 00:00:00 2001
From: Dominic <git@msrd0.de>
Date: Tue, 10 Sep 2024 19:14:04 +0200
Subject: [PATCH] Make iframe previews clickable
And thanks JavaScript and iframes for being so annoying.
---
frontend/src/main.less | 1 +
frontend/src/main.ts | 25 ++++++++++++++++++++++---
schilder2000/templates/schild.html.j2 | 1 +
3 files changed, 24 insertions(+), 3 deletions(-)
diff --git a/frontend/src/main.less b/frontend/src/main.less
index 1082a81..f07a833 100644
--- a/frontend/src/main.less
+++ b/frontend/src/main.less
@@ -217,6 +217,7 @@ main {
.preview {
width: 15rem;
+ cursor: pointer;
}
img {
diff --git a/frontend/src/main.ts b/frontend/src/main.ts
index 23650e5..6a98772 100644
--- a/frontend/src/main.ts
+++ b/frontend/src/main.ts
@@ -1,7 +1,5 @@
import './main.less';
-console.log("Hello World");
-
function onInputHandler(event: Event) {
const preview = document.getElementById('preview') as HTMLIFrameElement;
const previewDoc = preview.contentDocument as Document;
@@ -12,9 +10,30 @@ function onInputHandler(event: Event) {
window.addEventListener("load", () => {
if (document.getElementById('preview')) {
- for (let el of document.getElementsByClassName('input-dispatch')) {
+ for (const el of document.getElementsByClassName('input-dispatch')) {
console.log(el);
el.addEventListener('input', onInputHandler);
}
+
+ for (const op of document.querySelectorAll('.option .preview')) {
+ console.log(op);
+ const input_id = (op as HTMLElement).dataset.for;
+ if (!input_id) {
+ console.error("Missing data-for attribute for", op);
+ continue;
+ }
+ const input = document.getElementById(input_id);
+ if (!input || input === null) {
+ console.error("Unable to find input for", op);
+ continue;
+ }
+
+ const handler = (_: Event) => {
+ console.log("clicked");
+ (input as HTMLInputElement).checked = true;
+ };
+ op.addEventListener('click', handler);
+ (op as HTMLIFrameElement).contentDocument?.addEventListener('click', handler);
+ }
}
});
diff --git a/schilder2000/templates/schild.html.j2 b/schilder2000/templates/schild.html.j2
index b136746..f852e8c 100644
--- a/schilder2000/templates/schild.html.j2
+++ b/schilder2000/templates/schild.html.j2
@@ -64,6 +64,7 @@
class="preview option-border"
src="{{ url_for('instance.sample_html', template=t.name) }}"
id="template-preview:{{ t.name }}"
+ data-for="template:{{ t.name }}"
>
</iframe>
<label for="template:{{ t.name }}" class="preview-label">
--
GitLab