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 El.children where you may see them you'll likely never run into problems. The El.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 than once, the last one takes over with the exception of At.class' and At.style 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

See also document element lookups.

val find_by_class : ?root:t -> Jstr.t -> t list

els_by_class ~root c are the elements with class c that are descendents of root (defaults to Document.root).

val find_by_tag_name : ?root:t -> Jstr.t -> t list

find_by_tag_name ~root n are the elements with tag name t that are descendents of root (defaults to Document.root).

val find_first_by_selector : ?root:t -> Jstr.t -> t option

find_first_by_selector ~root sel is the first element selected by the CSS selector sel that is descendent of root (defaults to Document.root).

val fold_find_by_selector : ?root:t -> (t -> 'a -> 'a) -> Jstr.t -> 'a -> 'a

fold_find_by_selector ~root f sel acc folds f over the elements selected by the CSS selector sel that are descendent of root (defaults to Document.root).

Parent, children and siblings

val parent : t -> t option

parent e is the parent element of e (if any).

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 previous_sibling : t -> t option

previous_sibling e is e's previous sibling element (if any).

val next_sibling : t -> t option

next_sibling e is e's next sibling element (if any).

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. If a is empty, this has not effect.

Some attributes are reflected as JavaScript properties in elements see here for details. The following gives a quick way of accessing these properties for elements whose interface which, unlike Brr_canvas.Canvas and Brr_io.Media.El, are not necessarily bound by Brr for the time being (or will never be).

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 G.window).

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).

val remove_inline_style : Style.prop -> t -> unit

remove_inline_style p e removes the inlie style property p of e.

Layout

The inner bound of an element includes its content and padding but not its border. We use the client* properties to get it. These only have integral CSS pixel precision.

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.

The bound of an element includes its content, padding and border. We use getBoundingClientRect to get it. These have CSS subpixel precision.

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, Brr_canvas.Canvas for the canvas element interface and Brr_io.Form for the form element interface.

module Input : sig ... end

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
val abbr : cons
val address : cons
val area : void_cons
val article : cons
val aside : cons
val audio : cons
val b : cons
val base : void_cons
val bdi : cons
val bdo : cons
val blockquote : cons
val body : cons
val br : void_cons
val button : cons
val canvas : cons
val caption : cons
val cite : cons
val code : cons
val col : void_cons
val colgroup : cons
val command : cons
val datalist : cons
val dd : cons
val del : cons
val details : cons
val dfn : cons
val div : cons
val dl : cons
val dt : cons
val em : cons
val embed : void_cons
val fieldset : cons
val figcaption : cons
val figure : cons
val form : cons
val h1 : cons
val h2 : cons
val h3 : cons
val h4 : cons
val h5 : cons
val h6 : cons
val head : cons
val header : cons
val hgroup : cons
val hr : void_cons
val html : cons
val i : cons
val iframe : cons
val img : void_cons
val input : void_cons
val ins : cons
val kbd : cons
val keygen : cons
val label : cons
val legend : cons
val li : cons
val map : cons
val mark : cons
val menu : cons
val meta : void_cons
val meter : cons
val nav : cons
val noscript : cons
val object' : cons
val ol : cons
val optgroup : cons
val option : cons
val output : cons
val p : cons
val param : void_cons
val pre : cons
val progress : cons
val q : cons
val rp : cons
val rt : cons
val ruby : cons
val s : cons
val samp : cons
val script : cons
val section : cons
val select : cons
val small : cons
val source : void_cons
val span : cons
val strong : cons
val style : cons
val sub : cons
val summary : cons
val sup : cons
val table : cons
val tbody : cons
val td : cons
val textarea : cons
val tfoot : cons
val th : cons
val thead : cons
val time : cons
val title : cons
val tr : cons
val track : void_cons
val u : cons
val ul : cons
val var : cons
val video : cons
val wbr : void_cons