Class RapidContext.Widget

Widget()

The base class for the HTML user interface widgets. The Widget class shouldn't be instantiated directly, instead one of the subclasses should be instantiated.

Constructor Summary
	`new Widget()` The base class for the HTML user interface widgets.

Field Summary
(static)	`Classes` The global widget registry.

Method Summary
	`addAll(…child)` Adds one or more children to this widget.
	`addChildNode(child)` Adds a single child DOM node to this widget.
	`addClass(…cls)` Adds the specified CSS class names to this HTML DOM node.
	`animate(opts)` Performs a visual effect animation on this widget.
	`blurAll()` Blurs (unfocuses) this DOM node and all relevant child nodes.
	`destroy()` The internal widget destructor function.
	`disable()` Disables this widget if it was previously enabled.
	`emit(event, optsopt) → {boolean}` Dispatches a single event from this DOM node.
	`enable()` Enables this widget if it was previously disabled.
	`getChildNodes() → {Array}` Returns an array with all child DOM nodes.
	`hasClass(…cls) → {boolean}` Checks if this HTML DOM node has the specified CSS class names.
	`hide()` Hides this widget node if it was previously visible.
	`isDisabled() → {boolean}` Checks if this widget is disabled.
	`isHidden() → {boolean}` Checks if this widget node is hidden.
	`off(eventopt, selectoropt, listeneropt) → {Node}` Removes one or more previously attached event listeners.
	`on(event, selectoropt, listener, optsopt) → {Node}` Attaches a listener function for one or more events.
	`once(event, selectoropt, listener, optsopt) → {Node}` Attaches a single event listener function.
	`removeAll()` Removes all children to this widget.
	`removeChildNode(child)` Removes a single child DOM node from this widget.
	`removeClass(…cls)` Removes the specified CSS class names from this HTML DOM node.
	`setAttrs(attrs)` Updates the widget or HTML DOM node attributes.
	`setStyle(styles)` Updates the CSS styles of this HTML DOM node.
	`show()` Shows this widget node if it was previously hidden.
	`toggleClass(…cls) → {boolean}` Toggles adding and removing the specified CSS class names to and from this HTML DOM node.
	`uid() → {string}` Returns the unique identifier for this DOM node.
(static)	`createWidget(name, attrs, …childopt) → {Widget}` Creates a new widget with the specified name, attributes and child widgets or DOM nodes.
(static)	`destroyWidget(node)` Destroys a widget or a DOM node.
(static)	`isWidget(obj, classNameopt) → {boolean}` Checks if the specified object is a widget.

Constructor

The base class for the HTML user interface widgets. The Widget class shouldn't be instantiated directly, instead one of the subclasses should be instantiated.

Source:: RapidContext_Widget.js, line 28

Extends

RapidContext.UI.Event

Members

(static) Classes

The global widget registry. This is a widget lookup table where all widgets should have an entry. The entries should be added as the JavaScript file are loaded. Each widget is indexed by the widget name (class name) and point to the constructor function.

Source:: RapidContext_Widget.js, line 38

Methods

addAll(…child)

Adds one or more children to this widget. This method will flatten any arrays among the arguments and ignores any null or undefined arguments. Any DOM nodes or widgets will be added to the end, and other objects will be converted to a text node first. Subclasses should normally override the addChildNode() method instead of this one, since that is the basis for DOM node insertion.

Parameters:

Name	Type	Attributes	Description
`child`	{string\|Node\|Array}	<repeatable>	the children to add

Source:

RapidContext_Widget.js, line 581

addChildNode(child)

Adds a single child DOM node to this widget. This method is sometimes overridden by child widgets in order to hide or control intermediate DOM nodes required by the widget.

Parameters:

Name	Type	Description
`child`	{Widget\|Node}	the DOM node to add

Source:

RapidContext_Widget.js, line 545

addClass(…cls)

Adds the specified CSS class names to this HTML DOM node.

Parameters:

Name	Type	Attributes	Description
`cls`	{string\|Array}	<repeatable>	the CSS class names to add

Source:

RapidContext_Widget.js, line 343

animate(opts)

Performs a visual effect animation on this widget. This is implemented using the MochiKit.Visual effect package. All options sent to this function will be passed on to the appropriate MochiKit.Visual function.

Parameters:

Name Type Description

opts

{Object}

the visual effect options

Properties

Name	Type	Description
`effect`	{string}	the MochiKit.Visual effect name
`queue`	{string}	the MochiKit.Visual queue handling, defaults to "replace" and a unique scope for each widget (see `MochiKit.Visual` for full options)

Deprecated:

Use CSS animations instead.

Example:

widget.animate({ effect: "fade", duration: 0.5 });
widget.animate({ effect: "Move", transition: "spring", y: 300 });

Source:

RapidContext_Widget.js, line 502

blurAll()

Blurs (unfocuses) this DOM node and all relevant child nodes. This function will recursively blur all <a>, <button>, <input>, <textarea> and <select> child nodes found.

Source:: RapidContext_Widget.js, line 521

destroy()

The internal widget destructor function. This method should only be called by destroyWidget() and may be overridden by subclasses. By default this method does nothing.

Source:: RapidContext_Widget.js, line 198

disable()

Disables this widget if it was previously enabled. This method is equivalent to calling setAttrs({ disabled: true }).

Source:: RapidContext_Widget.js, line 434

emit(event, optsopt) → {boolean}

Dispatches a single event from this DOM node. Also creates a new CustomEvent instance if needed.

Parameters:

Name Type Attributes Description

event {string/Event} the event type name or instance

opts

{Object}

the event options

Properties

Name	Type	Attributes	Default	Description
`async`	{boolean}	<optional>	true	the async dispatch flag
`bubbles`	{boolean}	<optional>		the event bubbles flag
`cancelable`	{boolean}	<optional>		the cancellable event flag
`detail`	{Object}	<optional>		the additional event details

Returns:

{boolean} true if event was async or not cancelled

Inherited From:

RapidContext.UI.Event#emit

Source:

rapidcontext/ui/event.mjs, line 26

enable()

Enables this widget if it was previously disabled. This is equivalent to calling setAttrs({ disabled: false }).

Source:: RapidContext_Widget.js, line 426

getChildNodes() → {Array}

Returns an array with all child DOM nodes. Note that the array is a real JavaScript array, not a dynamic NodeList. This method is sometimes overridden by child widgets in order to hide intermediate DOM nodes required by the widget.

Returns:: {Array} the array of child DOM nodes
Source:: RapidContext_Widget.js, line 533

hasClass(…cls) → {boolean}

Checks if this HTML DOM node has the specified CSS class names. Note that more than one CSS class name may be checked, in which case all must be present.

Parameters:

Name	Type	Attributes	Description
`cls`	{string\|Array}	<repeatable>	the CSS class names to check

Returns:

{boolean} true if all CSS classes were present, or false otherwise

Source:

RapidContext_Widget.js, line 325

hide()

Hides this widget node if it was previously visible. This method is equivalent to calling setAttrs({ hidden: true }). It is safe for all types of widgets, since it only adds the widgetHidden CSS class instead of setting the display style property.

Source:: RapidContext_Widget.js, line 480

isDisabled() → {boolean}

Checks if this widget is disabled. This method checks both the "widgetDisabled" CSS class and the disabled property. Changes to the disabled status can be made with enable(), disable() or setAttrs().

Returns:: {boolean} true if the widget is disabled, or false otherwise
Source:: RapidContext_Widget.js, line 405

isHidden() → {boolean}

Checks if this widget node is hidden. This method checks for the existence of the widgetHidden CSS class. It does NOT check the actual widget visibility (the display style property set by animations for example).

Returns:: {boolean} true if the widget is hidden, or false otherwise
Source:: RapidContext_Widget.js, line 447

off(eventopt, selectoropt, listeneropt) → {Node}

Removes one or more previously attached event listeners. If no event details or listeners are specified, all matching handlers are removed.

Parameters:

Name	Type	Attributes	Description
`event`	{string}	<optional>	the event type name (or space separated names)
`selector`	{string}	<optional>	the CSS selector to match for event target
`listener`	{function}	<optional>	the event handler function (or `false`)

Returns:

{Node} the input DOM node (for chaining calls)

Inherited From:

RapidContext.UI.Event#off

Source:

rapidcontext/ui/event.mjs, line 77

on(event, selectoropt, listener, optsopt) → {Node}

Attaches a listener function for one or more events.

Parameters:

Name Type Attributes Description

event {string} the event type name (or space separated names)

selector {string} <optional> the CSS selector to match for event target

listener {function} the event handler function (or false)

opts

{Object}

the event listener options (see addEventListener)

Properties

Name	Type	Attributes	Description
`delay`	{number}	<optional>	an inactivity delay before calling listener

Returns:

{Node} the input DOM node (for chaining calls)

Inherited From:

RapidContext.UI.Event#on

Source:

rapidcontext/ui/event.mjs, line 44

once(event, selectoropt, listener, optsopt) → {Node}

Attaches a single event listener function. The listener will be removed the first time an event is triggered.

Parameters:

Name Type Attributes Description

event {string} the event type name (or space separated names)

selector {string} <optional> the CSS selector to match for event target

listener {function} the event handler function (or false)

opts

{Object}

the event listener options (see addEventListener)

Properties

Name	Type	Attributes	Description
`delay`	{number}	<optional>	an inactivity delay before calling listener

Returns:

{Node} the input DOM node (for chaining calls)

Inherited From:

RapidContext.UI.Event#once

Source:

rapidcontext/ui/event.mjs, line 60

removeAll()

Removes all children to this widget. This method will also destroy and child widgets and disconnect all signal listeners. This method uses the getChildNodes() and removeChildNode() methods to find and remove the individual child nodes.

Source:: RapidContext_Widget.js, line 593

removeChildNode(child)

Removes a single child DOM node from this widget. This method is sometimes overridden by child widgets in order to hide or control intermediate DOM nodes required by the widget.

Note that this method will NOT destroy the removed child widget, so care must be taken to ensure proper child widget destruction.

Parameters:

Name	Type	Description
`child`	{Widget\|Node}	the DOM node to remove

Source:

RapidContext_Widget.js, line 564

removeClass(…cls)

Removes the specified CSS class names from this HTML DOM node. Note that this method will not remove any class starting with "widget".

Parameters:

Name	Type	Attributes	Description
`cls`	{string\|Array}	<repeatable>	the CSS class names to remove

Source:

RapidContext_Widget.js, line 363

setAttrs(attrs)

Updates the widget or HTML DOM node attributes. This method is sometimes overridden by individual widgets to allow modification of additional widget attributes.

Parameters:

Name Type Description

attrs

{Object}

the widget and node attributes to set

Properties

Name	Type	Attributes	Description
`disabled`	{boolean}	<optional>	the disabled widget flag
`hidden`	{boolean}	<optional>	the hidden widget flag
`class`	{string}	<optional>	the CSS class names

Source:

RapidContext_Widget.js, line 249

setStyle(styles)

Updates the CSS styles of this HTML DOM node. This method is identical to MochiKit.Style.setStyle, but uses "this" as the first argument.

Parameters:

Name	Type	Description
`styles`	{Object}	an object with the styles to set

Example:

widget.setStyle({ "font-size": "bold", "color": "red" });

Source:

RapidContext_Widget.js, line 302

show()

Shows this widget node if it was previously hidden. This method is equivalent to calling setAttrs({ hidden: false }). It is safe for all types of widgets, since it only removes the widgetHidden CSS class instead of setting the display style property.

Source:: RapidContext_Widget.js, line 470

toggleClass(…cls) → {boolean}

Toggles adding and removing the specified CSS class names to and from this HTML DOM node. If all the CSS classes are already set, they will be removed. Otherwise they will be added.

Parameters:

Name	Type	Attributes	Description
`cls`	{string\|Array}	<repeatable>	the CSS class names to remove

Returns:

{boolean} true if the CSS classes were added, or false otherwise

Source:

RapidContext_Widget.js, line 386

uid() → {string}

Returns the unique identifier for this DOM node. If a node id has already been set, that id will be returned. Otherwise a new id will be generated and assigned to the widget DOM node.

Returns:: {string} the the unique DOM node identifier
Source:: RapidContext_Widget.js, line 186

(static) createWidget(name, attrs, …childopt) → {Widget}

Creates a new widget with the specified name, attributes and child widgets or DOM nodes. The widget class name must have been registered in the RapidContext.Widget.Classes lookup table, or an exception will be thrown. This function is identical to calling the constructor function directly.

Parameters:

Name	Type	Attributes	Description
`name`	{string}		the widget class name
`attrs`	{Object}		the widget and node attributes
`child`	{Node\|Widget}	<optional> <repeatable>	the child widgets or DOM nodes

Returns:

{Widget} the widget DOM node

Throws:

{ReferenceError} if the widget class name couldn't be found in RapidContext.Widget.Classes

Source:

RapidContext_Widget.js, line 144

(static) destroyWidget(node)

Destroys a widget or a DOM node. This function will remove the DOM node from its parent, disconnect any signals and call destructor functions. It is also applied recursively to to all child nodes. Once destroyed, all references to the widget object should be cleared to reclaim browser memory.

Parameters:

Name	Type	Description
`node`	{Widget\|Node\|NodeList\|Array}	the DOM node or list

Source:

RapidContext_Widget.js, line 162

(static) isWidget(obj, classNameopt) → {boolean}

Checks if the specified object is a widget. Any non-null object that looks like a DOM node and has the element class "widget" will cause this function to return true. Otherwise, false will be returned. As an option, this function can also check if the widget has a certain class by checking for an additional CSS class "widget<className>" (which is a standard followed by all widgets).

Parameters:

Name	Type	Attributes	Description
`obj`	{Object}		the object to check
`className`	{string}	<optional>	the optional widget class name

Returns:

{boolean} true if the object looks like a widget, or false otherwise

Source:

RapidContext_Widget.js, line 62

Class RapidContext.Widget

Constructor

new Widget()

Extends

Members

(static) Classes

Methods

addAll(…child)

addChildNode(child)

addClass(…cls)

animate(opts)

Properties

blurAll()

destroy()

disable()

emit(event, optsopt) → {boolean}

Properties

enable()

getChildNodes() → {Array}

hasClass(…cls) → {boolean}

hide()

isDisabled() → {boolean}

isHidden() → {boolean}

off(eventopt, selectoropt, listeneropt) → {Node}

on(event, selectoropt, listener, optsopt) → {Node}

Properties

once(event, selectoropt, listener, optsopt) → {Node}

Properties

removeAll()

removeChildNode(child)

removeClass(…cls)

setAttrs(attrs)

Properties

setStyle(styles)

show()

toggleClass(…cls) → {boolean}

uid() → {string}

(static) createWidget(name, attrs, …childopt) → {Widget}

(static) destroyWidget(node)

(static) isWidget(obj, classNameopt) → {boolean}