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.
See Brr.Document.t
this is a forward declaration.
See Brr.Window.t
this is a forward declaration.
type tag_name = Jstr.t
The type for element tag names.
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.
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
.
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 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.
name e
is the tag name of element e
lowercased. For is_txt
nodes this returns "#text"
.
txt_text e
is the text of e
if e
is a text node and the empty string otherwise.
See also document element lookups.
els_by_class ~root c
are the elements with class c
that are descendents of root
(defaults to Document.root
).
find_by_tag_name ~root n
are the elements with tag name t
that are descendents of root
(defaults to Document.root
).
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
).
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
).
children e
are e
's children. Warning, unless only_els
is true
(defaults to false
) not all returned elements will satisfy is_el
here.
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.
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.
prop p e
is the property p
of e
if defined and false
, 0
, 0.
or Jstr.empty
as applicable if undefined.
set_class c b e
sets the membership of e
to class c
to b
.
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
.
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.
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.
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.
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 navigation enum.
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.
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.
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
The HTML input element interface .
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
The type for element constructors. This is simply v
with a pre-applied element name.
The type for void element constructors. This is simply v
with a pre-applied element name and without children.
val blockquote : cons