forked from BasicPrimitives/javascript
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathCaseSelectedItems.html
More file actions
125 lines (107 loc) · 3.33 KB
/
CaseSelectedItems.html
File metadata and controls
125 lines (107 loc) · 3.33 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
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
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Selected items</title>
<script type="text/javascript" src="../../primitives.js"></script>
<link href="../../css/primitives.css" media="screen" rel="stylesheet" type="text/css" />
<script type='text/javascript'>
var control;
var treeItems = {};
var selectedItems = [];
document.addEventListener('DOMContentLoaded', function () {
var options = new primitives.OrgConfig();
var items = [
new primitives.OrgItemConfig({
id: 0,
parent: null,
title: "James Smith",
description: "VP, Public Sector",
image: "../images/photos/a.png"
}),
new primitives.OrgItemConfig({
id: 1,
parent: 0,
title: "Ted Lucas",
description: "VP, Human Resources",
image: "../images/photos/b.png"
}),
new primitives.OrgItemConfig({
id: 2,
parent: 0,
title: "Fritz Stuger",
description: "Business Solutions, US",
image: "../images/photos/c.png"
})
];
/* Create hash table where key = id & value = ItemConfig */
for (var index = 0, len = items.length; index < len; index += 1) {
treeItems[items[index].id] = items[index];
}
options.items = items;
options.cursorItem = 0;
options.hasSelectorCheckbox = primitives.Enabled.True;
options.onSelectionChanged = onSelectionChanged;
control = primitives.OrgDiagram(document.getElementById("basicdiagram"), options);
});
function onSelectionChanged() {
selectedItems = control.getOption("selectedItems");
UpdateCheckboxes();
UpdateMessage();
}
function onCheckboxClick(e) {
selectedItems = [];
for (var index = 0; index <= 2; index += 1) {
var checkbox = document.getElementById("button" + index);
if (checkbox.checked) {
selectedItems.push(index);
}
}
UpdateControl();
UpdateMessage();
};
function UpdateCheckboxes() {
var hash = {};
for (var index = 0; index < selectedItems.length; index += 1) {
hash[selectedItems[index]] = true;
}
for (var index = 0; index <= 2; index += 1) {
var checkbox = document.getElementById("button" + index);
if(hash.hasOwnProperty(index)) {
checkbox.setAttribute("checked", "checked");
} else {
checkbox.removeAttribute("checked");
}
}
}
function UpdateControl() {
control.setOption("selectedItems", selectedItems);
control.update(primitives.UpdateMode.Refresh);
}
function UpdateMessage() {
var message = "";
for (var index = 0; index < selectedItems.length; index++) {
var itemId = selectedItems[index];
var itemConfig = treeItems[itemId];
if (message != "") {
message += ", ";
}
message += "<b>'" + itemConfig.title + "'</b>";
}
var messagePanel = document.getElementById("message");
messagePanel.innerHTML = "User selected following items: " + message;
}
</script>
</head>
<body>
<div>
<p> Select following items:
<input id="button0" onclick="onCheckboxClick()" type="checkbox" /> James Smith
<input id="button1" onclick="onCheckboxClick()" type="checkbox" /> Ted Lucas
<input id="button2" onclick="onCheckboxClick()" type="checkbox" /> Fritz Stuger
</p>
<p id="message"></p>
<div id="basicdiagram" style="width: 640px; height: 400px; border-style: dotted; border-width: 1px;"></div>
</div>
</body>
</html>