The Uize.Widget.CollectionItem module defines the Uize.Widget.CollectionItem widget class, a subclass of Uize.Widget that implements and manages the user interface for an item in a collection and is intended to be used in conjunction with the Uize.Widget.Collection class (or subclass).

Some examples of collection items would be...

An instance of the Uize.Widget.Button class, that lets the user remove the item represented by the instance, or the current selection of items.

Clicking on this button fires the Remove instance event, with a byUser property in the event object that is set to the value true.

NOTES

An instance of the Uize.Widget.Button class, that lets the user toggle the selected state for the instance.

NOTES

An instance event that is fired when the user clicks on the previewShell implied node and the previewClickAction set-get property is set to 'Preview' or null, or left undefined.

As a bubbling event, a handler for this event can be wired by an instance of the Uize.Widget.Collection class (or subclass) - that owns the collection items as child widgets - on itself. When this event is fired, the event object contains a bubble property that is set to true.

An instance event that is fired when the user clicks on the optional select button, or when the user clicks on the previewShell implied node and the value of the previewClickAction set-get property is set to either 'Select' or 'Toggle Selected'.

When this event is fired because the user clicks on the previewShell implied node and previewClickAction is set to 'Toggle Selected', then the event object will contain a forceToggle property that is set to true.

A bubbling instance event that is fired when the user mouses down on the previewShell implied node.

As a bubbling event, a handler for this event can be wired by an instance of the Uize.Widget.Collection class (or subclass) - that owns the collection items as child widgets - on itself. This is the case with the Uize.Widget.Collection.Dynamic class, which manages drag-and-drop for reordering of items in a collection.

When this event is fired, the event object contains a domEvent property that is a reference to the mousedown DOM event, and a bubble property that is set to true.

An instance event that is fired when the user clicks on the remove button of an instance.

The Uize.Widget.CollectionItem class (or subclass) is not responsible for removing the item represented by an instance. Instead, the Remove event is fired and handled by an instance of the Uize.Widget.Collection class (or subclass) that owns the collection items as child widgets. The Uize.Widget.Collection class then performs the operations necessary to update the data set for the collection of items. Also, the Uize.Widget.Collection class is responsible for deciding if just the item whose remove button was clicked should be removed, or if all currently selected items should be removed.

NOTES

The root node is the implied node with the name '' (empty string), and is required for this widget class.

The className property of this node is updated to reflect the state of the instance's selected and over set-get properties. The value used to set the className property is constructed by using the value of the cssClassBase set-get property and then adding the value of the cssClassActive set-get property if the instance is selected (ie. selected is set to true), or by adding the value of the cssClassOver set-get property if the user is mousing over the instance (ie. over is set to true). If both selected and over are set to false, then the node's className property will simply be set to the value of the cssClassBase set-get property.

NOTES

The deprecated imageLink implied node is an alternate / legacy name for the previewShell implied node.

If the imageLink implied node is used, it will behave in exactly the same way as the previewShell node. If you're writing new code, you should not use this implied node in your HTML markup.

NOTES

An optional node that should provide a preview for the item that is represented by the instance, and whose className property is updated to reflect the state of the instance's over set-get property.

When over is set to true, the value of this node's className property will be set to the value of the cssClassImageOver set-get property. When over is set to false, the value of this node's className property will be set to the value of the cssClassImage set-get property. When either of the cssClassImage or cssClassImageOver set-get properties are set to null or are left undefined, then the className property of this node will not be updated.

NOTES

A node that serves as a shell around the preview implied node.

Mouseover, mouseout, and click events are wired for this node in order to manage over and selected state for the instance, and in order to fire instance events, such as the 'Click Preview', 'Click Selected', and 'Item Mouse Down' events.

NOTES

An optional node whose contents will be replaced with the value of the title set-get property, if this property's value is not null or undefined.

The innerHTML value of the title Implied Node will be updated to reflect the value of the title set-get property whenever the value of this property is changed, is not null or undefined, and the instance is wired up.

NOTES

A string, specifying the CSS class name that should be added to the className property of the Root Node when the instance is selected (ie. the selected set-get property is set to true).

For a more in-depth discussion of the interaction between this property and the companion cssClassBase and cssClassOver properties, consult the reference for the Root Node.

NOTES

A string, specifying the base CSS class string that should be used in constructing the value for the className property of the Root Node, when this property is updated to reflect the instance's over and selected states.

For a more in-depth discussion of the interaction between this property and the companion cssClassActive and cssClassOver properties, consult the reference for the Root Node.

NOTES

A string, specifying the value that should be set for the className property of the preview implied node when the user is not moused over the instance (ie. the over set-get property is set to false).

For a more in-depth discussion of the interaction between this property and the companion cssClassImageOver property, consult the reference for the preview implied node.

NOTES

A string, specifying the value that should be set for the className property of the preview implied node when the user mouses over the instance (ie. the over set-get property is set to true).

For a more in-depth discussion of the interaction between this property and the companion cssClassImage property, consult the reference for the preview implied node.

NOTES

A string, specifying the CSS class name that should be added to the className property of the root node when the user is mousing over the instance and it is not already selected (ie. the over set-get property is set to true and the selected set-get property is set to false).

For a more in-depth discussion of the interaction between this property and the companion cssClassBase and cssClassActive properties, consult the reference for the Root Node.

NOTES

A boolean, indicating whether or not the instance is locked.

NOTES

A boolean, indicating whether or not the user is mousing over the previewShell implied node of the instance.

The value of this property is set to true when the user mouses over the instance's previewShell implied node, and is set to false when the user mouses out.

NOTES

A string, specifying the desired action that should be performed when the previewShell implied node is clicked.

VALUES

NOTES

An object reference to a DOM node, or a string whose value is the id for a DOM node, that should be displayed as a tooltip for the instance when the value of the over set-get property changes to true and the instance is wired.

Essentially, the previewTooltip set-get property can be used to specify a tooltip that should appear when the user mouses over the previewShell implied node.

NOTES

An object, acting as a "bucket" for additional data that may be associated to an instance.

The data in the properties set-get property is used by the getPropertyForItems and getPropertyForSelected instance methods of the Uize.Widget.Collection class. When the value of the properties set-get property is changed, the value of the title set-get property is set from the "title" property of the properties object, if it exists.

NOTES

A boolean, indicating whether or not the instance is selected.

When the value of the selected set-get property changes, the selected state of the select child widget will be updated, and the CSS class of the Root Node will be updated to reflect the instance's selected state.

NOTES

A string, whose value will be used to set the value of the innerHTML property of the title Implied Node.

The innerHTML value of the title Implied Node will be updated to reflect the value of the title set-get property whenever the value of this property is changed, is not null or undefined, and the instance is wired up. When the value of the properties set-get property is changed, the value of the title set-get property is set from the "title" property of the properties object.

NOTES