refactor the core methods

README.md

@@ -100,11 +100,11 @@ It's a so easy task, we just need to append id or className property to node dat
 
 In fact, this is a wonderful solution to display a orgchart which includes a huge number of node data.
 
-- [I want a hybrid(horizontal + vertical) chart](https://rawgit.com/dabeng/OrgChart/master/demo/vertical-depth.html)
+- [I want a hybrid(horizontal + vertical) chart](https://rawgit.com/dabeng/OrgChart/master/demo/vertical-level.html)
 
 This feature is inspired by the issues([Aligning Children Vertical](https://github.com/dabeng/OrgChart/issues/46), [Hybrid(horizontal + vertical) OrgChart](https://github.com/dabeng/OrgChart/issues/61)). Thank [mfahadi](https://github.com/mfahadi) and [Destructrix](https://github.com/Destructrix) for their constructive suggestions:blush: Special thanks to [tedliang](https://github.com/tedliang) for his wonderful hybrid mode solution.
 
-From now on, users never have to worry about how to align a huge of nodes in one screen of browser. The option "verticalDepth" allows users to align child nodes vertically from the given depth.
+From now on, users never have to worry about how to align a huge of nodes in one screen of browser. The option "verticalLevel" allows users to align child nodes vertically from the given level.
 
 **Note**: currently, this option is incompatible with many other options or methods, like direction, drag&drop, addChildren(), removeNodes(), getHierarchy() and so on. These conflicts will be solved one by one in the later versions.
 
@@ -191,7 +191,7 @@ var oc = $('#chartContainerId').orgchart(options);
       <td>direction</td><td>string</td><td>no</td><td>"t2b"</td><td>The available values are t2b(implies "top to bottom", it's default value), b2t(implies "bottom to top"), l2r(implies "left to right"), r2l(implies "right to left").</td>
     </tr>
     <tr>
-      <td>verticalDepth</td><td>integer</td><td>no</td><td></td><td>Users can make use of this option to align the nodes vertically from the specified depth.</td>
+      <td>verticalLevel</td><td>integer(>=2)</td><td>no</td><td></td><td>Users can make use of this option to align the nodes vertically from the specified level.</td>
     </tr>
     <tr>
       <td>toggleSiblingsResp</td><td>boolean</td><td>no</td><td>false</td><td>Once enable this option, users can show/hide left/right sibling nodes respectively by clicking left/right arrow.</td>
@@ -200,7 +200,7 @@ var oc = $('#chartContainerId').orgchart(options);
       <td>ajaxURL</td><td>json</td><td>no</td><td></td><td>It inclueds four properites -- parent, children, siblings, families(ask for parent node and siblings nodes). As their names imply, different propety provides the URL to which ajax request for different nodes is sent.</td>
     </tr>
     <tr>
-      <td>depth</td><td>positive integer</td><td>no</td><td>999</td><td>It indicates the level that at the very beginning orgchart is expanded to.</td>
+      <td>visibleLevel</td><td>positive integer</td><td>no</td><td>999</td><td>It indicates the level that at the very beginning orgchart is expanded to.</td>
     </tr>
     <tr>
       <td>nodeTitle</td><td>string</td><td>no</td><td>"name"</td><td>It sets one property of datasource as text content of title section of orgchart node. In fact, users can create a simple orghcart with only nodeTitle option.</td>
@@ -251,41 +251,38 @@ I'm sure that you can grasp the key points of the methods below after you try ou
 Embeds an organization chart in designated container. Accepts an options object and you can go through the "options" section to find which options are required. Variable oc is the instance of class OrgChart.
 #### init(newOptions)
 It's the useful way when users want to re-initialize or refresh orgchart based on new options or reload new data.
-#### addParent(data, opts)
+#### addParent(data)
 Adds parent node(actullay it's always root node) for current orgchart.
 <table>
   <thead>
     <tr><th>Name</th><th>Type</th><th>Required</th><th>Default</th><th>Description</th></tr>
   </thead>
   <tbody>
     <tr><td>data</td><td>json object</td><td>yes</td><td></td><td>datasource for building root node</td></tr>
-    <tr><td>opts</td><td>json object</td><td>no</td><td>initial options of current orgchart</td><td>options used for overriding initial options</td></tr>
   </tbody>
 </table>
 
-#### addSiblings($node, data, opts)
+#### addSiblings($node, data)
 Adds sibling nodes for designated node.
 <table>
   <thead>
     <tr><th>Name</th><th>Type</th><th>Required</th><th>Default</th><th>Description</th></tr>
   </thead>
   <tbody>
     <tr><td>$node</td><td>jquery object</td><td>yes</td><td></td><td>we'll add sibling nodes based on this node</td></tr>
-    <tr><td>data</td><td>json object</td><td>yes</td><td></td><td>datasource for building sibling nodes</td></tr>
-    <tr><td>opts</td><td>json object</td><td>no</td><td>initial options of current orgchart</td><td>options used for overriding initial options</td></tr>
+    <tr><td>data</td><td>array</td><td>yes</td><td></td><td>datasource for building sibling nodes</td></tr>
   </tbody>
 </table>
 
-#### addChildren($node, data, opts）
+#### addChildren($node, data)
 Adds child nodes for designed node.
 <table>
   <thead>
     <tr><th>Name</th><th>Type</th><th>Required</th><th>Default</th><th>Description</th></tr>
   </thead>
   <tbody>
     <tr><td>$node</td><td>jquery object</td><td>yes</td><td></td><td>we'll add child nodes based on this node</td></tr>
-    <tr><td>data</td><td>json object</td><td>yes</td><td></td><td>datasource for building child nodes</td></tr>
-    <tr><td>opts</td><td>json object</td><td>no</td><td>initial options of current orgchart</td><td>options used for overriding initial options</td></tr>
+    <tr><td>data</td><td>array</td><td>yes</td><td></td><td>datasource for building child nodes</td></tr>
   </tbody>
 </table>
 

demo/center-on-selected-node.html

@@ -47,7 +47,7 @@
       };
 
       $('#chart-container').orgchart({
-        'depth': 2,
+        'visibleLevel': 2,
         'pan': true,
         'data' : datascource,
         'nodeContent': 'title',

demo/edit-chart.html

@@ -8,10 +8,11 @@
   <link rel="stylesheet" href="css/jquery.orgchart.css">
   <link rel="stylesheet" href="css/style.css">
   <style type="text/css">
-    #chart-container { background-color: #eee; height: 300px; }
+    #chart-container { background-color: #eee; height: 500px; }
     .orgchart { background: #fff; }
-    .orgchart.view-state .edge { display: none; }
+    .orgchart.edit-state .edge { display: none; }
     .orgchart .node { width: 150px; }
+    .orgchart .node .title { height: 30px; line-height: 30px; }
     .orgchart .node .title .symbol { margin-top: 1px; }
     #edit-panel {
       position: relative;
@@ -25,7 +26,7 @@
       background-color: #449d44;
     }
     #edit-panel .btn-inputs { font-size: 24px; }
-    #edit-panel.view-state>:not(#chart-state-panel) { display: none; }
+    #edit-panel.edit-state>:not(#chart-state-panel) { display: none; }
     #edit-panel label { font-weight: bold; }
     #edit-panel.edit-parent-node .selected-node-group { display: none; }
     #chart-state-panel, #selected-node, #btn-remove-input { margin-right: 20px; }
@@ -116,6 +117,7 @@
 
     var oc = $('#chart-container').orgchart({
       'data' : datascource,
+      'chartClass': 'edit-state',
       'exportButton': true,
       'exportFilename': 'SportsChart',
       'parentNodeSymbol': 'fa-th-large',
@@ -136,8 +138,8 @@
     });
 
     $('input[name="chart-state"]').on('click', function() {
-      $('.orgchart').toggleClass('view-state', this.value !== 'view');
-      $('#edit-panel').toggleClass('view-state', this.value === 'view');
+      $('.orgchart').toggleClass('edit-state', this.value !== 'view');
+      $('#edit-panel').toggleClass('edit-state', this.value === 'view');
       if ($(this).val() === 'edit') {
         $('.orgchart').find('tr').removeClass('hidden')
           .find('td').removeClass('hidden')
@@ -211,22 +213,24 @@
           oc.addParent($chartContainer.find('.node:first'), { 'name': nodeVals[0], 'id': getId() });
         }
       } else if (nodeType.val() === 'siblings') {
-        oc.addSiblings($node,
-          { 'siblings': nodeVals.map(function(item) { return { 'name': item, 'relationship': '110', 'id': getId() }; })
-        });
+        if ($node[0].id === oc.$chart.find('.node:first')[0].id) {
+          alert('You are not allowed to directly add sibling nodes to root node');
+          return;
+        }
+        oc.addSiblings($node, nodeVals.map(function (item) {
+            return { 'name': item, 'relationship': '110', 'id': getId() };
+          }));
       } else {
         var hasChild = $node.parent().attr('colspan') > 0 ? true : false;
         if (!hasChild) {
           var rel = nodeVals.length > 1 ? '110' : '100';
-          oc.addChildren($node, {
-              'children': nodeVals.map(function(item) {
-                return { 'name': item, 'relationship': rel, 'id': getId() };
-              })
-            }, $.extend({}, $chartContainer.find('.orgchart').data('options'), { depth: 0 }));
+          oc.addChildren($node, nodeVals.map(function (item) {
+              return { 'name': item, 'relationship': rel, 'id': getId() };
+            }));
         } else {
-          oc.addSiblings($node.closest('tr').siblings('.nodes').find('.node:first'),
-            { 'siblings': nodeVals.map(function(item) { return { 'name': item, 'relationship': '110', 'id': getId() }; })
-          });
+          oc.addSiblings($node.closest('tr').siblings('.nodes').find('.node:first'), nodeVals.map(function (item) {
+              return { 'name': item, 'relationship': '110', 'id': getId() };
+            }));
         }
       }
     });

demo/expand-to-given-depth.html

@@ -49,8 +49,8 @@
       ]
     };
 
-    var showDescendents = function(node, depth) {
-      if (depth === 1) {
+    var showDescendents = function(node, visibleLevel) {
+      if (visibleLevel === 1) {
         return false;
       }
       $(node).closest('tr').siblings(':last').children().find('.node:first').each(function(index, node) {
@@ -60,12 +60,12 @@
           $children[0].style.offsetWidth = $children[0].offsetWidth;
         }
         $children.removeClass('slide-up');
-        showDescendents(node, depth--);
+        showDescendents(node, visibleLevel--);
       });
     };
 
     $('#chart-container').orgchart({
-      'depth': 2,
+      'visibleLevel': 2,
       'data' : datascource,
       'nodeContent': 'title',
       'createNode': function($node, data) {

demo/export-chart.html

@@ -51,7 +51,7 @@
 
     $('#chart-container').orgchart({
       'data' : datascource,
-      'depth': 2,
+      'visibleLevel': 2,
       'nodeContent': 'title',
       'exportButton': true,
       'exportFilename': 'MyOrgChart'

demo/index.html

@@ -134,9 +134,9 @@
     <li><a href="reload-data.html" target="_blank">refresh orgchart with new options</a></li>
     <li><a href="report-path.html" target="_blank">report path</a></li>
     <li><a href="toggle-sibs-resp.html" target="_blank">toggle sibling nodes respectively</a></li>
-    <li><a href="ul-datasource.html">ul datasource</a></li>
-    <li><a href="vertical-depth.html">hybrid(horizontal + vertical) chart</a></li>
-    <li><a href="custom-template.html">template for internal structure of node</a></li>
+    <li><a href="ul-datasource.html" target="_blank">ul datasource</a></li>
+    <li><a href="vertical-level.html" target="_blank">hybrid(horizontal + vertical) chart</a></li>
+    <li><a href="custom-template.html" target="_blank">template for internal structure of node</a></li>
   </ol>
   </section>
 </body>

demo/local-datasource.html

@@ -34,7 +34,7 @@
         },
         { 'name': 'Hong Miao', 'title': 'department manager' }
       ]
-    }
+    };
 
     $('#chart-container').orgchart({
       'data' : datasource,

demo/option-createNode.html

@@ -75,7 +75,7 @@
 
     $('#chart-container').orgchart({
       'data' : datascource,
-      'depth': 2,
+      'visibleLevel': 2,
       'nodeContent': 'title',
       'nodeID': 'id',
       'createNode': function($node, data) {

demo/vertical-depth.html → demo/vertical-level.html

@@ -63,8 +63,8 @@
     $('#chart-container').orgchart({
       'data' : datascource,
       'nodeContent': 'title',
-      'verticalDepth': 3,
-      'depth': 4
+      'verticalLevel': 3,
+      'visibleLevel': 4
     });
 
   });