+++ /dev/null
-/**
- * jQuery org-chart/tree plugin.
- *
- * Author: Wes Nolte
- * http://twitter.com/wesnolte
- *
- * Based on the work of Mark Lee
- * http://www.capricasoftware.co.uk
- *
- * Copyright (c) 2011 Wesley Nolte
- * Dual licensed under the MIT and GPL licenses.
- *
- */
-(function($) {
-
- $.fn.jOrgChart = function(options) {
- var opts = $.extend({}, $.fn.jOrgChart.defaults, options);
- var $appendTo = $(opts.chartElement);
-
- // build the tree
- $this = $(this);
- var $container = $("<div class='" + opts.chartClass + "'/>");
- 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');
- });
-
- // Drag stop event handler for nodes
- $('div.node').bind("dragstop", function handleDragStop( event, ui ){
-
- /* 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();
- 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('<li id="'+id+'">'+sourceliClone.html()+'</li>');
- }else{
- targetLi.children('ul').append('<li>'+sourceliClone.html()+'</li>');
- }
- }else{
- if (typeof id !== 'undefined' && id !== false) {
- targetLi.append('<ul><li id="'+id+'">'+sourceliClone.html()+'</li></ul>');
- }else{
- targetLi.append('<ul><li>'+sourceliClone.html()+'</li></ul>');
- }
- }
-
- }); // 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 = $("<table cellpadding='0' cellspacing='0' border='0'/>");
- var $tbody = $("<tbody/>");
-
- // Construct the node container(s)
- var $nodeRow = $("<tr/>").addClass("node-cells");
- var $nodeCell = $("<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 = $("<div>").addClass("node").attr("id", $node.attr("id")).append($nodeContent);
- }else{
- $nodeDiv = $("<div>").addClass("node").append($nodeContent);
- }
-
- // Expand and contract nodes
- if ($childNodes.length > 0) {
- $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', '');
- }else{
- $this.css('cursor','s-resize');
- $tr.removeClass('expanded').addClass('contracted');
- $tr.nextAll("tr").css('visibility', 'hidden');
- }
- });
- }
-
- $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 = $("<tr/>");
- var $downLineCell = $("<td/>").attr("colspan", $childNodes.length*2);
- $downLineRow.append($downLineCell);
-
- // draw the connecting line from the parent node to the horizontal line
- $downLine = $("<div></div>").addClass("line down");
- $downLineCell.append($downLine);
- $tbody.append($downLineRow);
-
- // Draw the horizontal lines
- var $linesRow = $("<tr/>");
- $childNodes.each(function() {
- var $left = $("<td> </td>").addClass("line left top");
- var $right = $("<td> </td>").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");
-
- $tbody.append($linesRow);
- var $childNodesRow = $("<tr/>");
- $childNodes.each(function() {
- var $td = $("<td class='node-container'/>");
- $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);
- }
- });
- }
-
- $table.append($tbody);
- $appendTo.append($table);
-
- /* Prevent trees collapsing if a link inside a node is clicked */
- $nodeDiv.children('a').click(function(e){
- console.log(e);
- e.stopPropagation();
- });
- };
-
-})(jQuery);
Code Review / policy / engine.git / blobdiff