orgchart 3.6.0 → 3.8.0

package/src/js/jquery.orgchart.js

@@ -21,6 +21,19 @@
     this.$chartContainer = $(elem);
     this.opts = opts;
     this.defaultOptions = {
+      'icons': {
+        'theme': 'oci',
+        'parentNode': 'oci-menu',
+        'expandToUp': 'oci-chevron-up',
+        'collapseToDown': 'oci-chevron-down',
+        'collapseToLeft': 'oci-chevron-left',
+        'expandToRight': 'oci-chevron-right',
+        'backToCompact': 'oci-corner-top-left',
+        'backToLoose': 'oci-corner-bottom-right',
+        'collapsed': 'oci-plus-square',
+        'expanded': 'oci-minus-square',
+        'spinner': 'oci-spinner'
+      },
       'nodeTitle': 'name',
       'nodeId': 'id',
       'toggleSiblingsResp': false,
@@ -30,7 +43,6 @@
       'exportButtonName': 'Export',
       'exportFilename': 'OrgChart',
       'exportFileextension': 'png',
-      'parentNodeSymbol': 'oci-leader',
       'draggable': false,
       'direction': 't2b',
       'pan': false,
@@ -71,7 +83,7 @@
           this.buildHierarchy($root, this.options.ajaxURL ? data : this.attachRel(data, '00'));
         }
       } else {
-        $chart.append('<i class="oci oci-spinner spinner"></i>');
+        $chart.append(`<i class="${this.options.icons.theme} ${this.options.icons.spinner} spinner"></i>`);
         $.ajax({
           'url': data,
           'dataType': 'json'
@@ -103,6 +115,20 @@
 
       return this;
     },
+    handleCompactNodes: function () {
+      // caculate the compact nodes' level which is used to add different styles
+      this.$chart.find('.node.compact')
+        .each((index, node) => {
+          $(node).addClass($(node).parents('.compact').length % 2 === 0 ? 'even' : 'odd');
+        }); // the following code snippets is used to add direction arrows for the most top compact node, however the styles is not adjusted correctly
+        // .filter((index, node) => !$(node).parent().is('.compact'))
+        // .each((index, node) => {
+        //   $(node).append(`<i class="edge verticalEdge topEdge ${this.options.icons.theme}"></i>`);
+        //   if (this.getSiblings($(node)).length) {
+        //     $(node).append(`<i class="edge horizontalEdge rightEdge ${this.options.icons.theme}"></i><i class="edge horizontalEdge leftEdge ${this.options.icons.theme}"></i>`);
+        //   }
+        // });
+    },
     //
     triggerInitEvent: function () {
       var that = this;
@@ -112,6 +138,7 @@
         for (var i = 0; i < mutations.length; i++) {
           for (var j = 0; j < mutations[i].addedNodes.length; j++) {
             if (mutations[i].addedNodes[j].classList.contains('orgchart')) {
+              that.handleCompactNodes();
               if (that.options.initCompleted && typeof that.options.initCompleted === 'function') {
                 that.options.initCompleted(that.$chart);
               }
@@ -367,14 +394,21 @@
       });
       return subObj;
     },
-    //
+    // process datasource and add necessary information
     attachRel: function (data, flags) {
       var that = this;
       data.relationship = flags + (data.children && data.children.length > 0 ? 1 : 0);
+      if (this.options?.compact?.constructor === Function && this.options.compact(data)) {
+        data.compact = true;
+      }
       if (data.children) {
         data.children.forEach(function(item) {
-          if (data.isHybrid || data.isVertical) {
-            item.isVertical = true;
+          if (data.hybrid || data.vertical) { // identify all the descendant nodes except the root node of hybrid structure
+            item.vertical = true;
+          } else if (data.compact && item.children) { // identify all the compact ancestor nodes
+            item.compact = true;
+          } else if (data.compact && !item.children) { // identify all the compact descendant nodes
+            item.associatedCompact = true;
           }
           that.attachRel(item, '1' + (data.children.length > 1 ? 1 : 0));
         });
@@ -568,7 +602,7 @@
         $animatedNodes.closest('.hierarchy').addClass('isCollapsedDescendant');
       }
       if ($lowerLevel.is('.vertical') || $lowerLevel.find('.vertical').length) {
-        $animatedNodes.find('.oci-minus-square').removeClass('oci-minus-square').addClass('oci-plus-square');
+        $animatedNodes.find(this.options.icons.expanded).removeClass(this.options.icons.expanded).addClass(this.options.icons.collapsed);
       }
       this.repaint($animatedNodes.get(0));
       $animatedNodes.addClass('sliding slide-up').eq(0).one('transitionend', { 'animatedNodes': $animatedNodes, 'lowerLevel': $lowerLevel, 'node': $node }, this.hideChildrenEnd.bind(this));
@@ -647,7 +681,7 @@
       event.data.visibleNodes.removeClass('sliding');
       if (this.isInAction($node)) {
         this.switchHorizontalArrow($node);
-        $node.children('.topEdge').removeClass('oci-chevron-up').addClass('oci-chevron-down');
+        $node.children('.topEdge').removeClass(this.options.icons.expandToUp).addClass(this.options.icons.collapseToDown);
       }
     },
     //
@@ -702,7 +736,7 @@
       }
 
       $edge.addClass('hidden');
-      $edge.parent().append('<i class="oci oci-spinner spinner"></i>')
+      $edge.parent().append(`<i class="${this.options.icons.theme} ${this.options.icons.spinner} spinner"></i>`)
         .children().not('.spinner').css('opacity', 0.2);
       $chart.data('inAjax', true);
       $('.oc-export-btn').prop('disabled', true);
@@ -719,11 +753,16 @@
     },
     // whether the cursor is hovering over the node
     isInAction: function ($node) {
-      return $node.children('.edge').attr('class').indexOf('oci-') > -1 ? true : false;
+      return [
+        this.options.icons.expandToUp,
+        this.options.icons.collapseToDown,
+        this.options.icons.collapseToLeft,
+        this.options.icons.expandToRight
+      ].some((icon) => $node.children('.edge').attr('class').indexOf(icon) > -1);
     },
     //
     switchVerticalArrow: function ($arrow) {
-      $arrow.toggleClass('oci-chevron-up').toggleClass('oci-chevron-down');
+      $arrow.toggleClass(`${this.options.icons.expandToUp} ${this.options.icons.collapseToDown}`);
     },
     //
     switchHorizontalArrow: function ($node) {
@@ -732,24 +771,24 @@
         var $prevSib = $node.parent().prev();
         if ($prevSib.length) {
           if ($prevSib.is('.hidden')) {
-            $node.children('.leftEdge').addClass('oci-chevron-left').removeClass('oci-chevron-right');
+            $node.children('.leftEdge').addClass(opts.icons.collapseToLeft).removeClass(opts.icons.expandToRight);
           } else {
-            $node.children('.leftEdge').addClass('oci-chevron-right').removeClass('oci-chevron-left');
+            $node.children('.leftEdge').addClass(opts.icons.expandToRight).removeClass(opts.icons.collapseToLeft);
           }
         }
         var $nextSib = $node.parent().next();
         if ($nextSib.length) {
           if ($nextSib.is('.hidden')) {
-            $node.children('.rightEdge').addClass('oci-chevron-right').removeClass('oci-chevron-left');
+            $node.children('.rightEdge').addClass(opts.icons.expandToRight).removeClass(opts.icons.collapseToLeft);
           } else {
-            $node.children('.rightEdge').addClass('oci-chevron-left').removeClass('oci-chevron-right');
+            $node.children('.rightEdge').addClass(opts.icons.collapseToLeft).removeClass(opts.icons.expandToRight);
           }
         }
       } else {
         var $sibs = $node.parent().siblings();
         var sibsVisible = $sibs.length ? !$sibs.is('.hidden') : false;
-        $node.children('.leftEdge').toggleClass('oci-chevron-right', sibsVisible).toggleClass('oci-chevron-left', !sibsVisible);
-        $node.children('.rightEdge').toggleClass('oci-chevron-left', sibsVisible).toggleClass('oci-chevron-right', !sibsVisible);
+        $node.children('.leftEdge').toggleClass(opts.icons.expandToRight, sibsVisible).toggleClass(opts.icons.collapseToLeft, !sibsVisible);
+        $node.children('.rightEdge').toggleClass(opts.icons.collapseToLeft, sibsVisible).toggleClass(opts.icons.expandToRight, !sibsVisible);
       }
     },
     //
@@ -767,10 +806,10 @@
         if (event.type === 'mouseenter') {
           if ($node.children('.toggleBtn').length) {
             flag = this.getNodeState($node, 'children').visible;
-            $toggleBtn.toggleClass('oci-plus-square', !flag).toggleClass('oci-minus-square', flag);
+            $toggleBtn.toggleClass(this.options.icons.collapsed, !flag).toggleClass(this.options.icons.expanded, flag);
           }
         } else {
-          $toggleBtn.removeClass('oci-plus-square oci-minus-square');
+          $toggleBtn.removeClass(`${this.options.icons.collapsed} ${this.options.icons.expanded}`);
         }
       } else {
         var $topEdge = $node.children('.topEdge');
@@ -780,17 +819,17 @@
         if (event.type === 'mouseenter') {
           if ($topEdge.length) {
             flag = this.getNodeState($node, 'parent').visible;
-            $topEdge.toggleClass('oci-chevron-up', !flag).toggleClass('oci-chevron-down', flag);
+            $topEdge.toggleClass(this.options.icons.expandToUp, !flag).toggleClass(this.options.icons.collapseToDown, flag);
           }
           if ($bottomEdge.length) {
             flag = this.getNodeState($node, 'children').visible;
-            $bottomEdge.toggleClass('oci-chevron-down', !flag).toggleClass('oci-chevron-up', flag);
+            $bottomEdge.toggleClass(this.options.icons.collapseToDown, !flag).toggleClass(this.options.icons.expandToUp, flag);
           }
           if ($leftEdge.length) {
             this.switchHorizontalArrow($node);
           }
         } else {
-          $node.children('.edge').removeClass('oci-chevron-up oci-chevron-down oci-chevron-right oci-chevron-left');
+          $node.children('.edge').removeClass(`${this.options.icons.expandToUp} ${this.options.icons.collapseToDown} ${this.options.icons.collapseToLeft} ${this.options.icons.expandToRight}`);
         }
       }
     },
@@ -939,6 +978,19 @@
         }
       }
     },
+    // show the compact node's children in the compact mode
+    backToCompactHandler: function (event) {
+      $(event.delegateTarget).removeClass('looseMode')
+        .children('.backToCompactSymbol').addClass('hidden').end()
+        .children('.backToLooseSymbol').removeClass('hidden');
+    },
+    // show the compact node's children in the loose mode 
+    backToLooseHandler: function (event) {
+      $(event.delegateTarget)
+        .addClass('looseMode')
+        .children('.backToLooseSymbol').addClass('hidden').end()
+        .children('.backToCompactSymbol').removeClass('hidden');
+    },
     //
     expandVNodesEnd: function (event) {
       event.data.vNodes.removeClass('sliding');
@@ -954,14 +1006,14 @@
       var $descendants = $descWrapper.find('.node');
       var $children = $descWrapper.children().children('.node');
       if ($children.is('.sliding')) { return; }
-      $toggleBtn.toggleClass('oci-plus-square oci-minus-square');
+      $toggleBtn.toggleClass(`${this.options.icons.collapsed} ${this.options.icons.expanded}`);
       if ($descendants.eq(0).is('.slide-up')) {
         $descWrapper.removeClass('hidden');
         this.repaint($children.get(0));
         $children.addClass('sliding').removeClass('slide-up').eq(0).one('transitionend', { 'vNodes': $children }, this.expandVNodesEnd);
       } else {
         $descendants.addClass('sliding slide-up').eq(0).one('transitionend', { 'vNodes': $descendants }, this.collapseVNodesEnd);
-        $descendants.find('.toggleBtn').removeClass('oci-minus-square oci-plus-square');
+        $descendants.find('.toggleBtn').removeClass(`${this.options.icons.collapsed} ${this.options.icons.expanded}`);
       }
     },
     //
@@ -1122,7 +1174,7 @@
       // special process for hybrid chart
       var datasource = this.$chart.data('options').data;
       var digger = new JSONDigger(datasource, this.$chart.data('options').nodeId, 'children');
-      const hybridNode = digger.findOneNode({ 'isHybrid': true });
+      const hybridNode = digger.findOneNode({ 'hybrid': true });
       if (this.$chart.data('options').verticalLevel > 1 || hybridNode) {
         var draggedNode = digger.findNodeById($dragged.data('nodeData').id);
         var copy = Object.assign({}, draggedNode);
@@ -1138,14 +1190,14 @@
         // The folowing code snippets are used to process horizontal chart
         // firstly, deal with the hierarchy of drop zone
         if (!$dropZone.siblings('.nodes').length) { // if the drop zone is a leaf node
-          $dropZone.append('<i class="edge verticalEdge bottomEdge oci"></i>')
+          $dropZone.append(`<i class="edge verticalEdge bottomEdge ${this.options.icons.theme}"></i>`)
             .after('<ul class="nodes"></ul>')
             .siblings('.nodes').append($dragged.find('.horizontalEdge').remove().end().closest('.hierarchy'));
           if ($dropZone.children('.title').length) {
-            $dropZone.children('.title').prepend('<i class="oci '+  this.$chart.data('options').parentNodeSymbol + ' symbol"></i>');
+            $dropZone.children('.title').prepend(`<i class="${this.options.icons.theme} ${this.$chart.data('options').icons.parentNode} parentNodeSymbol"></i>`);
           }
         } else {
-          var horizontalEdges = '<i class="edge horizontalEdge rightEdge oci"></i><i class="edge horizontalEdge leftEdge oci"></i>';
+          var horizontalEdges = `<i class="edge horizontalEdge rightEdge ${this.options.icons.theme}"></i><i class="edge horizontalEdge leftEdge ${this.options.icons.theme}"></i>`;
           if (!$dragged.find('.horizontalEdge').length) {
             $dragged.append(horizontalEdges);
           }
@@ -1160,7 +1212,7 @@
           $dragZone.siblings('.nodes').children('.hierarchy').find('.node:first')
             .find('.horizontalEdge').remove();
         } else if ($dragZone.siblings('.nodes').children('.hierarchy').length === 0) {
-          $dragZone.find('.bottomEdge, .symbol').remove()
+          $dragZone.find('.bottomEdge, .parentNodeSymbol').remove()
             .end().siblings('.nodes').remove();
         }
       }
@@ -1344,29 +1396,39 @@
       var nodeData = $.extend({}, data);
       delete nodeData.children;
       $nodeDiv.data('nodeData', nodeData);
-      // append 4 direction arrows or expand/collapse buttons
+      // append 4 direction arrows or expand/collapse buttons or reset buttons
       var flags = data.relationship || '';
-      if ((opts.verticalLevel && level >= opts.verticalLevel) || data.isVertical) {
+      if ((opts.verticalLevel && level >= opts.verticalLevel) || data.vertical) {
         if (Number(flags.substr(2,1))) {
-          $nodeDiv.append('<i class="toggleBtn oci"></i>')
-            .children('.title').prepend('<i class="oci '+ opts.parentNodeSymbol + ' symbol"></i>');
+          $nodeDiv.append(`<i class="toggleBtn ${opts.icons.theme}"></i>`)
+            .children('.title').prepend(`<i class="${opts.icons.theme} ${opts.icons.parentNode} parentNodeSymbol"></i>`);
         }
-      } else if (data.isHybrid) {
+      } else if (data.hybrid) {
         if (Number(flags.substr(2,1))) {
-          $nodeDiv.append('<i class="edge verticalEdge bottomEdge oci"></i>')
-            .children('.title').prepend('<i class="oci '+ opts.parentNodeSymbol + ' symbol"></i>');
+          $nodeDiv.append(`<i class="edge verticalEdge bottomEdge ${opts.icons.theme}"></i>`)
+            .children('.title').prepend(`<i class="${opts.icons.theme} ${opts.icons.parentNode} parentNodeSymbol"></i>`);
         }
+      } else if (data.compact) {
+        $nodeDiv.css('grid-template-columns', `repeat(${Math.floor(Math.sqrt(data.children.length + 1))}, auto)`);
+        if (Number(flags.substr(2,1))) {
+          $nodeDiv.append(`
+            <i class="${opts.icons.theme} ${opts.icons.backToCompact} backToCompactSymbol hidden"></i>
+            <i class="${opts.icons.theme} ${opts.icons.backToLoose} backToLooseSymbol"></i>
+            `)
+            .children('.title').prepend(`<i class="${opts.icons.theme} ${opts.icons.parentNode} parentNodeSymbol"></i>`);
+        }
+      } else if (data.associatedCompact) {
+   
       } else {
         if (Number(flags.substr(0,1))) {
-          $nodeDiv.append('<i class="edge verticalEdge topEdge oci"></i>');
+          $nodeDiv.append(`<i class="edge verticalEdge topEdge ${opts.icons.theme}"></i>`);
         }
         if(Number(flags.substr(1,1))) {
-          $nodeDiv.append('<i class="edge horizontalEdge rightEdge oci"></i>' +
-            '<i class="edge horizontalEdge leftEdge oci"></i>');
+          $nodeDiv.append(`<i class="edge horizontalEdge rightEdge ${opts.icons.theme}"></i><i class="edge horizontalEdge leftEdge ${opts.icons.theme}"></i>`);
         }
         if(Number(flags.substr(2,1))) {
-          $nodeDiv.append('<i class="edge verticalEdge bottomEdge oci"></i>')
-            .children('.title').prepend('<i class="oci '+ opts.parentNodeSymbol + ' symbol"></i>');
+          $nodeDiv.append(`<i class="edge verticalEdge bottomEdge ${opts.icons.theme}"></i>`)
+            .children('.title').prepend(`<i class="${opts.icons.theme} ${opts.icons.parentNode} parentNodeSymbol"></i>`);
         }
       }
 
@@ -1376,6 +1438,8 @@
       $nodeDiv.on('click', '.bottomEdge', this.bottomEdgeClickHandler.bind(this));
       $nodeDiv.on('click', '.leftEdge, .rightEdge', this.hEdgeClickHandler.bind(this));
       $nodeDiv.on('click', '.toggleBtn', this.toggleVNodes.bind(this));
+      $nodeDiv.on('click', '> .backToCompactSymbol',this.backToCompactHandler.bind(this));
+      $nodeDiv.on('click', '> .backToLooseSymbol',this.backToLooseHandler.bind(this));
 
       if (opts.draggable) {
         this.bindDragDrop($nodeDiv);
@@ -1395,6 +1459,7 @@
       var that = this;
       var opts = this.options;
       var level = 0;
+      var $nodeDiv;
       if (data.level) {
         level = data.level;
       } else {
@@ -1402,23 +1467,26 @@
       }
       // Construct the node
       if (Object.keys(data).length > 2) {
-        $appendTo.append(this.createNode(data));
+        $nodeDiv = this.createNode(data);
+        $appendTo.append($nodeDiv);
       }
       // Construct the "inferior nodes"
       if (data.children && data.children.length) {
         var isHidden = level + 1 > opts.visibleLevel || (data.collapsed !== undefined && data.collapsed);
         var $nodesLayer;
-        if ((opts.verticalLevel && (level + 1) >= opts.verticalLevel) || data.isHybrid) {
+        if ((opts.verticalLevel && (level + 1) >= opts.verticalLevel) || data.hybrid) {
           $nodesLayer = $('<ul class="nodes">');
           if (isHidden && (opts.verticalLevel && (level + 1) >= opts.verticalLevel)) {
             $nodesLayer.addClass('hidden');
           }
-          if (((opts.verticalLevel && level + 1 === opts.verticalLevel) || data.isHybrid)
+          if (((opts.verticalLevel && level + 1 === opts.verticalLevel) || data.hybrid)
             && !$appendTo.closest('.vertical').length) {
               $appendTo.append($nodesLayer.addClass('vertical'));
           } else {
             $appendTo.append($nodesLayer);
           }
+        } else if (data.compact) {
+          $nodeDiv.addClass('compact');
         } else {
           $nodesLayer = $('<ul class="nodes' + (isHidden ? ' hidden' : '') + '">');
           if (Object.keys(data).length === 2) {
@@ -1432,10 +1500,14 @@
         }
         // recurse through children nodes
         $.each(data.children, function () {
-          var $nodeCell = $('<li class="hierarchy">');
-          $nodesLayer.append($nodeCell);
           this.level = level + 1;
-          that.buildHierarchy($nodeCell, this);
+          if (data.compact) {
+            that.buildHierarchy($nodeDiv, this);
+          } else {
+            var $nodeCell = $('<li class="hierarchy">');
+            $nodesLayer.append($nodeCell);
+            that.buildHierarchy($nodeCell, this);
+          }
         });
       }
     },
@@ -1446,16 +1518,16 @@
     // exposed method
     addChildren: function ($node, data) {
       this.buildChildNode($node.closest('.hierarchy'), data);
-      if (!$node.find('.symbol').length) {
-        $node.children('.title').prepend('<i class="oci '+ this.options.parentNodeSymbol + ' symbol"></i>');
+      if (!$node.find('.parentNodeSymbol').length) {
+        $node.children('.title').prepend(`<i class="${this.options.icons.theme} ${this.options.icons.parentNode} parentNodeSymbol"></i>`);
       }
       if ($node.closest('.nodes.vertical').length) {
         if (!$node.children('.toggleBtn').length) {
-          $node.append('<i class="toggleBtn oci"></i>');
+          $node.append(`<i class="toggleBtn ${this.options.icons.theme}"></i>`);
         }
       } else {
         if (!$node.children('.bottomEdge').length) {
-          $node.append('<i class="edge verticalEdge bottomEdge oci"></i>');
+          $node.append(`<i class="edge verticalEdge bottomEdge ${this.options.icons.theme}"></i>`);
         }
       }
       if (this.isInAction($node)) {
@@ -1474,7 +1546,7 @@
     addParent: function ($currentRoot, data) {
       this.buildParentNode($currentRoot, data);
       if (!$currentRoot.children('.topEdge').length) {
-        $currentRoot.children('.title').after('<i class="edge verticalEdge topEdge oci"></i>');
+        $currentRoot.children('.title').after(`<i class="edge verticalEdge topEdge ${this.options.icons.theme}"></i>`);
       }
       if (this.isInAction($currentRoot)) {
         this.switchVerticalArrow($currentRoot.children('.topEdge'));
@@ -1505,11 +1577,11 @@
       this.buildSiblingNode($node.closest('.hierarchy'), data);
       $node.closest('.nodes').data('siblingsLoaded', true);
       if (!$node.children('.leftEdge').length) {
-        $node.children('.topEdge').after('<i class="edge horizontalEdge rightEdge oci"></i><i class="edge horizontalEdge leftEdge oci"></i>');
+        $node.children('.topEdge').after(`<i class="edge horizontalEdge rightEdge ${this.options.icons.theme}"></i><i class="edge horizontalEdge leftEdge ${this.options.icons.theme}"></i>`);
       }
       if (this.isInAction($node)) {
         this.switchHorizontalArrow($node);
-        $node.children('.topEdge').removeClass('oci-chevron-up').addClass('oci-chevron-down');
+        $node.children('.topEdge').removeClass(this.options.icons.expandToUp).addClass(this.options.icons.collapseToDown);
       }
     },
     // remove node and its descendent nodes
@@ -1594,10 +1666,10 @@
       if ((!isWebkit && !isFf) || isEdge) {
         window.navigator.msSaveBlob(canvas.msToBlob(), exportFilename + '.png');
       } else {
-        var selector = '.oci-download-btn' + (that.options.chartClass !== '' ? '.' + that.options.chartClass : '');
+        var selector = '.download-btn' + (that.options.chartClass !== '' ? '.' + that.options.chartClass : '');
 
         if (!$chartContainer.find(selector).length) {
-          $chartContainer.append('<a class="oci-download-btn' + (that.options.chartClass !== '' ? ' ' + that.options.chartClass : '') + '"'
+          $chartContainer.append('<a class="download-btn' + (that.options.chartClass !== '' ? ' ' + that.options.chartClass : '') + '"'
                                  + ' download="' + exportFilename + '.png"></a>');
         }
 
@@ -1615,7 +1687,7 @@
       var $chartContainer = this.$chartContainer;
       var $mask = $chartContainer.find('.mask');
       if (!$mask.length) {
-        $chartContainer.append('<div class="mask"><i class="oci oci-spinner spinner"></i></div>');
+        $chartContainer.append(`<div class="mask"><i class="${this.options.icons.theme} ${this.options.icons.spinner} spinner"></i></div>`);
       } else {
         $mask.removeClass('hidden');
       }

package/test/integration/init-tests.js

@@ -19,7 +19,7 @@ describe('orgchart -- integration tests', function () {
     ]
   },
   fragment = '<div class="orgchart"><ul class="nodes"><li class="hierarchy">' +
-    '<div id="n1" class="node"><div class="title"><i class="oci oci-leader symbol">' +
+    '<div id="n1" class="node"><div class="title"><i class="oci oci-menu parentNodeSymbol">' +
     '</i>Lao Lao</div><i class="edge verticalEdge bottomEdge oci"></i></div><ul class="nodes">' +
     '<li class="hierarchy"><div id="n2" data-parent="n1" class="node">' +
     '<div class="title">Bo Miao</div><i class="edge verticalEdge topEdge oci"></i>' +
@@ -73,7 +73,7 @@ describe('orgchart -- integration tests', function () {
 
     it('initialize chart with the given vertical level', function () {
       var fragment = '<li class="hierarchy"><div id="n1" class="node"><div class="title">' +
-        '<i class="oci oci-leader symbol"></i>Lao Lao</div><i class="edge verticalEdge bottomEdge oci">' +
+        '<i class="oci oci-menu parentNodeSymbol"></i>Lao Lao</div><i class="edge verticalEdge bottomEdge oci">' +
         '</i></div><ul class="nodes vertical"><li class="hierarchy"><div id="n2" data-parent="n1" class="node">' +
         '<div class="title">Bo Miao</div></div></li><li class="hierarchy"><div id="n3" data-parent="n1" class="node">' +
         '<div class="title">Su Miao</div></div></li></ul></li>';
@@ -101,11 +101,11 @@ describe('orgchart -- integration tests', function () {
 
       it('verticalLevel=2 and visibleLevel=1', function () {
         var fragment = '<div class="orgchart"><ul class="nodes"><li class="hierarchy">' +
-          '<div class="node"><div class="title"><i class="oci oci-leader symbol">' +
+          '<div class="node"><div class="title"><i class="oci oci-menu parentNodeSymbol">' +
           '</i>Lao Lao</div><i class="edge verticalEdge bottomEdge oci"></i></div>' +
           '<ul class="nodes hidden vertical"><li class="hierarchy"><div class="node slide-up">' +
           '<div class="title">Bo Miao</div></div></li><li class="hierarchy">' +
-          '<div class="node slide-up"><div class="title"><i class="oci oci-leader symbol"></i>Su Miao</div>' +
+          '<div class="node slide-up"><div class="title"><i class="oci oci-menu parentNodeSymbol"></i>Su Miao</div>' +
           '<i class="toggleBtn oci"></i></div><ul class="nodes hidden">' +
           '<li class="hierarchy"><div class="node slide-up"><div class="title">Tie Hua</div>' +
           '</div></li><li class="hierarchy"><div class="node slide-up">' +
@@ -120,10 +120,10 @@ describe('orgchart -- integration tests', function () {
 
       it('verticalLevel=2 and visibleLevel=2', function () {
         var fragment = '<div class="orgchart"><ul class="nodes"><li class="hierarchy">' +
-          '<div class="node"><div class="title"><i class="oci oci-leader symbol"></i>Lao Lao</div>' +
+          '<div class="node"><div class="title"><i class="oci oci-menu parentNodeSymbol"></i>Lao Lao</div>' +
           '<i class="edge verticalEdge bottomEdge oci"></i></div><ul class="nodes vertical">' +
           '<li class="hierarchy"><div class="node"><div class="title">Bo Miao</div></div></li>' +
-          '<li class="hierarchy"><div class="node"><div class="title"><i class="oci oci-leader symbol"></i>Su Miao</div>' +
+          '<li class="hierarchy"><div class="node"><div class="title"><i class="oci oci-menu parentNodeSymbol"></i>Su Miao</div>' +
           '<i class="toggleBtn oci"></i></div><ul class="nodes hidden">' +
           '<li class="hierarchy"><div class="node slide-up"><div class="title">Tie Hua</div></div>' +
           '</li><li class="hierarchy"><div class="node slide-up"><div class="title">Hei Hei</div>' +
@@ -138,10 +138,10 @@ describe('orgchart -- integration tests', function () {
 
       it('verticalLevel=2 and visibleLevel=3', function () {
         var fragment = '<div class="orgchart"><ul class="nodes"><li class="hierarchy">' +
-          '<div class="node"><div class="title"><i class="oci oci-leader symbol"></i>Lao Lao</div>' +
+          '<div class="node"><div class="title"><i class="oci oci-menu parentNodeSymbol"></i>Lao Lao</div>' +
           '<i class="edge verticalEdge bottomEdge oci"></i></div><ul class="nodes vertical">' +
           '<li class="hierarchy"><div class="node"><div class="title">Bo Miao</div></div></li>' +
-          '<li class="hierarchy"><div class="node"><div class="title"><i class="oci oci-leader symbol"></i>Su Miao</div>' +
+          '<li class="hierarchy"><div class="node"><div class="title"><i class="oci oci-menu parentNodeSymbol"></i>Su Miao</div>' +
           '<i class="toggleBtn oci"></i></div><ul class="nodes">' +
           '<li class="hierarchy"><div class="node"><div class="title">Tie Hua</div></div>' +
           '</li><li class="hierarchy"><div class="node"><div class="title">Hei Hei</div></div>' +