[Mapbender-commits] r2953 - branches/tree_dev/http/x_test
svn_mapbender at osgeo.org
svn_mapbender at osgeo.org
Wed Sep 17 08:33:33 EDT 2008
Author: christoph
Date: 2008-09-17 08:33:33 -0400 (Wed, 17 Sep 2008)
New Revision: 2953
Added:
branches/tree_dev/http/x_test/customTreeController.js
Removed:
branches/tree_dev/http/x_test/customTree.js
Modified:
branches/tree_dev/http/x_test/customTreeModel.js
branches/tree_dev/http/x_test/tree.html
Log:
added context menu
added 2nd tree
Deleted: branches/tree_dev/http/x_test/customTree.js
===================================================================
--- branches/tree_dev/http/x_test/customTree.js 2008-09-17 10:31:27 UTC (rev 2952)
+++ branches/tree_dev/http/x_test/customTree.js 2008-09-17 12:33:33 UTC (rev 2953)
@@ -1,231 +0,0 @@
-var customTreeController = function (myTree) {
-// this.myTree = new CustomTree();
-// this.myTree.root.name = "My tree";
-
- this.myTree = myTree;
- this.$root = $("<ul></ul>");
-
- var that = this;
- var currentlyDraggedNode;
-
- var addContextMenuToLeaf = function ($domNode, treeNode) {
- $domNode.contextMenu('leafMenu', {
- onContextMenu: function(e) {
- return true;
- },
- onShowMenu: function(e, menu) {
- return menu;
- },
- bindings: {
- 'deleteService': function () {
- treeNode.remove();
- }
- }
- });
- }
-
- var addContextMenuToFolder = function ($domNode, treeNode) {
- $domNode.contextMenu('folderMenu', {
- onContextMenu: function(e){
- return true;
- },
- onShowMenu: function(e, menu){
- return menu;
- },
- bindings: {
- 'addFolder': function(item){
- var newChild = treeNode.addChild();
- },
- 'deleteFolder': function(){
- treeNode.remove();
- },
- 'editFolder': function(){
-
- }
- }
- });
- };
-
- var addContextMenuToRoot = function ($domNode, treeNode) {
- $domNode.contextMenu('rootMenu', {
- onContextMenu: function(e){
- return true;
- },
- onShowMenu: function(e, menu){
- return menu;
- },
- bindings: {
- 'addFolder': function(item){
- var newChild = treeNode.addChild();
- }
- }
- });
- };
-
- var addOpenCloseBehaviour = function ($domNode) {
- $domNode.toggle(function () {
- $(this).siblings().hide("fast");
- }, function () {
- $(this).siblings().show("fast");
- });
- };
-
- var makeNodeDroppable = function ($domNode, treeNode) {
- $domNode.droppable({
- "accept": function ($draggable) {
- var $invalidDroppables = $(".currently-dragging .treeNodeDrop");
- var $invalidDroppablesMinusThis = $invalidDroppables.not($domNode);
-
- if ($invalidDroppables.size() > $invalidDroppablesMinusThis.size()) {
- return false;
- }
- return true;
- },
- "tolerance": "pointer",
- "drop": function (e, ui) {
- $toDomNode = $(this);
- $fromDomNode = $(ui.draggable);
-
- currentlyDraggedNode.afterMove = function () {
- $toDomNode.next().append($(ui.draggable));
- $(".treeLeaf").removeAttr("style");
- $("*").removeClass("currently-dragging");
- };
- currentlyDraggedNode.move(treeNode);
- }
- });
- };
-
- /**
- * A recursive function to draw the nodes of a tree and attach
- * draggables and droppables
- *
- * @param {Object} $domNode
- * @param {Object} treeNode
- */
- var drawNode = function ($domNode, treeNode) {
- var numOfChildren = treeNode.childNodeList.count();
- var $currentItem;
- var $currentLabel;
-
- // this treeNode is a leaf
- if (numOfChildren === 0) {
- $currentLabel = $("<span>" + treeNode.name + "</span>");
- $currentItem = $("<li class='treeLeaf'></li>");
- $currentItem.append($currentLabel);
- addContextMenuToLeaf($currentLabel, treeNode);
- }
- else {
- // this treeNode is an inner node
- $currentItem = $("<li class='treeNode'></li>");
- $currentLabel = $("<div class='treeNodeDrop'><span>" + treeNode.name + "</span></div>");
- $currentItem.append($currentLabel);
-
- var $currentFolder = $("<ul></ul>");
- $currentItem.append($currentFolder);
-
- //
- // enable folder closing and opening
- // (not for root node)
- //
- if (treeNode != that.myTree.root) {
- addOpenCloseBehaviour($currentLabel);
- }
-
- //
- // enable context menu
- //
- if (treeNode != that.myTree.root) {
- addContextMenuToFolder($currentLabel, treeNode);
- }
- else {
- addContextMenuToRoot($currentLabel, treeNode);
- }
-
- //
- // make inner nodes droppable
- //
- makeNodeDroppable($currentLabel, treeNode);
-
- //
- // visit the child nodes (depth first)
- //
- for (var i = 0; i < numOfChildren; i++) {
- drawNode.apply(that, [$currentFolder, treeNode.childNodeList.get(i)]);
- }
- }
-
- //
- // make node draggable
- //
- if (treeNode != that.myTree.root) {
- $currentItem.draggable({
- "helper": "clone",
- "start": function(){
- $(this).addClass("currently-dragging");
- currentlyDraggedNode = treeNode;
- }
- });
- }
-
- // attach node to tree
- $domNode.append($currentItem);
-
- // link model and view
- treeNode.$domNode = $currentItem;
-
- treeNode.afterRemove = function () {
- $currentItem.remove();
- };
-
- };
-
- $(document.body).append(that.$root);
- drawNode(that.$root, that.myTree.root);
-};
-
-
-
-// see example at http://guxx.de/2007/05/30/nested-sets/
-
-var myTree = new CustomTree();
-var root = myTree.root;
-root.name = "(root)";
-
-var startNode = new CustomTreeNode();
-startNode.name = "Startseite";
-root.append(startNode);
-
-var newsNode = new CustomTreeNode();
-newsNode.name = "News";
-startNode.append(newsNode);
-
-var impNode = new CustomTreeNode();
-impNode.name = "Impressum";
-startNode.append(impNode);
-
-var heutNode = new CustomTreeNode();
-heutNode.name = "Heute";
-newsNode.append(heutNode);
-
-var archNode = new CustomTreeNode();
-archNode.name = "Archiv";
-newsNode.append(archNode);
-
-var arch05Node = new CustomTreeNode();
-arch05Node.name = "2005";
-archNode.append(arch05Node);
-
-var arch06Node = new CustomTreeNode();
-arch06Node.name = "2006";
-archNode.append(arch06Node);
-
-var arch07Node = new CustomTreeNode();
-arch07Node.name = "2007";
-archNode.append(arch07Node);
-
-console.log(myTree);
-
-$(function () {
- var displayTree = new customTreeController(myTree);
-});
Added: branches/tree_dev/http/x_test/customTreeController.js
===================================================================
--- branches/tree_dev/http/x_test/customTreeController.js (rev 0)
+++ branches/tree_dev/http/x_test/customTreeController.js 2008-09-17 12:33:33 UTC (rev 2953)
@@ -0,0 +1,239 @@
+var customTreeController = function (myTree) {
+// this.myTree = new CustomTree();
+// this.myTree.root.name = "My tree";
+
+ this.myTree = myTree;
+ this.$root = $("<ul></ul>");
+
+ var that = this;
+ var currentlyDraggedNode;
+
+ // --------------- BEHAVIOUR (begin) ------------------
+
+ var addLeafBehaviour = function ($domNode, treeNode) {
+ // enable context menu
+ $label = $domNode.children().eq(0);
+ addContextMenuToLeaf($domNode, treeNode);
+
+ // make leaves draggable
+ makeNodeDraggable($domNode, treeNode);
+ };
+
+ var addFolderBehaviour = function ($domNode, treeNode) {
+ $label = $domNode.children().eq(0);
+ if (treeNode != that.myTree.root) {
+ // enable folder closing and opening
+ addOpenCloseBehaviour($label);
+
+ // enable context menu
+ addContextMenuToFolder($domNode, treeNode);
+
+ // make inner nodes draggable
+ makeNodeDraggable($domNode, treeNode);
+ }
+ else {
+ // enable context menu
+ addContextMenuToRoot($domNode, treeNode);
+ }
+
+ // make all folders droppable
+ makeNodeDroppable($label, treeNode);
+ };
+
+
+ var deleteNode = function (treeNode) {
+ treeNode.remove();
+ };
+
+ var editNode = function ($domNode, treeNode) {
+ var newName = prompt('Name');
+ if (newName) {
+ treeNode.setName(newName);
+ }
+ };
+
+ var addNode = function ($domNode, treeNode) {
+ var newChild = treeNode.addChild();
+ $newNode = createFolder(newChild);
+ var $folder = $domNode.children().eq(1);
+ $folder.append($newNode);
+ };
+
+ //
+ // CONTEXT MENU
+ //
+ var addContextMenuToLeaf = function ($domNode, treeNode) {
+ $domNode.contextMenu('leafMenu', {
+ onContextMenu: function(e) {
+ return true;
+ },
+ onShowMenu: function(e, menu) {
+ return menu;
+ },
+ bindings: {
+ 'deleteService': function () {
+ deleteNode(treeNode);
+ }
+ }
+ });
+ }
+
+ var addContextMenuToFolder = function ($domNode, treeNode) {
+ $domNode.contextMenu('folderMenu', {
+ onContextMenu: function(e){
+ return true;
+ },
+ onShowMenu: function(e, menu){
+ return menu;
+ },
+ bindings: {
+ 'addFolder': function(item){
+ addNode($domNode, treeNode);
+ },
+ 'deleteFolder': function(){
+ deleteNode(treeNode);
+ },
+ 'editFolder': function(){
+ editNode($domNode, treeNode);
+ }
+ }
+ });
+ };
+
+ var addContextMenuToRoot = function ($domNode, treeNode) {
+ $domNode.contextMenu('rootMenu', {
+ onContextMenu: function(e){
+ return true;
+ },
+ onShowMenu: function(e, menu){
+ return menu;
+ },
+ bindings: {
+ 'addFolder': function(item){
+ addNode($domNode, treeNode);
+ }
+ }
+ });
+ };
+
+ //
+ // OPEN AND CLOSE BEHAVIOUR
+ //
+ var addOpenCloseBehaviour = function ($domNode) {
+ $domNode.toggle(function () {
+ $(this).siblings().hide("fast");
+ }, function () {
+ $(this).siblings().show("fast");
+ });
+ };
+
+ //
+ // DRAGGABLE AND DROPPABLE
+ //
+ var makeNodeDraggable = function ($domNode, treeNode) {
+ $domNode.draggable({
+ "helper": "clone",
+ "start": function(){
+ $(this).addClass("currently-dragging");
+ currentlyDraggedNode = treeNode;
+ }
+ });
+ };
+
+ var makeNodeDroppable = function ($domNode, treeNode) {
+ $domNode.droppable({
+ "accept": function ($draggable) {
+ var $invalidDroppables = $(".currently-dragging .treeNodeDrop");
+ var $invalidDroppablesMinusThis = $invalidDroppables.not($domNode);
+
+ if ($invalidDroppables.size() > $invalidDroppablesMinusThis.size()) {
+ return false;
+ }
+ return true;
+ },
+ "tolerance": "pointer",
+ "drop": function (e, ui) {
+ $toDomNode = $(this);
+ $fromDomNode = $(ui.draggable);
+
+ currentlyDraggedNode.afterMove = function () {
+ $toDomNode.next().append($(ui.draggable));
+ $(".treeLeaf").removeAttr("style");
+ $("*").removeClass("currently-dragging");
+ };
+ currentlyDraggedNode.move(treeNode);
+ }
+ });
+ };
+
+ // --------------- BEHAVIOUR (end) ------------------
+
+ var createLeaf = function (treeNode) {
+ var $currentItem = $("<li class='treeLeaf'></li>");
+ var $currentLabel = $("<span>" + treeNode.name + "</span>");
+
+ $currentItem.append($currentLabel);
+ addLeafBehaviour($currentItem, treeNode);
+
+ treeNode.$domNode = $currentItem;
+
+ treeNode.afterRemove = function () {
+ $currentItem.remove();
+ };
+
+ return $currentItem;
+ };
+
+ var createFolder = function (treeNode) {
+ var $currentItem = $("<li class='treeNode'></li>");
+ var $currentLabel = $("<div class='treeNodeDrop'><span>" + treeNode.name + "</span></div>");
+ var $currentFolder = $("<ul></ul>");
+
+ $currentItem.append($currentLabel);
+ $currentItem.append($currentFolder);
+
+ addFolderBehaviour($currentItem, treeNode);
+
+ treeNode.$domNode = $currentItem;
+
+ treeNode.afterRemove = function () {
+ $currentItem.remove();
+ };
+
+ treeNode.afterSetName = function () {
+ $currentLabel.children().eq(0).html(treeNode.name);
+ };
+ return $currentItem;
+ };
+
+ /**
+ * A recursive function to draw the nodes of a tree and attach
+ * draggables and droppables
+ *
+ * @param {Object} $domNode
+ * @param {Object} treeNode
+ */
+ var drawNode = function ($domNode, treeNode) {
+ var numOfChildren = treeNode.childNodeList.count();
+ var $newNode;
+
+ if (numOfChildren === 0) {
+ $newNode = createLeaf(treeNode);
+ }
+ else {
+ $newNode = createFolder(treeNode);
+
+ // visit the child nodes (depth first)
+ var $folder = $newNode.children().eq(1);
+ for (var i = 0; i < numOfChildren; i++) {
+ drawNode.apply(that, [$folder, treeNode.childNodeList.get(i)]);
+ }
+ }
+ // attach node to tree
+ $domNode.append($newNode);
+ };
+
+ $(document.body).append(that.$root);
+ drawNode(that.$root, that.myTree.root);
+};
+
Modified: branches/tree_dev/http/x_test/customTreeModel.js
===================================================================
--- branches/tree_dev/http/x_test/customTreeModel.js 2008-09-17 10:31:27 UTC (rev 2952)
+++ branches/tree_dev/http/x_test/customTreeModel.js 2008-09-17 12:33:33 UTC (rev 2953)
@@ -239,9 +239,16 @@
};
this.afterAddChild = function () {
-
};
+ this.afterSetName = function () {
+ };
+
+ this.setName = function (newName) {
+ this.name = newName;
+ this.afterSetName();
+ };
+
this.addChild = function () {
this.childNodeList.add(new CustomTreeNode(this));
var newChild = this.childNodeList.get(-1);
Modified: branches/tree_dev/http/x_test/tree.html
===================================================================
--- branches/tree_dev/http/x_test/tree.html 2008-09-17 10:31:27 UTC (rev 2952)
+++ branches/tree_dev/http/x_test/tree.html 2008-09-17 12:33:33 UTC (rev 2953)
@@ -41,7 +41,74 @@
<script type="text/javascript" src="../extensions/jquery.contextmenu.r2.js"></script>
<script type="text/javascript" src="../extensions/jqjson.js"></script>
<script type="text/javascript" src="customTreeModel.js"></script>
- <script type="text/javascript" src="customTree.js"></script>
+ <script type="text/javascript" src="customTreeController.js"></script>
+ <script type="text/javascript">
+
+ // see example at http://guxx.de/2007/05/30/nested-sets/
+
+ var myTree = new CustomTree();
+ var root = myTree.root;
+ root.name = "(root)";
+
+ var startNode = new CustomTreeNode();
+ startNode.name = "Startseite";
+ root.append(startNode);
+
+ var newsNode = new CustomTreeNode();
+ newsNode.name = "News";
+ startNode.append(newsNode);
+
+ var impNode = new CustomTreeNode();
+ impNode.name = "Impressum";
+ startNode.append(impNode);
+
+ var heutNode = new CustomTreeNode();
+ heutNode.name = "Heute";
+ newsNode.append(heutNode);
+
+ var archNode = new CustomTreeNode();
+ archNode.name = "Archiv";
+ newsNode.append(archNode);
+
+ var arch05Node = new CustomTreeNode();
+ arch05Node.name = "2005";
+ archNode.append(arch05Node);
+
+ var arch06Node = new CustomTreeNode();
+ arch06Node.name = "2006";
+ archNode.append(arch06Node);
+
+ var arch07Node = new CustomTreeNode();
+ arch07Node.name = "2007";
+ archNode.append(arch07Node);
+
+ console.log(myTree);
+
+
+ var wmsTree = new CustomTree();
+ var wmsRoot = wmsTree.root;
+ wmsRoot.name = "(root)";
+
+ var wms1Node = new CustomTreeNode();
+ wms1Node.name = "Germany";
+ wmsRoot.append(wms1Node);
+
+ var wms2Node = new CustomTreeNode();
+ wms2Node.name = "Demis";
+ wmsRoot.append(wms2Node);
+
+ var wms3Node = new CustomTreeNode();
+ wms3Node.name = "Mapbender User";
+ wmsRoot.append(wms3Node);
+
+
+ $(function () {
+ var displayTree = new customTreeController(myTree);
+
+ var displayWmsTree = new customTreeController(wmsTree);
+ });
+
+ </script>
</head>
<body>
<div class="contextMenu" id="folderMenu">
More information about the Mapbender_commits
mailing list