Skip to content

Commit

Permalink
Tree: Hide chervron for folder that doesn't have children #860
Browse files Browse the repository at this point in the history
  • Loading branch information
@BenjaminNeilDavis
BenjaminNeilDavis committed Nov 21, 2014
1 parent 2c7c984 commit 9414486
Show file tree
Hide file tree
Showing 3 changed files with 130 additions and 229 deletions.
58 changes: 57 additions & 1 deletion data.js
View file
Expand Up @@ -704,7 +704,63 @@
sound: '???'
}
]
}
},
tree: [
{
"name": "Aquire",
"type": "folder",
"dataAttributes": { "id": "aquire-folder" },
"children": [
{
"name": "POS Receipt",
"type": "item"
},
{
"name": "Confirm Subscription",
"type": "item"
},
{
"name": "Thanks for Signing Up",
"type": "item"
}
]
},
{
"name": "Onboard",
"type": "folder"
},
{
"name": "Engage",
"type": "folder",
"dataAttributes": { "id": "engage-folder" },
"children":[
{
"name": "Abandoned Cart",
"type": "folder",
"children": [
{
"name": "Archive",
"type": "folder"
}
]
},
{
"name": "Transactional",
"type": "folder",
"children": [
{
"name": "Archive",
"type": "folder"
}
]
}
]
},
{
"name": "Retain",
"type": "folder"
}
]
};

window.data = data;
Expand Down
295 changes: 68 additions & 227 deletions dev/dev.html
View file
Expand Up @@ -38,249 +38,90 @@
}
});
})();
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]);
require(['jquery', 'underscore', '../data', 'fuelux/all'], function($, _, data){
var rootNodesRendered = false;
var nodeId = 0;

window.treeDataSource = function(options, callback) {
var nodes = [];

if(options.children) {
var folderSelect = $('#myTree').data('fu.tree').options.folderSelect || false;
nodes = options.children;

// if(folderSelect) {
// // remove any items, only show folders
// nodes = _.filter(nodes, function(node) {
// return node.type === 'folder';
// });
// }
}
else if(!rootNodesRendered) {
// render root nodes
nodes = data.tree;
rootNodesRendered = true;
}

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

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

_.each(nodes, function(node, index) {
if(!node.dataAttributes) {
node.dataAttributes = {};
}
if(!node.dataAttributes.id) {
// ensure each node has an identifier
node.dataAttributes.id = 'node' + (nodeId += 1);
}
if(!node.value) {
// ensure each node has a value (sync with id if needed)
node.value = node.dataAttributes.id;
}

// thumbnail view setup
var thumbnail = function(options, callback){
var sampleImageCategories = ['abstract', 'animals', 'business', 'cats', 'city', 'food', 'nature', 'technics', 'transport'];
var numItems = 200;
// determine whether the node has children
// note: this will be used to hide the caret if necessary
node.dataAttributes.hasChildren = (node.children && node.children.length > 0) ? true : false;
});

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

// 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)]);
// simulate delay
window.setTimeout(function() {
callback(dataSource), 2000
}, 500);
};

// 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': {
dataSource: function(options, callback){
thumbnail(options, callback);
},
thumbnail_selectable: 'multi'
}
}

$('#myTree').tree({
dataSource: window.treeDataSource,
multiSelect: false,
cacheItems: true,
folderSelect: true
});
});
</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>
<ul class="tree" role="tree" id="myTree">
<li class="tree-branch hide" data-template="treebranch" role="treeitem" aria-expanded="false">
<div class="tree-branch-header">
<button class="tree-branch-name">
<span class="glyphicon icon-caret glyphicon-play"></span>
<span class="glyphicon icon-folder glyphicon-folder-close"></span>
<span class="tree-label"></span>
</button>
</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>
<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>

<ul class="tree-branch-children" role="group"></ul>
<div class="tree-loader" role="alert">Loading...</div>
</li>
<li class="tree-item hide" data-template="treeitem" role="treeitem">
<button class="tree-item-name">
<span class="glyphicon icon-item fueluxicon-bullet"></span>
<span class="tree-label"></span>
</button>
</li>
</ul>
</div>
</body>
</html>

0 comments on commit 9414486

Please sign in to comment.