70 lines
2 KiB
OCaml
70 lines
2 KiB
OCaml
open Brr
|
|
|
|
(** type for
|
|
{{:https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist}
|
|
[datalist]} *)
|
|
type datalist =
|
|
{ datalist_id : string
|
|
; datalist_el : El.t
|
|
}
|
|
|
|
type _ t
|
|
|
|
(** type for the step parameter of [mk_slider] Any is for continuous slider *)
|
|
type step_kind =
|
|
| Any
|
|
| Step_value of float
|
|
|
|
(** [id t] the id of the input element of the widget *)
|
|
val id : 'a t -> string
|
|
|
|
(** [el t] the container element of the widget *)
|
|
val el : 'a t -> El.t
|
|
|
|
(** [input_el t] the input element; with id [id t]; contained in the container
|
|
element [el t] *)
|
|
val input_el : 'a t -> El.t
|
|
|
|
(* TODO better type constraint on this?
|
|
pitfall:
|
|
making it a float list, and using Jstr.of_float
|
|
gave me bugged float, it needs 0 at the end or smthing *)
|
|
val mk_datalist : Jstr.t list -> string -> datalist
|
|
|
|
(** make a div of class "brridget-container brridget-text-container" containing
|
|
a text input of class "brridget-text" with id [id]
|
|
|
|
don't forget to add your slider and datalist to your document *)
|
|
val mk_text :
|
|
min:int option
|
|
-> max:int option
|
|
-> size:int option
|
|
-> datalist_id:string option
|
|
-> value:string
|
|
-> id:string
|
|
-> label:string
|
|
-> string t
|
|
|
|
(** make a div of class "brridget-container brridget-slider-container"
|
|
containing a range input of class "brridget-slider" with id [id] *)
|
|
val mk_slider :
|
|
min:float
|
|
-> max:float
|
|
-> step:step_kind
|
|
-> value:float
|
|
-> id:string
|
|
-> label:string
|
|
-> datalist_id:string option
|
|
-> float t
|
|
|
|
(** make a div of class "brridget-container brridget-color-container" containing
|
|
a color input of class "brridget-color" with id [id] *)
|
|
val mk_color : value:string -> id:string -> label:string -> string t
|
|
|
|
(** setup listener on input *)
|
|
val add_input_listener : 'a t -> ('a -> unit) -> unit
|
|
|
|
(** setup listener to drag and move slider with mouse. Works by listening to
|
|
mousedown/mouseup/mousemove events and changing inline css style. use event
|
|
stop_propagation + css to not highlight the page while dragging *)
|
|
val mk_dragable : 'a t -> unit
|