From 95b64c9e526a69713b28d979324b5a955fec5227 Mon Sep 17 00:00:00 2001 From: Guillaume DOTT Date: Wed, 23 Jan 2013 17:18:34 +0100 Subject: [PATCH] Add Rails::Engine and jOrgChart library --- lib/jorgchart-rails.rb | 2 +- vendor/assets/javascripts/jquery.jorgchart.js | 253 ++++++++++++++++++ .../assets/stylesheets/jquery.jorgchart.css | 51 ++++ 3 files changed, 305 insertions(+), 1 deletion(-) create mode 100644 vendor/assets/javascripts/jquery.jorgchart.js create mode 100644 vendor/assets/stylesheets/jquery.jorgchart.css diff --git a/lib/jorgchart-rails.rb b/lib/jorgchart-rails.rb index 597feed..14d27ae 100644 --- a/lib/jorgchart-rails.rb +++ b/lib/jorgchart-rails.rb @@ -2,6 +2,6 @@ require "jorgchart-rails/version" module Jorgchart module Rails - # Your code goes here... + class Engine < ::Rails::Engine; end end end diff --git a/vendor/assets/javascripts/jquery.jorgchart.js b/vendor/assets/javascripts/jquery.jorgchart.js new file mode 100644 index 0000000..9304d46 --- /dev/null +++ b/vendor/assets/javascripts/jquery.jorgchart.js @@ -0,0 +1,253 @@ +/** + * 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 = $("
"); + if($this.is("ul")) { + buildNodes($this, $container, 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 : 'invalid', + 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 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 sourceUl = sourceLi.parent('ul'); + + if (targetUl.length > 0){ + targetUl.append(sourceLi); + } else { + targetLi.append(""); + targetLi.children('ul').append(sourceLi); + } + + //Removes any empty lists + if (sourceUl.children().length === 0){ + sourceUl.remove(); + } + + }); // handleDropEvent + + } // Drag and drop + }; + + // Option defaults + $.fn.jOrgChart.defaults = { + chartElement : 'body', + depth : -1, + chartClass : "jOrgChart", + dragAndDrop: false + }; + + function buildNodes($list, $appendTo, opts) { + var $table = $(""); + var $tbody = $(""); + + // Construct the node container(s) + var $nodeRow = $(""); + $list.children("li").each(function(i, elem) { + var $td = $("
"); + $td.attr("colspan", 2); + + buildNode($(elem), $td, 0, opts); + $nodeRow.append($td); + }); + + $tbody.append($nodeRow); + $table.append($tbody); + $appendTo.append($table); + } + + var nodeCount = 0; + // 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); + }); + + // 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 = $("
").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(); + + //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") + .data("tree-node", nodeCount) + .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', ''); + + // 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'); + + $node.addClass('collapsed'); + } + }); + } + + $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)) { + 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 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($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') { + console.log($node); + $nodeRow.nextAll('tr').css('visibility', 'hidden'); + $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); diff --git a/vendor/assets/stylesheets/jquery.jorgchart.css b/vendor/assets/stylesheets/jquery.jorgchart.css new file mode 100644 index 0000000..0189f9b --- /dev/null +++ b/vendor/assets/stylesheets/jquery.jorgchart.css @@ -0,0 +1,51 @@ +/* Basic styling */ +/* Draw the lines */ +.jOrgChart .line { + height : 20px; + width : 4px; +} + +.jOrgChart .down { + background-color : black; + margin : 0px auto; +} + +.jOrgChart .top { + border-top : 3px solid black; +} + +.jOrgChart .left { + border-right : 2px solid black; +} + +.jOrgChart .right { + border-left : 2px solid black; +} + +/* node cell */ +.jOrgChart td { + text-align : center; + vertical-align : top; + padding : 0; +} + +/* The node */ +.jOrgChart .node { + background-color : #35363B; + display : inline-block; + width : 96px; + height : 60px; + z-index : 10; + margin : 0 2px; +} + +/* jQuery drag 'n drop */ + +.drag-active { + border-style : dotted !important; +} + +.drop-hover { + border-style : solid !important; + border-color : #E05E00 !important; +}