orgchart 3.8.2 → 4.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "orgchart",
-  "version": "3.8.2",
+  "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

@@ -80,7 +80,11 @@
         if (data instanceof $) { // ul datasource
           this.buildHierarchy($root, this.buildJsonDS(data.children()), 0, this.options);
         } else { // local json datasource
-          this.buildHierarchy($root, this.options.ajaxURL ? data : this.attachRel(data, '00'));
+          if (data.relationship) {
+            this.buildHierarchy($root, data);
+          } else {
+            this.buildHierarchy($root, this.attachRel(data, '00'));
+          }
         }
 
       $chartContainer.append($chart);
@@ -136,10 +140,6 @@
       });
       mo.observe(this.$chartContainer[0], { childList: true });
     },
-    triggerLoadEvent: function ($target, rel) {
-      var initEvent = $.Event('load-' + rel +'.orgchart');
-      $target.trigger(initEvent);
-    },
     triggerShowEvent: function ($target, rel) {
       var initEvent = $.Event('show-' + rel + '.orgchart');
       $target.trigger(initEvent);
@@ -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');
@@ -831,32 +834,20 @@
       this.$chart.find('.focused').removeClass('focused');
       $(event.delegateTarget).addClass('focused');
     },
-    // load new nodes by ajax
-    loadNodes: function (rel, url, $edge) {
+    addAncestors: function (data, parentId) {
+      var $root = this.$chart.children('.nodes').children('.hierarchy');
+      this.buildHierarchy($root, data);
+      $root.children().slice(0, 2)
+        .wrapAll('<li class="hierarchy"></li>').parent()
+        .appendTo($('#' + parentId).siblings('.nodes'));
+    },
+    addDescendants:function (data, $parent) {
       var that = this;
-      var opts = this.options;
-      $.ajax({ 'url': url, 'dataType': 'json' })
-      .done(function (data) {
-        if (that.$chart.data('inAjax')) {
-          if (rel === 'parent') {
-            if (!$.isEmptyObject(data)) {
-              that.addParent($edge.parent(), data);
-            }
-          } else if (rel === 'children') {
-            if (data.children.length) {
-              that.addChildren($edge.parent(), data[rel]);
-            }
-          } else {
-            that.addSiblings($edge.parent(), data.siblings ? data.siblings : data);
-          }
-          that.triggerLoadEvent($edge.parent(), rel);
-        }
-      })
-      .fail(function () {
-        console.log('Failed to get ' + rel + ' data');
-      })
-      .always(function () {
-        that.endLoading($edge);
+      var $descendants = $('<ul class="nodes"></ul>');
+      $parent.after($descendants);
+      $.each(data, function (i) {
+        $descendants.append($('<li class="hierarchy"></li>'));
+        that.buildHierarchy($descendants.children().eq(i), this);
       });
     },
     //
@@ -870,7 +861,6 @@
     },
     // actions on clinking top edge of a node
     topEdgeClickHandler: function (event) {
-      event.stopPropagation();
       var that = this;
       var $topEdge = $(event.target);
       var $node = $(event.delegateTarget);
@@ -887,18 +877,10 @@
           this.showParent($node);
           this.triggerShowEvent($node, 'parent');
         }
-      } else { // load the new parent node of the specified node by ajax request
-        // start up loading status
-        if (this.startLoading($topEdge)) {
-          var opts = this.options;
-          var url = $.isFunction(opts.ajaxURL.parent) ? opts.ajaxURL.parent($node.data('nodeData')) : opts.ajaxURL.parent + $node[0].id;
-          this.loadNodes('parent', url, $topEdge);
-        }
       }
     },
     // actions on clinking bottom edge of a node
     bottomEdgeClickHandler: function (event) {
-      event.stopPropagation();
       var $bottomEdge = $(event.target);
       var $node = $(event.delegateTarget);
       var childrenState = this.getNodeState($node, 'children');
@@ -913,17 +895,10 @@
           this.showChildren($node);
           this.triggerShowEvent($node, 'children');
         }
-      } else { // load the new children nodes of the specified node by ajax request
-        if (this.startLoading($bottomEdge)) {
-          var opts = this.options;
-          var url = $.isFunction(opts.ajaxURL.children) ? opts.ajaxURL.children($node.data('nodeData')) : opts.ajaxURL.children + $node[0].id;
-          this.loadNodes('children', url, $bottomEdge);
-        }
       }
     },
     // actions on clicking horizontal edges
     hEdgeClickHandler: function (event) {
-      event.stopPropagation();
       var $hEdge = $(event.target);
       var $node = $(event.delegateTarget);
       var opts = this.options;
@@ -960,22 +935,16 @@
             this.triggerShowEvent($node, 'siblings');
           }
         }
-      } else {
-        // load the new sibling nodes of the specified node by ajax request
-        if (this.startLoading($hEdge)) {
-          var nodeId = $node[0].id;
-          var url = (this.getNodeState($node, 'parent').exist) ?
-            ($.isFunction(opts.ajaxURL.siblings) ? opts.ajaxURL.siblings($node.data('nodeData')) : opts.ajaxURL.siblings + nodeId) :
-            ($.isFunction(opts.ajaxURL.families) ? opts.ajaxURL.families($node.data('nodeData')) : opts.ajaxURL.families + nodeId);
-          this.loadNodes('siblings', url, $hEdge);
-        }
       }
     },
     // 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) {

package/test/cypress/e2e/ondemand-loading-data.cy.js

@@ -7,21 +7,23 @@ describe('Load data on-demand', () => {
     cy.visit('demo/ondemand-loading-data.html');
   });
 
-  it('load child nodes of hehei', () => {
+  it('load the descendants of hehei', () => {
     cy.get(heihei).find('.bottomEdge').click();
     cy.get(heihei).should(($node) => {
       expect($node.siblings('.nodes').children('.hierarchy').length).to.equal(2);
+      expect($node.siblings('.nodes').children('.hierarchy').eq(0).find('.node:contains("Er Dan")')).to.exist;
     });
   });
 
-  it('load parent node of sumiao', () => {
+  it('load the ancestors of sumiao by expanding vertically', () => {
     cy.get(sumiao).find('.topEdge').click();
     cy.get(sumiao).should(($node) => {
       expect($node.closest('.nodes').siblings('.node:contains("Lao Lao")')).to.exist;
+      expect($node.closest('.hierarchy').siblings().length).to.equal(7);
     });
   });
 
-  it('load parent and sibling nodes of sumiao', () => {
+  it('load the ancestors of sumiao by expanding horizontally', () => {
     cy.get(sumiao).find('.leftEdge').click();
     cy.get(sumiao).should(($node) => {
       expect($node.closest('.nodes').siblings('.node:contains("Lao Lao")')).to.exist;

package/test/e2e/ondemand-loading-data/test.js

@@ -7,21 +7,22 @@ const page = new Page();
 const sumiao = page.sumiao;
 const heihei = page.heihei;
 
-test('load child nodes of hehei', async t => {
+test('load the descendants of hehei', async t => {
   await t
       .hover(heihei)
       .click(heihei.find('.bottomEdge'))
       .expect(heihei.sibling('.nodes').child('.hierarchy').count).eql(2);
 });
 
-test('load parent node of sumiao', async t => {
+test('load the ancestors of sumiao by expanding vertically', async t => {
   await t
       .hover(sumiao)
       .click(sumiao.find('.topEdge'))
-      .expect(sumiao.parent(1).sibling('.node').withText('Lao Lao').count).eql(1);
+      .expect(sumiao.parent(1).sibling('.node').withText('Lao Lao').count).eql(1)
+      .expect(sumiao.parent(0).sibling().count).eql(7);
 });
 
-test('load parent and sibling nodes of sumiao', async t => {
+test('load the ancestors of sumiao by expanding horizontally', async t => {
   await t
       .hover(sumiao)
       .click(sumiao.find('.leftEdge'))