elements.treeview.js
1.97 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
/**
<b>Treeview</b>. A wrapper for FuelUX treeview element.
It's just a wrapper so you still need to include FuelUX treeview script first.
*/
(function($ , undefined) {
$.fn.aceTree = $.fn.ace_tree = function(options) {
var $defaults = {
'open-icon' : ace.vars['icon'] + 'fa fa-folder-open',
'close-icon' : ace.vars['icon'] + 'fa fa-folder',
'toggle-icon': ace.vars['icon'] + 'fa fa-play',
'selected-icon' : ace.vars['icon'] + 'fa fa-check',
'unselected-icon' : ace.vars['icon'] + 'fa fa-times',
'base-icon' : ace.vars['icon'] + 'fa',
'folder-open-icon' : 'fa fa-plus-square-o',
'folder-close-icon' : 'fa fa-plus-minus-o',
'loadingHTML': 'Loading...'
}
this.each(function() {
var attrib_values = ace.helper.getAttrSettings(this, $defaults);
var $options = $.extend({}, $defaults, options, attrib_values);
var $this = $(this);
$this.addClass('tree').attr('role', 'tree');
$this.html(
'<li class="tree-branch hide" data-template="treebranch" role="treeitem" aria-expanded="false">\
'+($options['folderSelect'] ? '<i class="icon-caret '+$options['folder-open-icon']+'"></i> ' : '')+'\
<div class="tree-branch-header">\
<span class="tree-branch-name">\
<i class="icon-folder '+$options['close-icon']+'"></i>\
<span class="tree-label"></span>\
</span>\
</div>\
<ul class="tree-branch-children" role="group"></ul>\
<div class="tree-loader" role="alert">'+$options['loadingHTML']+'</div>\
</li>\
<li class="tree-item hide" data-template="treeitem" role="treeitem">\
<span class="tree-item-name">\
'+($options['unselected-icon'] == null ? '' : '<i class="icon-item '+$options['unselected-icon']+'"></i>')+'\
<span class="tree-label"></span>\
</span>\
</li>');
$this.addClass($options['selectable'] == true ? 'tree-selectable' : 'tree-unselectable');
$this.tree($options);
});
return this;
}
})(window.jQuery);