Skip to content
This repository has been archived by the owner on Feb 12, 2022. It is now read-only.

Commit

Permalink
Merge branch 'master' of github.com:ExactTarget/fuelux into color-con…
Browse files Browse the repository at this point in the history 
…solidation

Conflicts:
	less/repeater-list.less
  • Loading branch information
@interactivellama
interactivellama committed Jun 29, 2015
2 parents e8c9856 + 322ba86 commit 2b0bfba
Show file tree
Hide file tree
Showing 9 changed files with 613 additions and 23 deletions.
6 changes: 3 additions & 3 deletions DETAILS.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ Fuel UX can be applied to a section of your your HTML or the entire page by addi
## Downloading code
Fuel UX can be obtained in any of the following ways:

* Request files from [the Fuel UX CDN](http://www.fuelcdn.com/fuelux/3.8.0/)
* Request files from [the Fuel UX CDN](http://www.fuelcdn.com/fuelux/3.9.0/)
* Using [Bower](https://github.com/bower/bower) (ensures you get all the [dependencies](#dependencies)):

```
Expand All @@ -53,7 +53,7 @@ Fuel UX can be obtained in any of the following ways:

Cloning the repository ensures you can apply future updates to Fuel UX easily, but requires to you manage its [dependencies](#dependencies) on your own.

* Download a .zip archive of the [latest release](http://www.fuelcdn.com/fuelux/3.8.0/fuelux.zip).
* Download a .zip archive of the [latest release](http://www.fuelcdn.com/fuelux/3.9.0/fuelux.zip).

## AMD support

Expand All @@ -63,7 +63,7 @@ If using AMD (such as [RequireJS](http://requirejs.org)), reference the FuelUX d
```javascript
require.config({
paths: {
'fuelux': 'http://www.fuelcdn.com/fuelux/3.8.0/'
'fuelux': 'http://www.fuelcdn.com/fuelux/3.9.0/'
//...
}
});
Expand Down
6 changes: 3 additions & 3 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,18 +32,18 @@ Add `fuelux` class to the portion of the page using Fuel UX as seen [here](https
Ensure all the dependencies are included on the page (eg, such as using the CDN as shown below).
```
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<link href="//www.fuelcdn.com/fuelux/3.8.0/css/fuelux.min.css" rel="stylesheet">
<link href="//www.fuelcdn.com/fuelux/3.9.0/css/fuelux.min.css" rel="stylesheet">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.1/js/bootstrap.min.js"></script>
<script src="//www.fuelcdn.com/fuelux/3.8.0/js/fuelux.min.js"></script>
<script src="//www.fuelcdn.com/fuelux/3.9.0/js/fuelux.min.js"></script>
```

### Install
A few ways available to install.

- Request files from [the Fuel UX CDN](http://www.fuelcdn.com/fuelux/3.8.0/)
- Request files from [the Fuel UX CDN](http://www.fuelcdn.com/fuelux/3.9.0/)
- [Download the latest release](https://github.com/exacttarget/fuelux/archive/3.4.0.zip).
- Clone the repo: `git clone https://github.com/exacttarget/fuelux.git`.
- Install with [Bower](http://bower.io): `bower install fuelux`.
Expand Down
8 changes: 8 additions & 0 deletions index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,4 +49,12 @@

#myRepeater[data-currentview="list.frozen"] table thead tr th, #myRepeater[data-currentview="list.frozen"] .repeater-list-heading {
width: 400px;
}

#myRepeaterActions table thead tr th, #myRepeaterActions .repeater-list-heading {
width: 400px;
}

#myRepeaterActions table.table-actions .repeater-list-heading {
width: 100%;
}
115 changes: 115 additions & 0 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1205,6 +1205,121 @@ <h2>Repeater</h2>
</div>
</section>

<section id="repeater-actions">
<h2>Repeater w/ actions enabled</h2>
<div class="thin-box">
<div class="repeater" data-staticheight="400" id="myRepeaterActions">
<div class="repeater-header">
<div class="repeater-header-left">
<span class="repeater-title">Awesome Repeater w/ Actions!</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="thumbnail"><span class="glyphicon glyphicon-th"></span>
</label>
<label class="btn btn-default">
<input name="repeaterViews" type="radio" value="list.frozen"><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>
<div class="btn-panel">
<!--<button type="button" class="btn btn-default" id="btnRepeaterDisable">disable ???</button>-->
<!--<button type="button" class="btn btn-default" id="btnRepeaterEnable">enable ???</button>-->
<button type="button" class="btn btn-default" id="btnRepeaterDestroy">destroy and append</button>
</div>
</section>

<section id="scheduler">
<h2>Scheduler</h2>
<div class="thin-box">
Expand Down
104 changes: 104 additions & 0 deletions index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -634,6 +634,110 @@ define(function (require) {
initRepeater();
});

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
REPEATER w/ actions
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
function initRepeaterActions() {
var loadDelays = ['300', '600', '900', '1200'];
function getSampleDataSet(options, callback) {
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
},
{
label: 'Latin Name',
property: 'latinName',
sortable: true
},
{
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]);
}

//if(options.search){
//resp.items = [];
//}

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

};

// initialize the repeater
var repeaterActions = $('#myRepeaterActions');
repeaterActions.repeater({
list_columnSizing:false,
list_columnSyncing: false,
list_noItemsHTML: '<span>foo</span>',
list_highlightSortedColumn: true,
list_actions: {
width: '37px',
items: [
{
name: 'edit',
html: function () {
return '<div class="fuelux-icon fuelux-icon-pencil"></div> Edit'
}
},
{
name: 'copy',
html: function () {
return '<div class="fuelux-icon fuelux-icon-copy"></div> Copy'
}
},
{
name: 'delete',
html: function () {
return '<div class="fuelux-icon fuelux-icon-delete"></div> Delete'
},
clickAction: function(helpers, callback) {
console.log('hey it worked');
console.log(helpers);
callback();
}
}
]
},
// setup your custom datasource to handle data retrieval;
// responsible for any paging, sorting, filtering, searching logic
dataSource: getSampleDataSet
});
}
initRepeaterActions();


/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Expand Down
Loading

0 comments on commit 2b0bfba

Please sign in to comment.