gadgetobrr/lib/slippery_slidy.mli

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
  }

(* TODO can I hide this type completly? *)
type widget

type _ t =
  | Text : widget -> string t
  | Slider : widget -> float t
  | Color : widget -> string 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