[Mapbender-commits] r4551 - trunk/mapbender/lib
svn_mapbender at osgeo.org
svn_mapbender at osgeo.org
Fri Aug 28 08:42:59 EDT 2009
Author: christoph
Date: 2009-08-28 08:42:59 -0400 (Fri, 28 Aug 2009)
New Revision: 4551
Modified:
trunk/mapbender/lib/customTreeController.js
trunk/mapbender/lib/customTreeModel.js
Log:
new css and bug fixes
Modified: trunk/mapbender/lib/customTreeController.js
===================================================================
--- trunk/mapbender/lib/customTreeController.js 2009-08-28 12:42:21 UTC (rev 4550)
+++ trunk/mapbender/lib/customTreeController.js 2009-08-28 12:42:59 UTC (rev 4551)
@@ -5,16 +5,21 @@
var currentlyDraggedNode;
this.options = options;
+
+ this.options.draggable = typeof options.draggable === "undefined" ?
+ true : options.draggable;
+ this.options.collapsed = typeof options.collapsed === "undefined" ?
+ true : options.collapsed;
this.myTree = myTree;
- this.$root = $("<ul></ul>");
+ this.$root = $("<ul class='custom-tree-treeview custom-tree-filetree'></ul>");
var that = this;
// --------------- BEHAVIOUR (begin) ------------------
var addLeafBehaviour = function ($domNode, treeNode) {
- $label = $domNode.children().eq(0);
+ $label = $domNode.children().eq(1);
// enable context menu
if (that.options.contextMenu) {
@@ -22,18 +27,57 @@
}
// make leaves draggable
- makeNodeDraggable($domNode, treeNode);
+ if (that.options.draggable) {
+ makeNodeDraggable($domNode, treeNode);
+ }
+ var additionalBehaviour = that.options.leafBehaviour;
+ for (var i = 0; i < additionalBehaviour.length; i++) {
+ var c = additionalBehaviour[i];
+ var additionalHtml = "<" + c.openTag + ">";
+ if (typeof c.closeTag === "string" && c.closeTag !== "") {
+ additionalHtml += "</" + c.closeTag + ">";
+ }
+ var $additionalButton = $(additionalHtml);
+
+ if (typeof c.attr === "object") {
+ $additionalButton.attr(c.attr);
+ }
+
+ if (typeof c.css === "object") {
+ $additionalButton.css(c.css);
+ }
+
+ if (typeof c.behaviour === "object") {
+ (function () {
+ var currentBehaviour = c.behaviour;
+ var $currentButton = $additionalButton;
+ for (var j in currentBehaviour) {
+ var beh = currentBehaviour[j];
+ $currentButton[j](function(){
+ beh({
+ treeNode: treeNode,
+ appId: that.myTree.appId
+ });
+ });
+ }
+ })();
+ }
+
+ $domNode.children("span").prepend($additionalButton);
+ }
+
treeNode.hasChanged = function () {
that.myTree.hasChanged = true;
};
};
- var addFolderBehaviour = function ($domNode, treeNode) {
- $label = $domNode.children().eq(0);
+ var addFolderBehaviour = function ($domNode, treeNode, options) {
+ $hitarea = $domNode.children().eq(0);
+ $label = $domNode.children().eq(1);
if (treeNode != that.myTree.root) {
// enable folder closing and opening
- addOpenCloseBehaviour($label);
+ addOpenCloseBehaviour($hitarea, options);
// enable context menu
if (that.options.contextMenu) {
@@ -41,7 +85,9 @@
}
// make inner nodes draggable
- makeNodeDraggable($domNode, treeNode);
+ if (that.options.draggable) {
+ makeNodeDraggable($domNode, treeNode);
+ }
}
else {
// enable context menu
@@ -142,17 +188,120 @@
});
};
+ var openFolder = function ($node) {
+ var $this = $node;
+ if ($this.hasClass("custom-tree-expandable-hitarea")) {
+ $this.removeClass("custom-tree-expandable-hitarea");
+ $this.addClass("custom-tree-collapsable-hitarea");
+ }
+ if ($this.hasClass("custom-tree-lastExpandable-hitarea")) {
+ $this.removeClass("custom-tree-lastExpandable-hitarea");
+ $this.addClass("custom-tree-lastCollapsable-hitarea");
+ }
+ var $li = $node.parent();
+ if ($li.hasClass("custom-tree-expandable")) {
+ $li.removeClass("custom-tree-expandable");
+ $li.addClass("custom-tree-collapsable");
+ }
+ if ($li.hasClass("custom-tree-lastExpandable")) {
+ $li.removeClass("custom-tree-lastExpandable");
+ $li.addClass("custom-tree-lastCollapsable");
+ }
+ $this.siblings("ul").show("fast");
+ };
+
+ var closeFolder = function ($node) {
+ var $this = $node;
+ if ($this.hasClass("custom-tree-collapsable-hitarea")) {
+ $this.removeClass("custom-tree-collapsable-hitarea");
+ $this.addClass("custom-tree-expandable-hitarea");
+ }
+ if ($this.hasClass("custom-tree-lastCollapsable-hitarea")) {
+ $this.removeClass("custom-tree-lastCollapsable-hitarea");
+ $this.addClass("custom-tree-lastExpandable-hitarea");
+ }
+ var $li = $node.parent();
+ if ($li.hasClass("custom-tree-collapsable")) {
+ $li.removeClass("custom-tree-collapsable");
+ $li.addClass("custom-tree-expandable");
+ }
+ if ($li.hasClass("custom-tree-lastCollapsable")) {
+ $li.removeClass("custom-tree-lastCollapsable");
+ $li.addClass("custom-tree-lastExpandable");
+ }
+ $this.siblings("ul").hide("fast");
+ };
+
//
// OPEN AND CLOSE BEHAVIOUR
//
- var addOpenCloseBehaviour = function ($domNode) {
- $domNode.toggle(function () {
- $(this).siblings().hide("fast");
- }, function () {
- $(this).siblings().show("fast");
- });
+ var addOpenCloseBehaviour = function ($domNode, options) {
+ if (typeof options === "object" && options.collapsed) {
+ $domNode.siblings("ul").css("display", "none");
+ $domNode.toggle(function () {
+ openFolder($(this));
+ }, function () {
+ closeFolder($(this));
+ });
+ }
+ else {
+ $domNode.toggle(function () {
+ closeFolder($(this));
+ }, function () {
+ openFolder($(this));
+ });
+ }
};
+ var isFolder = function ($node) {
+ if ($node.children("div.custom-tree-hitarea").size() > 0) {
+ return true;
+ }
+ return false;
+ };
+
+ var makeNodeLast = function ($node) {
+ if (isFolder($node)) {
+ $node.addClass("custom-tree-last");
+ if ($node.hasClass("custom-tree-collapsable")) {
+ $node.addClass("custom-tree-lastCollapsable");
+ }
+ else if ($node.hasClass("custom-tree-expandable")) {
+ $node.addClass("custom-tree-lastExpandable");
+ }
+ var $hitarea = $node.children("div:first");
+ if ($hitarea.hasClass("custom-tree-collapsable-hitarea")) {
+ $hitarea.addClass("custom-tree-lastCollapsable-hitarea");
+ }
+ else if ($hitarea.hasClass("custom-tree-expandable-hitarea")) {
+ $hitarea.addClass("custom-tree-lastExpandable-hitarea");
+ }
+ return;
+ }
+ $node.addClass("custom-tree-last");
+ };
+
+ var makeNodeLastButOne = function ($node) {
+ if (isFolder($node)) {
+ $node.removeClass("custom-tree-last");
+ if ($node.hasClass("custom-tree-lastCollapsable")) {
+ $node.removeClass("custom-tree-lastCollapsable");
+ }
+ else if ($node.hasClass("custom-tree-lastExpandable")) {
+ $node.removeClass("custom-tree-lastExpandable");
+ }
+ var $hitarea = $node.children("div:first");
+ if ($hitarea.hasClass("custom-tree-lastCollapsable-hitarea")) {
+ $hitarea.removeClass("custom-tree-lastCollapsable-hitarea");
+ }
+ else if ($hitarea.hasClass("custom-tree-lastExpandable-hitarea")) {
+ $hitarea.removeClass("custom-tree-lastExpandable-hitarea");
+ }
+ return;
+ }
+ $node.removeClass("custom-tree-last");
+ };
+
//
// DRAGGABLE AND DROPPABLE
//
@@ -160,6 +309,7 @@
$domNode.draggable({
"helper": "clone",
"start": function(){
+ var $this = $(this);
$(this).addClass("currently-dragging");
currentlyDraggedNode = treeNode;
}
@@ -181,10 +331,51 @@
"drop": function (e, ui) {
$toDomNode = $(this);
$fromDomNode = $(ui.draggable);
-
+
+ var parent1 = ui.draggable.parent().prev().get(0);
+ var parent2 = this;
+ // has node been inserted in the same branch?
+ if (parent1 === parent2) {
+ // the dragged node is the last of the branch
+ if ($fromDomNode.hasClass("custom-tree-last")) {
+ // do nothing
+ }
+ else {
+ var $li = $toDomNode.next().children();
+ if ($li.size() > 1) {
+ var $oldLast = $li.eq($li.size() - 2);
+ makeNodeLastButOne($oldLast);
+ }
+ $toDomNode.next().append($fromDomNode);
+ makeNodeLast($fromDomNode);
+ }
+ }
+ else {
+
+ // the dragged node is the last of the branch
+ if ($fromDomNode.hasClass("custom-tree-last")) {
+
+ // make last but one node last
+ $fromDomNode.removeClass("custom-tree-last");
+
+ var $prev = $fromDomNode.prev("li");
+ if ($prev.size() > 0) {
+ makeNodeLast($prev);
+ }
+ }
+
+ var $oldLast = $toDomNode.next().children("li:last");
+
+ if ($oldLast.size() > 0) {
+ makeNodeLastButOne($oldLast);
+ }
+
+ $toDomNode.next().append($fromDomNode);
+ makeNodeLast($fromDomNode);
+
+ }
currentlyDraggedNode.afterMove = function () {
- $toDomNode.next().append($(ui.draggable));
- $(".treeLeaf").removeAttr("style");
+ $(".custom-tree-leaf").removeAttr("style");
$("*").removeClass("currently-dragging");
};
currentlyDraggedNode.move(treeNode);
@@ -194,10 +385,17 @@
// --------------- BEHAVIOUR (end) ------------------
- var createLeaf = function (treeNode) {
- var $currentItem = $("<li class='treeLeaf'></li>");
- var $currentLabel = $("<span>" + treeNode.name + "</span>");
+ var createLeaf = function (treeNode, options) {
+
+ var $currentItem = $("<li></li>");
+ var $currentIcon = $("<div></div>");
+ var $currentLabel = $("<span class='custom-tree-file'>" + treeNode.name + "</span>");
+ if (typeof options === "object" && options.last) {
+ $currentItem.addClass("custom-tree-last");
+ }
+
+ $currentItem.append($currentIcon);
$currentItem.append($currentLabel);
addLeafBehaviour($currentItem, treeNode);
@@ -211,16 +409,49 @@
return $currentItem;
};
- var createFolder = function (treeNode) {
- var $currentItem = $("<li class='treeNode'></li>");
- var $currentLabel = $("<div class='treeNodeDrop'><span>" + treeNode.name + "</span></div>");
+ var createFolder = function (treeNode, options) {
+ var $currentItem;
+ if (typeof options === "object" && options.collapsed) {
+ $currentItem = $("<li class='custom-tree-expandable'></li>");
+ }
+ else {
+ $currentItem = $("<li class='custom-tree-collapsable'></li>");
+ }
+ var $currentIcon = $("<div class='custom-tree-hitarea'></div>");
+ var $currentLabel = $("<div class='treeNodeDrop'>" +
+ "<span class='custom-tree-folder'>" + treeNode.name +
+ "</span></div>");
var $currentFolder = $("<ul></ul>");
+
+ if (typeof options === "object") {
+ if (options.collapsed) {
+ if (options.last) {
+ $currentItem.addClass("custom-tree-lastExpandable");
+ $currentIcon.addClass("custom-tree-lastExpandable-hitarea");
+ }
+ $currentItem.addClass("custom-tree-expandable");
+ $currentIcon.addClass("custom-tree-expandable-hitarea");
+ }
+ else {
+ if (options.last) {
+ $currentItem.addClass("custom-tree-lastCollapsable");
+ $currentIcon.addClass("custom-tree-lastCollapsable-hitarea");
+ }
+ $currentItem.addClass("custom-tree-collapsable");
+ $currentIcon.addClass("custom-tree-collapsable-hitarea");
+ }
+ }
+ else {
+ $currentItem.addClass("custom-tree-collapsable");
+ $currentIcon.addClass("custom-tree-collapsable-hitarea");
+ }
+ $currentItem.append($currentIcon);
$currentItem.append($currentLabel);
$currentItem.append($currentFolder);
treeNode.isFolder = true;
- addFolderBehaviour($currentItem, treeNode);
+ addFolderBehaviour($currentItem, treeNode, options);
treeNode.$domNode = $currentItem;
@@ -233,14 +464,26 @@
};
treeNode.afterAddChild = function (newChild) {
- $newNode = createFolder(newChild);
- var $folder = $currentItem.children().eq(1);
+ var $folder = $currentItem.children("ul");
+ var size = $folder.children("li").size();
+ if (size > 0) {
+ makeNodeLastButOne($folder.children("li").eq(size - 1));
+ }
+ $newNode = createFolder(newChild, {
+ last: true
+ });
$folder.append($newNode);
};
treeNode.afterAppend = function (newChild) {
- $newNode = createFolder(newChild);
- var $folder = $currentItem.children().eq(1);
+ var $folder = $currentItem.children("ul");
+ var size = $folder.children("li").size();
+ if (size > 0) {
+ makeNodeLastButOne($folder.children("li").eq(size - 1));
+ }
+ $newNode = createFolder(newChild, {
+ last: true
+ });
$folder.append($newNode);
};
return $currentItem;
@@ -253,20 +496,26 @@
* @param {Object} $domNode
* @param {Object} treeNode
*/
- var drawNode = function ($domNode, treeNode) {
+ var drawNode = function ($domNode, treeNode, options) {
var numOfChildren = treeNode.childNodeList.count();
var $newNode;
if (numOfChildren === 0 && treeNode != that.myTree.root && !treeNode.isFolder) {
- $newNode = createLeaf(treeNode);
+ $newNode = createLeaf(treeNode, options);
}
else {
- $newNode = createFolder(treeNode);
+ $newNode = createFolder(treeNode, options);
// visit the child nodes (depth first)
- var $folder = $newNode.children().eq(1);
+ var $folder = $newNode.children("ul");
for (var i = 0; i < numOfChildren; i++) {
- drawNode.apply(that, [$folder, treeNode.childNodeList.get(i)]);
+ var opt = {
+ collapsed: that.options.collapsed
+ };
+ if (i === numOfChildren - 1) {
+ opt.last = true;
+ }
+ drawNode.apply(that, [$folder, treeNode.childNodeList.get(i), opt]);
}
}
// attach node to tree
@@ -275,5 +524,19 @@
$("#" + this.options.id).empty();
$("#" + this.options.id).append(that.$root);
- drawNode(that.$root, that.myTree.root);
+ if (options.skipRootNode) {
+ var numOfChildren = that.myTree.root.childNodeList.count();
+ for (var i = 0; i < numOfChildren; i++) {
+ drawNode.apply(that, [that.$root, that.myTree.root.childNodeList.get(i), {
+ last: numOfChildren - 1 === i ? true : false,
+ collapsed: typeof that.options.collapsed !== "undefined" ?
+ that.options.collapsed : true
+ }]);
+ }
+ }
+ else {
+ drawNode(that.$root, that.myTree.root, {
+ last: true
+ });
+ }
};
\ No newline at end of file
Modified: trunk/mapbender/lib/customTreeModel.js
===================================================================
--- trunk/mapbender/lib/customTreeModel.js 2009-08-28 12:42:21 UTC (rev 4550)
+++ trunk/mapbender/lib/customTreeModel.js 2009-08-28 12:42:59 UTC (rev 4551)
@@ -116,7 +116,7 @@
*
* w/ nested sets output
*/
-var CustomTree = function () {
+var CustomTree = function (options) {
this.root = new CustomTreeNode (null);
var that = this;
@@ -126,7 +126,7 @@
this.toNestedSets = function () {
var nodeArray = toNestedSetsNode.apply(this, [[], this.root, 1]);
return nodeArray;
- }
+ };
var toNestedSetsNode = function (nodeArray, node, nextLeft) {
var left = nextLeft;
@@ -188,9 +188,9 @@
};
this.importNestedSets = function (nodeArray) {
-
- if(nodeArray===undefined || nodeArray.length<1)
+ if(nodeArray===undefined || nodeArray.length<1) {
return false;
+ }
//numeric sort function
var nodeSort = function(a,b){
@@ -236,6 +236,15 @@
//new node is the one that take next childs
currentNode = newNode;
}
+
+ // add WMS for root
+ var wmsIdArray = nodeArray[0].wms;
+ for (var j in wmsIdArray) {
+ var newWmsNode = new CustomTreeNode(this.root);
+ newWmsNode.wmsId = j;
+ newWmsNode.name = wmsIdArray[j];
+ this.root.append(newWmsNode);
+ }
return true;
}
@@ -274,6 +283,105 @@
currentChild.remove();
}
};
+
+ var addMissingWmsToCustomTree = function (anApplicationId, callback) {
+ // get available WMS ...
+ var queryObj = {
+ command:"getWmsByApplication",
+ parameters: {
+ "applicationId": anApplicationId
+ }
+ };
+
+ $.post("../php/mod_customTree_server.php", {
+ queryObj:$.toJSON(queryObj)
+ }, function (json, status) {
+ var replyObj = eval('(' + json + ')');
+
+ var wmsIdArray = findAllWmsInTree();
+ for (var index in replyObj.data.wmsArray) {
+ var found = false;
+ for (var j = 0; j < wmsIdArray.length; j++) {
+ if (wmsIdArray[j] == index) {
+ found = true;
+ break;
+ }
+ }
+ if (!found) {
+ var wmsNode = new CustomTreeNode();
+ wmsNode.name = replyObj.data.wmsArray[index];
+ wmsNode.wmsId = index;
+ that.root.append(wmsNode);
+ }
+ }
+
+ that.hasChanged = false;
+ callback();
+ });
+ };
+
+ var findAllWmsInTree = function () {
+ return findAllWmsInNode(that.root).sort();
+ };
+
+ findAllWmsInNode = function (aNode) {
+ if (!aNode.isFolder) {
+ return [aNode.wmsId];
+ }
+ var wmsIdArray = [];
+ for (var i = 0; i < aNode.childNodeList.count(); i++) {
+ var child = aNode.childNodeList.get(i);
+ var newArray = findAllWmsInNode(child);
+ wmsIdArray = wmsIdArray.concat(newArray);
+ }
+ return wmsIdArray;
+ };
+
+
+ var getCustomTreeByApplication = function (applicationName) {
+ that.appId = applicationName;
+
+ // load a previously saved
+ // customized tree from the database
+ var queryObj = {
+ command:"getCustomTreeByApplication",
+ parameters: {
+ "applicationId":applicationName
+ }
+ };
+
+ $.post("../php/mod_customTree_server.php", {
+ queryObj:$.toJSON(queryObj)
+ }, function (json, status) {
+ var replyObj = eval('(' + json + ')');
+
+ that.root.name = "(" + applicationName + ")";
+
+ var nodeArray = replyObj.data.nodeArray;
+
+ that.importNestedSets(nodeArray);
+
+ addMissingWmsToCustomTree(applicationName, function () {
+ displayMyTree = new customTreeController(that, {
+ contextMenu: options.contextMenu ? true : false,
+ droppable: options.droppable ? true : false,
+ draggable: typeof options.draggable === "undefined" ?
+ false : options.draggable,
+ id: options.id ?
+ options.id : "myTree" + ((new Date()).getTime()),
+ skipRootNode: typeof options.skipRootNode === "undefined" ?
+ false : options.skipRootNode,
+ leafBehaviour: typeof options.leafBehaviour === "undefined" ?
+ [] : options.leafBehaviour
+ });
+ });
+
+ });
+ };
+
+ if (typeof options === "object" && options.loadFromApplication) {
+ getCustomTreeByApplication(options.loadFromApplication);
+ }
};
/**
@@ -404,4 +512,4 @@
}
return foundNonFolder;
};
-};
\ No newline at end of file
+};
More information about the Mapbender_commits
mailing list