userinterface.js-collection is a collection of UI elements to help build your UI. In this collection you will find ready to use tabs, input, button etc.
git submodule add https://github.com/thoughtsunificator/userinterface.js-collection.git lib/userinterface.js-collectiongit submodule update --init --recursive
<!DOCTYPE html>
<html>
<head>
<script src="./lib/userinterface.js/src/userinterface.js" type="text/javascript"></script>
<script src="./lib/userinterface.js-collection/userinterface/button.js" type="text/javascript"></script>
</head>
<body>
<noscript>
This feature requires JavaScript to be enabled.
</noscript>
<script>
const application = {}
UserInterface.runModel("collection.button", {
parentNode: document.body,
bindingArgs: [application, { action: "foo" }],
data: { text: "Button #1" }
})
</script>
</body>
</html>Controls are a type of element that when interacted with emit a certain event to a given context.
Controls models are hackable. You can pass style and className (or any other property) to customize the look of the model through the data parameter.
UserInterface.runModel("collection.button", {
parentNode: document.body,
bindingArgs: [application, { action: "foo" }],
data: { text: "Button #1", className: "myButton" }
})Binding Prototype: function(* application, Control control)
Parameters:
actionStringThe name of the eventvalue*The value that will be passed to the event listenersactivebooleanIf true the button will be set to active when a certain event is announced.
Usage:
UserInterface.runModel("collection.button", {
parentNode: document.body,
bindingArgs: [application, { value: "somevalue", action: "toggle", active: false }],
data: { text: "" }
})Binding Prototype: function(* application, Control control)
Parameters:
actionStringThe name of the event
Usage:
UserInterface.runModel("collection.input", {
parentNode: document.body,
bindingArgs: [application, { action: "addText" }],
data: { type: "text", value: ""}
})Binding Prototype: function(* application, Control control)
Parameters:
actionStringThe name of the event
Usage:
UserInterface.runModel("collection.input_color", {
parentNode: document.body,
bindingArgs: [application, { action: "set color" }],
data: { value: "#FFFFFF"}
})Binding Prototype: function(* application, Control control)
Parameters:
actionStringThe name of the event
Usage:
UserInterface.runModel("collection.input_file", {
parentNode: document.body,
bindingArgs: [application, { action: "uploadFile" }]
})Binding Prototype: function(* application, Control control)
Parameters:
actionStringThe name of the event
Usage:
UserInterface.runModel("collection.label_checkbox", {
parentNode: document.body,
bindingArgs: [application, { action: "setSomething" }],
data: { text: "Test" }
})Binding Prototype: function(* application, Control control)
Parameters:
actionStringThe name of the event
Usage:
UserInterface.runModel("collection.label_radio", {
parentNode: document.body,
bindingArgs: [application, { action: "setSomething" }],
data: { text: "Test" }
})Binding Prototype: function(* application, Control control)
Usage:
UserInterface.runModel("collection.popup", {
parentNode: document.body,
bindingArgs: [application]
})Once the main popup is ran all you need to do to get form, controls or confirm is to send the popup confirm|form|controls open event through the application object that you passed earlier. See below for more details.
eventYesStringThe name of the event to be announced when clicking yeseventNoStringThe name of the event to be announced when clicking nodataobjectData to pass along when announcing the event
Usage:
UserInterface.announce(application, "popup confirm open", {
eventYes: "foo",
eventNo: "bar",
data: { /* whatever data you want to pass along to the foo event */ },
text: "Are you sure?"
})A simple form inside a popup, whenver submitted sent a given event.
When listening to the given event, fields can be retrieved through data.form object as well as further data using data.data object.
modelStringThe name of the tab that will be passed to the event listenersactionStringThe name of the eventformobjectidentifier and value of the elements you wants to prepopulatedataobjectData that should be sent when submitting the form
Usage:
UserInterface.announce(application, "popup form open", {
model: "model",
action: "create",
form: { /* whatever field you want to prepopulate */ },
data: { /* whatever data you want to pass along to the create event */ },
})A list of controls inside a popup.
You can easily add controls in form of a popup by combining collection.popup_controls with models like collection.button and such...
controlsControl[]A list of controls that will be displayed inside the popup
Any object inside the array is a Control object so it could be passed to any model that expect a Control object its its bindingArgs.
For example, in this case we will be creating a button that will send the hello event whenever clicked.
Usage:
UserInterface.announce(application, "popup controls open", [
{
model: "collection.button",
text: "Your text",
action: "hello",
// here we can also pass any property that collection.button would expect.
}
])
Binding Prototype: function(* application, Control control)
Parameters:
directionsarrayCan be horizontal, diagonal, vertical or all three.previewbooleanIf true, will show a selection rectangle that moves indicating the new size of the target
targetElement being the element that you want to be resizable.
Usage:
UserInterface.runModel("collection.resizable", {
parentNode: targetElement,
bindingArgs: [application, ["horizontal", "vertical", "diagonal"]]
})Binding Prototype: function(* application, Control control)
Parameters:
actionStringThe name of the event
Usage:
UserInterface.runModel("collection.select", {
parentNode: document.body,
bindingArgs: [application, { action: "setSomething" }],
data: { options }
})Binding Prototype: function(* application, Control control)
Parameters:
actionStringThe name of the eventnameStringThe name of the tab that will be passed to the event listeners.
Parameters:
togglebooleanIf true the event will be announced even if the tab is already selected.
Usage:
UserInterface.runModel("collection.tab", {
parentNode: document.body,
bindingArgs: [application, { action: "tab set" }],
data: { name: "" }
})Run npm install
Then simply run npm test to run the tests.