orgchart 5.0.0 → 6.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (76) hide show
  1. package/.github/workflows/publish.yml +32 -0
  2. package/README.md +172 -93
  3. package/README.zh-cn.md +163 -74
  4. package/README.zh-tw.md +163 -74
  5. package/bower.json +6 -9
  6. package/demo/10000-nodes.html +139 -0
  7. package/demo/ajax-datasource.html +46 -45
  8. package/demo/bottom2top.html +12 -9
  9. package/demo/center-on-selected-node.html +21 -17
  10. package/demo/color-coded.html +12 -9
  11. package/demo/css/style.css +28 -0
  12. package/demo/custom-icons.html +12 -9
  13. package/demo/custom-template.html +12 -9
  14. package/demo/data-prop-compact.html +11 -8
  15. package/demo/data-prop-hybrid.html +79 -50
  16. package/demo/default-collapsed.html +12 -9
  17. package/demo/drag-drop-hybrid-chart.html +17 -14
  18. package/demo/drag-drop.html +21 -16
  19. package/demo/edit-chart.html +148 -94
  20. package/demo/edit-hybrid-chart.html +178 -135
  21. package/demo/expand-to-given-depth.html +30 -22
  22. package/demo/export-chart-pdf.html +12 -9
  23. package/demo/export-chart-with-pictures.html +19 -12
  24. package/demo/export-chart.html +12 -9
  25. package/demo/family-tree.html +14 -11
  26. package/demo/familytree-custom-properties.html +108 -0
  27. package/demo/filter-node.html +104 -57
  28. package/demo/get-hierarchy.html +17 -12
  29. package/demo/get-related-nodes.html +27 -17
  30. package/demo/index.html +5 -2
  31. package/demo/integrate-map.html +32 -27
  32. package/demo/left2right.html +12 -9
  33. package/demo/level-offset.html +16 -15
  34. package/demo/link-node.html +12 -9
  35. package/demo/local-datasource.html +11 -8
  36. package/demo/minimap.html +224 -0
  37. package/demo/nodes-of-different-widths.html +11 -8
  38. package/demo/ondemand-loading-data.html +88 -91
  39. package/demo/option-createNode.html +28 -17
  40. package/demo/pan-zoom.html +20 -11
  41. package/demo/reload-data.html +17 -14
  42. package/demo/report-path.html +59 -29
  43. package/demo/responsive-design.html +14 -11
  44. package/demo/right2left.html +12 -9
  45. package/demo/toggle-sibs-resp.html +12 -9
  46. package/demo/ul-datasource.html +11 -8
  47. package/demo/vertical-level.html +12 -9
  48. package/dist/css/{jquery.orgchart.css → orgchart.css} +143 -80
  49. package/dist/css/orgchart.min.css +1 -0
  50. package/dist/js/orgchart.js +4101 -0
  51. package/dist/js/orgchart.min.js +2 -0
  52. package/dist/js/orgchart.min.js.map +1 -0
  53. package/gulpfile.js +37 -26
  54. package/package.json +32 -32
  55. package/src/css/{jquery.orgchart.css → orgchart.css} +143 -80
  56. package/src/js/orgchart.js +4101 -0
  57. package/test/cypress/e2e/demo-interactions.cy.js +91 -0
  58. package/test/cypress/e2e/demo-rendering.cy.js +100 -0
  59. package/test/cypress/e2e/drag-drop-hybrid-chart.cy.js +22 -0
  60. package/test/cypress/e2e/edit-chart.cy.js +20 -0
  61. package/test/cypress/e2e/level-offset.cy.js +21 -0
  62. package/test/cypress/e2e/minimap.cy.js +66 -0
  63. package/test/cypress/e2e/pan-zoom.cy.js +165 -0
  64. package/test/cypress/e2e/report-path.cy.js +20 -0
  65. package/test/cypress/e2e/vertical-vevel.cy.js +5 -3
  66. package/test/e2e/local-datasource/test.js +1 -1
  67. package/test/integration/init-tests.js +168 -62
  68. package/test/integration/tests.js +1034 -56
  69. package/test/unit/lifecycle-builders-export.tests.js +1426 -0
  70. package/test/unit/minimap.tests.js +210 -0
  71. package/test/unit/tests.js +2372 -252
  72. package/dist/css/jquery.orgchart.min.css +0 -1
  73. package/dist/js/jquery.orgchart.js +0 -1741
  74. package/dist/js/jquery.orgchart.min.js +0 -5
  75. package/dist/js/jquery.orgchart.min.js.map +0 -1
  76. package/src/js/jquery.orgchart.js +0 -1741
package/demo/option-createNode.html CHANGED
@@ -2,9 +2,9 @@
2
2
  <html lang="en">
3
3
  <head>
4
4
  <meta charset="utf-8">
5
- <title>Organization Chart Plugin</title>
5
+ <title>OrgChart createNode Callback Demo</title>
6
6
  <link rel="icon" href="img/logo.png">
7
- <link rel="stylesheet" href="css/jquery.orgchart.css">
7
+ <link rel="stylesheet" href="css/orgchart.css">
8
8
  <link rel="stylesheet" href="css/style.css">
9
9
  <style type="text/css">
10
10
  .orgchart .second-menu-icon {
@@ -38,14 +38,16 @@
38
38
  </style>
39
39
  </head>
40
40
  <body>
41
+ <section class="demo-notes">
42
+ <h1>createNode Callback Demo</h1>
43
+ <p>This demo uses the createNode callback to append custom secondary UI after each node is created.</p>
44
+ </section>
41
45
  <div id="chart-container"></div>
42
-
43
- <script type="text/javascript" src="js/jquery.min.js"></script>
44
- <script type="text/javascript" src="js/jquery.orgchart.js"></script>
46
+ <script type="text/javascript" src="js/orgchart.js"></script>
45
47
  <script type="text/javascript">
46
- $(function() {
48
+ document.addEventListener('DOMContentLoaded', () => {
47
49
 
48
- var datascource = {
50
+ const datasource = {
49
51
  'id': '1',
50
52
  'name': 'Lao Lao',
51
53
  'title': 'general manager',
@@ -71,20 +73,29 @@
71
73
  ]
72
74
  };
73
75
 
74
- $('#chart-container').orgchart({
75
- 'data' : datascource,
76
+ const oc = new OrgChart({
77
+ chartContainer: '#chart-container',
78
+ 'data' : datasource,
76
79
  'visibleLevel': 2,
77
80
  'nodeContent': 'title',
78
81
  'nodeID': 'id',
79
- 'createNode': function($node, data) {
80
- var secondMenuIcon = $('<i>', {
81
- 'class': 'oci oci-info-circle second-menu-icon',
82
- click: function() {
83
- $(this).siblings('.second-menu').toggle();
84
- }
82
+ 'createNode': function(node, data) {
83
+ const secondMenuIcon = document.createElement('i');
84
+ const secondMenu = document.createElement('div');
85
+ const avatar = document.createElement('img');
86
+
87
+ secondMenuIcon.className = 'oci oci-info-circle second-menu-icon';
88
+ secondMenuIcon.addEventListener('click', () => {
89
+ secondMenu.style.display = secondMenu.style.display === 'block' ? 'none' : 'block';
85
90
  });
86
- var secondMenu = '<div class="second-menu"><img class="avatar" src="img/avatar/' + data.id + '.jpg"></div>';
87
- $node.append(secondMenuIcon).append(secondMenu);
91
+
92
+ secondMenu.className = 'second-menu';
93
+ avatar.className = 'avatar';
94
+ avatar.src = 'img/avatar/' + data.id + '.jpg';
95
+
96
+ secondMenu.appendChild(avatar);
97
+ node.appendChild(secondMenuIcon);
98
+ node.appendChild(secondMenu);
88
99
  }
89
100
  });
90
101
 
package/demo/pan-zoom.html CHANGED
@@ -2,23 +2,31 @@
2
2
  <html lang="en">
3
3
  <head>
4
4
  <meta charset="utf-8">
5
- <title>Organization Chart Plugin</title>
5
+ <title>OrgChart Pan and Zoom Demo</title>
6
6
  <link rel="icon" href="img/logo.png">
7
- <link rel="stylesheet" href="css/jquery.orgchart.css">
7
+ <link rel="stylesheet" href="css/orgchart.css">
8
8
  <link rel="stylesheet" href="css/style.css">
9
9
  <style type="text/css">
10
+ body {
11
+ padding: 0.5rem;
12
+ }
10
13
  .orgchart { background: white; }
11
14
  </style>
12
15
  </head>
13
16
  <body>
17
+ <section class="demo-notes">
18
+ <h1>Pan and Zoom Demo</h1>
19
+ <p>Mouse wheel zoom is anchored to the current mouse position inside the chart container, so the content under the pointer should stay under the pointer while zooming.</p>
20
+ <p>Wheel input is ignored when the pointer is outside the chart container bounds. On touch devices, pinch zoom is anchored to the midpoint between the two fingers.</p>
21
+ <p>Drag the chart to pan. Use mouse wheel or touch pinch to verify the zoom anchor behavior.</p>
22
+ <p>If you want an overview navigator for the same interaction model, open <a href="minimap.html" target="_blank">the minimap demo</a> to move the main chart through the viewport rectangle in the lower-right corner.</p>
23
+ </section>
14
24
  <div id="chart-container"></div>
15
-
16
- <script type="text/javascript" src="js/jquery.min.js"></script>
17
- <script type="text/javascript" src="js/jquery.orgchart.js"></script>
25
+ <script type="text/javascript" src="js/orgchart.js"></script>
18
26
  <script type="text/javascript">
19
- $(function() {
27
+ document.addEventListener('DOMContentLoaded', () => {
20
28
 
21
- var datascource = {
29
+ const datasource = {
22
30
  'name': 'Lao Lao',
23
31
  'title': 'general manager',
24
32
  'children': [
@@ -43,16 +51,17 @@
43
51
  ]
44
52
  };
45
53
 
46
- var oc = $('#chart-container').orgchart({
47
- 'data' : datascource,
54
+ const oc = new OrgChart({
55
+ chartContainer: '#chart-container',
56
+ 'data' : datasource,
48
57
  'nodeContent': 'title',
49
58
  'pan': true,
50
59
  'zoom': true
51
60
  });
52
61
 
53
- oc.$chartContainer.on('touchmove', function(event) {
62
+ oc.chartContainer.addEventListener('touchmove', function(event) {
54
63
  event.preventDefault();
55
- });
64
+ }, { passive: false });
56
65
 
57
66
  });
58
67
  </script>
package/demo/reload-data.html CHANGED
@@ -2,26 +2,28 @@
2
2
  <html lang="en">
3
3
  <head>
4
4
  <meta charset="utf-8">
5
- <title>Organization Chart Plugin</title>
5
+ <title>OrgChart Reload Data Demo</title>
6
6
  <link rel="icon" href="img/logo.png">
7
- <link rel="stylesheet" href="css/jquery.orgchart.css">
7
+ <link rel="stylesheet" href="css/orgchart.css">
8
8
  <link rel="stylesheet" href="css/style.css">
9
9
  <style type="text/css">
10
10
  button { padding: 0.5rem 1rem; font-size: 1rem; }
11
11
  </style>
12
12
  </head>
13
13
  <body>
14
+ <section class="demo-notes">
15
+ <h1>Reload Data Demo</h1>
16
+ <p>This demo re-initializes the same chart container with different datasources so you can compare how option changes refresh the chart.</p>
17
+ </section>
14
18
  <button style="margin: 10px;" id="btn-chart1">chart 1</button>
15
19
  <button style="margin: 10px;" id="btn-chart2">chart 2</button>
16
20
  <button style="margin: 10px;" id="btn-chart3">chart 3</button>
17
21
  <div id="chart-container"></div>
18
-
19
- <script type="text/javascript" src="js/jquery.min.js"></script>
20
- <script type="text/javascript" src="js/jquery.orgchart.js"></script>
22
+ <script type="text/javascript" src="js/orgchart.js"></script>
21
23
  <script type="text/javascript">
22
- $(function() {
24
+ document.addEventListener('DOMContentLoaded', () => {
23
25
 
24
- var datasource = {
26
+ const datasource = {
25
27
  'name': 'Lao Lao',
26
28
  'title': 'general manager',
27
29
  'children': [
@@ -36,17 +38,18 @@
36
38
  ]
37
39
  };
38
40
 
39
- var oc = $('#chart-container').orgchart({
41
+ const oc = new OrgChart({
42
+ chartContainer: '#chart-container',
40
43
  'data' : datasource,
41
44
  'nodeContent': 'title'
42
45
  });
43
46
 
44
- $('#btn-chart1').on('click', function (argument) {
47
+ document.getElementById('btn-chart1').addEventListener('click', () => {
45
48
  oc.init({ 'data': datasource });
46
49
  });
47
50
 
48
- $('#btn-chart2').on('click', function (argument) {
49
- var data = { 'name': 'Su Miao', 'title': 'department manager',
51
+ document.getElementById('btn-chart2').addEventListener('click', () => {
52
+ const data = { 'name': 'Su Miao', 'title': 'department manager',
50
53
  'children': [
51
54
  { 'name': 'Tie Hua', 'title': 'senior engineer' },
52
55
  { 'name': 'Hei Hei', 'title': 'senior engineer' }
@@ -55,8 +58,8 @@
55
58
  oc.init({ 'data': data });
56
59
  });
57
60
 
58
- $('#btn-chart3').on('click', function (argument) {
59
- var data = { 'name': 'Hei Hei', 'title': 'senior engineer',
61
+ document.getElementById('btn-chart3').addEventListener('click', () => {
62
+ const data = { 'name': 'Hei Hei', 'title': 'senior engineer',
60
63
  'children': [
61
64
  { 'name': 'Pang Pang', 'title': 'engineer' },
62
65
  { 'name': 'Dan Zai', 'title': 'UE engineer' },
@@ -66,7 +69,7 @@
66
69
  oc.init({ 'data': data });
67
70
  });
68
71
 
69
- });
72
+ });
70
73
  </script>
71
74
  </body>
72
75
  </html>
package/demo/report-path.html CHANGED
@@ -2,9 +2,9 @@
2
2
  <html lang="en">
3
3
  <head>
4
4
  <meta charset="utf-8">
5
- <title>Organization Chart Plugin</title>
5
+ <title>OrgChart Report Path Demo</title>
6
6
  <link rel="icon" href="img/logo.png">
7
- <link rel="stylesheet" href="css/jquery.orgchart.css">
7
+ <link rel="stylesheet" href="css/orgchart.css">
8
8
  <link rel="stylesheet" href="css/style.css">
9
9
  <style type="text/css">
10
10
  #edit-panel {
@@ -18,19 +18,26 @@
18
18
  </style>
19
19
  </head>
20
20
  <body>
21
+ <section class="demo-notes">
22
+ <h1>Report Path Demo</h1>
23
+ <p>This demo lets you select a node and then draw the reporting path back through its management chain.</p>
24
+ </section>
21
25
  <div id="chart-container"></div>
22
26
  <div id="edit-panel" class="view-state">
23
27
  <input type="text" id="selected-node" placeholder="please select node" readonly="true">
24
28
  <button type="button" id="btn-report-path">draw report path</button>
25
29
  <button type="button" id="btn-reset">reset</button>
26
30
  </div>
27
-
28
- <script type="text/javascript" src="js/jquery.min.js"></script>
29
- <script type="text/javascript" src="js/jquery.orgchart.js"></script>
31
+ <script type="text/javascript" src="js/orgchart.js"></script>
30
32
  <script type="text/javascript">
31
- $(function() {
33
+ document.addEventListener('DOMContentLoaded', () => {
34
+
35
+ const chartContainer = document.getElementById('chart-container');
36
+ const selectedNodeInput = document.getElementById('selected-node');
37
+ const reportButton = document.getElementById('btn-report-path');
38
+ const resetButton = document.getElementById('btn-reset');
32
39
 
33
- var datascource = {
40
+ const datasource = {
34
41
  'name': 'Lao Lao',
35
42
  'title': 'general manager',
36
43
  'children': [
@@ -61,40 +68,63 @@
61
68
  ]
62
69
  };
63
70
 
64
- var oc = $('#chart-container').orgchart({
65
- 'data' : datascource,
71
+ const oc = new OrgChart({
72
+ chartContainer: '#chart-container',
73
+ 'data' : datasource,
66
74
  'nodeContent': 'title'
67
75
  });
68
76
 
69
- oc.$chart.find('.node').on('click', function() {
70
- $('#selected-node').val($(this).children('.title').text());
77
+ chartContainer.addEventListener('click', (event) => {
78
+ const clickedNode = event.target.closest('.node');
79
+ if (!clickedNode || !chartContainer.contains(clickedNode)) {
80
+ return;
81
+ }
82
+ const titleElement = clickedNode.querySelector('.title');
83
+ selectedNodeInput.value = titleElement ? titleElement.textContent.trim() : '';
71
84
  });
72
85
 
73
- $('#btn-report-path').on('click', function() {
74
- var $selected = $('#chart-container').find('.node.focused');
75
- if ($selected.length) {
76
- $selected.parents('.nodes').children(':has(.focused)').find('.node:first').each(function(index, superior) {
77
- if (!$(superior).find('.horizontalEdge:first').closest('.node').parent().siblings().is('.hidden')) {
78
- $(superior).find('.horizontalEdge:first').trigger('click');
86
+ reportButton.addEventListener('click', () => {
87
+ const selected = chartContainer.querySelector('.node.focused');
88
+ const selectedNodeName = selectedNodeInput.value;
89
+ if (selected) {
90
+ let hierarchy = selected.closest('.hierarchy');
91
+ while (hierarchy) {
92
+ const parentNodes = hierarchy.parentElement;
93
+ const parentHierarchy = parentNodes ? parentNodes.closest('.hierarchy') : null;
94
+ if (!parentHierarchy) {
95
+ break;
79
96
  }
97
+ const superior = parentHierarchy.querySelector(':scope > .node');
98
+ const horizontalEdge = superior ? superior.querySelector('.horizontalEdge') : null;
99
+ const hasHiddenSibling = Array.from(parentHierarchy.parentElement.children)
100
+ .some((sibling) => sibling !== parentHierarchy && sibling.classList.contains('hidden'));
101
+ if (horizontalEdge && !hasHiddenSibling) {
102
+ horizontalEdge.dispatchEvent(new MouseEvent('click', { bubbles: true }));
103
+ }
104
+ hierarchy = parentHierarchy;
105
+ }
106
+ chartContainer.querySelectorAll('.node.focused').forEach((node) => {
107
+ node.classList.remove('focused');
80
108
  });
81
- $(this).prop('disabled', true);
109
+ selected.classList.add('focused');
110
+ selectedNodeInput.value = selectedNodeName;
111
+ reportButton.disabled = true;
82
112
  } else {
83
113
  alert('please select the node firstly');
84
114
  }
85
115
  });
86
116
 
87
- $('#btn-reset').on('click', function() {
88
- $('#chart-container')
89
- .find('.hidden').removeClass('hidden')
90
- .end().find('.slide-up, .slide-right, .slide-left, .focused')
91
- .removeClass('slide-up slide-right slide-left focused');
92
- $('#chart-container')
93
- .find('.isCollapsedSibling, .isChildrenCollapsed, .isSiblingsCollapsed')
94
- .removeClass('isCollapsedSibling isChildrenCollapsed isSiblingsCollapsed');
95
-
96
- $('#btn-report-path').prop('disabled', false);
97
- $('#selected-node').val('');
117
+ resetButton.addEventListener('click', () => {
118
+ chartContainer.querySelectorAll('.hidden').forEach((element) => element.classList.remove('hidden'));
119
+ chartContainer.querySelectorAll('.slide-up, .slide-right, .slide-left, .focused').forEach((element) => {
120
+ element.classList.remove('slide-up', 'slide-right', 'slide-left', 'focused');
121
+ });
122
+ chartContainer.querySelectorAll('.isCollapsedSibling, .isChildrenCollapsed, .isSiblingsCollapsed').forEach((element) => {
123
+ element.classList.remove('isCollapsedSibling', 'isChildrenCollapsed', 'isSiblingsCollapsed');
124
+ });
125
+
126
+ reportButton.disabled = false;
127
+ selectedNodeInput.value = '';
98
128
  });
99
129
 
100
130
  });
package/demo/responsive-design.html CHANGED
@@ -2,9 +2,9 @@
2
2
  <html lang="en">
3
3
  <head>
4
4
  <meta charset="utf-8">
5
- <title>Organization Chart Plugin</title>
5
+ <title>OrgChart Responsive Design Demo</title>
6
6
  <link rel="icon" href="img/logo.png">
7
- <link rel="stylesheet" href="css/jquery.orgchart.css">
7
+ <link rel="stylesheet" href="css/orgchart.css">
8
8
  <link rel="stylesheet" href="css/style.css">
9
9
  <style type="text/css">
10
10
  #chart-container { height: 620px; }
@@ -12,14 +12,16 @@
12
12
  </style>
13
13
  </head>
14
14
  <body>
15
+ <section class="demo-notes">
16
+ <h1>Responsive Design Demo</h1>
17
+ <p>This demo shows how the chart behaves inside a constrained container across different viewport sizes.</p>
18
+ </section>
15
19
  <div id="chart-container"></div>
16
-
17
- <script type="text/javascript" src="js/jquery.min.js"></script>
18
- <script type="text/javascript" src="js/jquery.orgchart.js"></script>
20
+ <script type="text/javascript" src="js/orgchart.js"></script>
19
21
  <script type="text/javascript">
20
- $(function() {
22
+ document.addEventListener('DOMContentLoaded', () => {
21
23
 
22
- var datascource = {
24
+ const datasource = {
23
25
  'name': 'Lao Lao',
24
26
  'title': 'general manager',
25
27
  'children': [
@@ -59,13 +61,14 @@
59
61
  ]
60
62
  };
61
63
 
62
- var oc = $('#chart-container').orgchart({
63
- 'data' : datascource,
64
+ const oc = new OrgChart({
65
+ chartContainer: '#chart-container',
66
+ 'data' : datasource,
64
67
  'nodeContent': 'title',
65
68
  });
66
69
 
67
- $(window).resize(function() {
68
- var width = $(window).width();
70
+ window.addEventListener('resize', () => {
71
+ const width = window.innerWidth;
69
72
  if(width > 576) {
70
73
  oc.init({'verticalLevel': undefined});
71
74
  } else {
package/demo/right2left.html CHANGED
@@ -2,23 +2,25 @@
2
2
  <html lang="en">
3
3
  <head>
4
4
  <meta charset="utf-8">
5
- <title>Organization Chart Plugin</title>
5
+ <title>OrgChart Right to Left Demo</title>
6
6
  <link rel="icon" href="img/logo.png">
7
- <link rel="stylesheet" href="css/jquery.orgchart.css">
7
+ <link rel="stylesheet" href="css/orgchart.css">
8
8
  <link rel="stylesheet" href="css/style.css">
9
9
  <style type="text/css">
10
10
  #chart-container { text-align: right; }
11
11
  </style>
12
12
  </head>
13
13
  <body>
14
+ <section class="demo-notes">
15
+ <h1>Right to Left Demo</h1>
16
+ <p>This demo renders the chart from right to left instead of the default top-to-bottom layout.</p>
17
+ </section>
14
18
  <div id="chart-container"></div>
15
-
16
- <script type="text/javascript" src="js/jquery.min.js"></script>
17
- <script type="text/javascript" src="js/jquery.orgchart.js"></script>
19
+ <script type="text/javascript" src="js/orgchart.js"></script>
18
20
  <script type="text/javascript">
19
- $(function() {
21
+ document.addEventListener('DOMContentLoaded', () => {
20
22
 
21
- var datascource = {
23
+ const datasource = {
22
24
  'name': 'Lao Lao',
23
25
  'title': 'general manager',
24
26
  'children': [
@@ -34,8 +36,9 @@
34
36
  ]
35
37
  };
36
38
 
37
- $('#chart-container').orgchart({
38
- 'data' : datascource,
39
+ const oc = new OrgChart({
40
+ chartContainer: '#chart-container',
41
+ 'data' : datasource,
39
42
  'nodeContent': 'title',
40
43
  'direction': 'r2l'
41
44
  });
package/demo/toggle-sibs-resp.html CHANGED
@@ -2,20 +2,22 @@
2
2
  <html lang="en">
3
3
  <head>
4
4
  <meta charset="utf-8">
5
- <title>Organization Chart Plugin</title>
5
+ <title>OrgChart Toggle Siblings Demo</title>
6
6
  <link rel="icon" href="img/logo.png">
7
- <link rel="stylesheet" href="css/jquery.orgchart.css">
7
+ <link rel="stylesheet" href="css/orgchart.css">
8
8
  <link rel="stylesheet" href="css/style.css">
9
9
  </head>
10
10
  <body>
11
+ <section class="demo-notes">
12
+ <h1>Toggle Siblings Demo</h1>
13
+ <p>This demo lets users collapse and expand left and right sibling groups independently.</p>
14
+ </section>
11
15
  <div id="chart-container"></div>
12
-
13
- <script type="text/javascript" src="js/jquery.min.js"></script>
14
- <script type="text/javascript" src="js/jquery.orgchart.js"></script>
16
+ <script type="text/javascript" src="js/orgchart.js"></script>
15
17
  <script type="text/javascript">
16
- $(function() {
18
+ document.addEventListener('DOMContentLoaded', () => {
17
19
 
18
- var datascource = {
20
+ const datasource = {
19
21
  'name': 'Lao Lao',
20
22
  'title': 'general manager',
21
23
  'children': [
@@ -35,8 +37,9 @@
35
37
  ]
36
38
  };
37
39
 
38
- $('#chart-container').orgchart({
39
- 'data' : datascource,
40
+ const oc = new OrgChart({
41
+ chartContainer: '#chart-container',
42
+ 'data' : datasource,
40
43
  'nodeContent': 'title',
41
44
  'toggleSiblingsResp': true
42
45
  });
package/demo/ul-datasource.html CHANGED
@@ -2,9 +2,9 @@
2
2
  <html lang="en">
3
3
  <head>
4
4
  <meta charset="utf-8">
5
- <title>Organization Chart Plugin</title>
5
+ <title>OrgChart UL Datasource Demo</title>
6
6
  <link rel="icon" href="img/logo.png">
7
- <link rel="stylesheet" href="css/jquery.orgchart.css">
7
+ <link rel="stylesheet" href="css/orgchart.css">
8
8
  <link rel="stylesheet" href="css/style.css">
9
9
  <style type="text/css">
10
10
  #ul-data { display: inline-block; width: 40%; vertical-align: top; }
@@ -13,6 +13,10 @@
13
13
  </style>
14
14
  </head>
15
15
  <body>
16
+ <section class="demo-notes">
17
+ <h1>UL Datasource Demo</h1>
18
+ <p>This demo renders the chart from nested UL markup so you can compare the source list and generated chart side by side.</p>
19
+ </section>
16
20
  <ul id="ul-data">
17
21
  <li>Lao Lao
18
22
  <ul>
@@ -32,14 +36,13 @@
32
36
  </li>
33
37
  </ul>
34
38
  <div id="chart-container"></div>
35
-
36
- <script type="text/javascript" src="js/jquery.min.js"></script>
37
- <script type="text/javascript" src="js/jquery.orgchart.js"></script>
39
+ <script type="text/javascript" src="js/orgchart.js"></script>
38
40
  <script type="text/javascript">
39
- $(function() {
41
+ document.addEventListener('DOMContentLoaded', () => {
40
42
 
41
- $('#chart-container').orgchart({
42
- 'data' : $('#ul-data')
43
+ const oc = new OrgChart({
44
+ chartContainer: '#chart-container',
45
+ 'data' : document.getElementById('ul-data')
43
46
  });
44
47
 
45
48
  });
package/demo/vertical-level.html CHANGED
@@ -2,9 +2,9 @@
2
2
  <html lang="en">
3
3
  <head>
4
4
  <meta charset="utf-8">
5
- <title>Organization Chart Plugin</title>
5
+ <title>OrgChart Vertical Level Demo</title>
6
6
  <link rel="icon" href="img/logo.png">
7
- <link rel="stylesheet" href="css/jquery.orgchart.css">
7
+ <link rel="stylesheet" href="css/orgchart.css">
8
8
  <link rel="stylesheet" href="css/style.css">
9
9
  <style type="text/css">
10
10
  #chart-container { height: 620px; }
@@ -12,14 +12,16 @@
12
12
  </style>
13
13
  </head>
14
14
  <body>
15
+ <section class="demo-notes">
16
+ <h1>Vertical Level Demo</h1>
17
+ <p>This demo switches deeper levels into vertical layout to create a hybrid horizontal and vertical chart.</p>
18
+ </section>
15
19
  <div id="chart-container"></div>
16
-
17
- <script type="text/javascript" src="js/jquery.min.js"></script>
18
- <script type="text/javascript" src="js/jquery.orgchart.js"></script>
20
+ <script type="text/javascript" src="js/orgchart.js"></script>
19
21
  <script type="text/javascript">
20
- $(function() {
22
+ document.addEventListener('DOMContentLoaded', () => {
21
23
 
22
- var datascource = {
24
+ const datasource = {
23
25
  'name': 'Lao Lao',
24
26
  'title': 'general manager',
25
27
  'children': [
@@ -60,8 +62,9 @@
60
62
  ]
61
63
  };
62
64
 
63
- $('#chart-container').orgchart({
64
- 'data' : datascource,
65
+ const oc = new OrgChart({
66
+ chartContainer: '#chart-container',
67
+ 'data' : datasource,
65
68
  'nodeContent': 'title',
66
69
  'verticalLevel': 3,
67
70
  'visibleLevel': 4