fuelux/_includes/extensions/repeater-list.html

<!-- repeater list
================================================== -->
<h2 id="bundled-extensions-list">Repeater List View <a href="{{ site.repo }}/blob/{{ site.current_version }}/js/repeater-list.js"><small>repeater-list.js</small></a></h2>
<p>The repeater list view plug-in will render data in a tabular format, with many options and methods to suit your
	needs.
</p>

<h3 id="bundled-extensions-list-example">Example</h3>
<div class="fu-example section">
	<div class="repeater" data-staticheight="400px" id="myRepeaterList">
		<div class="repeater-header">
			<div class="repeater-header-left">
				<span class="repeater-title">Awesome Repeater</span>
				<div class="repeater-search">
					<div class="search input-group">
						<input type="search" class="form-control" placeholder="Search"/>
						<span class="input-group-btn">
							<button class="btn btn-default" type="button">
								<span class="glyphicon glyphicon-search"></span>
								<span class="sr-only">Search</span>
							</button>
						</span>
					</div>
				</div>
			</div>
			<div class="repeater-header-right">
				<div class="btn-group selectlist repeater-filters" data-resize="auto">
					<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
						<span class="selected-label">&nbsp;</span>
						<span class="caret"></span>
						<span class="sr-only">Toggle Filters</span>
					</button>
					<ul class="dropdown-menu" role="menu">
						<li data-value="all" data-selected="true"><a href="#">all</a></li>
						<li data-value="bug"><a href="#">bug</a></li>
						<li data-value="dark"><a href="#">dark</a></li>
						<li data-value="dragon"><a href="#">dragon</a></li>
						<li data-value="electric"><a href="#">electric</a></li>
						<li data-value="fairy"><a href="#">fairy</a></li>
						<li data-value="fighting"><a href="#">fighting</a></li>
						<li data-value="fire"><a href="#">fire</a></li>
						<li data-value="flying"><a href="#">flying</a></li>
						<li data-value="ghost"><a href="#">ghost</a></li>
						<li data-value="grass"><a href="#">grass</a></li>
						<li data-value="ground"><a href="#">ground</a></li>
						<li data-value="ice"><a href="#">ice</a></li>
						<li data-value="normal"><a href="#">normal</a></li>
						<li data-value="poison"><a href="#">poison</a></li>
						<li data-value="psychic"><a href="#">psychic</a></li>
						<li data-value="rock"><a href="#">rock</a></li>
						<li data-value="steel"><a href="#">steel</a></li>
						<li data-value="water"><a href="#">water</a></li>
					</ul>
					<input class="hidden hidden-field" name="filterSelection" readonly="readonly" aria-hidden="true" type="text"/>
				</div>
				<div class="btn-group repeater-views" data-toggle="buttons">
					<label class="btn btn-default active">
						<input name="repeaterViews" type="radio" value="list"><span class="glyphicon glyphicon-list"></span>
					</label>
				</div>
			</div>
		</div>
		<div class="repeater-viewport">
			<div class="repeater-canvas"></div>
			<div class="loader repeater-loader"></div>
		</div>
		<div class="repeater-footer">
			<div class="repeater-footer-left">
				<div class="repeater-itemization">
					<span><span class="repeater-start"></span> - <span class="repeater-end"></span> of <span class="repeater-count"></span> items</span>
					<div class="btn-group selectlist" data-resize="auto">
						<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
							<span class="selected-label">&nbsp;</span>
							<span class="caret"></span>
							<span class="sr-only">Toggle Dropdown</span>
						</button>
						<ul class="dropdown-menu" role="menu">
							<li data-value="5"><a href="#">5</a></li>
							<li data-value="10" data-selected="true"><a href="#">10</a></li>
							<li data-value="20"><a href="#">20</a></li>
							<li data-value="50" data-foo="bar" data-fizz="buzz"><a href="#">50</a></li>
							<li data-value="100"><a href="#">100</a></li>
						</ul>
						<input class="hidden hidden-field" name="itemsPerPage" readonly="readonly" aria-hidden="true" type="text"/>
					</div>
					<span>Per Page</span>
				</div>
			</div>
			<div class="repeater-footer-right">
				<div class="repeater-pagination">
					<button type="button" class="btn btn-default btn-sm repeater-prev"><span class="glyphicon glyphicon-chevron-left"></span></button>
					<span>Page</span>
					<div class="repeater-primaryPaging active">
						<div class="input-group input-append dropdown combobox">
							<input type="text" class="form-control">
							<div class="input-group-btn">
								<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
								<ul class="dropdown-menu pull-right"></ul>
							</div>
						</div>
					</div>
					<input type="text" class="form-control repeater-secondaryPaging">
					<span>of <span class="repeater-pages"></span></span>
					<button type="button" class="btn btn-default btn-sm repeater-next"><span class="glyphicon glyphicon-chevron-right"></span></button>
				</div>
			</div>
		</div>
	</div>
</div>

<h3 id="bundled-extensions-list-usage">Usage</h3>
<p>The repeater list plug-in extends repeater functionality. This plug-in follows the steps specified in the <a href="/javascript.html#repeater">repeater
	docs.</a> You can also use the following additional features:</p>

<h3 id="bundled-extensions-list-datasource">Data Source</h3>
<p>The <a href="javascript.html#repeater-dataSource">dataSource</a> function behaves as described in the repeater docs. However, the function potentially provides a few additional attributes in the <code>options</code> argument:</p>
<div class="table-responsive">
	<table class="table table-bordered table-striped">
		<thead>
			<tr>
				<th style="width: 100px;">Attribute</th>
				<th style="width: 100px;">type</th>
				<th>description</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>sortDirection</td>
				<td>string</td>
				<td>If the list view is sortable and has been sorted by the user, this will indicate the sort direction.
				Values are either <code>'asc'</code> or <code>'desc'</code>.</td>
			</tr>
			<tr>
				<td>sortProperty</td>
				<td>string</td>
				<td>If the list view is sortable and has been sorted by the user, this will indicate the column property
				that has been sorted on.</td>
			</tr>
		</tbody>
	</table>
</div><!-- ./fu-table-responsive -->
<p>Additionally, the function requires a few additional parameters on the returned <code>data</code> object to render the data properly:</p>
<div class="table-responsive">
	<table class="table table-bordered table-striped">
		<thead>
			<tr>
				<th style="width: 100px;">Attribute</th>
				<th style="width: 100px;">type</th>
				<th>description</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>columns</td>
				<td>array</td>
				<td>Array of objects representing the desired columns within the rendered list. The column objects contain
					three attributes:
					<ul>
						<li><code>className</code> - String representing the classes to be added to any DOM items associated with the column. Multiple classes can be adding a space between each name</li>
						<li><code>label</code> - String or jQuery attribute containing the content to be displayed as the "name" of the column</li>
						<li><code>property</code> - String value that dictates which item attribute is displayed within the column</li>
						<li><code>sortable</code> - Optional Boolean or string value dictating whether user can sort the column. A true value indicates sorting on the <code>property</code> value. A string value sorts on the specified value. This attribute defaults to <code>false</code></li>
						<li><code>sortDirection</code> - Optional string to set initial sort direction of the column. Values can be either <code>'asc'</code> or <code>'desc'</code>. NOTE: only one column can be sorted upon at a time.</li>
						<li><code>width</code> - String or Number dictating this column's width</li>
					</ul>
					(ex: <code>[ { label: 'Name', property: 'name', sortable: true }, ... ]</code> )
				</td>
			</tr>
			<tr>
				<td>items</td>
				<td>array</td>
				<td>Array of objects representing the item data that will be displayed within the repeater. The item
					objects can contain any number of attributes. The attribute name must match the column <code>property</code> value to display within a column.
				</td>
			</tr>
		</tbody>
	</table>
</div><!-- ./fu-table-responsive -->

<h3 id="bundled-extensions-list-options">Options</h3>
<p>You can pass options via Javascript upon initialization.</p>
<div class="table-responsive">
	<table class="table table-bordered table-striped">
		<thead>
			<tr>
				<th style="width: 100px;">Name</th>
				<th style="width: 100px;">type</th>
				<th style="width: 50px;">default</th>
				<th>description</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>list_actions</td>
				<td>object</td>
				<td>null</td>
				<td>Can be used to configure an additional actions column in the repeater. It will positioned as the rightmost column
					and will always be visible. It creates a dropdown menu that can be populated with x number of actions to be applied
					to the row. If multi select is also enabled will allow for bulk actions.
					<ul>
						<li><code>width</code> - optional width to the actions column</li>
						<li><code>items</code> - Array of objects representing the different action items in the dropdown
							<ul>
								<li><code>name</code> - String representing the name of the action</li>
								<li><code>html</code> - HTML string that would modify the markup of the action item
								</li>
								<li><code>clickAction</code> - returns a helpers obj once this action item has been clicked<br>
									<ul>
										<li><code>helpers</code> returns an object that contains <code>helpers.item</code>
										which is the jquery element of the current table row. Also returns <code>helpers.rowData</code>
										which are all key/value data from the current item/row in the dataSource</li>
									</ul>
								</li>
							</ul>
						</li>
					</ul>
{% highlight js %}
list_actions:  {
  width: 37,
  items: [{
    name: 'delete',
    html: '<span class="glyphicon glyphicon-trash"></span> Delete',
    clickAction: function(helpers, callback, e) {
        e.preventDefaul();
        console.log('hey it worked');
        console.log(helpers);
        console.log(e);
        callback();
    }
  }]
}
{% endhighlight %}
				</td>
			</tr>
			<tr>
				<td>list_columnRendered</td>
				<td>function</td>
				<td>null</td>
				<td>If set, the repeater calls this function after rendering each table cell within a row. It passes a <code>helpers</code>
					object and a <code>callback</code> function as arguments. This function is the preferred way to modify table cell markup.
					<ul>
						<li><code>helpers.rowData</code> - All key/value data from the current item/row in the dataSource</li>
						<li><code>helpers.columnAttr</code> - The key name specified by dataSource.columns of the current column/cell</li>
						<li><code>helpers.container</code> - jQuery element of the current <code>tr</code> or table row</li>
						<li><code>helpers.item</code> - jQuery element of the current <code>td</code> or table cell</li>
						<li><code>callback</code> - Call this function to continue rendering the view</li>
					</ul>
				</td>
			</tr>
			<tr>
				<td>list_columnSizing</td>
				<td>boolean</td>
				<td>true</td>
				<td>Dictates whether the repeater should run the intelligent column resizing algorithm. This feature only resizes columns without a set value. Setting this value to <code>false</code> will disable this feature entirely.
				</td>
			</tr>
			<tr>
				<td>list_columnSyncing</td>
				<td>boolean</td>
				<td>true</td>
				<td>Dictates whether the repeater should run the post-render column syncing algorithm. This feature keeps
					the `.repeater-list-heading` classed divs in alignment with the columns. Setting this value to
					<code>false</code> will disable this feature entirely.
				</td>
			</tr>
			<tr>
				<td>list_frozenColumns</td>
				<td>number</td>
				<td>0</td>
				<td>Dictates whether the repeater should create frozen columns in the repeater. This feature creates
					x number of frozen columns on the left side of the repeater. Frozen columns means that when scrolled
					left to right these columns will not move and always be visible.
				</td>
			</tr>
			<tr>
				<td>list_infiniteScroll</td>
				<td>boolean or object</td>
				<td>false</td>
				<td>Dictates whether the repeater list view should utilize infinite scrolling instead of pagination.
					A <code>true</code> value enables infinite scrolling with default settings. Additionally,
					you can set this value to an object with attributes matching the options available in the
					<a href="javascript#infinitescroll">infinite scroll</a> control. This option allows for further
					customization and ignores the dataSource option.
				</td>
			</tr>
			<tr>
				<td>list_noItemsHTML</td>
				<td>string or jQuery object</td>
				<td>''</td>
				<td>Specifies what is displayed if no items return from the dataSource. You can use a
					<code>string</code> or <a href="https://learn.jquery.com/using-jquery-core/jquery-object/">jQuery object</a>.
				</td>
			</tr>
			<tr>
				<td>list_selectable</td>
				<td>boolean or string</td>
				<td>false</td>
				<td>Specifies whether a user can select rendered item rows. If you set the value to <code>true</code>,
					users can select only one row at a time. If you set the value to <code>'multi'</code>, users can select multiple rows at once.
				</td>
			</tr>
			<tr>
				<td>list_sortClearing</td>
				<td>boolean</td>
				<td>false</td>
				<td>Specifies whether users can clear sortable columns with a third click:
				<ul>
					<li>one click, sort ASC.</li>
					<li>second click, sort DESC</li>
					<li>third click, no sorting</li>
				</ul>
				</td>
			</tr>
			<tr>
				<td>list_rowRendered</td>
				<td>function</td>
				<td>null</td>
				<td>If set, the repeater calls this function after the repeater renders each row, passing a <code>helpers</code>
					object and <code>callback</code> function as arguments. This function is the preferred way to modify table row markup.
					<ul>
						<li><code>helpers.rowData</code> - All key/value data from the current item/row in the dataSource</li>
						<li><code>helpers.container</code> - jQuery element of the row's parent (<code>tbody</code>)</li>
						<li><code>helpers.item</code> - jQuery element of the current <code>tr</code> or table row</li>
						<li><code>callback</code> - Call this function to continue rendering the view</li>
					</ul>
				</td>
			</tr>
			<tr>
				<td>list_highlightSortedColumn</td>
				<td>boolean</td>
				<td>true</td>
				<td>Specifies whether sorted columns should be highlighted.</td>
			</tr>
		</tbody>
	</table>
</div><!-- ./fu-table-responsive -->

<h3 id="bundled-extensions-list-methods">Methods</h3>

<h4>.repeater('list_clearSelectedItems');</h4>
<p>Clears any currently selected row items. You can use selectable row items only by enabling the <code>list_selectable</code> option.</p>
{% highlight js %}$('#myRepeater').repeater('list_clearSelectedItems');{% endhighlight %}

<h4>.repeater('list_getSelectedItems');</h4>
<p>Returns the currently selected row items in an array. You can use selectable row items only by enabling the <code>list_selectable</code> option.
</p>
{% highlight js %}$('#element').repeater('list_getSelectedItems');{% endhighlight %}

<h4>.repeater('list_setSelectedItems');</h4>
<p>Set the selected row items for the current displayed data. This function accepts an array of <code>items</code> objects and
	<code>force</code> boolean as arguments.
</p>
{% highlight js %}$('#myRepeater').repeater('list_setSelectedItems', [ {...}, ...]);{% endhighlight %}

<div class="table-responsive">
	<table class="table table-bordered table-striped">
		<thead>
			<tr>
				<th style="width: 150px;">Parameter</th>
				<th>description</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>items</td>
				<td><i>Required</i> Array of items objects. The items objects specify which item to select with attributes
					to identify the item. If the items object contains an <code>index</code> property, that items object will select the matching item index within the currently displayed data. If the items object contains a <code>property</code> attribute and <code>value</code> attribute, that items object will select items with <code>properties</code> matching the specified <code>value</code>.<br/> (ex: <code>[ { index: 4 }, { property: 'name', value: 'nameValue' } ]</code> )
				</td>
			</tr>
			<tr>
				<td>force</td>
				<td><i>Optional</i> Boolean specifying whether to ignore current <code>list_selectable</code> mode when
					selecting items. This value defaults to <code>false</code> and allows only one selectable item if <code>list_selectable</code> does not equal <code>multi</code>, regardless of how many items
					are passed into the items array parameter. Set the value to <code>true</code> to override this behavior
					and select all provided items.
				</td>
			</tr>
		</tbody>
	</table>
</div><!-- ./fu-table-responsive -->

<h3 id="bundled-extensions-list-events">Events</h3>

<div class="table-responsive">
	<table class="table table-bordered table-striped">
		<thead>
			<tr>
				<th style="width: 150px;">Event Type</th>
				<th>Description</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>deselected.fu.repeaterList</td>
				<td>If <code>list_selectable</code> is enabled, fires whenever the user deselects a row. Provides an event
					object and the deselected row as arguments.</td>
			</tr>
			<tr>
				<td>selected.fu.repeaterList</td>
				<td>If <code>list_selectable</code> is enabled, fires whenever the user selects a row. Provides an event
					object and the selected row as arguments.
				</td>
			</tr>
		</tbody>
	</table>
</div><!-- ./fu-table-responsive -->
<p>All repeater-list events are fired on the <code>.repeater</code> classed element.</p>
{% highlight js %}
$('#myRepeater').on('selected.fu.repeaterList', function () {
    // do something…
});
{% endhighlight %}