orgchart 3.8.1 → 4.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "orgchart",
-  "version": "3.8.1",
+  "version": "4.0.0",
   "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/js/jquery.orgchart.js

@@ -76,28 +76,17 @@
         this.triggerInitEvent();
       }
       var $root = $chart.append($('<ul class="nodes"><li class="hierarchy"></li></ul>')).find('.hierarchy');
-      if ($.type(data) === 'object') {
+
         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'));
+          }
         }
-      } else {
-        $chart.append(`<i class="${this.options.icons.theme} ${this.options.icons.spinner} spinner"></i>`);
-        $.ajax({
-          'url': data,
-          'dataType': 'json'
-        })
-        .done(function(data, textStatus, jqXHR) {
-          that.buildHierarchy($root, that.options.ajaxURL ? data : that.attachRel(data, '00'), 0, that.options);
-        })
-        .fail(function(jqXHR, textStatus, errorThrown) {
-          console.log(errorThrown);
-        })
-        .always(function() {
-          $chart.children('.spinner').remove();
-        });
-      }
+
       $chartContainer.append($chart);
 
       // append the export button
@@ -151,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);
@@ -846,32 +831,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);
       });
     },
     //
@@ -885,7 +858,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);
@@ -902,18 +874,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');
@@ -928,17 +892,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;
@@ -975,15 +932,6 @@
             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

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'))