Cotonic models

model/location Cotonic

The location model can be used to retrieve information on the current location of the page. It also allows subscription to location changes.

get/href

Get the current href.

self.call("model/location/get/href")
.then(function(m) {
    console.log(m.payload)
});
=> "https://cotonic.org/#model.location"

get/protocol

Get the current protocol

self.call("model/location/get/protocol")
.then(function(m) {
    console.log(m.payload)
});
=> "https"

get/host

Get the current host (with port).

self.call("model/location/get/host")
.then(function(m) {
    console.log(m.payload)
});
=> "cotonic.org"

get/hostname

Get the current hostname (without port).

self.call("model/location/get/hostname")
.then(function(m) {
    console.log(m.payload)
});
=> "cotonic.org"

get/origin

Get the current origin.

self.call("model/location/get/origin")
.then(function(m) {
    console.log(m.payload)
});
=> "https://cotonic.org"

get/pathname

Get the current pathname.

self.call("model/location/get/pathname")
.then(function(m) {
    console.log(m.payload)
});
=> "/"

get/port

Get the current port.

cotonic.broker.call("model/location/get/port")
.then(function(m) {
    console.log(m.payload)
})
=> "" // The default port.

post/redirect

Redirect the user to another url

cotonic.broker.publish("model/location/post/redirect", {url: "https://cotonic.org"})
=> // The user is redirect to cotonic.org.

post/redirect/back

Loads the previous URL (page) in the history list. When there is no page in the history list, a default (local) url can be passed. When no navigation occurs, the user will be redirected to this url.

cotonic.broker.publish("model/location/post/redirect/back", {url: "/home"})
=> // Go back, when there is no page in the history, move to "/home".

<a data-onclick-topic="model/location/post/redirect/back" href="/home">Go Back</a>

post/reload

Reload the current page. This can be handy when you know something on the server side has changed.

cotonic.broker.call("model/location/post/reload")
=> // The page will reload.

<button data-onclick-topic="bridge/origin/model/xyz/post/doit"
        data-onresponse-topic="model/location/reload">Do It</button>

When the xyz model on the server responds, the page will be reloaded

post/q

Updates the current location’s search (query) arguments with the given object of { "key": value } keys. The browsers location is modified using replaceState and the new arguments are posted to model/location/event/q and model/location/event/qlist

If you need to have multiple keys with the same name, or the order of the keys is significant then use post/qlist.

cotonic.broker.call("model/location/post/q", {"a":"1", "b":"2"} ])
=> // The browser location will be updated, the page is not reloaded

<form data-onsubmit-topic="model/location/post/q">
   <input type="text" value="">
   <input type="submit" value="Submit">
</form>

post/qlist

Updates the current location’s search (query) arguments with the given list of [Key, Value] pairs. The browsers location is modified using replaceState and the new arguments are posted to model/location/event/q and model/location/event/qlist

cotonic.broker.call("model/location/post/qlist", [ ["a", "1"], ["b", "2"] ])
=> // The browser location will be updated, the page is not reloaded

<form data-onsubmit-topic="model/location/post/qlist">
   <input type="text" value="">
   <input type="submit" value="Submit">
</form>

post/push

Updates the current location with the given url. The new location is set using pushState, so the back button will work. The location is assumed to be on the same hostname as the current page, so only the new path, search and hash are pushed.
If parts of the new location are changed then they are posted to model/location/event/pathname, model/location/event/q, model/location/event/qlist and model/location/event/hash. If the hash is set and there is an element with an id corresponding to the hash, then that element is scrolled into view.

cotonic.broker.call("model/location/post/push", { url: "/hello?w=world" });
=> // The browser location will be updated, the page is not reloaded

<a data-onclick-topic="model/location/post/push" href="?a=1">

post/replace

Updates the current location with the given url. The new location is set using replaceState, so the back button will NOT work. The location is assumed to be on the same hostname as the current page, so only the new path, search and hash are pushed.
If parts of the new location are changed then they are posted to model/location/event/pathname, model/location/event/q, model/location/event/qlist and model/location/event/hash. If the hash is set and there is an element with an id corresponding to the hash, then that element is scrolled into view.

cotonic.broker.call("model/location/post/replace", { url: "/hello?w=world" });
=> // The browser location will be updated, the page is not reloaded

<a data-onclick-topic="model/location/post/replace" href="?a=1">

post/push-silent

cotonic.broker.call("model/location/post/push-silent", { url: "/hello?w=world" });
=> // The browser location will be updated, the page is not reloaded

<a data-onclick-topic="model/location/post/push-silent" href="?a=1">

post/replace-silent

cotonic.broker.call("model/location/post/replace-silent", { url: "/hello?w=world" });
=> // The browser location will be updated, the page is not reloaded

<a data-onclick-topic="model/location/post/replace-silent" href="?a=1">

event/search

A message containing the query string part of the url will be published when it changes. Note: the message is retained

cotonic.broker.subscribe("model/location/event/search",
    function(m, a) {
        console.log("query string changed", m.payload);
});

event/pathname

A message containing the pathname part of the url will be published when it changes. Note: the message is retained

cotonic.broker.subscribe("model/location/event/pathname",
    function(m, a) {
        console.log("pathname changed", m.payload);
    });

event/hash

A message containing the hash part of the url will be published when it changes. Note: the message is retained

cotonic.broker.subscribe("model/location/event/hash",
    function(m, a) {
        console.log("hash changed", m.payload);
    });

event/ping

When the location model is enabled, a retained message is published on this topic. By subscribing to this topic it is possible to see when the model is enabled. The payload of the message pong.

cotonic.broker.subscribe("model/location/event/ping",
    function(m) {
        console.log("The location model is enabled", m.payload)
    })
=> Logs a message on the console when the location model is enabled.

event/q

A message with the current query arguments is published on this topic. By subscribing to this topic it is possible to see when the query arguments change. The payload of the message is an object with { "key": "value" } entries. Note: the message is retained

cotonic.broker.subscribe("model/location/event/q",
    function(m) {
        console.log("New query arguments", m.payload)
    })
=> Logs a message on the console when the query arguments change.

event/qlist

A message with the current query arguments is published on this topic. By subscribing to this topic it is possible to see when the query arguments change. The payload of the message is an array with [ "key", "value" ] pairs. Note: the message is retained

cotonic.broker.subscribe("model/location/event/qlist",
    function(m) {
        console.log("New query arguments", m.payload)
    })
=> Logs a message on the console when the query arguments change.

Configuration

The location has one configuration option.

pathname_search: Set to the current search parameters of the page. Alternatively this setting can can be done as data-cotonic-pathname-search attribute on the body tag.

<script>
    window.cotonic = window.cotonic || {};
    window.cotonic.config = {
        start_service_worker: true,
        pathname_search: "q=110&j=yes"
    };
</script>
<script src="cotonic.js"></script>

<body data-cotonic-pathname-search="q=110&amp;j=yes">
...
</body>

Edit on GitHub

Type at least two characters