From dbe2de25a940bdea3715d5087848eb02ef11bf6d Mon Sep 17 00:00:00 2001 From: KingGeneral Date: Thu, 16 Mar 2017 15:37:01 +0700 Subject: [PATCH 1/4] add autoheight feature + example --- example/example.html | 2 +- example/example_with_autoHeight.html | 122 +++++++++++++++++++++++++++ example/jquery.jOrgChart.js | 45 +++++----- jquery.jOrgChart.js | 19 +++-- 4 files changed, 158 insertions(+), 30 deletions(-) create mode 100644 example/example_with_autoHeight.html 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/jquery.jOrgChart.js b/example/jquery.jOrgChart.js index 141dd49..02e2a46 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,13 @@ // Option defaults $.fn.jOrgChart.defaults = { - chartElement : 'body', - depth : -1, - chartClass : "jOrgChart", - dragAndDrop: false + chartElement : 'body', + depth : -1, + chartClass : "jOrgChart", + dragAndDrop : false, + autoHeight : false }; - + var nodeCount = 0; // Method that recursively builds the tree function buildNode($node, $appendTo, level, opts) { @@ -124,11 +125,11 @@ .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); @@ -141,7 +142,7 @@ if($tr.hasClass('contracted')){ $this.css('cursor','n-resize'); $tr.removeClass('contracted').addClass('expanded'); - $tr.nextAll("tr").css('visibility', ''); + $tr.nextAll("tr").css(opts.autoHeight ? 'display' : 'visibility', ''); // Update the
  • appropriately so that if the tree redraws collapsed/non-collapsed nodes // maintain their appearance @@ -149,7 +150,8 @@ }else{ $this.css('cursor','s-resize'); $tr.removeClass('expanded').addClass('contracted'); - $tr.nextAll("tr").css('visibility', 'hidden'); + if(opts.autoHeight) { $tr.nextAll("tr").css('display', 'none'); } + else { $tr.nextAll("tr").css('visibility', 'hidden'); } $node.addClass('collapsed'); } @@ -211,7 +213,8 @@ $.each(classList, function(index,item) { if (item == 'collapsed') { console.log($node); - $nodeRow.nextAll('tr').css('visibility', 'hidden'); + if(opts.autoHeight) { $nodeRow.nextAll('tr').css('display', 'none'); } + else { $nodeRow.nextAll('tr').css('visibility', 'hidden'); } $nodeRow.removeClass('expanded'); $nodeRow.addClass('contracted'); $nodeDiv.css('cursor','s-resize'); @@ -231,4 +234,4 @@ }); }; -})(jQuery); +})(jQuery); \ No newline at end of file diff --git a/jquery.jOrgChart.js b/jquery.jOrgChart.js index ed2ed1f..02e2a46 100644 --- a/jquery.jOrgChart.js +++ b/jquery.jOrgChart.js @@ -96,10 +96,11 @@ // Option defaults $.fn.jOrgChart.defaults = { - chartElement : 'body', - depth : -1, - chartClass : "jOrgChart", - dragAndDrop: false + chartElement : 'body', + depth : -1, + chartClass : "jOrgChart", + dragAndDrop : false, + autoHeight : false }; var nodeCount = 0; @@ -141,7 +142,7 @@ if($tr.hasClass('contracted')){ $this.css('cursor','n-resize'); $tr.removeClass('contracted').addClass('expanded'); - $tr.nextAll("tr").css('visibility', ''); + $tr.nextAll("tr").css(opts.autoHeight ? 'display' : 'visibility', ''); // Update the
  • appropriately so that if the tree redraws collapsed/non-collapsed nodes // maintain their appearance @@ -149,7 +150,8 @@ }else{ $this.css('cursor','s-resize'); $tr.removeClass('expanded').addClass('contracted'); - $tr.nextAll("tr").css('visibility', 'hidden'); + if(opts.autoHeight) { $tr.nextAll("tr").css('display', 'none'); } + else { $tr.nextAll("tr").css('visibility', 'hidden'); } $node.addClass('collapsed'); } @@ -211,7 +213,8 @@ $.each(classList, function(index,item) { if (item == 'collapsed') { console.log($node); - $nodeRow.nextAll('tr').css('visibility', 'hidden'); + if(opts.autoHeight) { $nodeRow.nextAll('tr').css('display', 'none'); } + else { $nodeRow.nextAll('tr').css('visibility', 'hidden'); } $nodeRow.removeClass('expanded'); $nodeRow.addClass('contracted'); $nodeDiv.css('cursor','s-resize'); @@ -231,4 +234,4 @@ }); }; -})(jQuery); +})(jQuery); \ No newline at end of file From 1bf15e28029488adb188b4207348e2cddafabdc8 Mon Sep 17 00:00:00 2001 From: KingGeneral Date: Thu, 16 Mar 2017 15:38:19 +0700 Subject: [PATCH 2/4] add collapsible feature + example --- example/example_with_collapsible.html | 123 ++++++++++++++++++++++++++ example/jquery.jOrgChart.js | 14 +-- jquery.jOrgChart.js | 14 +-- 3 files changed, 141 insertions(+), 10 deletions(-) create mode 100644 example/example_with_collapsible.html 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/jquery.jOrgChart.js b/example/jquery.jOrgChart.js index 02e2a46..b56837e 100644 --- a/example/jquery.jOrgChart.js +++ b/example/jquery.jOrgChart.js @@ -100,7 +100,8 @@ depth : -1, chartClass : "jOrgChart", dragAndDrop : false, - autoHeight : false + autoHeight : false, //custom + collapsible : false //custom }; var nodeCount = 0; @@ -134,7 +135,7 @@ .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"); @@ -164,8 +165,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 = $(""); @@ -212,12 +214,14 @@ var classList = $node.attr('class').split(/\s+/); $.each(classList, function(index,item) { if (item == 'collapsed') { - console.log($node); + 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'); $nodeDiv.css('cursor','s-resize'); + } } else { $nodeDiv.addClass(item); } diff --git a/jquery.jOrgChart.js b/jquery.jOrgChart.js index 02e2a46..b56837e 100644 --- a/jquery.jOrgChart.js +++ b/jquery.jOrgChart.js @@ -100,7 +100,8 @@ depth : -1, chartClass : "jOrgChart", dragAndDrop : false, - autoHeight : false + autoHeight : false, //custom + collapsible : false //custom }; var nodeCount = 0; @@ -134,7 +135,7 @@ .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"); @@ -164,8 +165,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 = $(""); @@ -212,12 +214,14 @@ var classList = $node.attr('class').split(/\s+/); $.each(classList, function(index,item) { if (item == 'collapsed') { - console.log($node); + 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'); $nodeDiv.css('cursor','s-resize'); + } } else { $nodeDiv.addClass(item); } From a316d83858831faafaf6400229ad65561a1ae1b9 Mon Sep 17 00:00:00 2001 From: KingGeneral Date: Thu, 16 Mar 2017 16:01:52 +0700 Subject: [PATCH 3/4] add fontawesome + showButton feature + example showButton when user collapse the child as indicator --- example/css/custom.css | 15 +++- example/example_with_showButton.html | 126 +++++++++++++++++++++++++++ example/jquery.jOrgChart.js | 9 +- jquery.jOrgChart.js | 9 +- 4 files changed, 150 insertions(+), 9 deletions(-) create mode 100644 example/example_with_showButton.html 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_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 b56837e..ef98897 100644 --- a/example/jquery.jOrgChart.js +++ b/example/jquery.jOrgChart.js @@ -101,7 +101,8 @@ chartClass : "jOrgChart", dragAndDrop : false, autoHeight : false, //custom - collapsible : false //custom + collapsible : false, //custom + showButton : false //custom }; var nodeCount = 0; @@ -142,7 +143,7 @@ if($tr.hasClass('contracted')){ $this.css('cursor','n-resize'); - $tr.removeClass('contracted').addClass('expanded'); + $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 @@ -150,7 +151,7 @@ $node.removeClass('collapsed'); }else{ $this.css('cursor','s-resize'); - $tr.removeClass('expanded').addClass('contracted'); + $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'); } @@ -219,7 +220,7 @@ 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 { diff --git a/jquery.jOrgChart.js b/jquery.jOrgChart.js index b56837e..ef98897 100644 --- a/jquery.jOrgChart.js +++ b/jquery.jOrgChart.js @@ -101,7 +101,8 @@ chartClass : "jOrgChart", dragAndDrop : false, autoHeight : false, //custom - collapsible : false //custom + collapsible : false, //custom + showButton : false //custom }; var nodeCount = 0; @@ -142,7 +143,7 @@ if($tr.hasClass('contracted')){ $this.css('cursor','n-resize'); - $tr.removeClass('contracted').addClass('expanded'); + $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 @@ -150,7 +151,7 @@ $node.removeClass('collapsed'); }else{ $this.css('cursor','s-resize'); - $tr.removeClass('expanded').addClass('contracted'); + $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'); } @@ -219,7 +220,7 @@ 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 { From 07ff5a967e10daa2586fa229f605d192b4bd9453 Mon Sep 17 00:00:00 2001 From: KingGeneral Date: Thu, 16 Mar 2017 16:34:37 +0700 Subject: [PATCH 4/4] special thanks + markdown + clean space --- example/jquery.jOrgChart.js | 2 +- jquery.jOrgChart.js | 2 +- readme.markdown | 7 +++++++ 3 files changed, 9 insertions(+), 2 deletions(-) diff --git a/example/jquery.jOrgChart.js b/example/jquery.jOrgChart.js index ef98897..3f90648 100644 --- a/example/jquery.jOrgChart.js +++ b/example/jquery.jOrgChart.js @@ -102,7 +102,7 @@ dragAndDrop : false, autoHeight : false, //custom collapsible : false, //custom - showButton : false //custom + showButton : false //custom }; var nodeCount = 0; diff --git a/jquery.jOrgChart.js b/jquery.jOrgChart.js index ef98897..3f90648 100644 --- a/jquery.jOrgChart.js +++ b/jquery.jOrgChart.js @@ -102,7 +102,7 @@ dragAndDrop : false, autoHeight : false, //custom collapsible : false, //custom - showButton : false //custom + showButton : false //custom }; var nodeCount = 0; 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)