diff --git a/examples/dune b/examples/dune index ffe3346..de9fad8 100644 --- a/examples/dune +++ b/examples/dune @@ -1,5 +1,5 @@ (executable - (name slider) - (modules slider) + (name main) + (modules main) (libraries js_of_ocaml brr slippery_slidy) (modes js)) diff --git a/examples/main.ml b/examples/main.ml new file mode 100644 index 0000000..5266987 --- /dev/null +++ b/examples/main.ml @@ -0,0 +1,58 @@ +(* This add a slidder to into
+ moving the slider print its value to the console *) +open Brr +open Slippery_slidy + +let append_el_to_main el = + let main = + match El.find_first_by_selector (Jstr.v "main") with + | Some main -> main + | None -> failwith "append_el_to_main: main element not found" + in + El.append_children main [ el ]; + () + +let () = + let datalist = + mk_datalist (List.map Jstr.v [ "cc"; "sava"; "bb" ]) "my-text-datalist" + in + let text = + mk_text ~min:(Some 0) ~max:(Some 100) ~size:(Some 4) ~value:"?" + ~id:"my-text" ~label:"Important text, input carefully" + ~datalist_id:(Some datalist.datalist_id) + in + add_input_listener text (fun s -> Printf.printf "text value: %s\n" s); + mk_dragable text; + append_el_to_main (el text); + append_el_to_main datalist.datalist_el; + + let datalist = + mk_datalist + (List.map Jstr.of_float [ 2.; 3.; 5.; 8.; 13. ]) + "my-slider-datalist" + in + let slider = + mk_slider ~min:0. ~max:100. ~step:Any ~value:50. ~id:"my-slider" + ~label:"Important slider, slide carefully" + ~datalist_id:(Some datalist.datalist_id) + in + add_input_listener slider (fun x -> Printf.printf "slider value: %f\n" x); + mk_dragable slider; + append_el_to_main (el slider); + append_el_to_main datalist.datalist_el; + + let color = + mk_color ~value:"#00ff00" ~id:"my-color" + ~label:"Important color, pick carefully" + in + add_input_listener color (fun s -> Printf.printf "color value: %s\n" s); + mk_dragable color; + append_el_to_main (el color); + + let brridget_grid : El.t = + El.div ~d:G.document + ~at:[ At.class' (Jstr.v "brridget-grid") ] + [ el text; el slider; el color ] + in + append_el_to_main brridget_grid; + () diff --git a/examples/slider.ml b/examples/slider.ml deleted file mode 100644 index 6440ce9..0000000 --- a/examples/slider.ml +++ /dev/null @@ -1,33 +0,0 @@ -(* This add a slidder to into
- moving the slider print its value to the console *) -open Brr -open Slippery_slidy - -let append_el_to_main el = - let main = - match El.find_first_by_selector (Jstr.v "main") with - | Some main -> main - | None -> failwith "append_el_to_main: main element not found" - in - El.append_children main [ el ]; - () - -let () = - let datalist = - mk_datalist - (List.map Jstr.of_float [ 2.; 3.; 5.; 8.; 13. ]) - "my-slider-datalist" - in - let slider = - mk_slider ~min:0. ~max:100. ~step:Any ~value:50. ~id:"my-slider" - ~label:"Important slider, slide carefully" - ~datalist_id:(Some datalist.datalist_id) - in - append_el_to_main (el slider); - (* don't forget to add datalist to document too! *) - append_el_to_main datalist.datalist_el; - - (* add listener on slider change *) - add_input_listener slider (fun x -> Printf.printf "slider value: %f !!@." x); - mk_dragable slider; - () diff --git a/examples/style.css b/examples/style.css index 7f81773..58b6397 100644 --- a/examples/style.css +++ b/examples/style.css @@ -1,7 +1,6 @@ .brridget-container { display: flex; flex-direction: column; - position: fixed; top: 5vh; left: 5vw; background-color: black; @@ -10,3 +9,11 @@ padding-block: 2vh; padding-inline: 1vw; } + +.brridget-grid { + display: grid; + position: fixed; + top: 5vh; + left: 4vw; + gap: 10%; +} diff --git a/lib/slippery_slidy.ml b/lib/slippery_slidy.ml index dcc2eb4..162b1a9 100644 --- a/lib/slippery_slidy.ml +++ b/lib/slippery_slidy.ml @@ -186,7 +186,7 @@ let conv : type a. a t -> Jv.t -> a = fun w -> match w with | Text _ -> Jv.to_string - | Slider _ -> Jv.to_float + | Slider _ -> fun jv -> float_of_string (Jv.to_string jv) | Color _ -> (* TODO validate here and make a color type? *) Jv.to_string let add_input_listener t f =