update the demo edit-chart

Author: dabeng

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "orgchart",
-  "version": "1.2.5",
+  "version": "1.2.6",
   "homepage": "https://github.com/dabeng/OrgChart",
   "authors": [
     "dabeng <[email protected]>"

dist/js/jquery.orgchart.js

@@ -1098,7 +1098,7 @@
     var $sibs = $parent.parent().siblings();
     if ($parent.is('td')) {
       if (getNodeState($node, 'siblings').exist) {
-        $sibs.eq(2).children('.top:lt(2)').remove();
+        $sibs.eq(2).children('.topLine:lt(2)').remove();
         $sibs.eq(':lt(2)').children().attr('colspan', $sibs.eq(2).children().length);
         $parent.remove();
       } else {

examples/edit-orgchart/scripts.js

@@ -6,11 +6,10 @@
 
     var datascource = {
       'name': 'Ball game',
-      'relationship': '001',
       'children': [
-        { 'name': 'Football', 'relationship': '110' },
-        { 'name': 'Basketball', 'relationship': '110' },
-        { 'name': 'Volleyball', 'relationship': '110' }
+        { 'name': 'Football' },
+        { 'name': 'Basketball' },
+        { 'name': 'Volleyball' }
       ]
     };
 
@@ -25,21 +24,21 @@
       'parentNodeSymbol': 'fa-th-large',
       'createNode': function($node, data) {
         $node[0].id = getId();
-        $node.on('click', function(event) {
-          if (!$(event.target).is('.edge')) {
-            $('#selected-node').val(data.name).data('node', $node);
-          }
-        });
       }
     })
+    .on('click', '.node', function() {
+      var $this = $(this);
+      $('#selected-node').val($this.find('.title').text()).data('node', $this);
+    })
     .on('click', '.orgchart', function(event) {
       if (!$(event.target).closest('.node').length) {
         $('#selected-node').val('');
       }
     });
 
     $('input[name="chart-state"]').on('click', function() {
-      $('#edit-panel, .orgchart').toggleClass('view-state');
+      $('.orgchart').toggleClass('view-state', this.value !== 'view');
+      $('#edit-panel').toggleClass('view-state', this.value === 'view');
       if ($(this).val() === 'edit') {
         $('.orgchart').find('tr').removeClass('hidden')
           .find('td').removeClass('hidden')
@@ -85,16 +84,33 @@
         return;
       }
       var nodeType = $('input[name="node-type"]:checked');
-      if (nodeType.val() !== 'parent' && !$node) {
-        alert('Please select one node in orgchart');
-        return;
-      }
       if (!nodeType.length) {
         alert('Please select a node type');
         return;
       }
+      if (nodeType.val() !== 'parent' && !$('.orgchart').length) {
+        alert('Please creat the root node firstly when you want to build up the orgchart from the scratch');
+        return;
+      }
+      if (nodeType.val() !== 'parent' && !$node) {
+        alert('Please select one node in orgchart');
+        return;
+      }
       if (nodeType.val() === 'parent') {
-        $chartContainer.orgchart('addParent', $chartContainer.find('.node:first'), { 'name': nodeVals[0], 'Id': getId() });
+        if (!$chartContainer.children().length) {// if the original chart has been deleted
+          $chartContainer.orgchart({
+            'data' : { 'name': nodeVals[0] },
+            'exportButton': true,
+            'exportFilename': 'SportsChart',
+            'parentNodeSymbol': 'fa-th-large',
+            'createNode': function($node, data) {
+              $node[0].id = getId();
+            }
+          })
+          .find('.orgchart').addClass('view-state');
+        } else {
+          $chartContainer.orgchart('addParent', $chartContainer.find('.node:first'), { 'name': nodeVals[0], 'Id': getId() });
+        }
       } else if (nodeType.val() === 'siblings') {
         $chartContainer.orgchart('addSiblings', $node,
           { 'siblings': nodeVals.map(function(item) { return { 'name': item, 'relationship': '110', 'Id': getId() }; })
@@ -121,13 +137,18 @@
       if (!$node) {
         alert('Please select one node in orgchart');
         return;
+      } else if ($node[0] === $('.orgchart').find('.node:first')[0]) {
+        if (!window.confirm('Are you sure you want to delete the whole chart?')) {
+          return;
+        }
       }
       $('#chart-container').orgchart('removeNodes', $node);
-      $('#selected-node').data('node', null);
+      $('#selected-node').val('').data('node', null);
     });
 
     $('#btn-reset').on('click', function() {
-      $('.orgchart').trigger('click');
+      $('.orgchart').find('.focused').removeClass('focused');
+      $('#selected-node').val('');
       $('#new-nodelist').find('input:first').val('').parent().siblings().remove();
       $('#node-type-panel').find('input').prop('checked', false);
     });

package.json

@@ -1,6 +1,6 @@
 {
   "name": "orgchart",
-  "version": "1.2.5",
+  "version": "1.2.6",
   "description": "Simple and direct organization chart(tree-like hierarchy) plugin based on pure DOM and jQuery.",
   "main": "./dist/js/jquery.orgchart.js",
   "style": [