updating edit-orgchart demo

dabeng · Mar 31, 2016 · 45e150b · 45e150b
1 parent 95966ff
commit 45e150b
Show file tree

Hide file tree

Showing 5 changed files with 62 additions and 31 deletions.
diff --git a/examples/edit-orgchart/index.html b/examples/edit-orgchart/index.html
@@ -28,12 +28,15 @@
     <ul id="new-nodelist">
       <li><input type="text" class="new-node"></li>
     </ul>
+    <i class="fa fa-plus-circle btn-inputs" id="btn-add-input"></i>
+    <i class="fa fa-minus-circle btn-inputs" id="btn-remove-input"></i>
     <span id="node-type-panel">
       <input type="radio" name="node-type" id="rd-child" value="children"><label for="rd-child">Child</label>
       <input type="radio" name="node-type" id="rd-sibling" value="siblings"><label for="rd-sibling">Sibling</label>
     </span>
-    <button type="button" id="btn-add-node">Add</button>
-    <button type="button" id="btn-delete-node">Delete</button>
+    <button type="button" id="btn-add-nodes">Add</button>
+    <button type="button" id="btn-delete-nodes">Delete</button>
+    <button type="button" id="btn-reset">Reset</button>
   </div>
   <div class="home-link">
     <a href="https://github.com/dabeng/OrgChart" >More orgcharts</a>

diff --git a/examples/edit-orgchart/scripts.js b/examples/edit-orgchart/scripts.js
@@ -25,6 +25,11 @@
           $('#selected-node').val(data.name).data('node', $node);
         });
       }
+    })
+    .on('click', '.orgchart', function(event) {
+      if (!$(event.target).closest('.node').length) {
+        $('#selected-node').val('');
+      }
     });
 
     $('#btn-add-rootnode').on('click', function() {
@@ -36,10 +41,27 @@
       $('#chart-container').orgchart('addParent', $('#chart-container').find('.node:first'), { 'name': rootnodeVal });
     });
 
-    $('#btn-add-node').on('click', function() {
-      var rootnodeVal = $('.edit-panel.second').find('.new-node').val().trim();
+    $('#btn-add-input').on('click', function() {
+      $('#new-nodelist').append('<li><input type="text" class="new-node"></li>');
+    });
+
+    $('#btn-remove-input').on('click', function() {
+      var inputs = $('#new-nodelist').children('li');
+      if (inputs.length > 1) {
+        inputs.last().remove();
+      }
+    });
+
+    $('#btn-add-nodes').on('click', function() {
+      var nodeVals = [];
+      $('#new-nodelist').find('.new-node').each(function(index, item) {
+        var validVal = item.value.trim();
+        if (validVal.length) {
+          nodeVals.push(validVal);
+        }
+      });
       var $node = $('#selected-node').data('node');
-      if (!rootnodeVal.length) {
+      if (!nodeVals.length) {
         alert('Please input value for new node');
         return;
       }
@@ -54,16 +76,22 @@
       }
       if (nodeType.val() === 'siblings') {
         $('#chart-container').orgchart('addSiblings', $node, {
-          'siblings': [{ 'name': rootnodeVal, 'relationship': '110' }]
+          'siblings': nodeVals.map(function(item) { return { 'name': item, 'relationship': '110' }; })
         });
       } else {
         var hasChild = $node.parent().attr('colspan') > 2 ? true : false;
         $('#chart-container').orgchart('addChildren', $node, {
-          'children': [{ 'name': rootnodeVal, 'relationship': '1' + (hasChild ? 1 : 0) + '0' }]
+          'children': [{ 'name': nodeVals, 'relationship': '1' + (hasChild ? 1 : 0) + '0' }]
         });
       }
     });
 
+    $('#btn-reset').on('click', function() {
+      $('.orgchart').trigger('click');
+      $('#new-nodelist').find('input:first').val('').parent().siblings().remove();
+      $('#node-type-panel').find('input').prop('checked', false);
+    });
+
   });
 
 })(jQuery);
diff --git a/examples/edit-orgchart/style.css b/examples/edit-orgchart/style.css
@@ -6,13 +6,9 @@
   background: #fff;
 }
 
-.orgchart .node {
-  width: 180px;
-}
-
 .orgchart .node .title {
-  font-size: 24px;
-  height: 30px;
+/*  font-size: 24px;
+  height: 30px;*/
   padding-top: 4px;
 }
 
@@ -29,12 +25,6 @@
   margin-top: 10px;
   padding: 10px;
   color: #fff;
-  font-size: 24px;
-}
-
-.edit-panel input {
-  font-size: 24px;
-  width: 180px;
 }
 
 .edit-panel.first {
@@ -50,7 +40,7 @@
   font-weight: bold;
 }
 
-#selected-node, .new-node {
+#selected-node, #btn-remove-input {
   margin-right: 20px;
 }
 
@@ -60,7 +50,6 @@
   display: inline-block;
   padding: 6px 12px;
   margin-bottom: 0;
-  font-size: 24px;
   line-height: 1.42857143;
   text-align: center;
   white-space: nowrap;
@@ -85,8 +74,22 @@
 #new-nodelist {
   display: inline-block;
   list-style:none;
-  margin: 0;
+  margin-top: -2px;
   padding: 0;
+  vertical-align: text-top;
+}
+
+#new-nodelist>* {
+  padding-bottom: 4px;
+}
+
+.btn-inputs {
+  font-size: 24px;
+  vertical-align: sub;
+}
+
+.btn-inputs:hover {
+  text-shadow: 0 0 4px #fff;
 }
 
 #node-type-panel {
@@ -96,14 +99,15 @@
 
 #node-type-panel input[type='radio'] {
   display: inline-block;
-  height: 28px;
-  width: 28px;
+  height: 24px;
+  width: 24px;
+  vertical-align: sub;
 }
 
 #node-type-panel input[type='radio']+label {
   vertical-align: super;
 }
 
-#btn-add-node {
+#btn-add-nodes {
   margin-left: 20px;
 }
diff --git a/examples/js/jquery.orgchart.js b/examples/js/jquery.orgchart.js
@@ -596,16 +596,14 @@
     // just build the sibling nodes for the specific node
     if ($nodeChart.parent().is('td')) {
       var $parent = $nodeChart.closest('tr').prevAll('tr:last');
-      if ($parent.is(':hidden')) {
-        $parent.removeClass('hidden');
-      }
       $nodeChart.closest('tr').prevAll('tr:lt(2)').remove();
       var childCount = 0;
       buildChildNode.call($nodeChart.closest('.orgchart').parent(),$nodeChart.parent().closest('table'), nodeData, opts, function() {
         if (++childCount === newSiblingCount) {
           var $siblingTds = $nodeChart.parent().closest('table').children().children('tr:last').children('td');
           if (existingSibligCount > 1) {
             complementLine($siblingTds.eq(0).before($nodeChart.closest('td').siblings().andSelf().unwrap()), siblingCount, existingSibligCount);
+            $siblingTds.addClass('hidden').find('.node').addClass('slide-left');
           } else {
             complementLine($siblingTds.eq(insertPostion).after($nodeChart.closest('td').unwrap()), siblingCount, 1);
             $siblingTds.not(':eq(' + insertPostion + 1 + ')').addClass('hidden')

diff --git a/jquery.orgchart.js b/jquery.orgchart.js
@@ -596,16 +596,14 @@
     // just build the sibling nodes for the specific node
     if ($nodeChart.parent().is('td')) {
       var $parent = $nodeChart.closest('tr').prevAll('tr:last');
-      if ($parent.is(':hidden')) {
-        $parent.removeClass('hidden');
-      }
       $nodeChart.closest('tr').prevAll('tr:lt(2)').remove();
       var childCount = 0;
       buildChildNode.call($nodeChart.closest('.orgchart').parent(),$nodeChart.parent().closest('table'), nodeData, opts, function() {
         if (++childCount === newSiblingCount) {
           var $siblingTds = $nodeChart.parent().closest('table').children().children('tr:last').children('td');
           if (existingSibligCount > 1) {
             complementLine($siblingTds.eq(0).before($nodeChart.closest('td').siblings().andSelf().unwrap()), siblingCount, existingSibligCount);
+            $siblingTds.addClass('hidden').find('.node').addClass('slide-left');
           } else {
             complementLine($siblingTds.eq(insertPostion).after($nodeChart.closest('td').unwrap()), siblingCount, 1);
             $siblingTds.not(':eq(' + insertPostion + 1 + ')').addClass('hidden')