-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
107 lines (99 loc) · 3.94 KB
/
index.html
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
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
<!DOCTYPE html>
<html>
<head>
<title>Test Page for ember-jstree</title>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/jstree/3.0.0/themes/default/style.min.css" />
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.3.0/handlebars.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/ember.js/1.5.0/ember.js"></script>
<script type="text/javascript" src="../build/ember-jstree.js"></script>
<script type="text/javascript" src="../node_modules/jstree/dist/jstree.js"></script>
<script type="text/javascript">
App = Ember.Application.createWithMixins(EmberJsTree);
App.ApplicationController = Em.Controller.extend({
items: Em.A(),
selected: Em.A(),
init: function() {
var items = Em.A([
Node.create({title: 'root1', icon: 'fa fa-smile-o'}),
Node.create({title: 'root2'})
]);
this.set('items', items);
},
actions: {
overwriteItems: function() {
var items = Em.A([
Node.create({title: 'root1'}),
Node.create({title: 'root2', children: Em.A([Node.create({title: 'child 1'}), Node.create({title: 'child 2'})])}),
Node.create({title: 'root3'})
]);
this.set('items', items);
},
clearItems: function() {
this.get('items').clear();
},
addItem: function() {
this.get('items').pushObject(Node.create({title: 'freshly baked', selected: true, disabled: true}));
},
addEditingItem: function() {
var newNode = Node.create({
title: '',
editing: true
});
this.get('items').pushObject(newNode);
},
renameItem: function() {
this.get('items').objectAt(0).set('title', 'changed');
},
toggleDisabled: function() {
var val = this.get('items').objectAt(1).get('disabled');
this.get('items').objectAt(1).set('disabled', !val);
},
toggleOpen: function() {
var val = this.get('items').objectAt(0).get('isOpen');
this.get('items').objectAt(0).set('isOpen', !val);
},
addChild: function() {
this.get('items').objectAt(0).get('children').pushObject(Node.create({title: 'Meow'}));
},
selectItems: function() {
this.set('selected', Em.A([this.get('items').objectAt(0).get('children').objectAt(0)]));
},
toggleEditingSelected: function() {
this.get('selected').forEach(function(item) {
item.set('editing', !item.get('editing'));
});
},
setIcon: function() {
this.get('selected').forEach(function(item) {
item.set('icon', 'fa fa-thumbs-o-up');
});
}
}
});
</script>
</head>
<body>
<script type="text/x-handlebars">
{{js-tree roots=items selected=selected}}
<button {{action 'overwriteItems'}}>Overwrite stuff</button>
<button {{action 'clearItems'}}>Clear stuff</button>
<button {{action 'addItem'}}>Add item</button>
<button {{action 'addEditingItem'}}>Add editing item</button>
<button {{action 'renameItem'}}>Rename item</button>
<button {{action 'addChild'}}>Add child</button>
<button {{action 'toggleDisabled'}}>Toggle disabled</button>
<button {{action 'toggleOpen'}}>Toggle Open</button>
<button {{action 'selectItems'}}>Select some item</button>
<button {{action 'toggleEditingSelected'}}>Edit/unedit selected items</button>
<button {{action 'setIcon'}}>Set icon</button>
<br />
Selected:
{{#each selected}}
{{title}}
{{parent.title}}
{{/each}}
</script>
</body>
</html>