As part of the core libraries, UNTV ships with a toolkit, tentatively name
gui-kit. The GUI kit provides access to classes which help develop extensions
for common use cases. This toolkit gets passed to each extension, so it can be
used to build your extension interface.
This gets passed as part of the
env argument to your extension's main function as
module.exports = (env) -> console.log env.gui
Each component in the GUI kit is relatively "plug-and-play" in that, while they generally have a fairly robust API, you will likely only need to make use of a few of their core methods. Only these core methods are documented here in the interest of saving you from the noise of long-winded documentation.
If you find yourself needing a more custom implementation then "use the source Luke."
Generates a grid of items, where each item may receive focus from the remote and may be selected to perform a specified action.
Boolean- Scroll when row when reaching beginning or end of a row
Boolean- Automatically size rows based on viewport size
String- Animation name to add to items (from animate.css)
Populates the grid and renders the interface using
data, which should be an
Array of values (usually objects), to compile with the
template_fn should be a function that is a "precompiled template". An example might be the function returned from
This iterates through the data, inserting the returned HTML value gained from
template_fn(data[i]) and inserting it into a generated list item element.
Enables navigation of the grid, giving focus to either the item that was last focused or the first item in the grid if calling for the first time.
Disables navigation of the grid, storing a reference to the last focused item.
Converts a standard unordered list and enables navigation from the remote by allowing focus and selection of each list item.
Boolean- Scroll to top/bottom of list when reaching beginning or end
Boolean- Leaves the "focused" class on the current item, even when focus is released from the element
Enables navigation of the list, giving focus to either the item that was last focused, the item at the specified index, or the first item in the grid if calling for the first time.
Disables navigation of the list.
Prevents giving focus to the list. Useful for asynchronous event handlers where you don't want the user to interact with the list while they are waiting.
Re-enables giving focus to the list
NavigableList instance that is prepopulated with the file system contents.
The selection of an item is automatically bound to the action of loading the
intended directory listing. You need only to specify a container and listen for events.
You can constrain which types of items show using the
ignore_types argument. Pass an array of file extensions in the form of
[".txt", ".jpg"] to exclude them from the listing. If you wish to show only directories, you can pass a wildcard as an item like
String- Directory path to start in. Defaults to home directory
Changes the contents of the instance to the specified path.
Attaches a listener to the
window for the
resize event as well as immediately forcing a fixed position and size of 100% of the containing element minus the specified
This is helpful when creating fixed sized elements for variable screen sizes based on the size of other elements.
Creates an on-screen keyboard that can be used to provide a way to get text input from the user.
String- The default keyboard to show. Defaults to `alphanum"
Strings - Which keyboards are allowed. Possible options:
Shows the keyboard and automatically binds a one-time event listener to the "input" event, calling it when the action is complete.
Returns the current value of the keyboard's input field.