- See also
library(dialect/tau/dom).
This library allows manipulating the browser DOM and bind event
handlers to create and manage interactive pages. All manipulations to
the DOM can be done using :=/2
from library(wasm), e.g.
?- Elem := document.createElement("div").
This library leverages html//1
interface as introduced for server-side HTML generation to create
complex DOM structures from Prolog terms. It provides three ways to
facilitate reuse.
- Use
\Rule in the global structure. This calls the DCG Rule,
which should call html//1 to
add any structure in this place. This approach is compatible to html//1
as used for server-side generation.
- Create the global structure and use
Var=Spec to get
access to some of the containers and later fill them using append_html/2.
- Create sub structures using html//1
and use them in html//1
calls that create the global structure.
- [det]append_html(+Elem,
:HTML)
- Extend the HTMLElement Elem using DOM elements created from
Spec using html//1. For
example:
?- Elem := document.getElementById("mydiv"),
append_html(Elem, [ "Hello ", b(world), "!"]).
- See also
- html//1.
- html(:Spec)
// - This DCG transforms a DOM specification into a list of HTMLElement
objects. This predicate is similar to html//1
from
library(http/html_write). The differences are:
- This predicate creates a list of HTMLElement JavaScript objects
rather than a list of HTML tokens. The translation is done by
means of JavaScript calls that create and manage objects.
- This version allows for nodes to be specified as
Var=Spec.
This processes Spec normally and binds Var to the
created element.
The following terms are processed:
- Var
= Spec - Create Spec and bind Var to the created node.
- Format
- Args - Create a text node from the result of calling format/3.
&(Entity)- Create a text node with one character if Entity is an integer
or a
<span> holding the entity otherwise.
\ Rule- Call
call(Rule), allowing for a user-defined rule. This
rule should call html//1 to
produce elements.
- M
:Rule - As
\Rule, but calling in a module. This is the same as
\(M:Rule).
- List
- Emit each element of the list.
- Compound
- This must but a term Tag(Content) or Tag(Attributes,Content). If Tag is
an HTML element that has no content, a single argument is intepreted as
Tag(Attributes). Attributes is either a single attribute of a list of
attributes. Each attribute is either term Attr(Value) or
Attr=Value.
If Value is a list, it is concatenated with a separating space. The
attribute names can either be the HTML name in lowercase or the DOM
camelCase attribute name. HTML names are mapped by the multifile
predicate html_dom/2.
- JavaScriptObjecty
- This should be an HTMLElement. It is inserted at this place.
- Atomic
- Atomic data creates a text node.
- [multifile]html_dom(?HTMLAttr,
?DOMAttr)
- Mapping of HTML attribute names to DOM element attributes.
- See also
- https://stackoverflow.com/questions/14544481/is-there-a-mapping-from-html-property-names-to-dom-propety-names
- [det]bind(+Elem,
+EventType, -Event, :Goal)
- [det]bind_async(+Elem,
+EventType, -Event, :Goal)
- Bind EventType on Elem to call Goal. If Event
appears in Goal is is bound to the current event.
The bind_async/4
variation runs the event handler on a new Prolog
engine using Prolog.forEach(). This implies that the
handler runs asynchronously and all its solutions are enumerated.
- Compatibility
- bind_async/5 is a SWI-Prolog extension to
the Tau library
- [det]unbind(+Elem,
+EventType)
- Remove the event listener for EventType.
- [det]wait(+Elem,
+EventType, =Event)
- Make the calling task wait for EventType on Elem.
If the event is triggered, Event is unified with the event
object.
