Fuel UX Repeater

Fuel UX Repeater.markdown

Fuel UX Repeater

Frozen columns, actions column and multi select checkboxes

A Pen by Benjamin Davis on CodePen.

License.

index.html

<section id="repeater">
	<h2>Repeater</h2>
	<div class="thin-box">
		<div class="repeater" data-staticheight="400" id="myRepeater">
			<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="some"><a href="#">Some</a>
							</li>
							<li data-value="others"><a href="#">Others</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.list"><span class="glyphicon glyphicon-list"></span>
						</label>
						<label class="btn btn-default">
							<input name="repeaterViews" type="radio" value="list.frozen"><span class="glyphicon glyphicon-list"></span>
						</label>
						<label class="btn btn-default">
							<input name="repeaterViews" type="radio" value="list.actions"><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"><a href="#">50</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>
							<span class="sr-only">Previous Page</span>
						</button>
						<label id="myPageLabel" class="page-label">Page</label>
						<div class="repeater-primaryPaging active">
							<div class="input-group input-append dropdown combobox">
								<input type="text" class="form-control" aria-labelledby="myPageLabel">
								<div class="input-group-btn">
									<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
										<span class="caret"></span>
										<span class="sr-only">Toggle Dropdown</span>
									</button>
									<ul class="dropdown-menu dropdown-menu-right"></ul>
								</div>
							</div>
						</div>
						<input type="text" class="form-control repeater-secondaryPaging" aria-labelledby="myPageLabel">
						<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>
							<span class="sr-only">Next Page</span>
						</button>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>

script.js

 $(function() {
	// intitialize
	function initRepeater() {
		// simulate network latency
		var loadDelays = ['300', '600', '900', '1200'];
		var sort = function( data, sortProperty, sortDirection ) {
			var sortedData = _.sortBy( data, function( item ) {
				return item[ sortProperty ];
			} );

			// sort direction
			if ( sortDirection === 'desc' ) {
				sortedData = sortedData.reverse();
			}

			return sortedData;
		};

		// list view setup
		var list = function (options, callback) {
			// build dataSource based with options
			var resp = {
				count: data.repeater.listData.length,
				items: [],
				page: options.pageIndex
			};

			// get start and end limits for JSON
			var i, l;
			resp.pages = Math.ceil(resp.count / (options.pageSize || 50));

			i = options.pageIndex * (options.pageSize || 50);
			l = i + (options.pageSize || 50);
			l = (l <= resp.count) ? l : resp.count;
			resp.start = i + 1;
			resp.end = l;

			// setup columns for list view
			resp.columns = [
				{
					label: 'Common Name',
					property: 'commonName',
					sortable: true,
					width: 600
				},
				{
					label: 'Latin Name',
					property: 'latinName',
					sortable: true,
					width: 600
				},
				{
					label: 'Appearance',
					property: 'appearance',
					sortable: true
				},
				{
					label: 'Sound',
					property: 'sound',
					sortable: true
				}
			];

			// add sample items to datasource
			for (i; i < l; i++) {
				// from data.js
				resp.items.push(data.repeater.listData[i]);
			}

			resp.items = sort( resp.items, options.sortProperty, options.sortDirection );

			// call and simulate latency
			setTimeout(function () {
				callback(resp);
			}, loadDelays[Math.floor(Math.random() * 4)]);
		};

		// initialize repater
		$('#myRepeater').repeater({
			dataSource: function (options, callback) {
					list(options, callback);},
			list_noItemsHTML: 'no items found',
			thumbnail_noItemsHTML: 'no items found',
			views: {
				'list.list': {
					dataSource: function (options, callback) {
						list(options, callback);
					},
				},
				'list.frozen': {
					dataSource: function (options, callback) {
						list(options, callback);
					},
					list_selectable: false, // (single | multi)
					list_frozenColumns: 1
				},
				'list.actions': {
					dataSource: function (options, callback) {
						list(options, callback);
					},
			list_selectable: 'multi',
			list_actions:  {
				width: 37,
				items: [
					{
						name: 'edit',
						html: '<span class="glyphicon glyphicon-pencil"></span> Edit'
					},
					{
						name: 'copy',
						html: '<span class="glyphicon glyphicon-copy"></span> Copy'
					},
					{
						name: 'delete',
						html: '<span class="glyphicon glyphicon-trash"></span> Delete',
						clickAction: function(helpers, callback) {
							console.log('hey it worked');
							console.log(helpers);
							callback();
						}
					}
				]
			},
				}
			}
		});
	}
	initRepeater();
 });

scripts

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="//www.fuelcdn.com/fuelux/3.11.0/js/fuelux.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore-min.js"></script>
<script src="http://fuelux-dev.herokuapp.com/data.js"></script>

style.css

.thin-box {
	border: 1px solid #ddd;
	padding: 20px 20px;
}

styles

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<link href="//www.fuelcdn.com/fuelux/3.11.0/css/fuelux.min.css" rel="stylesheet" />