Abbreviated List Specifications

Details

Name: Abbreviated List Description: Displays a list of items. If the number of items exceeds the 'visibleItem' threshold, a button will be displayed informing that there are 'n' items remaining to be seen. Interacting with that button will hide the button, display the previously hidden remainder of the list, and a button labeled "Show less" to abbreviate the list again.

Changelog

0.0.1

Initial release

Attributes

|Attribute|Type|Default Value|Description| |---------|----|-------------|-----------| |listType|string|"ul"|Visual list type of displayed items; supports 'ul', 'ol', 'menu', and 'dl.'| |listStyle|string||Style to apply to list elements; supports any valid entry for 'list-style-type' CSS property.| |visibleItems|number|2|Number of items to display before the control is displayed.| |start|number||Number value provided to an ordered list to label the first list item. The "ol" element naturally defaults to 1 so Abbreviated List does not provide a default value.| |reversed|boolean|false|Determines if an 'ol' list is descending from the 'start' value instead of the default behavior of ascending from the 'start' value.| |itemName|string|"items"|Descriptive term to use in the 'Show remaining # items" button, replaces "items". This property can be supplied by a componentKey/viewKey label.| |items|array (variable)||Array of strings, objects, or arrays of objects to define the items included in the list. This property may only be set by the setState method detailed below.|

Implementation

There are three ways to implement the abbreviated list component:

• Using the abstract elements that are converted into a native list element and its list items.
• Supplying the strings, object specifications, or array of object specifications via the component's state "items" property.
• Slotting in a native list element that will be enhanced by the component to abbreviate the list and add the unabbreviate and abbreviate controls to the list.

Implementation via abstract elements

The attribute 'itemType' on cui-item is used exclusively for description lists to define whether it's a term or a description element. The attribute 'itemValue' on cui-item is used exclusively in ordered lists to change the marker of the list item and to continue subsequent list progression from that value.

<cui-abbreviated-list listType="ol" listStyle="roman-upper" visibleItems="1">
    <cui-item>List content labeled 1</cui-item>
    <cui-item>List content labeled 2</cui-item>
    <cui-item itemValue="18"><a href="myURL">List content link labeled 18</a></cui-item>
    <cui-item>List content labeled 19</cui-item>
</cui-abbreviated-list>

<cui-abbreviated-list listType="dl">
    <cui-item itemType="dt">Jane Doe</cui-item>
    <cui-item itemType="dd">CEO</cui-item>
    <cui-item itemType="dd">Founder</cui-item>
    <cui-item itemType="dt">Alan Smithee</cui-item>
    <cui-item itemType="dd">Director</cui-item>
</cui-abbreviated-list>

Implementation via data array

RenderAs object specification properties

|Attribute|Type|Description| |---------|----|-----------| |renderAs|string|The HTML tag used to define the element. Required to detect this specification is being used.| |attributes|object|Defines the setState object used in our component specification or sets all the properties as attributes on a native component.| |content|variable|The innerHTML of the element. Can be a string, an object following this specification, or an array of objects following this specification.|

Accepted variable types for the in the 'items' array are:

• A string that fills the content space for the rendered list item.
• An object with the value and content property; value is applied to the list item as the value attribute, content can be a string, an object following the renderAs specification, or a an array of objects following the renderAs specification. This object specification should only be used for the value attribute on a list element within an ordered list.
• An object with the renderAs property that creates a child element for the list item.
• An array of objects that must follow the renderAs specification.

The items array for defining a detail list should all be objects with the 'dt' and optional the 'dd' properties. The 'dt' property should follow the specifications of the items array entires for the other types of lists, while the 'dd' property can also follow those specifications or be an array of values that follow those specifications to represent multiple detail description elements below the detail term.

dAbbreviatedOl.setState({
    "listType": "ol",
    "items": {
        "Simple li content.",
        {
            "value": "18",
            "content": "li with value set to ordered label"
        },
        {
            "renderAs": "a",
            "attributes": {
                "href": "myURL"
            },
            "content": "Link child of li."
        },
        [
            {
                "renderAs": "label",
                "attributes": {
                    "for": "multi-child"
                },
                "content": "Li with multiple children elements."
            },
            {
                "renderAs": "input",
                "attributes": {
                    "type": "checkbox",
                    "id": "multi-child"
                }
            }
        ]
    }
});

dAbbreviatedDetailList.setState({
    "listType": "dl",
    "items": [
        {
            "dt": "Term without details."
        },
        {
            "dt": "Term with a detail.",
            "dd": "Detail of term."
        },
        {
            "dt": "Term with multiple details.",
            "dd": ["Detail one.", "Detail two."]
        },
        {
            "dt": {
                "renderAs": "a",
                "attributes": {
                    "href": "myURL"
                },
                "content": "dt & dd items can also contain objects and arrays."
            }
        }
    ]
});

Implementation via native list

This method skips the steps used to generate the native list element by defining it via HTML directly.

<cui-abbreviated-list>
    <ol slot="list">
        <li>List content 1</li>
        <li>List content 2</li>
        <li>List content 3</li>
    </ol>
</cui-abbreviated-list>

Notes

Detail List behavior

Detail lists abbreviate contents starting from the first detail term element after the threshold is reached. This is to ensure that all detail description elements of a given visible detail term are displayed.

<cui-abbreviated-list threshold="2">
    <dl slot="list">
        <dt>Item 1</dt>
        <dd>Item 1 description</dd>
        <dt>Item 2</dt>
        <dd>Item 2 description</dd>
        <dd>Item 2 additional description</dd>
        //the following element and all subsequent elements are abbreviated since it's the first <dt> after the threshold was reached
        <dt>Item 3</dt> 
        ...
    </dl>
<cui-abbreviated-list>