forked from BasicPrimitives/javascript
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathCaseFamilyChartRelations.html
More file actions
100 lines (84 loc) · 4.78 KB
/
Copy pathCaseFamilyChartRelations.html
File metadata and controls
100 lines (84 loc) · 4.78 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
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Family Chart Relations</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;
document.addEventListener('DOMContentLoaded', function () {
var options = new primitives.FamConfig();
var items = [
{ id: 1, title: "Thomas Williams", label: "Thomas Williams", description: "1", image: "images/photos/t.png" },
{ id: 2, title: "Mary Spencer", label: "Mary Spencer", description: "2", image: "images/photos/m.png" },
{ id: 3, title: "David Kirby", label: "David Kirby", description: "3", image: "images/photos/d.png" },
{ id: 4, title: "Brad Williams", label: "Brad Williams", description: "4", image: "images/photos/b.png" },
{ id: 5, title: "Mike Kirby", label: "Mike Kirby", description: "5", image: "images/photos/m.png" },
{ id: 6, title: "Lynette Maloney", label: "Lynette Maloney", description: "6", image: "images/photos/m.png" },
{ id: 7, title: "Sara Kemp", label: "Sara Kemp", description: "7", image: "images/photos/s.png" },
{ id: 8, title: "Leon Kemp", label: "Leon Kemp", description: "8", image: "images/photos/l.png" },
{ id: 9, parents: [1, 2, 3, 4, 5, 6, 7, 8], title: "Thomas Williams", label: "Thomas Williams", description: "1", image: "images/photos/t.png" },
{ id: 10, parents: [1, 2, 3, 4, 5, 6, 7, 8], title: "Mary Spencer", label: "Mary Spencer", description: "2", image: "images/photos/m.png" },
{ id: 11, parents: [1, 2, 3, 4, 5, 6, 7, 8], title: "David Kirby", label: "David Kirby", description: "3", image: "images/photos/d.png" },
{ id: 12, parents: [1, 2, 3, 4, 5, 6, 7, 8], title: "Brad Williams", label: "Brad Williams", description: "4", image: "images/photos/b.png" },
{ id: 13, parents: [1, 2, 3, 4, 5, 6, 7, 8], title: "Mike Kirby", label: "Mike Kirby", description: "5", image: "images/photos/m.png" },
{ id: 14, parents: [1, 2, 3, 4, 5, 6, 7, 8], title: "Lynette Maloney", label: "Lynette Maloney", description: "6", image: "images/photos/m.png" },
{ id: 15, parents: [1, 2, 3, 4, 5, 6, 7, 8], title: "Sara Kemp", label: "Sara Kemp", description: "7", image: "images/photos/s.png" },
{ id: 16, parents: [1, 2, 3, 4, 5, 6, 7, 8], title: "Leon Kemp", label: "Leon Kemp", description: "8", image: "images/photos/l.png" }
];
options.pageFitMode = primitives.PageFitMode.AutoSize;
options.autoSizeMinimum = new primitives.Size(100, 100);
options.autoSizeMaximum = new primitives.Size(2000, 2000);
options.items = items;
options.cursorItem = 2;
options.linesWidth = 1;
options.linesColor = "black";
options.hasSelectorCheckbox = primitives.Enabled.False;
options.normalLevelShift = 20;
options.dotLevelShift = 20;
options.lineLevelShift = 20;
options.normalItemsInterval = 10;
options.dotItemsInterval = 10;
options.lineItemsInterval = 10;
options.arrowsDirection = primitives.GroupByType.Parents;
options.showExtraArrows = false;
options.defaultTemplateName = "info";
options.templates = [getInfoTemplate()];
options.onItemRender = onTemplateRender;
control = primitives.FamDiagram(document.getElementById("basicdiagram"), options);
});
function onTemplateRender(event, data) {
switch (data.renderingMode) {
case primitives.RenderingMode.Create:
/* Initialize template content here */
break;
case primitives.RenderingMode.Update:
/* Update template content here */
break;
}
var itemConfig = data.context;
if (data.templateName == "info") {
var title = data.element.firstChild;
title.textContent = itemConfig.title;
}
}
function getInfoTemplate() {
var result = new primitives.TemplateConfig();
result.name = "info";
result.itemSize = new primitives.Size(80, 36);
result.minimizedItemSize = new primitives.Size(3, 3);
result.highlightPadding = new primitives.Thickness(4, 4, 4, 4);
result.itemTemplate =
'<div class="bp-item bp-corner-all bt-item-frame" style="width:' + result.itemSize.width + 'px; height: ' + result.itemSize.height + 'px;">'
+ '<div name="title" class="bp-item" style="top: 3px; left: 6px; width: 68px; height: 28px; font-size: 12px;">'
+ '</div>'
+ '</div>';
return result;
}
</script>
</head>
<body>
<div id="basicdiagram" style="border-style: dotted; border-width: 1px;"></div>
</body>
</html>