init

examples/script.ml

@@ -0,0 +1,58 @@
+(* This add a slidder to into <main>
+   moving the slider print its value to the console *)
+open Brr
+open Gadgetobrr
+
+let append_el_to_body el =
+  let body =
+    match El.find_first_by_selector (Jstr.v "body") with
+    | Some body -> body
+    | None -> failwith "append_el_to_body: body element not found"
+  in
+  El.append_children body [ 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_body (el text);
+  append_el_to_body 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_body (el slider);
+  append_el_to_body 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_body (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_body brridget_grid;
+  ()