moel@348
|
1 |
/*
|
moel@348
|
2 |
|
moel@348
|
3 |
This Source Code Form is subject to the terms of the Mozilla Public
|
moel@348
|
4 |
License, v. 2.0. If a copy of the MPL was not distributed with this
|
moel@348
|
5 |
file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
moel@348
|
6 |
|
moel@348
|
7 |
Copyright (C) 2012 Prince Samuel <prince.samuel@gmail.com>
|
moel@348
|
8 |
|
moel@348
|
9 |
*/
|
moel@348
|
10 |
|
moel@348
|
11 |
ko.bindingHandlers.treeTable = {
|
moel@348
|
12 |
update: function(element, valueAccessor, allBindingsAccessor) {
|
moel@348
|
13 |
var dependency = ko.utils.unwrapObservable(valueAccessor()),
|
moel@348
|
14 |
options = ko.toJS(allBindingsAccessor().treeOptions || {});
|
moel@348
|
15 |
|
moel@348
|
16 |
setTimeout(function() { $(element).treeTable(options); }, 0);
|
moel@348
|
17 |
}
|
moel@348
|
18 |
};
|
moel@348
|
19 |
|
moel@348
|
20 |
var node = function(config, parent) {
|
moel@348
|
21 |
this.parent = parent;
|
moel@348
|
22 |
var _this = this;
|
moel@348
|
23 |
|
moel@348
|
24 |
var mappingOptions = {
|
moel@348
|
25 |
Children : {
|
moel@348
|
26 |
create: function(args) {
|
moel@348
|
27 |
return new node(args.data, _this);
|
moel@348
|
28 |
}
|
moel@348
|
29 |
,
|
moel@348
|
30 |
key: function(data) {
|
moel@348
|
31 |
return ko.utils.unwrapObservable(data.id);
|
moel@348
|
32 |
}
|
moel@348
|
33 |
}
|
moel@348
|
34 |
};
|
moel@348
|
35 |
|
moel@348
|
36 |
ko.mapping.fromJS(config, mappingOptions, this);
|
moel@348
|
37 |
}
|
moel@348
|
38 |
|
moel@348
|
39 |
$(function(){
|
moel@348
|
40 |
$.getJSON('data.json', function(data) {
|
moel@348
|
41 |
viewModel = new node(data, undefined);
|
moel@348
|
42 |
|
moel@348
|
43 |
(function() {
|
moel@348
|
44 |
function flattenChildren(children, result) {
|
moel@348
|
45 |
ko.utils.arrayForEach(children(), function(child) {
|
moel@348
|
46 |
result.push(child);
|
moel@348
|
47 |
if (child.Children) {
|
moel@348
|
48 |
flattenChildren(child.Children, result);
|
moel@348
|
49 |
}
|
moel@348
|
50 |
});
|
moel@348
|
51 |
}
|
moel@348
|
52 |
|
moel@348
|
53 |
viewModel.flattened = ko.dependentObservable(function() {
|
moel@348
|
54 |
var result = []; //root node
|
moel@348
|
55 |
|
moel@348
|
56 |
if (viewModel.Children) {
|
moel@348
|
57 |
flattenChildren(viewModel.Children, result);
|
moel@348
|
58 |
}
|
moel@348
|
59 |
|
moel@348
|
60 |
return result;
|
moel@348
|
61 |
});
|
moel@348
|
62 |
|
moel@348
|
63 |
viewModel.update = function() {
|
moel@348
|
64 |
$.getJSON('data.json', function(data) {
|
moel@348
|
65 |
ko.mapping.fromJS(data, {}, viewModel);
|
moel@348
|
66 |
});
|
moel@348
|
67 |
}
|
moel@348
|
68 |
|
moel@348
|
69 |
viewModel.rate = 3000; //milliseconds
|
moel@348
|
70 |
viewModel.timer = {};
|
moel@348
|
71 |
|
moel@348
|
72 |
viewModel.startAuto = function (){
|
moel@348
|
73 |
viewModel.timer = setInterval(viewModel.update, viewModel.rate);
|
moel@348
|
74 |
}
|
moel@348
|
75 |
|
moel@348
|
76 |
viewModel.stopAuto = function (){
|
moel@348
|
77 |
clearInterval(viewModel.timer);
|
moel@348
|
78 |
}
|
moel@348
|
79 |
|
moel@348
|
80 |
viewModel.auto_refresh = ko.observable(false);
|
moel@348
|
81 |
viewModel.toggleAuto = ko.dependentObservable(function() {
|
moel@348
|
82 |
if (viewModel.auto_refresh())
|
moel@348
|
83 |
viewModel.startAuto();
|
moel@348
|
84 |
else
|
moel@348
|
85 |
viewModel.stopAuto();
|
moel@348
|
86 |
}, viewModel);
|
moel@348
|
87 |
|
moel@348
|
88 |
})();
|
moel@348
|
89 |
|
moel@348
|
90 |
ko.applyBindings(viewModel);
|
moel@348
|
91 |
$("#tree").treeTable({
|
moel@348
|
92 |
initialState: "expanded",
|
moel@348
|
93 |
clickableNodeNames: true
|
moel@348
|
94 |
});
|
moel@348
|
95 |
});
|
moel@348
|
96 |
$( "#refresh" ).button();
|
moel@348
|
97 |
$( "#auto_refresh" ).button();
|
moel@348
|
98 |
$( "#slider" ).slider({
|
moel@348
|
99 |
value:3,
|
moel@348
|
100 |
min: 1,
|
moel@348
|
101 |
max: 10,
|
moel@348
|
102 |
slide: function( event, ui ) {
|
moel@348
|
103 |
viewModel.rate = ui.value * 1000;
|
moel@348
|
104 |
if (viewModel.auto_refresh()) {
|
moel@348
|
105 |
//reset the timer
|
moel@348
|
106 |
viewModel.stopAuto();
|
moel@348
|
107 |
viewModel.startAuto();
|
moel@348
|
108 |
}
|
moel@348
|
109 |
$( "#lbl" ).text( ui.value + "s");
|
moel@348
|
110 |
}
|
moel@348
|
111 |
});
|
moel@348
|
112 |
$( "#lbl" ).text( $( "#slider" ).slider( "value" ) + "s");
|
moel@348
|
113 |
|
moel@348
|
114 |
});
|
moel@348
|
115 |
|
moel@348
|
116 |
|