Skip to content

Commit ad8ba48

Browse files
BasicPrimitivesBasicPrimitives
committed
Updated skipped levels sample
1 parent 9ab2081 commit ad8ba48

File tree

2 files changed

+203
-65
lines changed

2 files changed

+203
-65
lines changed

‎index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -360,7 +360,7 @@
360360
}
361361
},
362362
{
363-
label: "Skip levels with invisible items",
363+
label: "Children levels with invisible items",
364364
frameworks: {
365365
javascript: "samples/javascript.controls/CaseSkippedLevels.html"
366366
}

‎samples/javascript.controls/CaseSkippedLevels.html‎

Lines changed: 202 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -1,77 +1,215 @@
11
<!DOCTYPE html>
22
<html>
3-
<head>
4-
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
5-
<title>Skip levels in organization diagram</title>
63

7-
8-
<script type="text/javascript" src="../../primitives.js"></script>
9-
<link href="../../css/primitives.css" media="screen" rel="stylesheet" type="text/css" />
4+
<head>
5+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
6+
<title>Nodes Levels Alignment in Organizational Diagram</title>
107

11-
<script type='text/javascript'>
12-
var control;
8+
9+
<script type="text/javascript" src="../../primitives.js"></script>
10+
<link href="../../css/primitives.css" media="screen" rel="stylesheet" type="text/css" />
1311

14-
document.addEventListener('DOMContentLoaded', function () {
15-
var options = new primitives.OrgConfig();
12+
<script type="text/javascript">
13+
var control;
14+
var timer = null;
15+
document.addEventListener('DOMContentLoaded', function () {
16+
var options = new primitives.OrgConfig();
1617

1718
var items = [
18-
new primitives.OrgItemConfig({
19-
id: 0,
20-
parent: null,
21-
title: "James Smith",
22-
description: "VP, Public Sector",
23-
image: "../images/photos/a.png"
24-
}),
25-
new primitives.OrgItemConfig({
26-
id: 1,
27-
parent: 0,
28-
title: "Ted Lucas",
29-
description: "VP, Human Resources",
30-
image: "../images/photos/b.png"
31-
}),
32-
new primitives.OrgItemConfig({
33-
id: 4,
34-
parent: 1,
35-
title: "Ted Lucas 2",
36-
description: "VP, Human Resources",
37-
image: "../images/photos/b.png"
38-
}),
39-
new primitives.OrgItemConfig({
40-
id: 5,
41-
parent: 1,
42-
title: "Ted Lucas 3",
43-
description: "VP, Human Resources",
44-
image: "../images/photos/b.png"
45-
}),
46-
new primitives.OrgItemConfig({ id: 2, parent: 0, isVisible: false }),
47-
new primitives.OrgItemConfig({
48-
id: 3,
49-
parent: 2,
50-
title: "Fritz Stuger",
51-
description: "Business Solutions, US",
52-
image: "../images/photos/c.png"
53-
}),
54-
new primitives.OrgItemConfig({ id: 6, parent: null, isVisible: false }),
55-
new primitives.OrgItemConfig({ id: 7, parent: 6, isVisible: false }),
56-
new primitives.OrgItemConfig({
57-
id: 8,
58-
parent: 7,
59-
title: "Fritz Stuger 2",
60-
description: "Business Solutions, US",
61-
image: "../images/photos/c.png"
62-
})
19+
{ id: 1, parent: null, level: 0, description: "Co-Presidents, Platform Products & Services Division", email: "jeanwhit@name.com", groupTitleColor: "#4169e1", image: "../images/photos/w.png", itemTitleColor: "#4b0082", phone: "505-791-1689", title: "Jeanna White", label: "Jeanna White", groupTitle: "Root" },
20+
{ id: 2, parent: 1, level: 1, description: "Sr. VP, Server & Tools Division", email: "jameholt@name.com", groupTitleColor: "#4169e1", image: "../images/photos/e.png", itemTitleColor: "#4b0082", phone: "262-215-7998", title: "James Holt", label: "James Holt" },
21+
{ id: 3, parent: 2, level: 3, description: "VP, Server & Tools Marketing and Solutions", email: "thomwill@name.com", groupTitleColor: "#4169e1", image: "../images/photos/r.png", itemTitleColor: "#4b0082", phone: "904-547-5342", title: "Thomas Williams", label: "Thomas Williams" },
22+
{ id: 4, parent: 3, level: 4, description: "GM, Infrastructure Server and IT Pro Audience Marketing", email: "davikirb@name.com", groupTitleColor: "#4169e1", image: "../images/photos/t.png", itemTitleColor: "#4b0082", phone: "614-395-7238", title: "David Kirby", label: "David Kirby" },
23+
{ id: 5, parent: 3, level: 5, description: "GM, Name.com Experience Platforms and Solutions", email: "lynemalo@name.com", groupTitleColor: "#4169e1", image: "../images/photos/y.png", itemTitleColor: "#4b0082", phone: "540-822-3862", title: "Lynette Maloney", label: "Lynette Maloney" },
24+
{ id: 6, parent: 3, level: 7, description: "GM, Core Infrastructure Solutions", email: "glenzeig@name.com", groupTitleColor: "#4169e1", image: "../images/photos/u.png", itemTitleColor: "#4b0082", phone: "920-665-7222", title: "Glen Zeigler", label: "Glen Zeigler" },
25+
{ id: 7, parent: 1, level: 2, description: "GM, Patterns & Practices", email: "ionegall@name.com", groupTitleColor: "#4169e1", image: "../images/photos/i.png", itemTitleColor: "#4b0082", phone: "478-322-5539", title: "Ione Gallegos", label: "Ione Gallegos" },
26+
{ id: 8, parent: 7, level: 3, description: "GM, TechNet and MSDN", email: "joseclar@name.com", groupTitleColor: "#4169e1", image: "../images/photos/o.png", itemTitleColor: "#4b0082", phone: "401-218-3019", title: "Jose Clark", label: "Jose Clark" },
27+
{ id: 9, parent: 1, level: 3, description: "GM, Name Learning", email: "heatsimm@name.com", groupTitleColor: "#4169e1", image: "../images/photos/p.png", itemTitleColor: "#4b0082", phone: "620-368-3620", title: "Heather Simmons", label: "Heather Simmons" },
28+
{ id: 10, parent: 7, level: 5, description: "GM, Platform Strategy", email: "stevlaco@name.com", groupTitleColor: "#4169e1", image: "../images/photos/a.png", itemTitleColor: "#4b0082", phone: "805-800-7397", title: "Steven Lacombe", label: "Steven Lacombe" },
29+
{ id: 11, parent: 9, level: 4, description: "GM, Strategic Marketing and Communications", email: "nancsmit@name.com", groupTitleColor: "#4169e1", image: "../images/photos/s.png", itemTitleColor: "#4b0082", phone: "631-787-3495", title: "Nancy Smith", label: "Nancy Smith" },
30+
{ id: 12, parent: 8, level: 5, description: "GM, DML Server Marketing", email: "jeankend@name.com", groupTitleColor: "#4169e1", image: "../images/photos/d.png", itemTitleColor: "#4b0082", phone: "949-453-0415", title: "Jean Kendall", label: "Jean Kendall" },
31+
{ id: 13, parent: 11, level: 5, description: "GM, Application Platform and Development Marketing", email: "bradwhit@name.com", groupTitleColor: "#4169e1", image: "../images/photos/f.png", itemTitleColor: "#4b0082", phone: "502-528-6379", title: "Brad Whitt", label: "Brad Whitt" },
32+
{ id: 14, parent: 11, level: 6, description: "VP, Software & Enterprise Management Division", email: "sarakemp@name.com", groupTitleColor: "#4169e1", image: "../images/photos/g.png", itemTitleColor: "#4b0082", phone: "918-257-4218", title: "Sara Kemp", label: "Sara Kemp" },
33+
{ id: 15, parent: 11, level: 6, description: "GM, Systems Management Server", email: "briacruz@name.com", groupTitleColor: "#4169e1", image: "../images/photos/h.png", itemTitleColor: "#4b0082", phone: "320-833-9024", title: "Brian Cruz", label: "Brian Cruz" },
34+
{ id: 16, parent: 14, level: 7, description: "GM, Software Management", email: "johndrak@name.com", groupTitleColor: "#4169e1", image: "../images/photos/j.png", itemTitleColor: "#4b0082", phone: "469-644-8543", title: "John Drake", label: "John Drake" },
35+
{ id: 17, parent: 14, level: 7, description: "GM, Storage Platforms & Solutions", email: "patrperr@name.com", groupTitleColor: "#4169e1", image: "../images/photos/k.png", itemTitleColor: "#4b0082", phone: "781-515-5949", title: "Patrick Perry", label: "Patrick Perry" },
36+
{ id: 18, parent: 14, level: 7, description: "GM, Manageability and Deployment", email: "maryspen@name.com", groupTitleColor: "#4169e1", image: "../images/photos/l.png", itemTitleColor: "#4b0082", phone: "605-892-8662", title: "Mary Spencer", label: "Mary Spencer" },
37+
{ id: 19, parent: null, level: 3, description: "GM, Operations Manager", email: "thomdixo@name.com", groupTitleColor: "#4169e1", image: "../images/photos/z.png", itemTitleColor: "#4b0082", phone: "651-249-4047", title: "Thomas Dixon", label: "Thomas Dixon", groupTitle: "Root" },
38+
{ id: 20, parent: 19, level: 4, description: "Sr. VP, Software Server System", email: "georduon@name.com", groupTitleColor: "#4169e1", image: "../images/photos/x.png", itemTitleColor: "#4b0082", phone: "434-406-2189", title: "George Duong", label: "George Duong" },
39+
{ id: 21, parent: 19, level: 5, description: "GM, DML Server Strategy", email: "ralpmerc@name.com", groupTitleColor: "#4169e1", image: "../images/photos/c.png", itemTitleColor: "#4b0082", phone: "814-327-5895", title: "Ralph Mercer", label: "Ralph Mercer" },
40+
{ id: 22, parent: 21, level: 7, description: "GM, User Experience", email: "howawill@name.com", groupTitleColor: "#4169e1", image: "../images/photos/v.png", itemTitleColor: "#4b0082", phone: "703-740-8612", title: "Howard Williams", label: "Howard Williams" },
41+
{ id: 23, parent: 21, level: 7, description: "GM, DML Server Business Intelligence", email: "nathesco@name.com", groupTitleColor: "#4169e1", image: "../images/photos/b.png", itemTitleColor: "#4b0082", phone: "504-555-8165", title: "Nathalie Escobedo", label: "Nathalie Escobedo" },
42+
{ id: 24, parent: 7, level: 6, description: "VP, Developer Division", email: "ashlrue@name.com", groupTitleColor: "#4169e1", image: "../images/photos/n.png", itemTitleColor: "#4b0082", phone: "515-324-4969", title: "Ashley Rue", label: "Ashley Rue" }
6343
];
6444

65-
options.items = items;
66-
options.cursorItem = 0;
67-
options.hasSelectorCheckbox = primitives.Enabled.True;
45+
options.items = fillInvisibleLevels(items);
46+
47+
options.cursorItem = 0;
48+
options.normalLevelShift = 20;
49+
options.dotLevelShift = 10;
50+
options.lineLevelShift = 10;
51+
options.normalItemsInterval = 20;
52+
options.dotItemsInterval = 10;
53+
options.lineItemsInterval = 5;
54+
options.buttonsPanelSize = 48;
55+
56+
options.horizontalAlignment = primitives.HorizontalAlignmentType.Center;
57+
options.itemTitleSecondFontColor = primitives.Colors.White;
58+
options.pageFitMode = primitives.PageFitMode.None;
59+
options.orientationType = primitives.OrientationType.Left;
60+
options.hasSelectorCheckbox = primitives.Enabled.True;
61+
options.hasButtons = primitives.Enabled.True;
62+
options.leavesPlacementType = primitives.ChildrenPlacementType.Horizontal;
63+
options.childrenPlacementType = primitives.ChildrenPlacementType.Horizontal;
64+
options.arrowsDirection = primitives.GroupByType.Children;
65+
options.placeAdvisersAboveChildren = true;
66+
67+
options.annotations = [
68+
{
69+
annotationType: primitives.AnnotationType.Level,
70+
levels: [0],
71+
title: "Level 0",
72+
titleColor: primitives.Colors.RoyalBlue,
73+
offset: new primitives.Thickness(0, 0, 0, -1),
74+
lineWidth: new primitives.Thickness(0, 0, 0, 0),
75+
opacity: 0,
76+
borderColor: primitives.Colors.Gray,
77+
fillColor: primitives.Colors.Gray,
78+
lineType: primitives.LineType.Dotted
79+
},
80+
{
81+
annotationType: primitives.AnnotationType.Level,
82+
levels: [1],
83+
title: "Level 1",
84+
titleColor: primitives.Colors.RoyalBlue,
85+
offset: new primitives.Thickness(0, 0, 0, -1),
86+
lineWidth: new primitives.Thickness(0, 0, 0, 0),
87+
opacity: 0.08,
88+
borderColor: primitives.Colors.Gray,
89+
fillColor: primitives.Colors.Gray,
90+
lineType: primitives.LineType.Dotted
91+
},
92+
{
93+
annotationType: primitives.AnnotationType.Level,
94+
levels: [2],
95+
title: "Level 2",
96+
titleColor: primitives.Colors.RoyalBlue,
97+
offset: new primitives.Thickness(0, 0, 0, -1),
98+
lineWidth: new primitives.Thickness(0, 0, 0, 0),
99+
opacity: 0,
100+
borderColor: primitives.Colors.Gray,
101+
fillColor: primitives.Colors.Gray,
102+
lineType: primitives.LineType.Dotted
103+
},
104+
{
105+
annotationType: primitives.AnnotationType.Level,
106+
levels: [3],
107+
title: "Level 3",
108+
titleColor: primitives.Colors.RoyalBlue,
109+
offset: new primitives.Thickness(0, 0, 0, -1),
110+
lineWidth: new primitives.Thickness(0, 0, 0, 0),
111+
opacity: 0.08,
112+
borderColor: primitives.Colors.Gray,
113+
fillColor: primitives.Colors.Gray,
114+
lineType: primitives.LineType.Dotted
115+
},
116+
{
117+
annotationType: primitives.AnnotationType.Level,
118+
levels: [4],
119+
title: "Level 4",
120+
titleColor: primitives.Colors.RoyalBlue,
121+
offset: new primitives.Thickness(0, 0, 0, -1),
122+
lineWidth: new primitives.Thickness(0, 0, 0, 0),
123+
opacity: 0,
124+
borderColor: primitives.Colors.Gray,
125+
fillColor: primitives.Colors.Gray,
126+
lineType: primitives.LineType.Dotted
127+
},
128+
{
129+
annotationType: primitives.AnnotationType.Level,
130+
levels: [5],
131+
title: "Level 5",
132+
titleColor: primitives.Colors.RoyalBlue,
133+
offset: new primitives.Thickness(0, 0, 0, -1),
134+
lineWidth: new primitives.Thickness(0, 0, 0, 0),
135+
opacity: 0.08,
136+
borderColor: primitives.Colors.Gray,
137+
fillColor: primitives.Colors.Gray,
138+
lineType: primitives.LineType.Dotted
139+
},
140+
{
141+
annotationType: primitives.AnnotationType.Level,
142+
levels: [6],
143+
title: "Level 6",
144+
titleColor: primitives.Colors.RoyalBlue,
145+
offset: new primitives.Thickness(0, 0, 0, -1),
146+
lineWidth: new primitives.Thickness(0, 0, 0, 0),
147+
opacity: 0,
148+
borderColor: primitives.Colors.Gray,
149+
fillColor: primitives.Colors.Gray,
150+
lineType: primitives.LineType.Dotted
151+
},
152+
{
153+
annotationType: primitives.AnnotationType.Level,
154+
levels: [7],
155+
title: "Level 7",
156+
titleColor: primitives.Colors.RoyalBlue,
157+
offset: new primitives.Thickness(0, 0, 0, -1),
158+
lineWidth: new primitives.Thickness(0, 0, 0, 0),
159+
opacity: 0.08,
160+
borderColor: primitives.Colors.Gray,
161+
fillColor: primitives.Colors.Gray,
162+
lineType: primitives.LineType.Dotted
163+
}
164+
];
68165

69-
control = primitives.OrgDiagram(document.getElementById('basicdiagram'), options);
70-
});
166+
control = primitives.OrgDiagram(document.getElementById("basicdiagram"), options);
71167

72-
</script>
168+
window.addEventListener('resize', function (event) {
169+
onWindowResize();
170+
});
171+
});
172+
173+
function fillInvisibleLevels(items) {
174+
var hash = {};
175+
var maximumId = 0;
176+
items.forEach(item => {
177+
hash[item.id] = item;
178+
maximumId = Math.max(maximumId, item.id)
179+
})
180+
var invisibleItems = [];
181+
items.forEach(item => {
182+
var {id, parent, level} = item;
183+
if(level > 0) {
184+
var parentItem = hash[parent];
185+
var gap = (parentItem != null) ? (level - parentItem.level - 1) : level;
186+
while(gap > 0) {
187+
maximumId +=1;
188+
invisibleItems.push({ id: maximumId, parent: item.parent, level: level - gap, isVisible: false });
189+
item.parent = maximumId;
190+
gap-=1;
191+
}
192+
}
193+
});
194+
return [...items, ...invisibleItems];
195+
}
196+
197+
function onWindowResize() {
198+
if (timer == null) {
199+
timer = window.setTimeout(function () {
200+
control.update(primitives.UpdateMode.Refresh);
201+
window.clearTimeout(timer);
202+
timer = null;
203+
}, 300);
204+
}
205+
}
206+
</script>
73207
</head>
74-
<body>
75-
<div id="basicdiagram" style="width: 640px; height: 480px; border-style: dotted; border-width: 1px;"></div>
208+
209+
<body style="overflow:hidden;">
210+
<div id="basicdiagram"
211+
style="position: absolute; border-style: dotted; border-width: 0px; top: 0; right: 0; bottom: 0; left: 0;">
212+
</div>
76213
</body>
77-
</html>
214+
215+
</html>

0 commit comments

Comments
 (0)