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

Commit

Permalink
# This is a combination of 3 commits.
Browse files Browse the repository at this point in the history 
# The first commit's message is:
Checkbox / Radio: Setting checked attribute on underlying input #906

# This is the 2nd commit message:

bump dist

# This is the 3rd commit message:

Checkbox / Radio: Setting checked attribute on underlying input #906
  • Loading branch information
@BenjaminNeilDavis
BenjaminNeilDavis committed Dec 16, 2014
1 parent 4d3dddf commit 261cbd9
Show file tree
Hide file tree
Showing 9 changed files with 39 additions and 328 deletions.
274 changes: 26 additions & 248 deletions dev/dev.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,261 +38,39 @@
}
});
})();
require(['jquery', '../data', 'fuelux/all'], function($, data){
// simulate network latency
var loadDelays = ['300', '600', '900', '1200'];

// 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
},
{
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)]);
};


// thumbnail view setup
var thumbnail = function(options, callback){
var sampleImageCategories = ['abstract', 'animals', 'business', 'cats', 'city', 'food', 'nature', 'technics', 'transport'];
var numItems = 200;

// build dataSource based with options
var resp = {
count: numItems,
items: [],
pages: (Math.ceil(numItems/(options.pageSize || 30))),
page: options.pageIndex
};

// get start and end limits for JSON
var i, l;
i = options.pageIndex * (options.pageSize || 30);
l = i + (options.pageSize || 30);
resp.start = i + 1;
resp.end = l;

// add sample items to datasource
for(i; i<l; i++){
resp.items.push({
name: ('Thumbnail ' + (i + 1)),
src: 'http://lorempixel.com/65/65/' + sampleImageCategories[Math.floor(Math.random() * 9)] + '/?_=' + i
});
}

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

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

// initialize repater
$('#myRepeater').repeater({
dataSource: function(options, callback){
//you can check view name here, and call separate functions...
if(options.view==='list.view1'){
list(options, callback);
}
},
list_selectable: 'multi',
list_noItemsHTML: 'no items found',
thumbnail_noItemsHTML: 'no items found',
thumbnail_infiniteScroll: { hybrid: true },
views: {
//you can go with just the view name
'view1': {
list_selectable: true
},
//this syntax is also supported (makes it possible to do 'list' and 'thumbnail' this way)
'list.view2': {
//...or you can do this! :)
dataSource: function(options, callback){
list(options, callback);
},
list_infiniteScroll: true,
list_highlightSortedColumn: true
},
'thumbnail.view3': {
thumbnail_alignment: 'center',
dataSource: function(options, callback){
thumbnail(options, callback);
},
thumbnail_selectable: 'multi'
}
}
require(['jquery', '../data', 'fuelux/all'], function($, data) {
$('input').on('change', function() {
console.log( $(this).prop('checked') );
});

// setTimeout(function(){
// $('#myRepeater').repeater('render', {
// dataSourceOptions: {
// pageIndex: 1,
// pageSize: 20,
// filter: { text: 'Some', value: 'some' }
// //sortProperty: 'name',
// //sortDirection: 'asc',
// //search: 'term'
// },
// preserveDataSourceOptions: true
// });
// }, 5000);
});
</script>
</head>

<body style="padding: 20px;">
<div class="container" style="padding: 20px; margin-top:20px;">

<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.view1"><span class="glyphicon glyphicon-list"></span>
</label>
<label class="btn btn-default">
<input name="repeaterViews" type="radio" value="list.view2"><span class="glyphicon glyphicon-list"></span>
</label>
<label class="btn btn-default">
<input name="repeaterViews" type="radio" value="thumbnail.view3"><span class="glyphicon glyphicon-th"></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>
</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 class="checkbox" id="myCheckbox">
<label class="checkbox-custom" data-initialize="checkbox">
<input class="sr-only" type="checkbox" value="">
<span class="checkbox-label">Custom checkbox unchecked on page load</span>
</label>
</div>
<div class="checkbox" id="myCheckbox2">
<label class="checkbox-custom" data-initialize="checkbox">
<input class="sr-only" checked="checked" type="checkbox" value="">
<span class="checkbox-label">Custom checkbox checked on page load</span>
</label>
</div>
<div class="checkbox" id="myCheckbox3">
<label class="checkbox-custom" data-initialize="checkbox">
<input class="sr-only" disabled="disabled" type="checkbox" value="">
<span class="checkbox-label">Disabled custom checkbox unchecked on page load</span>
</label>
</div>
<div class="checkbox" id="myCheckbox4">
<label class="checkbox-custom" data-initialize="checkbox">
<input class="sr-only" checked="checked" disabled="disabled" type="checkbox" value="">
<span class="checkbox-label">Disabled custom checkbox checked on page load</span>
</label>
</div>

</div>
Expand Down
74 changes: 0 additions & 74 deletions dist/css/fuelux.css
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion dist/css/fuelux.css.map
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/css/fuelux.min.css
View file

Large diffs are not rendered by default.

Binary file modified dist/fuelux.zip
View file
Binary file not shown.
4 changes: 3 additions & 1 deletion dist/js/fuelux.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -108,13 +108,15 @@
check: function() {
this.state.checked = true;
this.$element.prop( 'checked', true );
this.$element.attr( 'checked', 'checked' );
this._setCheckedClass();
this.$element.trigger( 'checked.fu.checkbox' );
},

uncheck: function() {
this.state.checked = false;
this.$element.prop( 'checked', false );
this.$element.removeAttr( 'checked' );
this._resetClasses();
this.$element.trigger( 'unchecked.fu.checkbox' );
},
Expand Down Expand Up @@ -5870,7 +5872,7 @@

//ADDITIONAL DEFAULT OPTIONS
$.fn.repeater.defaults = $.extend( {}, $.fn.repeater.defaults, {
thumbnail_alignment: 'justify',
thumbnail_alignment: 'left',
thumbnail_infiniteScroll: false,
thumbnail_itemRendered: null,
thumbnail_selectable: false,
Expand Down
Loading

0 comments on commit 261cbd9

Please sign in to comment.