Module `Brr.El`

DOM elements.

Warning. Reactive DOM element mutators (rset_att, rset_children, etc.) and definers (def_att, def_children, etc.) use Note loggers to perform their action. To prevent memory leaks, these loggers, and thus their action, automatically get destroyed whenever the element is removed from the HTML DOM.

Elements

type name = Jstr.t: The type for element names.

type el: The type for elements.

type t = [ | `El of el ]: The type for elements.

type child = [ | t | `Txt of Jstr.t ]: The type for element children.

val v : ?⁠atts:Att.t list -> name -> child list -> [> t ]: v ?atts name cs is an element name with attribute atts (defaults to []) and children cs. If atts specifies an attribute more than once, the last one takes over with the exception of Att.klass, whose occurences accumulate to define the final value.

val el : t -> Js_of_ocaml.Dom_html.element Js_of_ocaml.Js.t: el (`El e) is e.

val tag_name : t -> Jstr.t: tag_name e is the tag name of the element.

val find_id : Jstr.t -> [> t ] option: find_id id is the element with id id in the browser document (if any).

val find_class : Jstr.t -> [> t ] list: find_class cl are the element with class cs in the browser document.

val document : unit -> [> t ]: document is the document's element of the current browser document.

val document_body : unit -> [> t ]: document_body is the body element of the current browser document.

val document_active : unit -> [> t ] option: document_active is the element of the DOM that currently has focus (if any).

Children

val set_children : t -> child list -> unit: set_children e children sets e's children to children

val rset_children : t -> on:child list Note.event -> unit: rset_children e ~on sets e's children with the value of on whenever it occurs.

val def_children : t -> child list Note.signal -> unit: def_children e cs defines e's children over time with the value of signal cs. Warning. This assumes cs is the only entity interacting with the children.

Attributes

val get_att : Att.name -> t -> Jstr.t option: get_att a e is the value of the attribute a of e (if any).

val set_att : Att.name -> Jstr.t option -> t -> unit: set_att a v e sets the value of attribute a of e to v. If v is None this removes the attribute.

val rset_att : Att.name -> on:Jstr.t option Note.event -> t -> unit: rset_att a ~on e sets attribute a of e with the value of e whenever it occurs. If the value is None this removes the attribute.

val def_att : Att.name -> Jstr.t option Note.signal -> t -> unit: def_att a v e defines the attribute a of e over time with the value of v. Whenever the signal value is None, the attribute is removed. Warning. This assumes v is the only entity interacting with that attribute.

Classes

val get_class : Jstr.t -> t -> bool: get_class c e is the membership of e to class c.

val set_class : Jstr.t -> bool -> t -> unit: set_class c b e sets the membership of e to class c according to b.

val rset_class : Jstr.t -> on:bool Note.event -> t -> unit: rset_class a ~on e sets the membership of e to class e with the value of on whenever it occurs.

val def_class : Jstr.t -> bool Note.signal -> t -> unit: rdef_class a b e defines the membership of e to class e over time with the value of b. Warning. This assumes b is the only entity interacting with that class.

Properties

val get_prop : 'a Prop.t -> t -> 'a: get_prop p e is the property p of element e if defined and p's undefined value otherwise.

val set_prop : 'a Prop.t -> 'a -> t -> unit: set_prop p v o sets property p of element e to v.

val rset_prop : 'a Prop.t -> on:'a Note.event -> t -> unit: rset_prop p ~on e sets property p of e to the value of on whenever it occurs.

val def_prop : 'a Prop.t -> 'a Note.signal -> t -> unit: def_prop p v e defines the property p of e over time with the value of v. Warning. This assumes v is the only entity interacting with that property.

Style

module Style : sig ... end: Style property names.

val get_computed_style : Style.prop -> t -> Jstr.t: get_computed_style p e is the computed style property p of e.

val get_style : Style.prop -> t -> Jstr.t: get_style p e is the inline style property p of e.

val set_style : ?⁠important:bool -> Style.prop -> Jstr.t -> t -> unit: set_style ~important p v e sets the inline style property p of e to v with priority important (defaults to false).

val rset_style : ?⁠important:bool -> Style.prop -> on:Jstr.t Note.event -> t -> unit: rset_style ~important p ~on e sets the inline style property p of e to the value of on whenever it occurs with priority important (defaults to false).

val def_style : ?⁠important:bool -> Style.prop -> Jstr.t Note.signal -> t -> unit: def_style p v e sets the inline style property p of e over time with the value of v. Warning. This assumes v is the only entity interacting with that property.

Focus

val set_focus : bool -> t -> unit: focus b e sets the focus of e to b.

val rset_focus : on:bool Note.event -> t -> unit: rset_focus e ~on sets e's focus with the value of on whenever it occurs.

val def_focus : bool Note.signal -> t -> unit: def_focus e v defines the focus of e over time with the value of v. Warning. This asumes v is the only entity interacting with e's focus.

Click simulation

val click : t -> unit: click e simulates a click on e.

val select_txt : t -> unit: select_txt e selects the textual contents of e. If the DOM element e has no select method this does nothing.

Life-cycle callbacks

The browser document is watched for changes via a global MutationObserver. Whenever an element is added in the HTML DOM, its on_add callbacks get called and disposed. Whenever an element is removed from the HTML DOM, on_rem callbacks get called and disposed. A element is deemed part of the HTML DOM if its root node is the browser document.

val on_add : (unit -> unit) -> t -> unit: on_add f e references f until e is inserted in the HTML DOM, at which point f () is invoked.

val on_rem : (unit -> unit) -> t -> unit: on_rem f e references f until e is removed from the HTML DOM, at which point f () is invoked.

Note loggers

val call : ('a -> t -> unit) -> on:'a Note.event -> t -> unit: call f ~on e calls f on e with the value of e whenever on occurs. The underlying logger is held by e.

val hold_logr : t -> Note.Logr.t -> unit: hold_logr e l lets e hold logger l and destroy it via on_rem once e is removed from the document.

val may_hold_logr : t -> Note.Logr.t option -> unit: may_hold_logr e l is like hold_logr but does nothing on None.

Element constructors

Convention. Whenever an element name conflicts with an OCaml keyword we prime it, see for example object'.

module Name : sig ... end: Element names.

type 'a cons = ?⁠atts:Att.t list -> child list -> [> t ] as a: The type for element constructors. This is simply v with a pre-applied element name.

val a : 'a cons: a

val abbr : 'a cons: abbr

val address : 'a cons: address

val area : 'a cons: area

val article : 'a cons: article

val aside : 'a cons: aside

val audio : 'a cons: audio

val b : 'a cons: b

val base : 'a cons: base

val bdi : 'a cons: bdi

val bdo : 'a cons: bdo

val blockquote : 'a cons: blockquote

val body : 'a cons: body

val br : 'a cons: br

val button : 'a cons: button

val canvas : 'a cons: canvas

val caption : 'a cons: caption

val cite : 'a cons: cite

val code : 'a cons: code

val col : 'a cons: col

val colgroup : 'a cons: colgroup

val command : 'a cons: command

val datalist : 'a cons: datalist

val dd : 'a cons: dd

val del : 'a cons: del

val details : 'a cons: details

val dfn : 'a cons: dfn

val div : 'a cons: div

val dl : 'a cons: dl

val dt : 'a cons: dt

val em : 'a cons: em

val embed : 'a cons: embed

val fieldset : 'a cons: fieldset

val figcaption : 'a cons: figcaption

val figure : 'a cons: figure

val footer : 'a cons: footer

val form : 'a cons: form

val h1 : 'a cons: h1

val h2 : 'a cons: h2

val h3 : 'a cons: h3

val h4 : 'a cons: h4

val h5 : 'a cons: h5

val h6 : 'a cons: h6

val head : 'a cons: head

val header : 'a cons: header

val hgroup : 'a cons: hgroup

val hr : 'a cons: hr

val html : 'a cons: html

val i : 'a cons: i

val iframe : 'a cons: iframe

val img : 'a cons: img

val input : 'a cons: input

val ins : 'a cons: ins

val kbd : 'a cons: kbd

val keygen : 'a cons: keygen

val label : 'a cons: label

val legend : 'a cons: legend

val li : 'a cons: li

val link : 'a cons: link

val map : 'a cons: map

val mark : 'a cons: mark

val menu : 'a cons: menu

val meta : 'a cons: meta

val meter : 'a cons: meter

val nav : 'a cons: nav

val noscript : 'a cons: noscript

val object' : 'a cons: object

val ol : 'a cons: ol

val optgroup : 'a cons: optgroup

val option : 'a cons: option

val output : 'a cons: output

val p : 'a cons: p

val param : 'a cons: param

val pre : 'a cons: pre

val progress : 'a cons: progress

val q : 'a cons: q

val rp : 'a cons: rp

val rt : 'a cons: rt

val ruby : 'a cons: ruby

val s : 'a cons: s

val samp : 'a cons: samp

val script : 'a cons: script

val section : 'a cons: section

val select : 'a cons: select

val small : 'a cons: small

val source : 'a cons: source

val span : 'a cons: span

val strong : 'a cons: strong

val style : 'a cons: style

val sub : 'a cons: sub

val summary : 'a cons: summary

val sup : 'a cons: sup

val table : 'a cons: table

val tbody : 'a cons: tbody

val td : 'a cons: td

val textarea : 'a cons: textarea

val tfoot : 'a cons: tfoot

val th : 'a cons: th

val thead : 'a cons: thead

val time : 'a cons: time

val title : 'a cons: title

val tr : 'a cons: tr

val track : 'a cons: track

val u : 'a cons: u

val ul : 'a cons: ul

val var : 'a cons: var

val video : 'a cons: video

val wbr : 'a cons: wbr