cotonic.ui Cotonic
ui
The user interface composer manages html snippets which can be placed in the DOM tree. When an updated html snippet is delivered to the composer it will render it by using Google's incremental-dom library. The updates will be applied incrementally directly to the DOM tree. The updates can be delivered as html text snippets to the interface composer.
insert cotonic.ui.insert(targetId, mode, initialHTML, [priority])
Insert a new html snippet into the user interface composer. The snippet will be stored under the given
targetId. The element will not be placed in the dom-tree immediately. This will happen when one of the
render functions is called. Parameter mode supports the following options:
- inner or true
- The html-snippets update the innerHTML of the element.
- outer or false
- The html-snippets update the outerHTML of the element.
- shadow-open or shadow
- The html-snippets update the shadow DOM of the element. The element will be the shadow host. The shadow dom will be put in "open" mode. When the shadow dow was not yet initialised, it will be initialised when the element is rendered the first time. Using the shadow-dom makes it possible to isolate the component from the css rules which are present on the page.
- shadow-closed
- Like "shadow-open", with the difference that the shadow dom will be initialised in "closed" mode.
cotonic.ui.insert("root", "outer", "<p>Hello World!</p>");
cotonic.ui.insert("shadow-root", "shadow", "<p>Hello World!</p>");
get cotonic.ui.get(id)
Returns the current html snippet registered at id.
let currentHTML = cotonic.ui.get("root");
=> "Hello World!"
remove cotonic.ui.remove(id)
Remove the html snippet registered at id. Note that this will not remove the element from the dom-tree,
it will only remove it from the user interface composer. When the element must be removed it should first
be updated and set to a blank string and a render operation should be done.
cotonic.ui.remove("root");
update cotonic.ui.update(id, htmlOrTokens)
Update the registered snippet for the registered element with the given id. The new snippet will be visible
after a render operation.
cotonic.ui.update("root", "<p>Hello Everybody!</p>");
=> The root element on the page will be updated.
render cotonic.ui.render()
Trigger a render of all registered elements.
cotonic.ui.render(); => All elements will be (re)rendered.
renderId cotonic.ui.renderId(id)
Just render the element with the given id.
cotonic.ui.renderId("root");
updateStateData cotonic.ui.updateStateData(model, states)
Communicate the state of the model to other non-cotonic components on the page. It can
be used to pass model state to SPA's or other modules. It sets a data attribute on the
html tag of the page.
The parameter model should be a string, states is an object
with values. The values of the states object are set as data attributes
on the html tag like this:
data-ui-<model>-<key>="<value>". When an empty object is
passed all data attributes of the model is cleared.
cotonic.ui.updateStateData("auth", {authorized: true});
=> <html data-ui-state-auth-authorized="true">
...
cotonic.ui.updateStateData("auth", {});
=> <html">
...
updateStateClass cotonic.ui.updateStateClass(model, classes)
Update the class of the html tag. This makes it possible to communicate important
state changes to external components like SPA's. The parameter model should be
a string. Parameter classes a list of classes which must be set.
The following elements will be added to the class attribute
ui-state-<model>-<class>. Passing [] will clear all the class
attributes of the model.
cotonic.ui.updateStateClass("auth", ["unauthorized", "pending"]);
=> <html class="ui-state-auth-pending ui-state-auth-unauthorized">
cotonic.ui.updateStateClass("auth", ["authorized"]);
=> <html class="ui-state-auth-authorized">
on cotonic.ui.on(topic, msg, event, [options])
Publish a DOM event on the local broker. This allows subscribers to react to user interface
events. Parameter topic is the topic on which the event will be published. The parameters
msg and event are included in the message which is published. The event parameter
is expected to be a DOM event. The options parameter is optional, it
can contain a cancel property which can be set to true, false or
"preventDefault" to indicate if the event should be cancelled or prevented.
The other options can be the normal options found in
publish.
document.addEvenListener("click", function(e) {
const topic = event.target.getAttribute("data-topic");
if(!topic) return;
cotonic.ui.on(topic, {foo: "bar"}, e);
}, {passive: true})
=> When somebody clicks on an element with has a data-topic="a/topic"
attribute, the event will be published on that topic.