Repair and rewrote sliders in HTML.

The old ones where broken since i accidentally removed setVar, instead
of reintrocuding that, I rewrote slider-inputs as web components, which
frees us of having some hacky javascript in the html code.

1 files changed, 10 insertions, 27 deletions

diff --git a/module/calp/html/components.scm b/module/calp/html/components.scm
index 6642b1fe..2aa95aa6 100644
--- a/module/calp/html/components.scm
+++ b/module/calp/html/components.scm
@@ -18,39 +18,22 @@
      (xhtml-doc (@) body ...))))
 
 
-;; Add a slider with an associated number input. Keeps the two in check.
-;; Uses the js function setVar (which must be provided elsewhere)
-;; set the the value of @var{variable}.
+;; Add a slider with an associated number input. Keeps the two in sync.
 (define*-public (slider-input key: variable
                               (min 0)
                               (max 10)
                               (step 1)
                               (value 1)
                               (unit ""))
-  (let ((groupname (symbol->string (gensym "slider"))))
-    `(div (@ (class "input-group"))
-          (script
-           "function " ,groupname "fn (value) {"
-           "setVar('" ,variable "', value + '" ,unit "');"
-           "for (let el of document.getElementsByClassName('" ,groupname "')) {"
-           "    el.value = value;"
-           "}}")
-          (input (@ (type "range")
-                    (class ,groupname)
-                    (min ,min)
-                    (max ,max)
-                    (step ,step)
-                    (value ,value)
-                    (oninput ,groupname "fn(this.value)")
-                    ))
-          (input (@ (type "number")
-                    (class ,groupname)
-                    (min ,min)
-                    (max ,max)
-                    (step ,step)
-                    (value ,value)
-                    (oninput ,groupname "fn(this.value)"))
-                 ))))
+
+  `(slider-input
+    (@ (min ,min)
+       (max ,max)
+       (step ,step)
+       (value ,value)
+       (oninput
+        ,(format #f "document.documentElement.style.setProperty('--~a', this.value + '~a')"
+                 variable unit)))))
 
 ;; Generates a button or button-like link.
 ;; TODO <div/> inside <button/> isn't valid.