diff --git a/demo/edit-hybrid-chart.html b/demo/edit-hybrid-chart.html new file mode 100644 index 00000000..14eb2ac9 --- /dev/null +++ b/demo/edit-hybrid-chart.html @@ -0,0 +1,221 @@ + + + + + Organization Chart Plugin + + + + + + +
+
+ + + + + + + + + + + + + + + + + + +
+ + + + + + \ No newline at end of file diff --git a/demo/index.html b/demo/index.html index 07a3cd82..b2dd8ab4 100755 --- a/demo/index.html +++ b/demo/index.html @@ -122,6 +122,7 @@
  • right to left
  • drag and drop
  • edit chart
    • +
  • edit hybrid chart
  • export chart as a picture
  • export chart as a PDF
  • filter node
    • diff --git a/dist/js/jquery.orgchart.js b/dist/js/jquery.orgchart.js index 2466732f..f04f5de7 100644 --- a/dist/js/jquery.orgchart.js +++ b/dist/js/jquery.orgchart.js @@ -748,25 +748,38 @@ }, // determines how to show arrow buttons nodeEnterLeaveHandler: function (event) { - var $node = $(event.delegateTarget), flag = false; - var $topEdge = $node.children('.topEdge'); - var $rightEdge = $node.children('.rightEdge'); - var $bottomEdge = $node.children('.bottomEdge'); - var $leftEdge = $node.children('.leftEdge'); - if (event.type === 'mouseenter') { - if ($topEdge.length) { - flag = this.getNodeState($node, 'parent').visible; - $topEdge.toggleClass('oci-chevron-up', !flag).toggleClass('oci-chevron-down', flag); - } - if ($bottomEdge.length) { - flag = this.getNodeState($node, 'children').visible; - $bottomEdge.toggleClass('oci-chevron-down', !flag).toggleClass('oci-chevron-up', flag); - } - if ($leftEdge.length) { - this.switchHorizontalArrow($node); + var $node = $(event.delegateTarget); + var flag = false; + if ($node.closest('.nodes.vertical').length) { + var $toggleBtn = $node.children('.toggleBtn'); + 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); + } + } else { + $toggleBtn.removeClass('oci-plus-square oci-minus-square'); } } else { - $node.children('.edge').removeClass('oci-chevron-up oci-chevron-down oci-chevron-right oci-chevron-left'); + var $topEdge = $node.children('.topEdge'); + var $rightEdge = $node.children('.rightEdge'); + var $bottomEdge = $node.children('.bottomEdge'); + var $leftEdge = $node.children('.leftEdge'); + if (event.type === 'mouseenter') { + if ($topEdge.length) { + flag = this.getNodeState($node, 'parent').visible; + $topEdge.toggleClass('oci-chevron-up', !flag).toggleClass('oci-chevron-down', flag); + } + if ($bottomEdge.length) { + flag = this.getNodeState($node, 'children').visible; + $bottomEdge.toggleClass('oci-chevron-down', !flag).toggleClass('oci-chevron-up', flag); + } + if ($leftEdge.length) { + this.switchHorizontalArrow($node); + } + } else { + $node.children('.edge').removeClass('oci-chevron-up oci-chevron-down oci-chevron-right oci-chevron-left'); + } } }, // @@ -1270,8 +1283,8 @@ var flags = data.relationship || ''; if (opts.verticalLevel && level >= opts.verticalLevel) { if ((level + 1) > opts.verticalLevel && Number(flags.substr(2,1))) { - var icon = level + 1 > opts.visibleLevel ? 'plus' : 'minus'; - $nodeDiv.append(''); + $nodeDiv.append('') + .children('.title').prepend(''); } } else { if (Number(flags.substr(0,1))) { @@ -1368,12 +1381,18 @@ // exposed method addChildren: function ($node, data) { this.buildChildNode($node.closest('.hierarchy'), data); - if (!$node.children('.bottomEdge').length) { - $node.append(''); - } if (!$node.find('.symbol').length) { $node.children('.title').prepend(''); } + if ($node.closest('.nodes.vertical').length) { + if (!$node.children('.toggleBtn').length) { + $node.append(''); + } + } else { + if (!$node.children('.bottomEdge').length) { + $node.append(''); + } + } if (this.isInAction($node)) { this.switchVerticalArrow($node.children('.bottomEdge')); } diff --git a/dist/js/jquery.orgchart.min.js b/dist/js/jquery.orgchart.min.js index 832a7029..0deca70e 100644 --- a/dist/js/jquery.orgchart.min.js +++ b/dist/js/jquery.orgchart.min.js @@ -1,2 +1,2 @@ -"use strict";!function(e){"object"==typeof module&&"object"==typeof module.exports?e(require("jquery"),window,document):e(jQuery,window,document)}(function(p,f,u,d){function t(e,t){this.$chartContainer=p(e),this.opts=t,this.defaultOptions={nodeTitle:"name",nodeId:"id",toggleSiblingsResp:!1,visibleLevel:999,chartClass:"",exportButton:!1,exportButtonName:"Export",exportFilename:"OrgChart",exportFileextension:"png",parentNodeSymbol:"oci-leader",draggable:!1,direction:"t2b",pan:!1,zoom:!1,zoominLimit:7,zoomoutLimit:.5}}t.prototype={init:function(e){var s=this;this.options=p.extend({},this.defaultOptions,this.opts,e);var t=this.$chartContainer;this.$chart&&this.$chart.remove();var i=this.options.data,n=this.$chart=p("
    ",{data:{options:this.options},class:"orgchart"+(""!==this.options.chartClass?" "+this.options.chartClass:"")+("t2b"!==this.options.direction?" "+this.options.direction:""),click:function(e){p(e.target).closest(".node").length||n.find(".node.focused").removeClass("focused")}});"undefined"!=typeof MutationObserver&&this.triggerInitEvent();var o=n.append(p('')).find(".hierarchy");return"object"===p.type(i)?i instanceof p?this.buildHierarchy(o,this.buildJsonDS(i.children()),0,this.options):this.buildHierarchy(o,this.options.ajaxURL?i:this.attachRel(i,"00")):(n.append(''),p.ajax({url:i,dataType:"json"}).done(function(e,t,i){s.buildHierarchy(o,s.options.ajaxURL?e:s.attachRel(e,"00"),0,s.options)}).fail(function(e,t,i){console.log(i)}).always(function(){n.children(".spinner").remove()})),t.append(n),this.options.exportButton&&!t.find(".oc-export-btn").length&&this.attachExportButton(),this.options.pan&&this.bindPan(),this.options.zoom&&this.bindZoom(),this},triggerInitEvent:function(){var n=this,o=new MutationObserver(function(e){o.disconnect();e:for(var t=0;t",{class:"oc-export-btn"+(""!==this.options.chartClass?" "+this.options.chartClass:""),text:this.options.exportButtonName,click:function(e){e.preventDefault(),t.export()}});this.$chartContainer.append(e)},setOptions:function(e,t){return"string"==typeof e&&("pan"===e&&(t?this.bindPan():this.unbindPan()),"zoom"===e&&(t?this.bindZoom():this.unbindZoom())),"object"==typeof e&&(e.data?this.init(e):(void 0!==e.pan&&(e.pan?this.bindPan():this.unbindPan()),void 0!==e.zoom&&(e.zoom?this.bindZoom():this.unbindZoom()))),this},panStartHandler:function(e){var o=p(e.delegateTarget);if(p(e.target).closest(".node").length||e.touches&&1i.zoomoutLimit&&oi.zoomoutLimit&&o
    '; @@ -123,8 +123,8 @@ describe('orgchart -- integration tests', function () { '
    Lao Lao
    ' + '
    '; @@ -141,8 +141,8 @@ describe('orgchart -- integration tests', function () { '
    Lao Lao
    ' + '
    ';