add text/color input

lib/slippery_slidy.mli

@@ -1,32 +1,58 @@
 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
   }
 
-(** - [id] is the id of the actual_slider_el element
-    - [el] is the slider container element
-    - [actual_slider_el] is the input slider *)
-type slider =
-  { id : string
-  ; el : El.t
-  ; actual_slider_el : El.t
-  }
+(* TODO can I hide this type completly? *)
+type widget
 
-(** Any is for continuous slider *)
+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
 
-val step_to_string : step_kind -> string
+(** [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 "slippery-slidy-container" containing a slider of class
-    "slippery-slidy-slider" wi id [id]
+(** 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
@@ -35,9 +61,16 @@ val mk_slider :
   -> id:string
   -> label:string
   -> datalist_id:string option
-  -> slider
+  -> float t
 
-val add_slider_input_listener : slider -> (float -> unit) -> unit
+(** 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 to drag and move slider with mouse *)
-val mk_dragable : slider -> unit
+(** 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