Skip to content

Commit e70d945

Browse files
dabengdabeng
committed
update the demo of compact node chart
1 parent e835b51 commit e70d945

7 files changed

Lines changed: 77 additions & 65 deletions

File tree

‎dist/css/jquery.orgchart.css‎

Lines changed: 30 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -535,15 +535,36 @@
535535
}
536536

537537
/* styles for compact nodes */
538-
.orgchart .hierarchy > .node.compact {
538+
.orgchart .node.compact {
539539
position: static;
540540
display: grid;
541541
width: 140px;
542542
height: 50px;
543-
overflow: hidden;
544543
background-color: #eee;
545544
}
546545

546+
.orgchart .node.compact.looseMode {
547+
display: grid;
548+
width: unset;
549+
height: unset;
550+
}
551+
552+
.orgchart .node.compact > .node {
553+
display: none;
554+
}
555+
556+
.orgchart .node.compact.looseMode > .node {
557+
display: inline-block;
558+
}
559+
560+
.orgchart .node.compact > .node.compact {
561+
position: relative;
562+
}
563+
564+
.orgchart .node.compact > .node.compact.looseMode {
565+
display: grid;
566+
}
567+
547568
.orgchart .node.compact.even,
548569
.orgchart .node.compact.even:hover {
549570
background-color: #eee;
@@ -566,43 +587,22 @@
566587
background-color: #eee;
567588
}
568589

569-
.orgchart .hierarchy > .node.compact.looseMode {
570-
display: grid;
571-
width: unset;
572-
height: unset;
573-
overflow: unset;
574-
}
575-
576-
.orgchart .hierarchy > .node.compact::before {
590+
.orgchart .node.compact::before {
577591
top: var(--top-cross-point, -10px);
578592
}
579593

580-
.orgchart .node.compact > .node.compact {
581-
position: relative;
582-
display: grid;
583-
width: 140px;
584-
height: 50px;
585-
overflow: hidden;
586-
}
587-
588-
.orgchart .node.compact .node.compact.looseMode {
589-
width: unset;
590-
height: unset;
591-
overflow: unset;
592-
}
593-
594-
.orgchart .hierarchy > .node.compact > .content {
594+
.orgchart .node.compact > .content {
595595
position: absolute;
596596
top: 25px;
597597
left: 5px;
598598
}
599599

600-
.orgchart .hierarchy > .node.compact.looseMode > .title {
600+
.orgchart .node.compact.looseMode > .title {
601601
margin-top: 5px;
602602
margin-left: 5px;
603603
}
604604

605-
.orgchart .hierarchy > .node.compact.looseMode > .content {
605+
.orgchart .node.compact.looseMode > .content {
606606
top: 30px;
607607
left: 10px;
608608
}
@@ -635,13 +635,13 @@
635635
cursor: pointer;
636636
}
637637

638-
.orgchart .hierarchy > .node.compact > .backToCompactSymbol {
638+
.orgchart .node.compact > .backToCompactSymbol {
639639
position: absolute;
640640
top: 5px;
641641
left: 5px;
642642
}
643643

644-
.orgchart .hierarchy > .node.compact.looseMode > .backToCompactSymbol {
644+
.orgchart .node.compact.looseMode > .backToCompactSymbol {
645645
top: 10px;
646646
left: 10px;
647647
}
@@ -657,7 +657,7 @@
657657
left: 3px;
658658
}
659659

660-
.orgchart .hierarchy > .node.compact > .backToLooseSymbol {
660+
.orgchart .node.compact > .backToLooseSymbol {
661661
position: absolute;
662662
top: 25px;
663663
right: 5px;

‎dist/css/jquery.orgchart.min.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/js/jquery.orgchart.js‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -567,6 +567,9 @@
567567
isVisibleNode: function (index, elem) {
568568
return this.getNodeState($(elem)).visible;
569569
},
570+
isCompactDescendant: function (index, elem) {
571+
return $(elem).parent().is('.node.compact');
572+
},
570573
// do some necessary cleanup tasks when hide animation is finished
571574
hideChildrenEnd: function (event) {
572575
var $node = event.data.node;
@@ -581,7 +584,7 @@
581584
$node.closest('.hierarchy').addClass('isChildrenCollapsed');
582585
var $lowerLevel = $node.siblings('.nodes');
583586
this.stopAjax($lowerLevel);
584-
var $animatedNodes = $lowerLevel.find('.node').filter(this.isVisibleNode.bind(this));
587+
var $animatedNodes = $lowerLevel.find('.node').filter(this.isVisibleNode.bind(this)).not(this.isCompactDescendant.bind(this));
585588
var isVerticalDesc = $lowerLevel.is('.vertical');
586589
if (!isVerticalDesc) {
587590
$animatedNodes.closest('.hierarchy').addClass('isCollapsedDescendant');
@@ -937,8 +940,11 @@
937940
// show the compact node's children in the compact mode
938941
backToCompactHandler: function (event) {
939942
$(event.delegateTarget).removeClass('looseMode')
943+
.find('.looseMode').removeClass('looseMode')
940944
.children('.backToCompactSymbol').addClass('hidden').end()
941945
.children('.backToLooseSymbol').removeClass('hidden');
946+
$(event.delegateTarget).children('.backToCompactSymbol').addClass('hidden').end()
947+
.children('.backToLooseSymbol').removeClass('hidden');
942948
},
943949
// show the compact node's children in the loose mode
944950
backToLooseHandler: function (event) {

‎dist/js/jquery.orgchart.min.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/js/jquery.orgchart.min.js.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/css/jquery.orgchart.css‎

Lines changed: 30 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -535,15 +535,36 @@
535535
}
536536

537537
/* styles for compact nodes */
538-
.orgchart .hierarchy > .node.compact {
538+
.orgchart .node.compact {
539539
position: static;
540540
display: grid;
541541
width: 140px;
542542
height: 50px;
543-
overflow: hidden;
544543
background-color: #eee;
545544
}
546545

546+
.orgchart .node.compact.looseMode {
547+
display: grid;
548+
width: unset;
549+
height: unset;
550+
}
551+
552+
.orgchart .node.compact > .node {
553+
display: none;
554+
}
555+
556+
.orgchart .node.compact.looseMode > .node {
557+
display: inline-block;
558+
}
559+
560+
.orgchart .node.compact > .node.compact {
561+
position: relative;
562+
}
563+
564+
.orgchart .node.compact > .node.compact.looseMode {
565+
display: grid;
566+
}
567+
547568
.orgchart .node.compact.even,
548569
.orgchart .node.compact.even:hover {
549570
background-color: #eee;
@@ -566,43 +587,22 @@
566587
background-color: #eee;
567588
}
568589

569-
.orgchart .hierarchy > .node.compact.looseMode {
570-
display: grid;
571-
width: unset;
572-
height: unset;
573-
overflow: unset;
574-
}
575-
576-
.orgchart .hierarchy > .node.compact::before {
590+
.orgchart .node.compact::before {
577591
top: var(--top-cross-point, -10px);
578592
}
579593

580-
.orgchart .node.compact > .node.compact {
581-
position: relative;
582-
display: grid;
583-
width: 140px;
584-
height: 50px;
585-
overflow: hidden;
586-
}
587-
588-
.orgchart .node.compact .node.compact.looseMode {
589-
width: unset;
590-
height: unset;
591-
overflow: unset;
592-
}
593-
594-
.orgchart .hierarchy > .node.compact > .content {
594+
.orgchart .node.compact > .content {
595595
position: absolute;
596596
top: 25px;
597597
left: 5px;
598598
}
599599

600-
.orgchart .hierarchy > .node.compact.looseMode > .title {
600+
.orgchart .node.compact.looseMode > .title {
601601
margin-top: 5px;
602602
margin-left: 5px;
603603
}
604604

605-
.orgchart .hierarchy > .node.compact.looseMode > .content {
605+
.orgchart .node.compact.looseMode > .content {
606606
top: 30px;
607607
left: 10px;
608608
}
@@ -635,13 +635,13 @@
635635
cursor: pointer;
636636
}
637637

638-
.orgchart .hierarchy > .node.compact > .backToCompactSymbol {
638+
.orgchart .node.compact > .backToCompactSymbol {
639639
position: absolute;
640640
top: 5px;
641641
left: 5px;
642642
}
643643

644-
.orgchart .hierarchy > .node.compact.looseMode > .backToCompactSymbol {
644+
.orgchart .node.compact.looseMode > .backToCompactSymbol {
645645
top: 10px;
646646
left: 10px;
647647
}
@@ -657,7 +657,7 @@
657657
left: 3px;
658658
}
659659

660-
.orgchart .hierarchy > .node.compact > .backToLooseSymbol {
660+
.orgchart .node.compact > .backToLooseSymbol {
661661
position: absolute;
662662
top: 25px;
663663
right: 5px;

‎src/js/jquery.orgchart.js‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -567,6 +567,9 @@
567567
isVisibleNode: function (index, elem) {
568568
return this.getNodeState($(elem)).visible;
569569
},
570+
isCompactDescendant: function (index, elem) {
571+
return $(elem).parent().is('.node.compact');
572+
},
570573
// do some necessary cleanup tasks when hide animation is finished
571574
hideChildrenEnd: function (event) {
572575
var $node = event.data.node;
@@ -581,7 +584,7 @@
581584
$node.closest('.hierarchy').addClass('isChildrenCollapsed');
582585
var $lowerLevel = $node.siblings('.nodes');
583586
this.stopAjax($lowerLevel);
584-
var $animatedNodes = $lowerLevel.find('.node').filter(this.isVisibleNode.bind(this));
587+
var $animatedNodes = $lowerLevel.find('.node').filter(this.isVisibleNode.bind(this)).not(this.isCompactDescendant.bind(this));
585588
var isVerticalDesc = $lowerLevel.is('.vertical');
586589
if (!isVerticalDesc) {
587590
$animatedNodes.closest('.hierarchy').addClass('isCollapsedDescendant');
@@ -937,8 +940,11 @@
937940
// show the compact node's children in the compact mode
938941
backToCompactHandler: function (event) {
939942
$(event.delegateTarget).removeClass('looseMode')
943+
.find('.looseMode').removeClass('looseMode')
940944
.children('.backToCompactSymbol').addClass('hidden').end()
941945
.children('.backToLooseSymbol').removeClass('hidden');
946+
$(event.delegateTarget).children('.backToCompactSymbol').addClass('hidden').end()
947+
.children('.backToLooseSymbol').removeClass('hidden');
942948
},
943949
// show the compact node's children in the loose mode
944950
backToLooseHandler: function (event) {

0 commit comments

Comments
 (0)