position node in specific level

dabeng · Nov 15, 2022 · ee5c46e · ee5c46e
1 parent 27c60e4
commit ee5c46e
Show file tree

Hide file tree

Showing 8 changed files with 73 additions and 11 deletions.
diff --git a/README.md b/README.md
@@ -133,6 +133,10 @@ It's not a big deal. You just turn to the method init().
 
 No problem. With the help of ES6 Template literals, we can customize the any complex node structure rather than the common title and content sections.
 
+- [I want to position node in specific level. How can i do that ?](https://dabeng.github.io/OrgChart/level-offset.html)
+
+You need the solution based on new datasource structure with levelOffset prop + callback createNode() + CSS custom properties(variables)
+
 ### how to start up demos locally
 
 - you have to install node.js v6+ because our unit tests are based on jsdom v11

diff --git a/demo/index.html b/demo/index.html
@@ -141,6 +141,7 @@
     <li><a href="responsive-design.html" target="_blank">responsive design</a></li>
     <li><a href="custom-template.html" target="_blank">template for internal structure of node</a></li>
     <li><a href="get-related-nodes.html" target="_blank">Highlight related nodes</a></li>
+    <li><a href="level-offset.html" target="_blank">position node in specific level</a></li>
   </ol>
   </section>
 </body>

diff --git a/demo/level-offset.html b/demo/level-offset.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>Organization Chart Plugin</title>
+  <link rel="icon" href="img/logo.png">
+  <link rel="stylesheet" href="css/jquery.orgchart.css">
+  <link rel="stylesheet" href="css/style.css">
+</head>
+<body>
+  <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">
+    $(function() {
+
+    var datasource = {
+      'name': 'Lao Lao',
+      'title': 'general manager',
+      'children': [
+        { 'name': 'Bo Miao', 'title': 'department manager', 'levelOffset': 1 },
+        { 'name': 'Su Miao', 'title': 'department manager',
+          'children': [
+            { 'name': 'Tie Hua', 'title': 'senior engineer' },
+            { 'name': 'Hei Hei', 'title': 'senior engineer',
+              'children': [
+                { 'name': 'Dan Dan', 'title': 'engineer' }
+              ]
+            },
+            { 'name': 'Pang Pang', 'title': 'senior engineer', 'levelOffset': 1 }
+          ]
+        },
+        { 'name': 'Hong Miao', 'title': 'department manager', 'levelOffset': 2 }
+      ]
+    };
+
+    $('#chart-container').orgchart({
+      'data' : datasource,
+      'nodeContent': 'title',
+      'createNode': function(node, data) {
+        if (data.levelOffset) {
+          node.css({
+            'margin-top': (data.levelOffset * 70) + 'px',
+            '--top': (-11 - data.levelOffset * 70) + 'px',
+            '--height': (9 + data.levelOffset * 70) + 'px',
+            '--top-cross-point': (-13 - data.levelOffset * 70) + 'px',
+            '--height-cross-point': (11 + data.levelOffset * 70) + 'px'
+          });
+        }
+      }
+    });
+
+  });
+  </script>
+  </body>
+</html>
diff --git a/dist/css/jquery.orgchart.css b/dist/css/jquery.orgchart.css
@@ -155,16 +155,16 @@
 .orgchart > ul > li > ul li > .node::before {
   content: "";
   position: absolute;
-  top: -11px;
+  top: var(--top, -11px);
   left: calc(50% - 1px);
   width: 2px;
-  height: 9px;
+  height: var(--height, 9px);
   background-color: rgba(217, 83, 79, 0.8);
 }
 
 .orgchart > ul > li > ul li.isSiblingsCollapsed > .node::before {
-  top: -13px;
-  height: 11px;
+  top: var(--top-cross-point, -13px);
+  height: var(--height-cross-point, 11px);
 }
 
 /* node styling */

diff --git a/dist/css/jquery.orgchart.min.css b/dist/css/jquery.orgchart.min.css
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "orgchart",
-  "version": "3.1.2",
+  "version": "3.1.3",
   "description": "Simple and direct organization chart(tree-like hierarchy) plugin based on pure DOM and jQuery.",
   "main": "./dist/js/jquery.orgchart.min.js",
   "style": [

diff --git a/src/css/jquery.orgchart.css b/src/css/jquery.orgchart.css
@@ -155,16 +155,16 @@
 .orgchart > ul > li > ul li > .node::before {
   content: "";
   position: absolute;
-  top: -11px;
+  top: var(--top, -11px);
   left: calc(50% - 1px);
   width: 2px;
-  height: 9px;
+  height: var(--height, 9px);
   background-color: rgba(217, 83, 79, 0.8);
 }
 
 .orgchart > ul > li > ul li.isSiblingsCollapsed > .node::before {
-  top: -13px;
-  height: 11px;
+  top: var(--top-cross-point, -13px);
+  height: var(--height-cross-point, 11px);
 }
 
 /* node styling */