Toggle

Toggle

Creates a clickable toggle that can be switched off and on.

Constructor

# new Toggle(parent, x, y, label, toggled, defaultHandler)

Constructor
Parameters:
Name Type Description
parent HTMLElement The element to add this toggle to.
x number The x position of the toggle. Default 0.
y number The y position of the toggle. Default 0.
label string The text for the toggle's label. Default empty string.
toggled boolean The initial toggled state of the toggle. Default false.
defaultHandler function A function that will handle the "click" event.
Source:
Example 
const panel = new Panel(document.body, 20, 20, 200, 200);
new Toggle(panel, 20, 20, "Toggle", false, event => console.log(event.target.toggled));

Extends

Classes

Toggle

Members

# (static) height

Default height for all Toggles.
Source:

# (static) labelPosition

Default labelPosition value for all Toggles.
Source:

# (static) offLabel

Default offLabel value for all Toggles.
Source:

# (static) onLabel

Default onLabel value for all Toggles.
Source:

# (static) showStateLabels

Default showStateLabels value for all Toggles.
Source:

# (static) width

Default width for all Toggles.
Source:

# enabled

Sets and gets whether or not this component is enabled. Non-enabled components will be faded out and not respond to events.
Overrides:
Source:

# height

Sets and gets the height of this component.
Overrides:
Source:

# label

Gets and sets the text of the toggle's text label.
Source:

# labelPosition

Gets and sets the position of the text label displayed on the toggle. Valid values are "top" (default), "left" and "bottom".
Source:

# offLabel

Gets and sets the text of the state label in the off position.
Source:

# onLabel

Gets and sets the text of the state label in the on position.
Source:

# showStateLabels

Gets and sets whether or not the state labels will be shown.
Source:

# toggled

Sets and gets the toggled state of the toggle.
Source:

# width

Sets and gets the width of this component.
Overrides:
Source:

# x

Sets and gets the x position of this component.
Overrides:
Source:

# y

Sets and gets the y position of this component.
Overrides:
Source:

Methods

# addHandler(handler)

Adds a handler function for the "click" event on this toggle.
Parameters:
Name Type Description
handler function A function that will handle the "click" event.
Source:
Returns:
This instance, suitable for chaining.

# bind(target, prop)

Automatically changes the value of a property on a target object with the main value of this component changes.
Parameters:
Name Type Description
target object The target object to change.
prop string The string name of a property on the target object.
Source:
Returns:
This instance, suitable for chaining.

# getEnabled()

Gets whether the component is enabled.
Overrides:
Source:
Returns:
Whether or not the component is enabled.

# getHeight()

Gets the height of the component.
Overrides:
Source:
Returns:
The height of the component.

# getLabel()

Source:
Returns:
the current text of the label.

# getLabelPosition()

Source:
Returns:
the position of the text label (left, right, top or bottom);

# getOffLabel()

Source:
Returns:
the value of the state label when the toggle is toggled off.

# getOnLabel()

Source:
Returns:
the value of the state label when the toggle is toggled on.

# getShowStateLabels()

Source:
Returns:
whether or not the state labels will be shown.

# getToggled()

Source:
Returns:
whether or not this toggle is toggled on.

# getWidth()

Gets the width of the component.
Overrides:
Source:
Returns:
The width of the component.

# getX()

Gets the x position of the component.
Overrides:
Source:
Returns:
The x position of the component.

# getY()

Gets the y position of the component.
Overrides:
Source:
Returns:
The y position of the component.

# move(x, y)

Moves the component to a specified position.
Parameters:
Name Type Description
x number The new x position of the component.
y number The new y position of the component.
Overrides:
Source:
Returns:
This instance, suitable for chaining.

# rotate(rad)

Rotates the component.
Parameters:
Name Type Description
rad number The number of radians to rotate the component by.
Overrides:
Source:
Returns:
This instance, suitable for chaining.

# rotateDeg(deg)

Rotates the component.
Parameters:
Name Type Description
deg number The number of degrees to rotate the component by.
Overrides:
Source:
Returns:
This instance, suitable for chaining.

# setEnabled(enabled)

Sets the enabled state of this component.
Parameters:
Name Type Description
enabled boolean Whether or not the component will be enabled.
Overrides:
Source:
Returns:
This instance, suitable for chaining.

# setHeight(height)

Sets the height of this component.
Parameters:
Name Type Description
height number The height of this component.
Overrides:
Source:
Returns:
This instance, suitable for chaining.

# setLabel(label)

Sets the label of this toggle.
Parameters:
Name Type Description
label string The label to set on this toggle.
Source:
Returns:
this instance, suitable for chaining.

# setLabelPosition(position)

Sets the label position of the text label.
Parameters:
Name Type Description
position string The position to place the text lable: "top" (default), "left", "right" or "bottom".
Source:
Returns:
this instance, suitable for chaining.

# setOffLabel(label)

Sets the value of the state label when the toggle is toggled off.
Parameters:
Name Type Description
label string the text of the label.
Source:
Returns:
This instance.

# setOnLabel(label)

Sets the value of the state label when the toggle is toggled on.
Parameters:
Name Type Description
label string the text of the label.
Source:
Returns:
This instance.

# setShowStateLabels(show)

Sets whether or not the toggle will display state labels showing its on/off state.
Parameters:
Name Type Description
show boolean Whether or not to show the state labels.
Source:
Returns:
This instance.

# setSize(w, h)

Sizes the component.
Parameters:
Name Type Description
w number The new width of the component.
h number The new height of the component.
Overrides:
Source:
Returns:
This instance, suitable for chaining.

# setToggled()

Sets whether or not this toggle will be toggled (on).
Source:
Returns:
This instance, suitable for chaining.

# setWidth(width)

Sets the width of this component.
Parameters:
Name Type Description
width number The width of this component.
Overrides:
Source:
Returns:
This instance, suitable for chaining.

# setX(x)

Sets the x position of this component.
Parameters:
Name Type Description
x number The x position of this component.
Overrides:
Source:
Returns:
This instance, suitable for chaining.

# setY(y)

Sets the y position of this component.
Parameters:
Name Type Description
y number The y position of this component.
Overrides:
Source:
Returns:
this instance, suitable for chaining.

# toggle()

Toggles the state of the toggle between toggled and not toggled.
Source:
Returns:
This instance, suitable for chaining.