gadgetobrr/examples/script.ml

(* 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;
  ()