From 6ae97ecca8b4f38213f0f45aa6eaef944cd6b497 Mon Sep 17 00:00:00 2001
From: Sébastien Dailly <sebastien@chimrod.com>
Date: Tue, 5 Jan 2021 21:43:08 +0100
Subject: Responsive sliders

---
 script.it/script.ml | 88 ++++++++++++++++++++++++++++++++++-------------------
 1 file changed, 56 insertions(+), 32 deletions(-)

(limited to 'script.it/script.ml')

diff --git a/script.it/script.ml b/script.it/script.ml
index 131ea39..95272fb 100755
--- a/script.it/script.ml
+++ b/script.it/script.ml
@@ -77,9 +77,6 @@ let click_event el =
     Evr.unit
     el
 
-let show_value input =
-  El.txt (Jstr.of_float input)
-
 type 'a param_events =
   { width : float S.t
   ; angle : float S.t
@@ -88,8 +85,12 @@ type 'a param_events =
   ; rendering : ([> State.render_event] as 'a) E.t
   }
 
+type slider =
+  { input : El.t
+  ; legend : El.t }
+
 let set_sidebar
-  : El.t -> State.state -> _ param_events
+  : El.t -> State.state -> _ param_events * slider * slider
   = fun element state ->
 
     let open El in
@@ -122,14 +123,9 @@ let set_sidebar
                ] in
 
     let width = El.div [] in
-    Elr.def_children
-      width
-      (nib_size_event
-       |> S.map (fun v ->
-           [ txt' "Width : "
-           ; show_value v ]
-         )
-      );
+    let width_slider =
+      { input = nib_size
+      ; legend = width } in
 
     let input_angle, angle_event =
       Elements.Input.slider
@@ -140,15 +136,9 @@ let set_sidebar
                ] in
 
     let angle = El.div [] in
-    Elr.def_children
-      angle
-      (angle_event
-       |> S.map (fun v ->
-           [ txt' "Angle : "
-           ; show_value v
-           ; txt' "°" ]
-         )
-      );
+    let angle_slider =
+      { input = input_angle
+      ; legend = angle } in
 
     let render =
       El.select
@@ -156,10 +146,6 @@ let set_sidebar
             [ txt' "Fill"]
         ; El.option ~at:At.[value (Jstr.v "2")]
             [ txt' "Ductus"]
-(*
-        ; El.option ~at:At.[value (Jstr.v "3")]
-            [ txt' "Line"]
-*)
         ] in
 
     let rendering' = El.div
@@ -196,12 +182,14 @@ let set_sidebar
 
         ]
     in
-    { delete = delete_event
-    ; angle = angle_event
-    ; width = nib_size_event
-    ; export = export_event
-    ; rendering = render_event
-    }
+    ( { delete = delete_event
+      ; angle = angle_event
+      ; width = nib_size_event
+      ; export = export_event
+      ; rendering = render_event }
+    , angle_slider
+    , width_slider
+    )
 
 let backgroundColor = Blog.Nord.nord0
 let white = Jstr.v "#eceff4"
@@ -275,7 +263,7 @@ let page_main id =
 
   let timer, tick = Elements.Timer.create () in
 
-  let parameters =
+  let parameters, angle_element, width_slider =
     begin match Blog.Sidebar.get () with
       | None ->
         Jv.throw (Jstr.v "No sidebar")
@@ -284,6 +272,8 @@ let page_main id =
         Blog.Sidebar.clean el;
         set_sidebar el State.init
     end in
+
+
   let delete_event = E.map (fun () -> `Delete) parameters.delete
   and export_event = E.map (fun () -> `Export) parameters.export
   and angle_event = S.changes parameters.angle
@@ -359,6 +349,40 @@ let page_main id =
                        |> Option.iter Logr.hold in
 
 
+
+        (* Ajust the angle slide according to the state *)
+        let angle_signal = S.map (fun s -> Jstr.of_float s.State.angle) state in
+        let _ =
+          Elr.def_prop
+            Elements.Prop.value
+            angle_signal
+            angle_element.input
+
+        and _ = Elr.def_children
+            angle_element.legend
+            (S.map
+               (fun v ->
+                  [ El.txt' "Angle : "
+                  ; El.txt v
+                  ; El.txt' "°" ] )
+               angle_signal) in
+
+        let width_signal = S.map (fun s -> Jstr.of_float s.State.width) state in
+        let _ =
+          Elr.def_prop
+            Elements.Prop.value
+            width_signal
+            width_slider.input
+
+        and _ = Elr.def_children
+            width_slider.legend
+            (S.map (fun v ->
+                 [ El.txt' "Width : "
+                 ; El.txt v ]
+               )
+                width_signal
+            ) in
+
         (* Draw the canva for first time *)
         on_change canva mouse_position timer State.init;
 
-- 
cgit v1.2.3