diff --git a/jquery.jOrgChart.js b/jquery.jOrgChart.js index 07dba19..2080922 100644 --- a/jquery.jOrgChart.js +++ b/jquery.jOrgChart.js @@ -1,238 +1,269 @@ /** - * jQuery org-chart/tree plugin. - * - * Author: Wes Nolte - * http://twitter.com/wesnolte - * - * Based on the work of Mark Lee - * http://www.capricasoftware.co.uk - * - * This software is licensed under the Creative Commons Attribution-ShareAlike - * 3.0 License. - * - * See here for license terms: - * http://creativecommons.org/licenses/by-sa/3.0 - */ +* jQuery org-chart/tree plugin. +* +* Author: Wes Nolte +* http://twitter.com/wesnolte +* +* Based on the work of Mark Lee +* http://www.capricasoftware.co.uk +* +* ID implementation by Aleks Drevenšek +* +* ID implementation fixed(changed) by Adrian Hinz +* +* This software is licensed under the Creative Commons Attribution-ShareAlike +* 3.0 License. +* +* See here for license terms: +* http://creativecommons.org/licenses/by-sa/3.0 +*/ (function($) { - $.fn.jOrgChart = function(options) { - var opts = $.extend({}, $.fn.jOrgChart.defaults, options); - var $appendTo = $(opts.chartElement); + $.fn.jOrgChart = function(options) { + var opts = $.extend({}, $.fn.jOrgChart.defaults, options); + var $appendTo = $(opts.chartElement); - // build the tree - $this = $(this); - var $container = $("
"); - if($this.is("ul")) { - buildNode($this.find("li:first"), $container, 0, opts); - } - else if($this.is("li")) { - buildNode($this, $container, 0, opts); - } - $appendTo.append($container); + // build the tree + $this = $(this); + var $container = $("
"); + if($this.is("ul")) { + buildNode($this.find("li:first"), $container, 0, opts); + } + else if($this.is("li")) { + buildNode($this, $container, 0, opts); + } + $appendTo.append($container); - // add drag and drop if enabled - if(opts.dragAndDrop){ - $('div.node').draggable({ - cursor : 'move', - distance : 40, - helper : 'clone', - opacity : 0.8, - revert : true, - revertDuration : 100, - snap : 'div.node.expanded', - snapMode : 'inner', - stack : 'div.node' - }); - - $('div.node').droppable({ - accept : '.node', - activeClass : 'drag-active', - hoverClass : 'drop-hover' - }); - - // Drag start event handler for nodes - $('div.node').bind("dragstart", function handleDragStart( event, ui ){ - - var sourceNode = $(this); - sourceNode.parentsUntil('.node-container') - .find('*') - .filter('.node') - .droppable('disable'); - }); + // add drag and drop if enabled + if(opts.dragAndDrop){ + $('div.node').draggable({ + cursor : 'move', + distance : 40, + helper : 'clone', + opacity : 0.8, + revert : true, + revertDuration : 100, + snap : 'div.node.expanded', + snapMode : 'inner', + stack : 'div.node' + }); - // Drag stop event handler for nodes - $('div.node').bind("dragstop", function handleDragStop( event, ui ){ + $('div.node').droppable({ + accept : '.node', + activeClass : 'drag-active', + hoverClass : 'drop-hover' + }); - /* reload the plugin */ - $(opts.chartElement).children().remove(); - $this.jOrgChart(opts); - }); - - // Drop event handler for nodes - $('div.node').bind("drop", function handleDropEvent( event, ui ) { - var sourceNode = ui.draggable; - var targetNode = $(this); - - // finding nodes based on plaintext and html - // content is hard! - var targetLi = $('li').filter(function(){ - - li = $(this).clone() - .children("ul,li") - .remove() - .end(); - - return li.html() == targetNode.html(); - }); - - var sourceLi = $('li').filter(function(){ - - li = $(this).clone() - .children("ul,li") - .remove() - .end(); - - return li.html() == sourceNode.html(); - }); - - var sourceliClone = sourceLi.clone(); - var sourceUl = sourceLi.parent('ul'); - - if(sourceUl.children('li').size() > 1){ - sourceLi.remove(); - }else{ - sourceUl.remove(); - } - - if(targetLi.children('ul').size() >0){ - targetLi.children('ul').append('
  • '+sourceliClone.html()+'
  • '); - }else{ - targetLi.append(''); - } - - }); // handleDropEvent - - } // Drag and drop - }; + // Drag start event handler for nodes + $('div.node').bind("dragstart", function handleDragStart( event, ui ){ - // Option defaults - $.fn.jOrgChart.defaults = { - chartElement : 'body', - depth : -1, - chartClass : "jOrgChart", - dragAndDrop: false - }; + var sourceNode = $(this); + sourceNode.parentsUntil('.node-container') + .find('*') + .filter('.node') + .droppable('disable'); + }); - // Method that recursively builds the tree - function buildNode($node, $appendTo, level, opts) { - - var $table = $(""); - var $tbody = $(""); + // Drag stop event handler for nodes + $('div.node').bind("dragstop", function handleDragStop( event, ui ){ - // Construct the node container(s) - var $nodeRow = $("").addClass("node-cells"); - var $nodeCell = $(""); - var $downLineCell = $("
    ").addClass("node-cell").attr("colspan", 2); - var $childNodes = $node.children("ul:first").children("li"); - var $nodeDiv; - - if($childNodes.length > 1) { - $nodeCell.attr("colspan", $childNodes.length * 2); - } - // Draw the node - // Get the contents - any markup except li and ul allowed - var $nodeContent = $node.clone() - .children("ul,li") - .remove() - .end() - .html(); - - $nodeDiv = $("
    ").addClass("node").append($nodeContent); + /* reload the plugin */ + $(opts.chartElement).children().remove(); + $this.jOrgChart(opts); + }); - // Expand and contract nodes - if ($childNodes.length > 0) { - $nodeDiv.click(function() { - var $this = $(this); - var $tr = $this.closest("tr"); - $tr.nextAll("tr").fadeToggle("fast"); + // Drop event handler for nodes + $('div.node').bind("drop", function handleDropEvent( event, ui ) { + var sourceNode = ui.draggable; + var targetNode = $(this); - if($tr.hasClass('contracted')){ - $this.css('cursor','n-resize'); - $tr.removeClass('contracted'); - $tr.addClass('expanded'); - }else{ - $this.css('cursor','s-resize'); - $tr.removeClass('expanded'); - $tr.addClass('contracted'); - } - }); - } - - $nodeCell.append($nodeDiv); - $nodeRow.append($nodeCell); - $tbody.append($nodeRow); + // finding nodes based on plaintext and html + // content is hard! + var targetLi = $('li').filter(function(){ - if($childNodes.length > 0) { - // if it can be expanded then change the cursor - $nodeDiv.css('cursor','n-resize').addClass('expanded'); - - // recurse until leaves found (-1) or to the level specified - if(opts.depth == -1 || (level+1 < opts.depth)) { - var $downLineRow = $("
    ").attr("colspan", $childNodes.length*2); - $downLineRow.append($downLineCell); + li = $(this).clone() + .children("ul,li") + .remove() + .end(); + var attr = li.attr('id'); + if (typeof attr !== 'undefined' && attr !== false) { + return li.attr("id") == targetNode.attr("id"); + } + else { + return li.html() == targetNode.html(); + } + + }); + + var sourceLi = $('li').filter(function(){ + + li = $(this).clone() + .children("ul,li") + .remove() + .end(); + var attr = li.attr('id'); + if (typeof attr !== 'undefined' && attr !== false) { + return li.attr("id") == sourceNode.attr("id"); + } + else { + return li.html() == sourceNode.html(); + } + + }); + + var sourceliClone = sourceLi.clone(); + var sourceUl = sourceLi.parent('ul'); + + if(sourceUl.children('li').size() > 1){ + sourceLi.remove(); + }else{ + sourceUl.remove(); + } + + var id = sourceLi.attr("id"); + + if(targetLi.children('ul').size() >0){ + if (typeof id !== 'undefined' && id !== false) { + targetLi.children('ul').append('
  • '+sourceliClone.html()+'
  • '); + }else{ + targetLi.children('ul').append('
  • '+sourceliClone.html()+'
  • '); + } + }else{ + if (typeof id !== 'undefined' && id !== false) { + targetLi.append('
    • '+sourceliClone.html()+'
    '); + }else{ + targetLi.append('
    • '+sourceliClone.html()+'
    '); + } + } + + }); // handleDropEvent + + } // Drag and drop + }; + + // Option defaults + $.fn.jOrgChart.defaults = { + chartElement : 'body', + depth : -1, + chartClass : "jOrgChart", + dragAndDrop: false + }; + + // Method that recursively builds the tree + function buildNode($node, $appendTo, level, opts) { + + var $table = $(""); + var $tbody = $(""); + + // Construct the node container(s) + var $nodeRow = $("").addClass("node-cells"); + var $nodeCell = $(""); + var $downLineCell = $(""); - $childNodes.each(function() { - var $left = $("").addClass("line left top"); - var $right = $("").addClass("line right top"); - $linesRow.append($left).append($right); - }); + // Draw the horizontal lines + var $linesRow = $(""); + $childNodes.each(function() { + var $left = $("").addClass("line left top"); + var $right = $("").addClass("line right top"); + $linesRow.append($left).append($right); + }); - // horizontal line shouldn't extend beyond the first and last child branches - $linesRow.find("td:first") - .removeClass("top") - .end() - .find("td:last") - .removeClass("top"); + // horizontal line shouldn't extend beyond the first and last child branches + $linesRow.find("td:first") + .removeClass("top") + .end() + .find("td:last") + .removeClass("top"); - $tbody.append($linesRow); - var $childNodesRow = $(""); - $childNodes.each(function() { - var $td = $(""); + $childNodes.each(function() { + var $td = $("
    ").addClass("node-cell").attr("colspan", 2); + var $childNodes = $node.children("ul:first").children("li"); + var $nodeDiv; + + if($childNodes.length > 1) { + $nodeCell.attr("colspan", $childNodes.length * 2); + } + // Draw the node + // Get the contents - any markup except li and ul allowed + var $nodeContent = $node.clone() + .children("ul,li") + .remove() + .end() + .html(); + + var new_node_id = $node.attr("id") + if (typeof new_node_id !== 'undefined' && new_node_id !== false) { + $nodeDiv = $("
    ").addClass("node").attr("id", $node.attr("id")).append($nodeContent); + }else{ + $nodeDiv = $("
    ").addClass("node").append($nodeContent); + } + + // Expand and contract nodes + if ($childNodes.length > 0) { + $nodeDiv.click(function() { + var $this = $(this); + var $tr = $this.closest("tr"); + $tr.nextAll("tr").fadeToggle("fast"); + + if($tr.hasClass('contracted')){ + $this.css('cursor','n-resize'); + $tr.removeClass('contracted'); + $tr.addClass('expanded'); + }else{ + $this.css('cursor','s-resize'); + $tr.removeClass('expanded'); + $tr.addClass('contracted'); + } + }); + } + + $nodeCell.append($nodeDiv); + $nodeRow.append($nodeCell); + $tbody.append($nodeRow); + + if($childNodes.length > 0) { + // if it can be expanded then change the cursor + $nodeDiv.css('cursor','n-resize').addClass('expanded'); + + // recurse until leaves found (-1) or to the level specified + if(opts.depth == -1 || (level+1 < opts.depth)) { + var $downLineRow = $("
    ").attr("colspan", $childNodes.length*2); + $downLineRow.append($downLineCell); - // draw the connecting line from the parent node to the horizontal line - $downLine = $("
    ").addClass("line down"); - $downLineCell.append($downLine); - $tbody.append($downLineRow); + // draw the connecting line from the parent node to the horizontal line + $downLine = $("
    ").addClass("line down"); + $downLineCell.append($downLine); + $tbody.append($downLineRow); - // Draw the horizontal lines - var $linesRow = $("
      
      
    "); - $td.attr("colspan", 2); - // recurse through children lists and items - buildNode($(this), $td, level+1, opts); - $childNodesRow.append($td); - }); + $tbody.append($linesRow); + var $childNodesRow = $("
    "); + $td.attr("colspan", 2); + // recurse through children lists and items + buildNode($(this), $td, level+1, opts); + $childNodesRow.append($td); + }); - } - $tbody.append($childNodesRow); - } - - // any classes on the LI element get copied to the relevant node in the tree - // apart from the special 'collapsed' class, which collapses the sub-tree at this point - if ($node.attr('class') != undefined) { - var classList = $node.attr('class').split(/\s+/); - $.each(classList, function(index,item) { - if (item == 'collapsed') { - $nodeRow.nextAll('tr').css('display', 'none'); - $nodeRow.removeClass('expanded'); - $nodeRow.addClass('contracted'); - $nodeDiv.css('cursor','s-resize'); - } else { - $nodeDiv.addClass(item); } - }); - } + $tbody.append($childNodesRow); + } - $table.append($tbody); - $appendTo.append($table); - }; + // any classes on the LI element get copied to the relevant node in the tree + // apart from the special 'collapsed' class, which collapses the sub-tree at this point + if ($node.attr('class') != undefined) { + var classList = $node.attr('class').split(/\s+/); + $.each(classList, function(index,item) { + if (item == 'collapsed') { + $nodeRow.nextAll('tr').css('display', 'none'); + $nodeRow.removeClass('expanded'); + $nodeRow.addClass('contracted'); + $nodeDiv.css('cursor','s-resize'); + } else { + $nodeDiv.addClass(item); + } + }); + } -})(jQuery); + $table.append($tbody); + $appendTo.append($table); + }; + +})(jQuery); \ No newline at end of file