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.
The optional priority parameter indicates the render order of the elements. Elements with a high priority are rendedered before lower priorities. This makes it possible to nest elements.
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.