refactor the internal structure of orgchart plugin

dabeng · Mar 18, 2016 · ec739b1 · ec739b1
1 parent aed6758
commit ec739b1
Show file tree

Hide file tree

Showing 8 changed files with 671 additions and 662 deletions.
diff --git a/examples/css/jquery.orgchart.css b/examples/css/jquery.orgchart.css
@@ -18,7 +18,7 @@
  */
 
 .hidden {
-  display: none;
+  display: none!important;
 }
 
 .orgchart {

diff --git a/examples/css/style.css b/examples/css/style.css
@@ -32,12 +32,14 @@ body {
 }
 
 .home-link {
-  margin-top: 10px;
+  margin-top: 20px;
+  margin-right: 20px;
+  float: right;
 }
 
 .home-link a {
   font-size: 36px;
-   color: #d43f3a;
+  color: #d43f3a;
   text-decoration: none;
 }
 

diff --git a/examples/edit-orgchart/index.html b/examples/edit-orgchart/index.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <title>Organization Chart Plugin</title>
+
+    <link rel="icon" type="image/x-icon" href="../img/logo.ico">
+    <link rel="stylesheet" href="../css/font-awesome.min.css">
+    <link rel="stylesheet" href="../css/jquery.orgchart.css">
+    <link rel="stylesheet" href="../css/style.css">
+    <link rel="stylesheet" href="style.css">
+
+</head>
+<body>
+  <div id="chart-container"></div>
+  <div class="edit-panel first">
+    <label for="rd-parent">parent node(root node):</label>
+    <input type="text" class="new-node">
+    <button type="button" id="btn-add-rootnode">Add</button>
+  </div>
+  <div class="edit-panel second">
+    <label>selected node:</label>
+    <input type="text" id="selected-node" disabled="true">
+    <label>new node:</label>
+    <ul id="new-nodelist">
+      <li><input type="text" class="new-node"></li>
+    </ul>
+    <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>
+  </div>
+  <div class="home-link">
+    <a href="https://github.com/dabeng/OrgChart" >More orgcharts</a>
+    <i class="fa fa-star"></i>
+  </div>
+  <script type="text/javascript" src="../js/jquery.min.js"></script>
+  <script type="text/javascript" src="../js/html2canvas.min.js"></script>
+  <script type="text/javascript" src="../js/jquery.orgchart.js"></script>
+  <script type="text/javascript" src="scripts.js"></script>
+  </body>
+</html>
diff --git a/examples/edit-orgchart/scripts.js b/examples/edit-orgchart/scripts.js
@@ -0,0 +1,69 @@
+'use strict';
+
+(function($){
+
+  $(function() {
+
+    var datascource = {
+      'name': 'Ball game',
+      'relationship': '001',
+      'children': [
+        { 'name': 'Football', 'relationship': '110' },
+        { 'name': 'Basketball', 'relationship': '110' },
+        { 'name': 'Volleyball', 'relationship': '110' }
+      ]
+    };
+
+    $('#chart-container').orgchart({
+      'data' : datascource,
+      'nodeTitle': 'name',
+      'exportButton': true,
+      'exportFilename': 'SportsChart',
+      'parentNodeSymbol': 'fa-th-large',
+      'createNode': function($node, data) {
+        $node.on('click', function() {
+          $('#selected-node').val(data.name).data('node', $node);
+        });
+      }
+    });
+
+    $('#btn-add-rootnode').on('click', function() {
+      var rootnodeVal = $('.edit-panel.first').find('.new-node').val().trim();
+      if (!rootnodeVal.length) {
+        alert('Please input value for parent node');
+        return;
+      }
+      $('#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();
+      var $node = $('#selected-node').data('node');
+      if (!rootnodeVal.length) {
+        alert('Please input value for new node');
+        return;
+      }
+      if (!$node) {
+        alert('Please select one node in orgchart');
+        return;
+      }
+      var nodeType = $('input[name="node-type"]:checked');
+      if (!nodeType.length) {
+        alert('Please select a node type');
+        return;
+      }
+      if (nodeType.val() === 'siblings') {
+        $('#chart-container').orgchart('addSiblings', $node, {
+          'siblings': [{ 'name': rootnodeVal, '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' }]
+        });
+      }
+    });
+
+  });
+
+})(jQuery);
diff --git a/examples/edit-orgchart/style.css b/examples/edit-orgchart/style.css
@@ -0,0 +1,109 @@
+#chart-container {
+  background-color: #eee;
+  height: 300px;
+}
+.orgchart {
+  background: #fff;
+}
+
+.orgchart .node {
+  width: 180px;
+}
+
+.orgchart .node .title {
+  font-size: 24px;
+  height: 30px;
+  padding-top: 4px;
+}
+
+.orgchart .node .title .symbol {
+  margin-top: 1px; 
+}
+
+.edit-panel {
+  position: relative;
+  left: 10px;
+  width: calc(100% - 20px);
+  border-radius: 4px;
+  float: left;
+  margin-top: 10px;
+  padding: 10px;
+  color: #fff;
+  font-size: 24px;
+}
+
+.edit-panel input {
+  font-size: 24px;
+  width: 180px;
+}
+
+.edit-panel.first {
+  background-color: #337ab7;
+  margin-top: 15px;
+}
+
+.edit-panel.second {
+  background-color: #449d44;
+}
+
+.edit-panel label {
+  font-weight: bold;
+}
+
+#selected-node, .new-node {
+  margin-right: 20px;
+}
+
+.edit-panel button {
+  color: #333;
+  background-color: #fff;
+  display: inline-block;
+  padding: 6px 12px;
+  margin-bottom: 0;
+  font-size: 24px;
+  line-height: 1.42857143;
+  text-align: center;
+  white-space: nowrap;
+  vertical-align: middle;
+  -ms-touch-action: manipulation;
+  touch-action: manipulation;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  background-image: none;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+}
+
+.edit-panel button:hover,.edit-panel button:focus,.edit-panel button:active {
+  border-color: #eea236;
+  box-shadow:  0 0 10px #eea236;
+}
+
+#new-nodelist {
+  display: inline-block;
+  list-style:none;
+  margin: 0;
+  padding: 0;
+}
+
+#node-type-panel {
+  position: relative;
+  top: 5px;
+}
+
+#node-type-panel input[type='radio'] {
+  display: inline-block;
+  height: 28px;
+  width: 28px;
+}
+
+#node-type-panel input[type='radio']+label {
+  vertical-align: super;
+}
+
+#btn-add-node {
+  margin-left: 20px;
+}