innovaphone.ui1.lib

Includes

The following files have to be included in the html file.

innovaphone.lib1.js

UI nodes

innovaphone.ui1.nodePrototype

This prototype is used as a base for all UI nodes in the library. It defines useful functions for creating and manipulating DOM nodes.

addText(text)

Sets the innerText property of the node.

addHTML(text)

Sets the innerHTML property of the node.

setStyle(style, value)

Sets a single attribute of the style of the node.

Example:

div.setStyle("color", "red");

setAttribute(attribute, value)

Sets a single attribute of a node.

Example:

a.setAttribute("href", "https://www.innovaphone.com").setAttribute("target", "_blank");

add(node, before)

Adds a child node.

node: The child node to be added
before (optional): The new child node is added before this element. If no element is given, the new child node is added at the end.

rem(node)

Removes a child node.

clear()

Removes all child nodes.

addTranslation(languages, id, property, args)

Adds a dynamic translation from innovaphone.lib1.Languages to the node. Text is updated automatically when the language is changed. Returns the node itself.

Note: If the node is discarded it should also be detached from the Languages object using Languages.clear.

languages: An object of type innovaphone.lib1.Languages.
id: The id of the text.
property (optional): The property of the DOM node where the translation should appear (e.g. "innerText", "placeholder", "title"). Defaults to "innerText".
args (optional): An array with the values for the placeholder substitution.

Example:

var texts = {
    en: {
        conn: "Connected as $0",
        hello: "Hello!"
    },
    de: {
        conn: "Verbunden als $0",
        hello: "Hallo!"
    }
};

var langs = innovaphone.lib1.Languages(texts, "en");

var div1 = new innovaphone.ui1.Node("div").addTranslation(langs, "hello");
var div2 = new innovaphone.ui1.Node("div").addTranslation(langs, "conn", "innerText", ["John Doe"]);

// detach node that is not in use anymore
langs.clear(div1);

createTranslation(languages, id, property, args)

Works the same way as addTranslation but returns an innovaphone.lib1.TranslatedNode object that can be used for further manipulation.

innovaphone.ui1.Node

Represents a generic DOM node. Supports all methods defined in innovaphone.ui1.nodePrototype.

innovaphone.ui1.Node(type, style, content, cl)

Constructor

type: The HTML dom node type (e.g. "div", "input", "hr", ...).
style (optional): The style attribute of the node (e.g. "color: blue; font-size: 14px").
content (optional): The innerText of the node.
cl (optional): The CSS class of the node.

innovaphone.ui1.Div

Represents a DIV node. Supports all methods defined in innovaphone.ui1.nodePrototype.

innovaphone.ui1.Div(style, content, cl)

Constructor

style (optional): The style attribute of the node (e.g. "color: blue; font-size: 14px").
content (optional): The innerText of the node.
cl (optional): The CSS class of the node.

innovaphone.ui1.Input

Represents an input field. Supports all methods defined in innovaphone.ui1.nodePrototype.

innovaphone.ui1.Input(style, value, placeHolder, maxLength, type, cl)

Constructor

style (optional): The style attribute of the node (e.g. "color: blue; font-size: 14px").
content (optional): The text content of the input field.
placeHolder (optional): The placeholder text.
maxLength (optional): Maximum number of characters.
type (optional): The type of data (e.g. "text", "number", "password")
cl (optional): The CSS class of the node.

innovaphone.ui1.Password

Represents an input password field. Supports all methods defined in innovaphone.ui1.nodePrototype and offered by innovaphone.ui1.Input.
The benefit of using innovaphone.ui1.Password is, that you'll have a show password button inside the input field.

innovaphone.ui1.Password(style, value, placeHolder, maxLength, cl, styleInput, clInput)

Constructor

style (optional): The style attribute of the node (e.g. "color: blue; font-size: 14px").
content (optional): The text content of the input field.
placeHolder (optional): The placeholder text.
maxLength (optional): Maximum number of characters.
cl (optional): The CSS class of the node.
styleInput (optional): The style attribute for the embedded input field (e.g. "color: blue; font-size: 14px").
clInput (optional): The class for the embedded input field.

innovaphone.ui1.Checkbox

Represents an checkbox control. Supports all methods defined in innovaphone.ui1.nodePrototype.

innovaphone.ui1.Checkbox(style, value, cl, background, foreground, backgroundOff)

Constructor

style (optional): The style attribute of the node (e.g. "width: 20px; height: 20px; background-color: blue").
value (true or false): Initial state of the checkbox control.
cl (optional): The CSS class of the node.
background (optional): The background node color when this is checked (gray as default).
foreground (optional): The checkmark color (white as default).
backgroundOff (optional): The background node color when this is unchecked (if not set, background is set as default).

getValue()

Get the 'checked' state of the checkbox control (true or false).

setValue(value)

Set the 'checked' state of the checkbox control (true or false).

setDisabled(value)

Set the 'disabled' state of the checkbox control (true or false).

setTooltip(text)

Text to be displayed on mouseover.

Switching CSS variables

innovaphone.ui1.CssVariables is a library that can be used to switch between different sets of CSS variables. For example this can be used to switch between different color schemes.

innovaphone.ui1.CssVariables(sets, current, element)

Constructor

sets: An object containing all sets and the individual CSS variables with their name and value.
current: The id of the current set.
element (optional): The DOM node on which the variables should be set. Defaults to document.body.

Example:

var schemeDefinitions = {
    dark: {
        "--background": "black",
        "--foreground": "white"
    },
    light: {
        "--background": "white",
        "--foreground": "black"
    }
};

var schemes = new innovaphone.ui1.CssVariables(schemeDefinitions, "dark");

current

Property containing the id of the current set.

activate(id)

Switches the CSS variables to the values defined in the given set.

id: The id of the set.

Example:

schemes.activate("light");

toggle()

Toggles the current set.