diff --git a/example/css/custom.css b/example/css/custom.css index b93ebbc..ce5496a 100644 --- a/example/css/custom.css +++ b/example/css/custom.css @@ -89,4 +89,17 @@ a:hover{ font-size : 10px; line-height : 11px; padding : 2px; - } \ No newline at end of file + } + +/* f0fe, f0dd, f103, f078, f13a */ +.add_btn:before{ + font-family: "FontAwesome"; + font-size: 30px; + content: "\f078"; + color: #9F20B3; + position: relative; + left: 40px; + top: 57px; + float: right; + width: 0px; +} \ No newline at end of file diff --git a/example/example.html b/example/example.html index 491c4ca..0ca0aa6 100644 --- a/example/example.html +++ b/example/example.html @@ -18,7 +18,7 @@ jQuery(document).ready(function() { $("#org").jOrgChart({ chartElement : '#chart', - dragAndDrop : true + dragAndDrop : true, }); }); diff --git a/example/example_with_autoHeight.html b/example/example_with_autoHeight.html new file mode 100644 index 0000000..1dfd239 --- /dev/null +++ b/example/example_with_autoHeight.html @@ -0,0 +1,122 @@ + + + jOrgChart - A jQuery OrgChart Plugin + + + + + + + + + + + + + + + + + +
+
+
+ jQuery Organisation Chart + +
+
Show underlying list.
+ + +
+
+
+
+ + + +
+ + + + + \ No newline at end of file diff --git a/example/example_with_collapsible.html b/example/example_with_collapsible.html new file mode 100644 index 0000000..17b3f92 --- /dev/null +++ b/example/example_with_collapsible.html @@ -0,0 +1,123 @@ + + + jOrgChart - A jQuery OrgChart Plugin + + + + + + + + + + + + + + + + + +
+
+
+ jQuery Organisation Chart + +
+
Show underlying list.
+ + +
+
+
+
+ + + +
+ + + + + \ No newline at end of file diff --git a/example/example_with_showButton.html b/example/example_with_showButton.html new file mode 100644 index 0000000..0e67fbe --- /dev/null +++ b/example/example_with_showButton.html @@ -0,0 +1,126 @@ + + + jOrgChart - A jQuery OrgChart Plugin + + + + + + + + + + + + + + + + + + + +
+
+
+ jQuery Organisation Chart + +
+
Show underlying list.
+ + +
+
+
+
+ + + +
+ + + + + \ No newline at end of file diff --git a/example/jquery.jOrgChart.js b/example/jquery.jOrgChart.js index 141dd49..3f90648 100644 --- a/example/jquery.jOrgChart.js +++ b/example/jquery.jOrgChart.js @@ -68,27 +68,27 @@ // Drop event handler for nodes $('div.node').bind("drop", function handleDropEvent( event, ui ) { - + var targetID = $(this).data("tree-node"); var targetLi = $this.find("li").filter(function() { return $(this).data("tree-node") === targetID; } ); var targetUl = targetLi.children('ul'); - - var sourceID = ui.draggable.data("tree-node"); - var sourceLi = $this.find("li").filter(function() { return $(this).data("tree-node") === sourceID; } ); + + var sourceID = ui.draggable.data("tree-node"); + var sourceLi = $this.find("li").filter(function() { return $(this).data("tree-node") === sourceID; } ); var sourceUl = sourceLi.parent('ul'); if (targetUl.length > 0){ - targetUl.append(sourceLi); + targetUl.append(sourceLi); } else { - targetLi.append(""); - targetLi.children('ul').append(sourceLi); + targetLi.append(""); + targetLi.children('ul').append(sourceLi); } //Removes any empty lists if (sourceUl.children().length === 0){ sourceUl.remove(); } - + }); // handleDropEvent } // Drag and drop @@ -96,12 +96,15 @@ // Option defaults $.fn.jOrgChart.defaults = { - chartElement : 'body', - depth : -1, - chartClass : "jOrgChart", - dragAndDrop: false + chartElement : 'body', + depth : -1, + chartClass : "jOrgChart", + dragAndDrop : false, + autoHeight : false, //custom + collapsible : false, //custom + showButton : false //custom }; - + var nodeCount = 0; // Method that recursively builds the tree function buildNode($node, $appendTo, level, opts) { @@ -124,32 +127,33 @@ .remove() .end() .html(); - + //Increaments the node count which is used to link the source list and the org chart - nodeCount++; - $node.data("tree-node", nodeCount); - $nodeDiv = $("
").addClass("node") + nodeCount++; + $node.data("tree-node", nodeCount); + $nodeDiv = $("
").addClass("node") .data("tree-node", nodeCount) .append($nodeContent); // Expand and contract nodes - if ($childNodes.length > 0) { + if ($childNodes.length > 0 && opts.collapsible) { $nodeDiv.click(function() { var $this = $(this); var $tr = $this.closest("tr"); if($tr.hasClass('contracted')){ $this.css('cursor','n-resize'); - $tr.removeClass('contracted').addClass('expanded'); - $tr.nextAll("tr").css('visibility', ''); + $tr.removeClass(opts.showButton ? 'contracted add_btn' : 'contracted').addClass('expanded'); + $tr.nextAll("tr").css(opts.autoHeight ? 'display' : 'visibility', ''); // Update the
  • appropriately so that if the tree redraws collapsed/non-collapsed nodes // maintain their appearance $node.removeClass('collapsed'); }else{ $this.css('cursor','s-resize'); - $tr.removeClass('expanded').addClass('contracted'); - $tr.nextAll("tr").css('visibility', 'hidden'); + $tr.removeClass('expanded').addClass(opts.showButton ? 'contracted add_btn' : 'contracted'); + if(opts.autoHeight) { $tr.nextAll("tr").css('display', 'none'); } + else { $tr.nextAll("tr").css('visibility', 'hidden'); } $node.addClass('collapsed'); } @@ -162,8 +166,9 @@ if($childNodes.length > 0) { // if it can be expanded then change the cursor - $nodeDiv.css('cursor','n-resize'); - + if(opts.collapsible){ + $nodeDiv.css('cursor','n-resize'); + } // recurse until leaves found (-1) or to the level specified if(opts.depth == -1 || (level+1 < opts.depth)) { var $downLineRow = $(""); @@ -210,11 +215,14 @@ var classList = $node.attr('class').split(/\s+/); $.each(classList, function(index,item) { if (item == 'collapsed') { - console.log($node); - $nodeRow.nextAll('tr').css('visibility', 'hidden'); + if(opts.collapsible){ + window.console && console.log($node); //firefox crashes in some versions without this check + if(opts.autoHeight) { $nodeRow.nextAll('tr').css('display', 'none'); } + else { $nodeRow.nextAll('tr').css('visibility', 'hidden'); } $nodeRow.removeClass('expanded'); - $nodeRow.addClass('contracted'); + $nodeRow.addClass(opts.showButton ? 'contracted add_btn' : 'contracted'); $nodeDiv.css('cursor','s-resize'); + } } else { $nodeDiv.addClass(item); } @@ -231,4 +239,4 @@ }); }; -})(jQuery); +})(jQuery); \ No newline at end of file diff --git a/jquery.jOrgChart.js b/jquery.jOrgChart.js index ed2ed1f..3f90648 100644 --- a/jquery.jOrgChart.js +++ b/jquery.jOrgChart.js @@ -96,10 +96,13 @@ // Option defaults $.fn.jOrgChart.defaults = { - chartElement : 'body', - depth : -1, - chartClass : "jOrgChart", - dragAndDrop: false + chartElement : 'body', + depth : -1, + chartClass : "jOrgChart", + dragAndDrop : false, + autoHeight : false, //custom + collapsible : false, //custom + showButton : false //custom }; var nodeCount = 0; @@ -133,23 +136,24 @@ .append($nodeContent); // Expand and contract nodes - if ($childNodes.length > 0) { + if ($childNodes.length > 0 && opts.collapsible) { $nodeDiv.click(function() { var $this = $(this); var $tr = $this.closest("tr"); if($tr.hasClass('contracted')){ $this.css('cursor','n-resize'); - $tr.removeClass('contracted').addClass('expanded'); - $tr.nextAll("tr").css('visibility', ''); + $tr.removeClass(opts.showButton ? 'contracted add_btn' : 'contracted').addClass('expanded'); + $tr.nextAll("tr").css(opts.autoHeight ? 'display' : 'visibility', ''); // Update the
  • appropriately so that if the tree redraws collapsed/non-collapsed nodes // maintain their appearance $node.removeClass('collapsed'); }else{ $this.css('cursor','s-resize'); - $tr.removeClass('expanded').addClass('contracted'); - $tr.nextAll("tr").css('visibility', 'hidden'); + $tr.removeClass('expanded').addClass(opts.showButton ? 'contracted add_btn' : 'contracted'); + if(opts.autoHeight) { $tr.nextAll("tr").css('display', 'none'); } + else { $tr.nextAll("tr").css('visibility', 'hidden'); } $node.addClass('collapsed'); } @@ -162,8 +166,9 @@ if($childNodes.length > 0) { // if it can be expanded then change the cursor - $nodeDiv.css('cursor','n-resize'); - + if(opts.collapsible){ + $nodeDiv.css('cursor','n-resize'); + } // recurse until leaves found (-1) or to the level specified if(opts.depth == -1 || (level+1 < opts.depth)) { var $downLineRow = $(""); @@ -210,11 +215,14 @@ var classList = $node.attr('class').split(/\s+/); $.each(classList, function(index,item) { if (item == 'collapsed') { - console.log($node); - $nodeRow.nextAll('tr').css('visibility', 'hidden'); + if(opts.collapsible){ + window.console && console.log($node); //firefox crashes in some versions without this check + if(opts.autoHeight) { $nodeRow.nextAll('tr').css('display', 'none'); } + else { $nodeRow.nextAll('tr').css('visibility', 'hidden'); } $nodeRow.removeClass('expanded'); - $nodeRow.addClass('contracted'); + $nodeRow.addClass(opts.showButton ? 'contracted add_btn' : 'contracted'); $nodeDiv.css('cursor','s-resize'); + } } else { $nodeDiv.addClass(item); } @@ -231,4 +239,4 @@ }); }; -})(jQuery); +})(jQuery); \ No newline at end of file diff --git a/readme.markdown b/readme.markdown index f7c0559..b6ee576 100644 --- a/readme.markdown +++ b/readme.markdown @@ -1,5 +1,9 @@ #Readme +Credited to : +- gdott9 +- beatjunky99 +- KingGeneral ##Overview @@ -123,3 +127,6 @@ There are only 3 configuration options: 2. **depth** - tells the code what depth to parse to. The default value of "-1" instructs it to parse like it's 1999. *[default=-1]* 3. **chartClass** - the name of the style class that is assigned to the generated markup. *[default='jOrgChart']* 4. **dragAndDrop** - determines whether the drag-and-drop feature of tree node elements is enabled. *[default=false]* +5. **autoHeight** - ignore space when parent is not collapsed +6. **collapsible** - disable collapse feature (disable click feature) +7. **showButton** - add indicator icon when parent is not collapsed (fontawesome icon)