SelectedLabelsFactory

Description

The SelectedLabelsFactory is a UI component factory that constructs the container housing the labels that were selected by the user. The user can toggle the selection status of labels within this container by clicking on the labels. If the user deselects a label present within this container, the label will have its name strike out (as shown below for the d.FirstTimers label) instead of being removed from the container.

Preview of the selected labels container

Events

Published

• selected-label/select-item/{groupID} - published when a label is selected
• selected-label/unselect-item/{groupID} - published when a label is deselected
• selected-label/toggle-select-item-finished - published when a label's selection is toggled by pressing enter in the search input box

Subscribed

• group-label/unselect-item - reacts by deselecting the label that is present within the container. This event is handled by the handleExternalUnselectLabelEvent() function.
• group-label/select-item - reacts by selecting the label or adding it if it is not present within the container. Any conflicts that arise due to selection of labels from exclusive groups are resolved. This event is handled by the handleExternalSelectLabelEvent() function.
• search/toggle-select-item - reacts by toggling the label's selection. Any conflicts that arise due to selection of labels from exclusive groups are resolved. This event is handled by the handleSearchToggleSelectEvent() function.

Overview of SelectedLabelsFactory

• Labels with itemID are added to the container using the addLabel(itemID) function. Any conflicts that arise due to selection of labels from exclusive groups are resolved within this function as well.
• Labels within the container can be selected using the handleLabelSelection(label) function. Any conflicts that arise due to selection of labels from exclusive groups are resolved within this function as well.
• Use unselectLabel(label, isEmitEvent) function to deselect labels within the container. Setting isEmitEvent to true will cause it to publish an event called selected-label/unselect-item/{groupID} for a label group with groupID to respond.
• Use isLabelSelected(label) function to check if the label has been selected or not.
• The label's selection status within ItemStorage is also updated by calling the selectItem(itemID) or unselectItem(itemID) function from ItemStorage when labels are selected or deselected within the selected labels container.
• Below is the HTML representation of the element that it creates:

<div class="selected-group-container">...</div>