Skip to content

Adding wrappers for jOrgChart #55

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
nikolas-tatianenko wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Adding wrappers for jOrgChart #55

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
0eb922d
Adding wrappers for jOrgChart
nikolas-tatianenko Dec 7, 2013
5a212e3
Code Style fixes
nikolas-tatianenko Dec 7, 2013
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
94 changes: 47 additions & 47 deletions example/jquery.jOrgChart.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
* http://twitter.com/wesnolte
*
* Based on the work of Mark Lee
* http://www.capricasoftware.co.uk
* http://www.capricasoftware.co.uk
*
* Copyright (c) 2011 Wesley Nolte
* Dual licensed under the MIT and GPL licenses.
Expand All @@ -30,7 +30,7 @@

// add drag and drop if enabled
if(opts.dragAndDrop){
$('div.node').draggable({
$('.' + opts.chartClass + ' div.node').draggable({
cursor : 'move',
distance : 40,
helper : 'clone',
Expand All @@ -41,57 +41,57 @@
snapMode : 'inner',
stack : 'div.node'
});
$('div.node').droppable({
accept : '.node',

$('.' + opts.chartClass + ' 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 ){

// Drag start event handler for nodes.
$('.' + opts.chartClass + ' 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 ){
// Drag stop event handler for nodes.
$('.' + opts.chartClass + ' div.node').bind("dragstop", function handleDragStop( event, ui ){

/* reload the plugin */
$(opts.chartElement).children().remove();
$this.jOrgChart(opts);
$this.jOrgChart(opts);
});
// Drop event handler for nodes
$('div.node').bind("drop", function handleDropEvent( event, ui ) {

// Drop event handler for nodes.
$('.' + opts.chartClass + ' 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("<ul></ul>");
targetLi.children('ul').append(sourceLi);
targetLi.append("<ul></ul>");
targetLi.children('ul').append(sourceLi);
}

//Removes any empty lists
if (sourceUl.children().length === 0){
sourceUl.remove();
}

}); // handleDropEvent
} // Drag and drop

} // Drag and drop.
};

// Option defaults
Expand All @@ -101,38 +101,38 @@
chartClass : "jOrgChart",
dragAndDrop: false
};

var nodeCount = 0;
// Method that recursively builds the tree
// 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)
// 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
// Draw the node.
// Get the contents - any markup except li and ul allowed.
var $nodeContent = $node.clone()
.children("ul,li")
.remove()
.end()
.html();
//Increaments the node count which is used to link the source list and the org chart

// Increaments the node count which is used to link the source list and the org chart.
nodeCount++;
$node.data("tree-node", nodeCount);
$nodeDiv = $("<div>").addClass("node")
.data("tree-node", nodeCount)
.append($nodeContent);

// Expand and contract nodes
// Expand and contract nodes.
if ($childNodes.length > 0) {
$nodeDiv.click(function() {
var $this = $(this);
Expand All @@ -155,35 +155,35 @@
}
});
}

$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');
// recurse until leaves found (-1) or to the level specified
if(opts.depth == -1 || (level+1 < opts.depth)) {

// 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

// 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
// Draw the horizontal lines.
var $linesRow = $("<tr/>");
$childNodes.each(function() {
var $left = $("<td>&nbsp;</td>").addClass("line left top");
var $right = $("<td>&nbsp;</td>").addClass("line right top");
$linesRow.append($left).append($right);
});

// horizontal line shouldn't extend beyond the first and last child branches
// Horizontal line shouldn't extend beyond the first and last child branches.
$linesRow.find("td:first")
.removeClass("top")
.end()
Expand All @@ -195,7 +195,7 @@
$childNodes.each(function() {
var $td = $("<td class='node-container'/>");
$td.attr("colspan", 2);
// recurse through children lists and items
// Recurse through children lists and items.
buildNode($(this), $td, level+1, opts);
$childNodesRow.append($td);
});
Expand All @@ -204,8 +204,8 @@
$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
// 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) {
Expand All @@ -223,7 +223,7 @@

$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);
Expand Down
Loading