model/ui Cotonic

model/ui

The ui model can be used to update the dom by publishing messages on one of the model/ui/# topics. Elements can be inserted, deleted and updated. If elements in the dom-tree are updated, then a message model/ui/event/dom-updated/+key is published. This can be used to react to dom-changes when they happen.

insert/+key
Insert a new ui snippet named key into the user interface composer. Expects a message with the following properties.

initialData

The initial data to place in the dom tree.

inner

If set to true, the ui composer will update the inner html, when set to false, the outer html

priority

An element with a high priority will be rendered before elements with a lower priority.

self.publish("model/ui/insert/root", {
    initialData: "<div class='loading'>Loading</div>",
    inner: true
    priority: 100
}, {retain: true});
=> When the ui composer receives this message it will add the
   loading
            

update/+key
Update the contents of ui snippet named key previously registered by an insert. Expects a message with the html snippet as message.

self.publish("model/ui/update/root",
    "
");
=> The root element is updated.

delete/+key
Delete ui snippet named key from the user interface composer.

self.publish("model/ui/delete/root");
=> The root element is removed from the composer, but
   stays in the DOM tree.

render
Trigger a render of all registered elements.

self.publish("model/ui/render");

render/+key
Trigger a render of the element key

self.publish("model/ui/render.root");

render-template/+key
Request rendering a template with parameters. A rendering engine must be available to respond to the render requests. The render result will update key element. Note: The element must first be inserted with cotonic.ui.insert or model/ui/insert/+key. The payload of the render request should be:

topic

The topic on which the render engine is subscribed. Can be a local or a remote topic. The response of the renderer will be updated on key

data

The data which the render engine can use to render the template.

dedup

Send the render request via a MQTT QoS 1 message. This means that we can get multiple responses. Dedup makes sure the result will be rendered only once.

self.publish("model/ui/render-template/root",
             {topic: "bridge/origin/model/template/get/render/hello.tpl",
              dedup: true,
              data: {name: "Bob"}
             });
==> The render engine listening at bridge/origin/model/template receives
    a render request. The render result will be placed in element root.

replace/+key
Replace an element with id key with a new element or elements. If the new HTML is passed as a string then the new DOM tree can have multiple elements.
The replacement is done once and no further updates are registered.

self.publish("model/ui/replace/eltid", "Hello and here we are");
            

event/recent-activity
A message containing the user's activity status is published regularly on this topic. The message is an object which contains a is_active boolean property which indicates if the has been active over the last period between publishes.

// worker example
self.subscribe("model/ui/event/recent-activity",
    function(m) {
        const a = m.payload.is_active?"active":"not active";
        console.log("The user is: ", a);
    }
);
=> Displays the user's activity status.

event/dom-updated/+key
When the dom-tree is updated a message will be published. The message is fired after the dom-tree is updated.

cotonic.broker.subscribe("model/ui/event/dom-updated/message-container",
    function(m) {
        const c = document.getElementById("message-container");
        c.scrollTop = c.scrollHeight
    }
);
=> Scrolls the messages bubble container to the bottom.
            

event/+model/ui-status
Events send to this topic will result in class and data attributes set on the html of the document. The model attribute is used in the data and class attributes. This can be used to signal the state of a model to the document. This can be used to signal the state of cotonic workers or models to other ui libraries like Elm or React. The payload of the message:

status

Object with model statuses. Will be set as data attributes.

classes

List with model statuses. Will be set as classes.

self.publish("model/auth/event/ui-status",  {status: {"auth": "anonymous"},
                                             classes: ["anonymous"]});
==> model.ui adds clas "ui-state-auth-anonymous" and
    adds data-ui-state-auth-auth="anonymous" to the html element of the document.

event/new-shadow-root/+key
Init the topic event listener when new shadow roots are added.

id

Element id

cotonic.broker.subscribe("model/ui/event/new-shadow-root/data-list",
    function(m) {
         console.log("Init the event listener for", "data-list")
    }
);
=> Init the topic event listener when new shadow roots are added.