Exo

NOTE: The documentation assumes you're currently using the latest Exo version available. When Exo is out of beta there will be version information added with future updates to the documentation.

What is Exo?

Exo is a modern replacement to XenInfo, it was created mainly for use within Exobar, although XenHTML support is planned.

Exo is designed in such a way that allows you to create themes while writing minimal JavaScript code.

Exo and Exobar are still in beta and everything you see here may (and will) change.

Example of an Exo-based widget

<body>
    <div class="grow">Nepeta</div>
    <div class="bg-focus">{battery.percentage}%</div>
    <div class="bg-focus">{time}</div>
    <div class="grow" @class.show="media.playing">{media.artist} - {media.title}</div>
</body>

Exo allows for easy value binding to attributes and contents of any HTML elements.

Binding Exo variables to element content

<div>{variable}</div>

NOTE: There must be no spaces or extra characters inside of {} for this to work. No JavaScript expressions are executed inside of brackets.

You can, of course, use multiple of these in any given context.

<div>{variable.a}{variable.b} regular text {variable.c}</div>

Binding Exo variables to attributes

<div @attr="{variable}">xxx</div>

Same as above.

Binding boolean Exo variables to class names

<div @class.hidden="variable">xxx</div>

This only works if the given variable only is 1 or 0; true or false or can be evaulated as boolean inside of JavaScript.

NOTE: There are no brackets in this one. You can not use more than one inside of any given class name binding.

Binding Exo actions to element events

<button @onClick="media.play">play</button>

NOTE: This one also has no brackets.

Accessing the Exo JavaScript object

Exo is exposed as window.exo inside of the JavaScript context of the widget page.

To make everything easier, we'll assign Exo to the _ variable.

<script type="text/javascript">
    var _ = window.exo;
</script>

NOTE: All sections below will use the _ variable instead of window.exo, all the code you will see should be also executed inside of <script> unless stated otherwise. Minimal JavaScript knowledge is required.