orgchart 4.0.0 → 4.0.1

package/package.json

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

package/src/css/jquery.orgchart.css

@@ -535,15 +535,36 @@
 }
 
 /* styles for compact nodes */
-.orgchart .hierarchy > .node.compact {
+.orgchart .node.compact {
   position: static;
   display: grid;
   width: 140px;
   height: 50px;
-  overflow: hidden;
   background-color: #eee;
 }
 
+.orgchart .node.compact.looseMode {
+  display: grid;
+  width: unset;
+  height: unset;
+}
+
+.orgchart .node.compact > .node {
+  display: none;
+}
+
+.orgchart .node.compact.looseMode > .node {
+  display: inline-block;
+}
+
+.orgchart .node.compact > .node.compact {
+  position: relative;
+}
+
+.orgchart .node.compact > .node.compact.looseMode {
+  display: grid;
+}
+
 .orgchart .node.compact.even,
 .orgchart .node.compact.even:hover {
   background-color: #eee;
@@ -566,43 +587,22 @@
   background-color: #eee;
 }
 
-.orgchart .hierarchy > .node.compact.looseMode {
-  display: grid;
-  width: unset;
-  height: unset;
-  overflow: unset;
-}
-
-.orgchart .hierarchy > .node.compact::before {
+.orgchart .node.compact::before {
   top: var(--top-cross-point, -10px);
 }
 
-.orgchart .node.compact > .node.compact {
-  position: relative;
-  display: grid;
-  width: 140px;
-  height: 50px;
-  overflow: hidden;
-}
-
-.orgchart .node.compact .node.compact.looseMode {
-  width: unset;
-  height: unset;
-  overflow: unset;
-}
-
-.orgchart .hierarchy > .node.compact > .content {
+.orgchart .node.compact > .content {
   position: absolute;
   top: 25px;
   left: 5px;
 }
 
-.orgchart .hierarchy > .node.compact.looseMode > .title {
+.orgchart .node.compact.looseMode > .title {
   margin-top: 5px;
   margin-left: 5px;
 }
 
-.orgchart .hierarchy > .node.compact.looseMode > .content {
+.orgchart .node.compact.looseMode > .content {
   top: 30px;
   left: 10px;
 }
@@ -635,13 +635,13 @@
   cursor: pointer;
 }
 
-.orgchart .hierarchy > .node.compact > .backToCompactSymbol {
+.orgchart .node.compact > .backToCompactSymbol {
   position: absolute;
   top: 5px;
   left: 5px;
 }
 
-.orgchart .hierarchy > .node.compact.looseMode > .backToCompactSymbol {
+.orgchart .node.compact.looseMode > .backToCompactSymbol {
   top: 10px;
   left: 10px;
 }
@@ -657,7 +657,7 @@
   left: 3px;
 }
 
-.orgchart .hierarchy > .node.compact > .backToLooseSymbol {
+.orgchart .node.compact > .backToLooseSymbol {
   position: absolute;
   top: 25px;
   right: 5px;

package/src/js/jquery.orgchart.js

@@ -567,6 +567,9 @@
     isVisibleNode: function (index, elem) {
       return this.getNodeState($(elem)).visible;
     },
+    isCompactDescendant: function (index, elem) {
+      return $(elem).parent().is('.node.compact');
+    },
     // do some necessary cleanup tasks when hide animation is finished
     hideChildrenEnd: function (event) {
       var $node = event.data.node;
@@ -581,7 +584,7 @@
       $node.closest('.hierarchy').addClass('isChildrenCollapsed');
       var $lowerLevel = $node.siblings('.nodes');
       this.stopAjax($lowerLevel);
-      var $animatedNodes = $lowerLevel.find('.node').filter(this.isVisibleNode.bind(this));
+      var $animatedNodes = $lowerLevel.find('.node').filter(this.isVisibleNode.bind(this)).not(this.isCompactDescendant.bind(this));
       var isVerticalDesc = $lowerLevel.is('.vertical');
       if (!isVerticalDesc) {
         $animatedNodes.closest('.hierarchy').addClass('isCollapsedDescendant');
@@ -937,8 +940,11 @@
     // show the compact node's children in the compact mode
     backToCompactHandler: function (event) {
       $(event.delegateTarget).removeClass('looseMode')
+        .find('.looseMode').removeClass('looseMode')
         .children('.backToCompactSymbol').addClass('hidden').end()
         .children('.backToLooseSymbol').removeClass('hidden');
+      $(event.delegateTarget).children('.backToCompactSymbol').addClass('hidden').end()
+        .children('.backToLooseSymbol').removeClass('hidden');
     },
     // show the compact node's children in the loose mode 
     backToLooseHandler: function (event) {