Module `Brr.El`

DOM elements.

The type El.t technically represents DOM Node objects. However most of DOM processing happens on elements. So we make it as if El.t values were just elements and most of the functions of this module will fail on text nodes. Except on children where you may see them you'll likely never run into problems. The is_txt function can be used to check for textiness.

type document: See Brr.Document.t this is a forward declaration.

type window: See Brr.Window.t this is a forward declaration.

type tag_name = Jstr.t: The type for element tag names.

type t: The type for elements. Technically this is a DOM Node object. But we focus on DOM manipulation via elements, not the various kind of nodes that may exist.

type el = t: See t.

val v : ?⁠d:document -> ?⁠at:At.t list -> tag_name -> t list -> t: v ?d ?at name cs is an element name with attribute at (defaults to []) and children cs. If at specifies an attribute more thanonce, the last one takes over with the exception of At.class' whose occurences accumulate to define the final value. d is the document on which the element is defined it defaults Brr.G.document.

val txt : ?⁠d:document -> Jstr.t -> t: txt s is the text s. d is the document on which the element is defined it defaults Brr.G.document. WARNING This is not strictly speaking an element most function of this module will error with this value.

val txt' : ?⁠d:document -> string -> t: txt' s is txt (Jstr.v s).

val sp : ?⁠d:document -> unit -> t: sp () is El.txt Jstr.sp

val nbsp : ?⁠d:document -> unit -> t: nbsp () is El.txt' "\u{00A0}".

val is_txt : t -> bool: is_txt e is true iff e is a text node. Note that in this cases many of the function below fail.

val is_el : t -> bool: is_el e is true iff e is an element node.

val tag_name : t -> tag_name: name e is the tag name of element e lowercased. For is_txt nodes this returns "#text".

val has_tag_name : tag_name -> t -> bool: has_tag_name n e is Jstr.equal n (name e).

val txt_text : t -> Jstr.t: txt_text e is the text of e if e is a text node and the empty string otherwise.

val document : t -> document: document e is the document of e.

val as_target : t -> Ev.target: as_target d is the document as an event target.

Element lookups

Children

val children : ?⁠only_els:bool -> t -> t list: children e are e's children. Warning, unless only_els is true (defaults to false) not all returned elements will satisfy is_el here.

val set_children : t -> t list -> unit: set_children e l sets the children of e to l.

val prepend_children : t -> t list -> unit: prepend e l prepends l to e's children.

val append_children : t -> t list -> unit: append_children e l appends l to e's children.

val insert_siblings : [ `Before | `After | `Replace ] -> t -> t list -> unit: insert_siblings loc e l inserts l before, after or instead of element e according to loc.

val remove : t -> unit: remove e removes e from the document.

Attributes and properties

val at : At.name -> t -> Jstr.t option: at a e is the attribute a of e (if any).

val set_at : At.name -> Jstr.t option -> t -> unit: set_at a v e sets the attribute a of e to v. If v is None the attribute is removed.

module Prop : sig ... end: Element properties.

val prop : 'a Prop.t -> t -> 'a: prop p e is the property p of e if defined and false, 0, 0. or Jstr.empty as applicable if undefined.

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

Classes

val class' : Jstr.t -> t -> bool: 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 to b.

Style

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

val computed_style : ?⁠w:window -> Style.prop -> t -> Jstr.t: computed_style ?w p e is the computed style property p of e in window w (defaults to Window.global).

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

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

Layout

val inner_x : t -> float: inner_x e is the horizontal coordinate in the viewport of e's inner bound. Add Window.scroll_x to get the position relative to the document.

val inner_y : t -> float: inner_y e is the vertical coordinate in the viewport of e's inner bound. Add Window.scroll_y to get the position relative to the document.

val inner_w : t -> float: inner_w e is e's inner bound width.

val inner_h : t -> float: inner_h e is e's inner bound height.

val bound_x : t -> float: bound_x e is the horizontal coordinate in the viewport of e's bound. Add Window.scroll_x to get the position relative to the document.

val bound_y : t -> float: bound_y e is the vertical coordinate in the viewport of e's bound. Add Window.scroll_y to get the position relative to the document.

val bound_w : t -> float: bound_w e is e's bound width.

val bound_h : t -> float: bound_h e is e's bound height.

Scrolling

val scroll_x : t -> float: scroll_x e is the number of pixels scrolled horizontally.

val scroll_y : t -> float: scroll_y e is the number of pixels scrolled vertically.

val scroll_w : t -> float: scroll_w e is the minimum width the element would require to display without a vertical scrollbar.

val scroll_h : t -> float: scroll_h e is the minimum height the element would require to display without a vertical scrollbar.

val scroll_into_view : ?⁠align_v:[ `Start | `End ] -> t -> unit: scroll_into_view ~align e scrolls e into view. If align_v is `Start (default) the top of the element is align with to to the top of the scrollable area. If align_v is `End the bottom of the element is aligned with the bottom of the scrollable area.

Focus

val has_focus : t -> bool: has_focus e is true if e has focus in the document it belongs to.

val set_has_focus : bool -> t -> unit: set_has_focus b e sets the focus of e to b in the document it belongs do.

Pointer locking

val is_locking_pointer : t -> bool: is_locking_pointer e is true if e is the element which locked the pointer.

val request_pointer_lock : t -> unit Fut.or_error: request_pointer_lock e requests the pointer to be locked to e in the document it belongs to. This listens on the document for the next Ev.pointerlockchange and Ev.pointerlockerror to resolve the future appropriately.

Fullscreen

module Navigation_ui : sig ... end: Fullscreen navigation enum.

type fullscreen_opts: The type for FullscreenOptions objects.

val fullscreen_opts : ?⁠navigation_ui:Navigation_ui.t -> unit -> fullscreen_opts: fullscreen_opts () are options for fullscreen with given parameters.

val request_fullscreen : ?⁠opts:fullscreen_opts -> t -> unit Fut.or_error: request_fullscreen e requests to make the element to be displayed in fullscreen mode.

Click simulation

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

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

Element interfaces

Some interfaces are in other modules. See for example Brr_io.Media.El for the media element interface and Brr_canvas.Canvas for the Canvas Element interface.

module Input : sig ... end: The HTML input element interface .

Element names and constructors

See the MDN HTML element reference.

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

module Name : sig ... end: Element names

type cons = ?⁠d:document -> ?⁠at:At.t list -> t list -> t: The type for element constructors. This is simply v with a pre-applied element name.

type void_cons = ?⁠d:document -> ?⁠at:At.t list -> unit -> t: The type for void element constructors. This is simply v with a pre-applied element name and without children.

val a : cons: a

val abbr : cons: abbr

val address : cons: address

val area : void_cons: area

val article : cons: article

val aside : cons: aside

val audio : cons: audio

val b : cons: b

val base : void_cons: base

val bdi : cons: bdi

val bdo : cons: bdo

val blockquote : cons: blockquote

val body : cons: body

val br : void_cons: br

val button : cons: button

val canvas : cons: canvas

val caption : cons: caption

val cite : cons: cite

val code : cons: code

val col : void_cons: col

val colgroup : cons: colgroup

val command : cons: command

val datalist : cons: datalist

val dd : cons: dd

val del : cons: del

val details : cons: details

val dfn : cons: dfn

val div : cons: div

val dl : cons: dl

val dt : cons: dt

val em : cons: em

val embed : void_cons: embed

val fieldset : cons: fieldset

val figcaption : cons: figcaption

val figure : cons: figure

val footer : cons: footer

val form : cons: form

val h1 : cons: h1

val h2 : cons: h2

val h3 : cons: h3

val h4 : cons: h4

val h5 : cons: h5

val h6 : cons: h6

val head : cons: head

val header : cons: header

val hgroup : cons: hgroup

val hr : void_cons: hr

val html : cons: html

val i : cons: i

val iframe : cons: iframe

val img : void_cons: img

val input : void_cons: input

val ins : cons: ins

val kbd : cons: kbd

val keygen : cons: keygen

val label : cons: label

val legend : cons: legend

val li : cons: li

val link : void_cons: link

val map : cons: map

val mark : cons: mark

val menu : cons: menu

val meta : void_cons: meta

val meter : cons: meter

val nav : cons: nav

val noscript : cons: noscript

val object' : cons: object

val ol : cons: ol

val optgroup : cons: optgroup

val option : cons: option

val output : cons: output

val p : cons: p

val param : void_cons: param

val pre : cons: pre

val progress : cons: progress

val q : cons: q

val rp : cons: rp

val rt : cons: rt

val ruby : cons: ruby

val s : cons: s

val samp : cons: samp

val script : cons: script

val section : cons: section

val select : cons: select

val small : cons: small

val source : void_cons: source

val span : cons: span

val strong : cons: strong

val style : cons: style

val sub : cons: sub

val summary : cons: summary

val sup : cons: sup

val table : cons: table

val tbody : cons: tbody

val td : cons: td

val textarea : cons: textarea

val tfoot : cons: tfoot

val th : cons: th

val thead : cons: thead

val time : cons: time

val title : cons: title

val tr : cons: tr

val track : void_cons: track

val u : cons: u

val ul : cons: ul

val var : cons: var

val video : cons: video

val wbr : void_cons: wbr