From 61c9a791c472ef4a905794ef170e6e27260bed6b Mon Sep 17 00:00:00 2001
From: apfelmaennchen <apfelmaennchen@6c8d7289-2bf4-0310-a012-ef5d649a1542>
Date: Fri, 6 May 2011 21:36:35 +0000
Subject: [PATCH] YMarks: sidebar with tabs for tags and folders

git-svn-id: https://svn.berlios.de/svnroot/repos/yacy/trunk@7703 6c8d7289-2bf4-0310-a012-ef5d649a1542
---
 htroot/YMarks.html                   | 115 ++++++++++++++++++++++-----
 htroot/api/ymarks/get_treeview.java  |   9 ++-
 htroot/api/ymarks/test_treeview.html |   2 +-
 3 files changed, 102 insertions(+), 24 deletions(-)
diff --git a/htroot/YMarks.html b/htroot/YMarks.html
index 7c0d7b767..cc7c61f92 100644
--- a/htroot/YMarks.html
+++ b/htroot/YMarks.html
@@ -5,17 +5,20 @@
 		#%env/templates/metas.template%#
 		<link media="screen" type="text/css" href="yacy/ui/css/base.css" rel="stylesheet" />
 		<link media="screen" type="text/css" href="/yacy/ui/css/jquery.flexigrid.css" rel="stylesheet" />
+		<link media="screen" type="text/css" href="/yacy/ui/css/jquery.treeview.css" rel="stylesheet" /> 
 	</head>
 	<body id="ymarks_body">
 		#%env/templates/header.template%#
 		<script src="/yacy/ui/js/jquery-flexigrid.js" type="text/javascript"></script>
+		<script src="/yacy/ui/js/jquery.treeview.min.js" type="text/javascript"></script>
+  		<script src="/yacy/ui/js/jquery.treeview.async.js" type="text/javascript"></script>  
 		<script type="text/javascript">
 		   //<![CDATA[
 			HTMLenc = function(s) {
 				return $('<div/>').text(s).html();			
 			}
 			$(document).ready(function() {							
-				var height=document.documentElement.clientHeight - 220;    			
+				var height=document.documentElement.clientHeight - 200;    			
 		 		$('#ymarks').flexigrid({
 			 		url: '/api/ymarks/get_ymark.json',
 					dataType: 'json',
@@ -62,23 +65,39 @@
 					nowrap: false,			 									    				
 			 		height: height,
 			 		query: ".*",
-			 		qtype: "title"										    				
+			 		qtype: "title"									    				
 		 		});
 
-		  		/* Init Sidebar_1 */
-		  		$("#side1").accordion({
-					autoHeight: false,
-					clearStyle: true,
-					collapsible: true,										
-					header: "h3"
-				});
 				loadTagCloud();
-				$("#side1").accordion("activate", 1);				
+		 		
+				$('#sidebar').height(height+90);
+				$tabs = $('#sidebar').tabs({
+					// tabs options
+				});
+
+		  		$("#yfolder").treeview({
+					url: "/api/ymarks/get_treeview.json?bmtype=href",
+					unique: true,
+					toggle: function() {
+				    }				
+				});						
+
+				$("#yfolder").bind("click", function(event) {
+						if ($(event.target).is("li") || $(event.target).parents("li").length) {
+							var folder = $(event.target).parents("li").filter(":first").attr("id");
+							$('#ymarks').flexOptions({
+								query: folder,
+								qtype: "_folder",
+								newp: 1
+							});
+							$('#ymarks').flexReload();
+							return false;
+						}	
+				});
 			});
 
 			function loadTagCloud() {		
 				$("#tagcloud *").remove();
-				$("#sidebar-1-1").toggleClass("ui.loading");
 				$.ajax({
 					type: "POST",
 					url: "/api/ymarks/get_tags.xml?top=25&sort=alpha",			
@@ -103,8 +122,6 @@
 									$('#ymarks').flexReload();					
 								});																									
 						}); //close each(							
-						$("#sidebar-1-1").toggleClass("ui.loading");
-						$("#side1").accordion("activate", 0);
 					}
 				}); //close $.ajax(
 			};
@@ -187,7 +204,7 @@
 		</script>
 		<div class="SubMenu">
 			<h3>Bookmarks</h3>
-			<!-- SubMenu -->
+			<!-- 
 			<ul class="SubMenu">
 				#(login)#<li><a href="YMarks.html" class="MenuItemLink">Login</a></li>::#(/login)#
 				<li><a href="/api/ymarks/test_treeview.html" class="MenuItemLink lock">TreeView</a></li>
@@ -195,23 +212,79 @@
 				<li><a href="/api/ymarks/get_xbel.xml" class="MenuItemLink lock">Bookmarks (XBEL)</a></li>
 			</ul>
 			<p/>
+			-->
 		</div>
-		<div id="sidebar" class="sidebar" style="float: right; margin-left: 15px;">
-			<div id="side1">
-				<h3 id="sidebar-1-1"><a href="#">Bookmark TagCloud</a></h3>
+		<div id="sidebar" class="sidebar" style="float:right; margin-left:10px; margin-top:5px; padding-top:2px;">
+			<ul>
+				<li><a href="#tab1" title="folders"><span>Folders</span></a></li>
+				<li><a href="#tab2" title="tags"><span>Tags</span></a></li>
+				<li><a href="#tab3" title="import"><span>Import</span></a></li>									
+			</ul>	
+			<div id="tab1"">			
+				<div style="margin-top:2px; background:url('/yacy/ui/img/flexigrid/bg.gif') repeat-x scroll center top #FAFAFA;
+				border-color:#CCCCCC #CCCCCC -moz-use-text-color; border-style:solid solid none; border-width:1px 1px 0; padding:5px; 
+				margin-top:-10px; margin-left:-15px; margin-right:-15px; margin-bottom: 15px;">
+					<img src="/yacy/ui/img-2/plus.png" alt="Add" style="padding-right:4px; padding-left:5px;"/>Add
+					<img src="/yacy/ui/img-2/cancel.png" alt="Delete" style="padding-right:4px; padding-left:5px;"/>Delete
+					<img src="/yacy/ui/img-2/pencil.png" alt="Edit" style="padding-right:4px; padding-left:5px;"/>Edit
+					<img src="/yacy/ui/img-2/question_blue.png" alt="Help" style="padding-right:4px; padding-left:25px;"/>Help					
+				</div>
+				<div>
+					<ul id="yfolder" class="filetree"></ul>
+				</div>
+			</div>	
+			<div id="tab2">
+				<div style="margin-top:2px; background:url('/yacy/ui/img/flexigrid/bg.gif') repeat-x scroll center top #FAFAFA;
+				border-color:#CCCCCC #CCCCCC -moz-use-text-color; border-style:solid solid none; border-width:1px 1px 0; padding:5px; 
+				margin-top:-10px; margin-left:-15px; margin-right:-15px; margin-bottom: 15px;">
+					<img src="/yacy/ui/img-2/plus.png" alt="Add" style="padding-right:4px; padding-left:5px;"/>Add
+					<img src="/yacy/ui/img-2/cancel.png" alt="Delete" style="padding-right:4px; padding-left:5px;"/>Delete
+					<img src="/yacy/ui/img-2/pencil.png" alt="Edit" style="padding-right:4px; padding-left:5px;"/>Edit
+					<img src="/yacy/ui/img-2/question_blue.png" alt="Help" style="padding-right:4px; padding-left:25px;"/>Help					
+				</div>
 				<div>
 					<p id="tagcloud"></p>	
 				</div>
-
 			</div>
-			<div id="side2"></div>
-		</div>	
+			<div id="tab3">
+			Import Form
+			</div>
+		</div>
 		<!-- Display Bookmarks Table -->
-		<div style="margin-top: 25px;">
+		<div style="margin-top: 7px;">
 			<table id="ymarks" summary="YaCy Bookmarks">
 				<tbody>		
 				</tbody>
 			</table>
+			<!--  
+			<div id="editbox">	
+				<h3 id="box-1"><a href="#">Edit Bookmark</a></h3>
+				<div>
+					<form action="Bookmarks.html" method="get" accept-charset="UTF-8">
+						<label for="url">URL:</label>
+						<input type="text" name="url" id="url" value="#[url]#" onblur="loadTitle()" size="80" />
+						<br />
+						<label for="title">Title:</label>
+						<input type="text" name="title" id="title" value="#[title]#" size="80" />
+						<br />
+						<label for="description">Description:</label>
+						<input type="text" name="description" id="description" value="#[description]#" size="80" />
+						<br />
+						<label for="folder">Folder (/folder/subfolder):</label>
+						<input type="text" name="path" id="path" value="#[path]#" size="80" />
+						<br />
+						<label for="tags">Tags (comma separated):</label>
+						<input type="text" name="tags" id="tags" value="#[tags]#" size="80" />
+						<br />
+						<label for="public">Public:</label>
+						<select name="public" id="public">
+							<option value="public">yes</option>
+							<option value="private" selected="selected">no</option>
+						</select>
+					</form>
+				</div>		
+			</div>
+			-->
 		</div>	
 		#%env/templates/footer.template%#
 	</body>
diff --git a/htroot/api/ymarks/get_treeview.java b/htroot/api/ymarks/get_treeview.java
index 0e07c289a..6088f5b93 100644
--- a/htroot/api/ymarks/get_treeview.java
+++ b/htroot/api/ymarks/get_treeview.java
@@ -51,8 +51,13 @@ public class get_treeview {
         	boolean isURLdb = false;
         	boolean isCrawlStart = false;
         	boolean isWordCount = false;
+        	boolean displayBmk = false;
 
         	if (post != null){
+        		if(post.containsKey("display") && post.get("display").equals("bmk")) {
+        			displayBmk = true;
+        		}
+        		
         		if (post.containsKey(ROOT)) {
             		if (post.get(ROOT).equals(SOURCE) || post.get(ROOT).equals(YMarkTables.FOLDERS_ROOT)) {
             			root = "";
@@ -108,7 +113,7 @@ public class get_treeview {
 	        	}
 	        	// loop through bookmarkList
 	        	try {
-	        		if(!root.isEmpty()) {
+	        		if(displayBmk && !root.isEmpty()) {
 	        			bit = sb.tables.bookmarks.getBookmarksByFolder(bmk_user, root);
 			        	while (bit.hasNext()) {
 			        		bmk_row = bit.next();
@@ -143,7 +148,7 @@ public class get_treeview {
 				} catch (IOException e) {
 					Log.logException(e);
 				}
-	        } else if(isBookmark) {
+	        } else if(displayBmk && isBookmark) {
 	        	try {
 					final String urlHash = post.get(ROOT).substring(2);
 	        		String url = "";
diff --git a/htroot/api/ymarks/test_treeview.html b/htroot/api/ymarks/test_treeview.html
index c0d729f8d..e634af3e8 100644
--- a/htroot/api/ymarks/test_treeview.html
+++ b/htroot/api/ymarks/test_treeview.html
@@ -10,7 +10,7 @@
 		   //<![CDATA[
 			$(document).ready(function() { 
 				$("#yfolder").treeview({
-					url: "/api/ymarks/get_treeview.json?bmtype=href",
+					url: "/api/ymarks/get_treeview.json?bmtype=href&display=bmk",
 					unique: false,
 					toggle: function() {
 						
