orgchart 5.0.0 → 6.0.0

package/demo/data-prop-hybrid.html

@@ -1,71 +1,100 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
   <meta charset="utf-8">
-  <title>Organization Chart Plugin</title>
+  <title>OrgChart Hybrid Layout Demo</title>
   <link rel="icon" href="img/logo.png">
-  <link rel="stylesheet" href="css/jquery.orgchart.css">
+  <link rel="stylesheet" href="css/orgchart.css">
   <link rel="stylesheet" href="css/style.css">
   <style type="text/css">
-    #chart-container { height:  620px; }
-    .orgchart { padding-bottom: 20px; }
+    #chart-container {
+      height: 620px;
+    }
+
+    .orgchart {
+      padding-bottom: 20px;
+    }
   </style>
 </head>
+
 <body>
+  <section class="demo-notes">
+    <h1>Hybrid Layout Demo</h1>
+    <p>This demo uses the hybrid data property to mix horizontal and vertical descendant layouts in the same chart.</p>
+  </section>
   <div id="chart-container"></div>
-
-  <script type="text/javascript" src="js/jquery.min.js"></script>
-  <script type="text/javascript" src="js/jquery.orgchart.js"></script>
+  <script type="text/javascript" src="js/orgchart.js"></script>
   <script type="text/javascript">
-    $(function() {
+    document.addEventListener('DOMContentLoaded', () => {
 
-    var datascource = {
-      'id': '1',
-      'name': 'Lao Lao',
-      'title': 'general manager',
-      'children': [
-        { 'id': '2', 'name': 'Bo Miao', 'title': 'department manager' },
-        { 'id': '3', 'name': 'Su Miao', 'title': 'department manager',
-          'children': [
-            { 'id': '4', 'name': 'Tie Hua', 'title': 'senior engineer' },
-            { 'id': '5', 'name': 'Hei Hei', 'title': 'senior engineer',
-              'children': [
-                { 'id': '6', 'name': 'Pang Pang', 'title': 'engineer' },
-                { 'id': '7', 'name': 'Dan Dan', 'title': 'UE engineer' ,
+      const datasource = {
+        'id': '1',
+        'name': 'Lao Lao',
+        'title': 'general manager',
+        'children': [
+          { 'id': '2', 'name': 'Bo Miao', 'title': 'department manager' },
+          {
+            'id': '3', 'name': 'Su Miao', 'title': 'department manager',
+            'children': [
+              { 'id': '4', 'name': 'Tie Hua', 'title': 'senior engineer' },
+              {
+                'id': '5', 'name': 'Hei Hei', 'title': 'senior engineer',
                 'children': [
-                  { 'id': '8', 'name': 'Er Dan', 'title': 'engineer' },
-                  { 'id': '9', 'name': 'San Dan', 'title': 'engineer',
+                  {
+                    'id': '6', 'name': 'Pang Pang', 'title': 'engineer',
+                    'children': [
+                      {
+                        'id': '18', 'name': 'Er Pang', 'title': 'engineer',
+                        'children': [
+                          { 'id': '19', 'name': 'San Pang', 'title': 'intern' }
+                        ]
+                      }
+                    ]
+                  },
+                  {
+                    'id': '7', 'name': 'Dan Dan', 'title': 'UE engineer',
                     'children': [
-                      { 'id': '10', 'name': 'Si Dan', 'title': 'intern' },
-                      { 'id': '11', 'name': 'Wu Dan', 'title': 'intern' }
+                      { 'id': '8', 'name': 'Er Dan', 'title': 'engineer' },
+                      {
+                        'id': '9', 'name': 'San Dan', 'title': 'engineer',
+                        'children': [
+                          { 'id': '10', 'name': 'Si Dan', 'title': 'intern' },
+                          { 'id': '11', 'name': 'Wu Dan', 'title': 'intern' }
+                        ]
+                      },
+                      { 'id': '12', 'name': 'Liu Dan', 'title': 'engineer' },
                     ]
                   }
-                ]}
-              ]
-            }
-          ]
-        },
-        { 'id': '13', 'name': 'Chun Miao', 'title': 'department manager', 'hybrid': true,
-          'children': [
-            { 'id': '14', 'name': 'Bing Qin', 'title': 'senior engineer' },
-            { 'id': '15', 'name': 'Yue Yue', 'title': 'senior engineer',
-              'children': [
-                { 'id': '16', 'name': 'Er Yue', 'title': 'engineer' },
-                { 'id': '17', 'name': 'San Yue', 'title': 'UE engineer' }
-              ]
-            }
-          ]
-        }
-      ]
-    };
+                ]
+              }
+            ]
+          },
+          {
+            'id': '13', 'name': 'Chun Miao', 'title': 'department manager', 'hybrid': true,
+            'children': [
+              { 'id': '14', 'name': 'Bing Qin', 'title': 'senior engineer' },
+              {
+                'id': '15', 'name': 'Yue Yue', 'title': 'senior engineer',
+                'children': [
+                  { 'id': '16', 'name': 'Er Yue', 'title': 'engineer' },
+                  { 'id': '17', 'name': 'San Yue', 'title': 'UE engineer' }
+                ]
+              }
+            ]
+          }
+        ]
+      };
 
-    $('#chart-container').orgchart({
-      'data' : datascource,
-      'nodeContent': 'title',
-      'verticalLevel': 5
-    });
+      const oc = new OrgChart({
+        chartContainer: '#chart-container',
+        'data': datasource,
+        'nodeContent': 'title',
+        'verticalLevel': 5
+      });
 
-  });
+    });
   </script>
-  </body>
+</body>
+
 </html>

package/demo/default-collapsed.html

@@ -2,20 +2,22 @@
 <html lang="en">
 <head>
   <meta charset="utf-8">
-  <title>Organization Chart Plugin</title>
+  <title>OrgChart Default Collapsed Demo</title>
   <link rel="icon" href="img/logo.png">
-  <link rel="stylesheet" href="css/jquery.orgchart.css">
+  <link rel="stylesheet" href="css/orgchart.css">
   <link rel="stylesheet" href="css/style.css">
 </head>
 <body>
+  <section class="demo-notes">
+    <h1>Default Collapsed Demo</h1>
+    <p>This demo starts selected branches in a collapsed state so users expand them only when needed.</p>
+  </section>
   <div id="chart-container"></div>
-
-  <script type="text/javascript" src="js/jquery.min.js"></script>
-  <script type="text/javascript" src="js/jquery.orgchart.js"></script>
+  <script type="text/javascript" src="js/orgchart.js"></script>
   <script type="text/javascript">
-    $(function() {
+    document.addEventListener('DOMContentLoaded', () => {
 
-    var datascource = {
+    const datasource = {
       'name': 'Lao Lao',
       'title': 'general manager',
       'children': [
@@ -46,8 +48,9 @@
       ]
     };
 
-    $('#chart-container').orgchart({
-      'data' : datascource,
+    const oc = new OrgChart({
+      chartContainer: '#chart-container',
+      'data' : datasource,
       'nodeContent': 'title'
     });
 

package/demo/drag-drop-hybrid-chart.html

@@ -2,9 +2,9 @@
 <html lang="en">
 <head>
   <meta charset="utf-8">
-  <title>Organization Chart Plugin</title>
+  <title>OrgChart Hybrid Drag and Drop Demo</title>
   <link rel="icon" href="img/logo.png">
-  <link rel="stylesheet" href="css/jquery.orgchart.css">
+  <link rel="stylesheet" href="css/orgchart.css">
   <link rel="stylesheet" href="css/style.css">
   <style type="text/css">
     #chart-container { height: 600px; }
@@ -12,15 +12,17 @@
   </style>
 </head>
 <body>
+  <section class="demo-notes">
+    <h1>Hybrid Drag and Drop Demo</h1>
+    <p>This demo applies drag and drop to a hybrid chart that mixes horizontal and vertical descendant branches.</p>
+  </section>
   <div id="chart-container"></div>
-
-  <script type="text/javascript" src="js/jquery.min.js"></script>
-  <script type="text/javascript" src="js/jquery.orgchart.js"></script>
+  <script type="text/javascript" src="js/orgchart.js"></script>
   <script type="text/javascript" src="js/json-digger.js"></script>
   <script type="text/javascript">
-    $(function() {
+    document.addEventListener('DOMContentLoaded', () => {
 
-      var datascource = {
+      const datasource = {
       'id': '1',
       'name': 'Lao Lao',
       'title': 'general manager',
@@ -61,18 +63,19 @@
       ]
     };
 
-    var oc = $('#chart-container').orgchart({
-      'data' : datascource,
+    const oc = new OrgChart({
+      chartContainer: '#chart-container',
+      'data' : datasource,
       'nodeContent': 'title',
       'draggable': true,
       'verticalLevel': 3
     });
 
-    oc.$chart.on('nodedrop.orgchart', function(event, extraParams) {
-      console.log('draggedNode:' + extraParams.draggedNode.children('.title').text()
-        + ', dragZone:' + extraParams.dragZone.children('.title').text()
-        + ', dropZone:' + extraParams.dropZone.children('.title').text()
-      );
+    oc.chart.addEventListener('nodedrop.orgchart', (event) => {
+      const extraParams = event.detail;
+      console.log('draggedNode:' + extraParams.draggedNode.querySelector('.title').textContent
+        + ', dragZone:' + extraParams.dragZone.querySelector('.title').textContent
+        + ', dropZone:' + extraParams.dropZone.querySelector('.title').textContent);
     });
 
   });

package/demo/drag-drop.html

@@ -2,9 +2,9 @@
 <html lang="en">
 <head>
   <meta charset="utf-8">
-  <title>Organization Chart Plugin</title>
+  <title>OrgChart Drag and Drop Demo</title>
   <link rel="icon" href="img/logo.png">
-  <link rel="stylesheet" href="css/jquery.orgchart.css">
+  <link rel="stylesheet" href="css/orgchart.css">
   <link rel="stylesheet" href="css/style.css">
   <style type="text/css">
     #chart-container { height: 600px; }
@@ -12,15 +12,17 @@
   </style>
 </head>
 <body>
+  <section class="demo-notes">
+    <h1>Drag and Drop Demo</h1>
+    <p>This demo enables node drag and drop and uses dropCriteria to reject invalid moves between branches.</p>
+  </section>
   <div id="chart-container"></div>
-
-  <script type="text/javascript" src="js/jquery.min.js"></script>
-  <script type="text/javascript" src="js/jquery.orgchart.js"></script>
+  <script type="text/javascript" src="js/orgchart.js"></script>
   <script type="text/javascript" src="js/json-digger.js"></script>
   <script type="text/javascript">
-    $(function() {
+    document.addEventListener('DOMContentLoaded', () => {
 
-    var datascource = {
+    const datasource = {
       'name': 'Lao Lao',
       'title': 'general manager',
       'children': [
@@ -42,23 +44,26 @@
       ]
     };
 
-    var oc = $('#chart-container').orgchart({
-      'data' : datascource,
+    const oc = new OrgChart({
+      chartContainer: '#chart-container',
+      'data' : datasource,
       'nodeContent': 'title',
       'draggable': true,
-      'dropCriteria': function($draggedNode, $dragZone, $dropZone) {
-        if($draggedNode.find('.content').text().indexOf('manager') > -1 && $dropZone.find('.content').text().indexOf('engineer') > -1) {
+      'dropCriteria': function(draggedNode, dragZone, dropZone) {
+        const draggedContent = draggedNode.querySelector('.content')?.textContent || '';
+        const dropContent = dropZone.querySelector('.content')?.textContent || '';
+        if (draggedContent.indexOf('manager') > -1 && dropContent.indexOf('engineer') > -1) {
           return false;
         }
         return true;
       }
     });
 
-    oc.$chart.on('nodedrop.orgchart', function(event, extraParams) {
-      console.log('draggedNode:' + extraParams.draggedNode.children('.title').text()
-        + ', dragZone:' + extraParams.dragZone.children('.title').text()
-        + ', dropZone:' + extraParams.dropZone.children('.title').text()
-      );
+    oc.chart.addEventListener('nodedrop.orgchart', (event) => {
+      const extraParams = event.detail;
+      console.log('draggedNode:' + extraParams.draggedNode.querySelector('.title').textContent
+        + ', dragZone:' + extraParams.dragZone.querySelector('.title').textContent
+        + ', dropZone:' + extraParams.dropZone.querySelector('.title').textContent);
     });
 
   });