forked from BasicPrimitives/javascript
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathCaseAutoSize.html
More file actions
107 lines (99 loc) · 3.92 KB
/
CaseAutoSize.html
File metadata and controls
107 lines (99 loc) · 3.92 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
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Auto Size Diagram</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 sizes = {
"640*480": new primitives.Size(640, 480),
"800*600": new primitives.Size(800, 600),
"1024*768": new primitives.Size(1024, 768),
"1280*1024": new primitives.Size(1280, 1024),
"Unlimited": new primitives.Size(100000, 100000)
}
document.addEventListener('DOMContentLoaded', function () {
var options = new primitives.OrgConfig();
var items = [
new primitives.OrgItemConfig({
id: 0,
parent: null,
title: "Title 4",
description: "Description",
image: "../images/photos/a.png"
})
];
var id = 1;
for (var index = 0; index < 4; index++) {
items.push(new primitives.OrgItemConfig({
id: ++id,
parent: 0,
title: id.toString() + " Title",
description: id.toString() + " Description",
image: "../images/photos/c.png"
}));
var parent = id;
for (var index2 = 0; index2 < 2; index2++) {
items.push(new primitives.OrgItemConfig({
id: ++id,
parent: parent,
title: id.toString() + " Title",
description: id.toString() + " Description",
image: "../images/photos/c.png"
}));
}
}
options.items = items;
options.cursorItem = 0;
options.pageFitMode = primitives.PageFitMode.AutoSize;
options.autoSizeMinimum = sizes[getRadioValue("autoSizeMinimum")];
options.autoSizeMaximum = sizes[getRadioValue("autoSizeMaximum")];
options.showFrame = false;
control = primitives.OrgDiagram(document.getElementById("diagram"), options);
});
function Update() {
var autoSizeMinimum = sizes[getRadioValue("autoSizeMinimum")];
var autoSizeMaximum = sizes[getRadioValue("autoSizeMaximum")];
var showFrame = (getRadioValue("showFrame") == "1" ? true : false);
control.setOptions({
autoSizeMinimum: autoSizeMinimum,
autoSizeMaximum: autoSizeMaximum,
showFrame: showFrame
});
control.update(primitives.UpdateMode.Refresh);
}
function getRadioValue(name) {
var radios = document.getElementsByName(name);
for (var i = 0; i < radios.length; i++) {
if (radios[i].checked) {
return radios[i].value;
}
}
return result;
}
</script>
</head>
<body>
<p>
Show Selected Items on the frame:
<label><input onclick="Update()" name="showFrame" type="radio" value="1">Yes</label>
<label><input onclick="Update()" name="showFrame" type="radio" value="0" checked="">No</label>
</p>
<p id="autoSizeMinimum">Minimum Auto Size:
<br><label><input onclick="Update()" name="autoSizeMinimum" type="radio" value="640*480" checked="">640*480</label>
<label><input onclick="Update()" name="autoSizeMinimum" type="radio" value="800*600">800*600</label>
<label><input onclick="Update()" name="autoSizeMinimum" type="radio" value="1024*768">1024*768</label>
<label><input onclick="Update()" name="autoSizeMinimum" type="radio" value="1280*1024">1280*1024</label>
</p>
<p id="autoSizeMaximum">Maximum Auto Size:
<br><label><input onclick="Update()" name="autoSizeMaximum" type="radio" value="640*480">640*480</label>
<label><input onclick="Update()" name="autoSizeMaximum" type="radio" value="800*600" checked="">800*600</label>
<label><input onclick="Update()" name="autoSizeMaximum" type="radio" value="1024*768">1024*768</label>
<label><input onclick="Update()" name="autoSizeMaximum" type="radio" value="1280*1024">1280*1024</label>
<label><input onclick="Update()" name="autoSizeMaximum" type="radio" value="Unlimited">Unlimited</label>
</p>
<div id="diagram" style="border-style: dotted; border-width: 1px;"></div>
</body>
</html>