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/edit-hybrid-chart.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 Edit Hybrid Chart 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: 500px; }
@@ -34,6 +34,10 @@
34
34
  </style>
35
35
  </head>
36
36
  <body>
37
+ <section class="demo-notes">
38
+ <h1>Edit Hybrid Chart Demo</h1>
39
+ <p>This demo applies the same add, delete, and reset editing flow to a hybrid horizontal and vertical chart.</p>
40
+ </section>
37
41
  <div id="chart-container"></div>
38
42
  <div id="edit-panel">
39
43
  <span id="chart-state-panel" class="radio-panel">
@@ -57,162 +61,201 @@
57
61
  <button type="button" id="btn-delete-nodes">Delete</button>
58
62
  <button type="button" id="btn-reset">Reset</button>
59
63
  </div>
60
- <script type="text/javascript" src="js/jquery.min.js"></script>
61
64
  <script type="text/javascript" src="js/html2canvas.min.js"></script>
62
- <script type="text/javascript" src="js/jquery.orgchart.js"></script>
65
+ <script type="text/javascript" src="js/orgchart.js"></script>
63
66
  <script type="text/javascript">
64
- $(function() {
67
+ document.addEventListener('DOMContentLoaded', () => {
68
+ const chartContainer = document.getElementById('chart-container');
69
+ const selectedNodeInput = document.getElementById('selected-node');
70
+ const editPanel = document.getElementById('edit-panel');
71
+ const newNodeList = document.getElementById('new-nodelist');
72
+ const nodeTypePanel = document.getElementById('node-type-panel');
73
+ let selectedNode = null;
65
74
 
66
- var datascource = {
67
- 'name': 'Ball game',
68
- 'children': [
69
- { 'name': 'Football' },
70
- { 'name': 'Basketball' },
71
- { 'name': 'Volleyball' }
72
- ]
73
- };
75
+ const datasource = {
76
+ 'name': 'Ball game',
77
+ 'children': [
78
+ { 'name': 'Football' },
79
+ { 'name': 'Basketball' },
80
+ { 'name': 'Volleyball' }
81
+ ]
82
+ };
74
83
 
75
- var getId = function() {
76
- return (new Date().getTime()) * 1000 + Math.floor(Math.random() * 1001);
77
- };
84
+ const getId = () => (Date.now() * 1000) + Math.floor(Math.random() * 1001);
85
+ const getRootNode = () => chartContainer.querySelector('.orgchart .node');
86
+ const getCheckedNodeType = () => document.querySelector('input[name="node-type"]:checked');
87
+ const getCheckedChartState = () => document.querySelector('input[name="chart-state"]:checked');
88
+ const getNewNodeValues = () => Array.from(newNodeList.querySelectorAll('.new-node'))
89
+ .map((input) => input.value.trim())
90
+ .filter(Boolean);
91
+ const clearSelection = () => {
92
+ selectedNode = null;
93
+ selectedNodeInput.value = '';
94
+ };
95
+ const syncChartEditState = () => {
96
+ const isEditMode = getCheckedChartState()?.value === 'edit';
97
+ const chartElement = chartContainer.querySelector('.orgchart');
98
+ if (chartElement) {
99
+ chartElement.classList.toggle('edit-state', isEditMode);
100
+ }
101
+ };
78
102
 
79
- var oc = $('#chart-container').orgchart({
80
- 'data' : datascource,
81
- 'verticalLevel': 3,
82
- 'createNode': function($node, data) {
83
- $node[0].id = getId();
84
- }
85
- });
103
+ let oc = new OrgChart({
104
+ chartContainer: '#chart-container',
105
+ 'data' : datasource,
106
+ 'verticalLevel': 3,
107
+ 'createNode': function(node) {
108
+ node.id = getId();
109
+ }
110
+ });
86
111
 
87
- oc.$chartContainer.on('click', '.node', function() {
88
- var $this = $(this);
89
- $('#selected-node').val($this.find('.title').text()).data('node', $this);
90
- });
112
+ chartContainer.addEventListener('click', (event) => {
113
+ const clickedNode = event.target.closest('.node');
114
+ if (clickedNode && chartContainer.contains(clickedNode)) {
115
+ selectedNode = clickedNode;
116
+ const titleElement = clickedNode.querySelector('.title');
117
+ selectedNodeInput.value = titleElement ? titleElement.textContent.trim() : '';
118
+ return;
119
+ }
120
+ if (event.target.closest('.orgchart')) {
121
+ clearSelection();
122
+ }
123
+ });
91
124
 
92
- oc.$chartContainer.on('click', '.orgchart', function(event) {
93
- if (!$(event.target).closest('.node').length) {
94
- $('#selected-node').val('');
95
- }
96
- });
125
+ document.querySelectorAll('input[name="chart-state"]').forEach((radio) => {
126
+ radio.addEventListener('click', () => {
127
+ const isEditMode = radio.value === 'edit';
128
+ const chartElement = chartContainer.querySelector('.orgchart');
129
+ if (chartElement) {
130
+ chartElement.classList.toggle('edit-state', isEditMode);
131
+ }
132
+ editPanel.classList.toggle('edit-state', !isEditMode);
133
+ if (isEditMode) {
134
+ const orgchart = chartContainer.querySelector('.orgchart');
135
+ if (orgchart) {
136
+ orgchart.querySelectorAll('.hidden').forEach((element) => element.classList.remove('hidden'));
137
+ orgchart.querySelectorAll('.hierarchy').forEach((element) => {
138
+ element.classList.remove('isCollapsedDescendant', 'isChildrenCollapsed', 'isSiblingsCollapsed', 'isCollapsedSibling');
139
+ });
140
+ orgchart.querySelectorAll('.node').forEach((element) => {
141
+ element.classList.remove('slide-up', 'slide-down', 'slide-right', 'slide-left');
142
+ });
143
+ }
144
+ } else {
145
+ document.getElementById('btn-reset').click();
146
+ }
147
+ });
148
+ });
97
149
 
98
- $('input[name="chart-state"]').on('click', function() {
99
- $('.orgchart').toggleClass('edit-state', this.value !== 'view');
100
- $('#edit-panel').toggleClass('edit-state', this.value === 'view');
101
- if ($(this).val() === 'edit') {
102
- $('.orgchart').find('.hidden').removeClass('hidden')
103
- .end().find('.hierarchy').removeClass('isCollapsedDescendant isChildrenCollapsed isSiblingsCollapsed isCollapsedSibling')
104
- .find('.node').removeClass('slide-up slide-down slide-right slide-left');
105
- } else {
106
- $('#btn-reset').trigger('click');
107
- }
108
- });
150
+ document.querySelectorAll('input[name="node-type"]').forEach((radio) => {
151
+ radio.addEventListener('click', () => {
152
+ if (radio.value === 'parent') {
153
+ editPanel.classList.add('edit-parent-node');
154
+ Array.from(newNodeList.children).slice(1).forEach((item) => item.remove());
155
+ } else {
156
+ editPanel.classList.remove('edit-parent-node');
157
+ }
158
+ });
159
+ });
109
160
 
110
- $('input[name="node-type"]').on('click', function() {
111
- var $this = $(this);
112
- if ($this.val() === 'parent') {
113
- $('#edit-panel').addClass('edit-parent-node');
114
- $('#new-nodelist').children(':gt(0)').remove();
115
- } else {
116
- $('#edit-panel').removeClass('edit-parent-node');
117
- }
118
- });
161
+ document.getElementById('btn-add-input').addEventListener('click', () => {
162
+ const item = document.createElement('li');
163
+ item.innerHTML = '<input type="text" class="new-node">';
164
+ newNodeList.appendChild(item);
165
+ });
119
166
 
120
- $('#btn-add-input').on('click', function() {
121
- $('#new-nodelist').append('<li><input type="text" class="new-node"></li>');
122
- });
167
+ document.getElementById('btn-remove-input').addEventListener('click', () => {
168
+ if (newNodeList.children.length > 1) {
169
+ newNodeList.lastElementChild.remove();
170
+ }
171
+ });
123
172
 
124
- $('#btn-remove-input').on('click', function() {
125
- var inputs = $('#new-nodelist').children('li');
126
- if (inputs.length > 1) {
127
- inputs.last().remove();
128
- }
129
- });
173
+ document.getElementById('btn-add-nodes').addEventListener('click', () => {
174
+ const nodeVals = getNewNodeValues();
175
+ const nodeType = getCheckedNodeType();
176
+ const rootNode = getRootNode();
130
177
 
131
- $('#btn-add-nodes').on('click', function() {
132
- var $chartContainer = $('#chart-container');
133
- var nodeVals = [];
134
- $('#new-nodelist').find('.new-node').each(function(index, item) {
135
- var validVal = item.value.trim();
136
- if (validVal.length) {
137
- nodeVals.push(validVal);
178
+ if (!nodeVals.length) {
179
+ alert('Please input value for new node');
180
+ return;
138
181
  }
139
- });
140
- var $node = $('#selected-node').data('node');
141
- if (!nodeVals.length) {
142
- alert('Please input value for new node');
143
- return;
144
- }
145
- var nodeType = $('input[name="node-type"]:checked');
146
- if (!nodeType.length) {
147
- alert('Please select a node type');
148
- return;
149
- }
150
- if (nodeType.val() !== 'parent' && !$('.orgchart').length) {
151
- alert('Please creat the root node firstly when you want to build up the orgchart from the scratch');
152
- return;
153
- }
154
- if (nodeType.val() !== 'parent' && !$node) {
155
- alert('Please select one node in orgchart');
156
- return;
157
- }
158
- if (nodeType.val() === 'parent') {
159
- if (!$chartContainer.children('.orgchart').length) {// if the original chart has been deleted
160
- oc = $chartContainer.orgchart({
161
- 'data' : { 'name': nodeVals[0] },
162
- 'chartClass': 'edit-state',
163
- 'exportButton': true,
164
- 'exportFilename': 'SportsChart',
165
- 'createNode': function($node, data) {
166
- $node[0].id = getId();
167
- }
168
- });
169
- } else {
170
- oc.addParent($chartContainer.find('.node:first'), { 'name': nodeVals[0], 'id': getId() });
182
+ if (!nodeType) {
183
+ alert('Please select a node type');
184
+ return;
171
185
  }
172
- } else if (nodeType.val() === 'siblings') {
173
- if ($node[0].id === oc.$chart.find('.node:first')[0].id) {
174
- alert('You are not allowed to directly add sibling nodes to root node');
186
+ if (nodeType.value !== 'parent' && !chartContainer.querySelector('.orgchart')) {
187
+ alert('Please creat the root node firstly when you want to build up the orgchart from the scratch');
188
+ return;
189
+ }
190
+ if (nodeType.value !== 'parent' && !selectedNode) {
191
+ alert('Please select one node in orgchart');
192
+ return;
193
+ }
194
+
195
+ if (nodeType.value === 'parent') {
196
+ if (!chartContainer.querySelector('.orgchart')) {
197
+ oc = new OrgChart({
198
+ chartContainer: '#chart-container',
199
+ 'data' : { 'name': nodeVals[0] },
200
+ 'chartClass': 'edit-state',
201
+ 'exportButton': true,
202
+ 'exportFilename': 'SportsChart',
203
+ 'verticalLevel': 3,
204
+ 'createNode': function(node) {
205
+ node.id = getId();
206
+ }
207
+ });
208
+ syncChartEditState();
209
+ } else {
210
+ oc.addParent(selectedNode || rootNode, { 'name': nodeVals[0], 'id': getId() });
211
+ }
212
+ return;
213
+ }
214
+
215
+ if (nodeType.value === 'siblings') {
216
+ if (selectedNode.id === rootNode.id) {
217
+ alert('You are not allowed to directly add sibling nodes to root node');
218
+ return;
219
+ }
220
+ oc.addSiblings(selectedNode, nodeVals.map((item) => ({ 'name': item, 'relationship': '110', 'id': getId() })));
175
221
  return;
176
222
  }
177
- oc.addSiblings($node, nodeVals.map(function (item) {
178
- return { 'name': item, 'relationship': '110', 'id': getId() };
179
- }));
180
- } else {
181
- if (!$node.siblings('.nodes').length) {
182
- var rel = nodeVals.length > 1 ? '110' : '100';
183
- oc.addChildren($node, nodeVals.map(function (item) {
184
- return { 'name': item, 'relationship': rel, 'id': getId() };
185
- }));
223
+
224
+ const childLevel = selectedNode.nextElementSibling;
225
+ if (!childLevel || !childLevel.classList.contains('nodes')) {
226
+ const rel = nodeVals.length > 1 ? '110' : '100';
227
+ oc.addChildren(selectedNode, nodeVals.map((item) => ({ 'name': item, 'relationship': rel, 'id': getId() })));
186
228
  } else {
187
- oc.addSiblings($node.siblings('.nodes').find('.node:first'), nodeVals.map(function (item) {
188
- return { 'name': item, 'relationship': '110', 'id': getId() };
189
- }));
229
+ oc.addSiblings(childLevel.querySelector('.node'), nodeVals.map((item) => ({ 'name': item, 'relationship': '110', 'id': getId() })));
190
230
  }
191
- }
192
- });
231
+ });
193
232
 
194
- $('#btn-delete-nodes').on('click', function() {
195
- var $node = $('#selected-node').data('node');
196
- if (!$node) {
197
- alert('Please select one node in orgchart');
198
- return;
199
- } else if ($node[0] === $('.orgchart').find('.node:first')[0]) {
200
- if (!window.confirm('Are you sure you want to delete the whole chart?')) {
233
+ document.getElementById('btn-delete-nodes').addEventListener('click', () => {
234
+ const rootNode = getRootNode();
235
+ if (!selectedNode) {
236
+ alert('Please select one node in orgchart');
201
237
  return;
202
238
  }
203
- }
204
- oc.removeNodes($node);
205
- $('#selected-node').val('').data('node', null);
206
- });
239
+ if (rootNode && selectedNode === rootNode && !window.confirm('Are you sure you want to delete the whole chart?')) {
240
+ return;
241
+ }
242
+ oc.removeNodes(selectedNode);
243
+ clearSelection();
244
+ });
207
245
 
208
- $('#btn-reset').on('click', function() {
209
- $('.orgchart').find('.focused').removeClass('focused');
210
- $('#selected-node').val('');
211
- $('#new-nodelist').find('input:first').val('').parent().siblings().remove();
212
- $('#node-type-panel').find('input').prop('checked', false);
246
+ document.getElementById('btn-reset').addEventListener('click', () => {
247
+ chartContainer.querySelectorAll('.focused').forEach((element) => element.classList.remove('focused'));
248
+ clearSelection();
249
+ const inputs = newNodeList.querySelectorAll('input');
250
+ if (inputs.length) {
251
+ inputs[0].value = '';
252
+ }
253
+ Array.from(newNodeList.children).slice(1).forEach((item) => item.remove());
254
+ nodeTypePanel.querySelectorAll('input').forEach((input) => {
255
+ input.checked = false;
256
+ });
257
+ });
213
258
  });
214
-
215
- });
216
259
  </script>
217
260
  </body>
218
261
  </html>
package/demo/expand-to-given-depth.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 Expand to Given Depth 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 { background: white; }
11
11
  </style>
12
12
  </head>
13
13
  <body>
14
+ <section class="demo-notes">
15
+ <h1>Expand to Given Depth Demo</h1>
16
+ <p>This demo expands descendants from a selected node down to a specified depth instead of fully opening the branch.</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': [
@@ -48,29 +50,35 @@
48
50
  ]
49
51
  };
50
52
 
51
- var showDescendents = function(node, visibleLevel) {
52
- if (visibleLevel === 1) {
53
+ const showDescendents = function(node, visibleLevel) {
54
+ if (visibleLevel <= 1) {
55
+ return false;
56
+ }
57
+ const hierarchy = node.closest('.hierarchy');
58
+ const childrenLayer = hierarchy ? hierarchy.querySelector(':scope > .nodes') : null;
59
+ if (!childrenLayer) {
53
60
  return false;
54
61
  }
55
- $(node).closest('tr').siblings(':last').children().find('.node:first').each(function(index, node) {
56
- var $temp = $(node).closest('tr').siblings().removeClass('hidden');
57
- var $children = $temp.last().children().find('.node:first');
58
- if ($children.length) {
59
- $children[0].style.offsetWidth = $children[0].offsetWidth;
62
+ childrenLayer.classList.remove('hidden');
63
+ hierarchy.classList.remove('isChildrenCollapsed');
64
+ Array.from(childrenLayer.children).forEach((childHierarchy) => {
65
+ const childNode = childHierarchy.querySelector(':scope > .node');
66
+ if (childNode) {
67
+ childNode.classList.remove('slide-up');
68
+ showDescendents(childNode, visibleLevel - 1);
60
69
  }
61
- $children.removeClass('slide-up');
62
- showDescendents(node, visibleLevel--);
63
70
  });
64
71
  };
65
72
 
66
- $('#chart-container').orgchart({
73
+ const oc = new OrgChart({
74
+ chartContainer: '#chart-container',
67
75
  'visibleLevel': 2,
68
- 'data' : datascource,
76
+ 'data' : datasource,
69
77
  'nodeContent': 'title',
70
- 'createNode': function($node, data) {
71
- $node.on('click', '.edge', function (event) {
72
- if ($(event.target).is('.fa-chevron-down')) {
73
- showDescendents(this, 3);
78
+ 'createNode': function(node) {
79
+ node.addEventListener('click', (event) => {
80
+ if (event.target.matches('.bottomEdge.oci-chevron-down, .toggleBtn.oci-plus-square, .toggleBtn.oci-chevron-down')) {
81
+ showDescendents(node, 3);
74
82
  }
75
83
  });
76
84
  }
package/demo/export-chart-pdf.html CHANGED
@@ -2,24 +2,26 @@
2
2
  <html lang="en">
3
3
  <head>
4
4
  <meta charset="utf-8">
5
- <title>Organization Chart Plugin</title>
5
+ <title>OrgChart Export PDF 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>Export PDF Demo</h1>
13
+ <p>This demo enables the export button and routes the chart export flow to PDF output.</p>
14
+ </section>
11
15
  <div id="chart-container"></div>
12
-
13
- <script src="js/jquery.min.js"></script>
14
16
  <!-- the following reference is specific for IE -->
15
17
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/es6-promise/4.1.1/es6-promise.auto.min.js"></script>
16
18
  <script type="text/javascript" src="js/html2canvas.min.js"></script>
17
19
  <script type="text/javascript" src="js/jspdf.umd.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': [
@@ -44,8 +46,9 @@
44
46
  ]
45
47
  };
46
48
 
47
- $('#chart-container').orgchart({
48
- 'data' : datascource,
49
+ const oc = new OrgChart({
50
+ chartContainer: '#chart-container',
51
+ 'data' : datasource,
49
52
  'visibleLevel': 2,
50
53
  'nodeContent': 'title',
51
54
  'exportButton': true,
package/demo/export-chart-with-pictures.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 Export with Pictures 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 {
@@ -38,15 +38,17 @@
38
38
  </style>
39
39
  </head>
40
40
  <body>
41
+ <section class="demo-notes">
42
+ <h1>Export with Pictures Demo</h1>
43
+ <p>This demo exports a chart whose nodes include avatars and richer custom content.</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" src="js/html2canvas.min.js"></script>
46
48
  <script type="text/javascript">
47
- $(function() {
49
+ document.addEventListener('DOMContentLoaded', () => {
48
50
 
49
- var datascource = {
51
+ const datasource = {
50
52
  'id': '1',
51
53
  'name': 'Lao Lao',
52
54
  'title': 'general manager',
@@ -72,15 +74,20 @@
72
74
  ]
73
75
  };
74
76
 
75
- $('#chart-container').orgchart({
77
+ const oc = new OrgChart({
78
+ chartContainer: '#chart-container',
76
79
  'exportButton': true,
77
80
  'exportFilename': 'MyOrgChart',
78
- 'data' : datascource,
81
+ 'data' : datasource,
79
82
  'nodeContent': 'title',
80
83
  'nodeID': 'id',
81
- 'createNode': function($node, data) {
82
- $node.find('.title').append(`<img class="avatar" src="https://dabeng.github.io/OrgChart/img/avatar/${data.id}.jpg" crossorigin="anonymous" />`);
83
- $node.find('.content').prepend($node.find('.symbol'));
84
+ 'createNode': function(node, data) {
85
+ node.querySelector('.title')?.insertAdjacentHTML('beforeend', `<img class="avatar" src="https://dabeng.github.io/OrgChart/img/avatar/${data.id}.jpg" crossorigin="anonymous" />`);
86
+ const content = node.querySelector('.content');
87
+ const symbol = node.querySelector('.symbol');
88
+ if (content && symbol) {
89
+ content.prepend(symbol);
90
+ }
84
91
  }
85
92
  });
86
93
 
package/demo/export-chart.html CHANGED
@@ -2,24 +2,26 @@
2
2
  <html lang="en">
3
3
  <head>
4
4
  <meta charset="utf-8">
5
- <title>Organization Chart Plugin</title>
5
+ <title>OrgChart Export Image 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>Export Image Demo</h1>
13
+ <p>This demo enables the built-in export button so the current chart can be saved as an image file.</p>
14
+ </section>
11
15
  <div id="chart-container"></div>
12
-
13
- <script src="js/jquery.min.js"></script>
14
16
  <!-- the following reference is specific for IE -->
15
17
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/es6-promise/4.1.1/es6-promise.auto.min.js"></script>
16
18
  <script type="text/javascript" src="js/html2canvas.min.js"></script>
17
19
  <script type="text/javascript" src="js/jspdf.umd.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': [
@@ -44,8 +46,9 @@
44
46
  ]
45
47
  };
46
48
 
47
- $('#chart-container').orgchart({
48
- 'data' : datascource,
49
+ const oc = new OrgChart({
50
+ chartContainer: '#chart-container',
51
+ 'data' : datasource,
49
52
  'visibleLevel': 2,
50
53
  'nodeContent': 'title',
51
54
  'exportButton': true,
package/demo/family-tree.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 Family Tree 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 { background: #fff; }
@@ -40,14 +40,16 @@
40
40
  </style>
41
41
  </head>
42
42
  <body>
43
+ <section class="demo-notes">
44
+ <h1>Family Tree Demo</h1>
45
+ <p>This demo uses the family-tree datasource format to render spouses, descendants, and pedigree relationships.</p>
46
+ </section>
43
47
  <div id="chart-container"></div>
44
-
45
- <script type="text/javascript" src="js/jquery.min.js"></script>
46
- <script type="text/javascript" src="js/jquery.orgchart.js"></script>
48
+ <script type="text/javascript" src="js/orgchart.js"></script>
47
49
  <script type="text/javascript">
48
- $(function() {
50
+ document.addEventListener('DOMContentLoaded', () => {
49
51
 
50
- var datascource = [
52
+ const datasource = [
51
53
  [
52
54
  { 'id': '8', 'name': 'Lao Ye', 'title': 'Grandfather', 'gender': 'male' },
53
55
  {
@@ -81,12 +83,13 @@
81
83
  ]
82
84
  ];
83
85
 
84
- var oc = $('#chart-container').orgchart({
85
- 'data' : datascource,
86
+ const oc = new OrgChart({
87
+ chartContainer: '#chart-container',
88
+ 'data' : datasource,
86
89
  'nodeContent': 'title',
87
90
  'nodeID': 'id',
88
- 'createNode': function($node, data) {
89
- $node.prepend(`<img class="avatar" src="https://dabeng.github.io/OrgChart/img/avatar/${data.id}.jpg" crossorigin="anonymous" />`);
91
+ 'createNode': function(node, data) {
92
+ node.insertAdjacentHTML('afterbegin', `<img class="avatar" src="https://dabeng.github.io/OrgChart/img/avatar/${data.id}.jpg" crossorigin="anonymous" />`);
90
93
  }
91
94
  });
92
95