From f1432f80d25d0220ebfee76c31d7575baa977839 Mon Sep 17 00:00:00 2001 From: Jonathon Smith Date: Sat, 24 Mar 2012 14:16:51 +0000 Subject: [PATCH 1/2] Improved the way nodes without IDs are handled using data- attributes instead of searching on html/plain text --- example/jquery.jOrgChart.js | 95 ++++++++++--------------------------- jquery.jOrgChart.js | 95 ++++++++++--------------------------- 2 files changed, 52 insertions(+), 138 deletions(-) diff --git a/example/jquery.jOrgChart.js b/example/jquery.jOrgChart.js index 89411b2..b2a3027 100644 --- a/example/jquery.jOrgChart.js +++ b/example/jquery.jOrgChart.js @@ -35,7 +35,7 @@ distance : 40, helper : 'clone', opacity : 0.8, - revert : true, + revert : 'invalid', revertDuration : 100, snap : 'div.node.expanded', snapMode : 'inner', @@ -68,68 +68,24 @@ // 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 targetLi = $this.find("[data-tree-node=" + $(this).data("tree-node") + "]"); + var sourceLi = $this.find("[data-tree-node=" + ui.draggable.data("tree-node") + "]"); 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(''); - }else{ - targetLi.append(''); - } + var targetUl = targetLi.children('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 @@ -142,7 +98,8 @@ chartClass : "jOrgChart", dragAndDrop: false }; - + + var nodeCount = 0; // Method that recursively builds the tree function buildNode($node, $appendTo, level, opts) { var $table = $(""); @@ -162,15 +119,15 @@ 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); - } + .end() + .html(); + + //Increaments the node count which is used to link the source list and the org chart + nodeCount++; + $node.attr("data-tree-node", nodeCount); + $nodeDiv = $("
    ").addClass("node") + .attr("data-tree-node", nodeCount) + .append($nodeContent); // Expand and contract nodes if ($childNodes.length > 0) { diff --git a/jquery.jOrgChart.js b/jquery.jOrgChart.js index 89411b2..b2a3027 100644 --- a/jquery.jOrgChart.js +++ b/jquery.jOrgChart.js @@ -35,7 +35,7 @@ distance : 40, helper : 'clone', opacity : 0.8, - revert : true, + revert : 'invalid', revertDuration : 100, snap : 'div.node.expanded', snapMode : 'inner', @@ -68,68 +68,24 @@ // 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 targetLi = $this.find("[data-tree-node=" + $(this).data("tree-node") + "]"); + var sourceLi = $this.find("[data-tree-node=" + ui.draggable.data("tree-node") + "]"); 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()+'
    '); - } + var targetUl = targetLi.children('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 @@ -142,7 +98,8 @@ chartClass : "jOrgChart", dragAndDrop: false }; - + + var nodeCount = 0; // Method that recursively builds the tree function buildNode($node, $appendTo, level, opts) { var $table = $("
      "); @@ -162,15 +119,15 @@ 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); - } + .end() + .html(); + + //Increaments the node count which is used to link the source list and the org chart + nodeCount++; + $node.attr("data-tree-node", nodeCount); + $nodeDiv = $("
      ").addClass("node") + .attr("data-tree-node", nodeCount) + .append($nodeContent); // Expand and contract nodes if ($childNodes.length > 0) { From b034e9900d4d4ba9a80288802ac4642dbe9124f7 Mon Sep 17 00:00:00 2001 From: Jonathon Smith Date: Fri, 6 Apr 2012 01:25:24 +0100 Subject: [PATCH 2/2] Changed node find method from data- attributes to jquery data() This maintains validation on pre-HTML5 documents --- example/jquery.jOrgChart.js | 29 ++++++++++++++++------------- jquery.jOrgChart.js | 29 ++++++++++++++++------------- 2 files changed, 32 insertions(+), 26 deletions(-) diff --git a/example/jquery.jOrgChart.js b/example/jquery.jOrgChart.js index b2a3027..627309c 100644 --- a/example/jquery.jOrgChart.js +++ b/example/jquery.jOrgChart.js @@ -69,22 +69,25 @@ // Drop event handler for nodes $('div.node').bind("drop", function handleDropEvent( event, ui ) { - var targetLi = $this.find("[data-tree-node=" + $(this).data("tree-node") + "]"); - var sourceLi = $this.find("[data-tree-node=" + ui.draggable.data("tree-node") + "]"); + 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'); - var targetUl = targetLi.children('ul'); - if (targetUl.length > 0){ - targetUl.append(sourceLi); + if (targetUl.length > 0){ + 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(); - } + //Removes any empty lists + if (sourceUl.children().length === 0){ + sourceUl.remove(); + } }); // handleDropEvent @@ -124,9 +127,9 @@ //Increaments the node count which is used to link the source list and the org chart nodeCount++; - $node.attr("data-tree-node", nodeCount); + $node.data("tree-node", nodeCount); $nodeDiv = $("
          ").addClass("node") - .attr("data-tree-node", nodeCount) + .data("tree-node", nodeCount) .append($nodeContent); // Expand and contract nodes diff --git a/jquery.jOrgChart.js b/jquery.jOrgChart.js index b2a3027..627309c 100644 --- a/jquery.jOrgChart.js +++ b/jquery.jOrgChart.js @@ -69,22 +69,25 @@ // Drop event handler for nodes $('div.node').bind("drop", function handleDropEvent( event, ui ) { - var targetLi = $this.find("[data-tree-node=" + $(this).data("tree-node") + "]"); - var sourceLi = $this.find("[data-tree-node=" + ui.draggable.data("tree-node") + "]"); + 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'); - var targetUl = targetLi.children('ul'); - if (targetUl.length > 0){ - targetUl.append(sourceLi); + if (targetUl.length > 0){ + 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(); - } + //Removes any empty lists + if (sourceUl.children().length === 0){ + sourceUl.remove(); + } }); // handleDropEvent @@ -124,9 +127,9 @@ //Increaments the node count which is used to link the source list and the org chart nodeCount++; - $node.attr("data-tree-node", nodeCount); + $node.data("tree-node", nodeCount); $nodeDiv = $("
              ").addClass("node") - .attr("data-tree-node", nodeCount) + .data("tree-node", nodeCount) .append($nodeContent); // Expand and contract nodes