Added nice jquery tagsinput to bookmarks dialog - similar to delicious.com ;-)

git-svn-id: https://svn.berlios.de/svnroot/repos/yacy/trunk@8133 6c8d7289-2bf4-0310-a012-ef5d649a1542

htroot/YMarks.html

@@ -9,6 +9,9 @@
 		<link media="screen" type="text/css" href="/jquery/css/jquery.multiselect.css" rel="stylesheet" />
 		<script src="/jquery/js/jquery.multiselect.min.js" type="text/javascript"></script>
 		
+		<link media="screen" type="text/css" href="/jquery/css/jquery.tagsinput.css" rel="stylesheet" />
+		<script src="/jquery/js/jquery.tagsinput.min.js" type="text/javascript"></script>
+		
 		<link media="screen" type="text/css" href="/jquery/css/jquery.multiselect.filter.css" rel="stylesheet" />
 		<script src="/jquery/js/jquery.multiselect.filter.min.js" type="text/javascript"></script>		
 				
@@ -195,7 +198,21 @@ To see a list of all APIs, please visit the <a href="http://www.yacy-websuche.de
 		
 		<!-- Bookmarks Edit Dialog -->	
 		<div id="ymarks_add_dialog" class="bm_dialog" title="Add & Edit Bookmark">
-			<img id="bmaddimg" src="/yacy/ui/img-1/Star.png" />			
+			<table>
+				<tr>
+					<td>
+						<img id="bmaddimg" src="/yacy/ui/img-1/Star.png" />	
+					</td>
+					<td>
+						<label for="bm_public">Public:</label>
+						<br />
+						<select name="public" id="bm_public" class="bm_select">
+							<option value="true">yes</option>
+							<option value="false">no</option>
+						</select>
+					</td>
+				</tr>
+			</table>					
 			<form id="bmaddform" method="post" accept-charset="UTF-8" action="jQuery"><div>
 				<label for="bm_url">URL:</label>
 				<br />					
@@ -217,13 +234,6 @@ To see a list of all APIs, please visit the <a href="http://www.yacy-websuche.de
 				<label for="bm_tags">Tags (comma separated):</label>
 				<br />
 				<input type="text" name="tags" id="bm_tags" class="bm_input" size="80" />
-				<br />
-				<label for="bm_public">Public:</label>
-				<br />
-				<select name="public" id="bm_public" class="bm_select">
-					<option value="true">yes</option>
-					<option value="false">no</option>
-				</select>
 			</div></form>
 		</div>
 		<div id="ymarks_crawlstart" class="bm_dialog" title="Craw Start">

htroot/env/yacy-ymarks.css

@@ -108,6 +108,10 @@ img.help {
 	margin: 5px 5px 5px 5px;
 }
 
+#bm_tags_tagsinput {
+	margin: 0px 0px 2px 5px;
+}
+
 
 /* YaCy Flexigrid ---------------------------*/
 .flexigrid div.fbutton .burst {

htroot/jquery/css/jquery.tagsinput.css

@@ -0,0 +1,7 @@
+div.tagsinput { border:1px solid #CCC; background: #FFF; padding:5px; width:300px; height:100px; overflow-y: auto;}
+div.tagsinput span.tag { border: 1px solid #a5d24a; -moz-border-radius:2px; -webkit-border-radius:2px; display: block; float: left; padding: 5px; text-decoration:none; background: #cde69c; color: #638421; margin-right: 5px; margin-bottom:5px;font-family: helvetica;  font-size:13px;}
+div.tagsinput span.tag a { font-weight: bold; color: #82ad2b; text-decoration:none; font-size: 11px;  } 
+div.tagsinput input { width:80px; margin:0px; font-family: helvetica; font-size: 13px; border:1px solid transparent; padding:5px; background: transparent; color: #000; outline:0px;  margin-right:5px; margin-bottom:5px; }
+div.tagsinput div { display:block; float: left; } 
+.tags_clear { clear: both; width: 100%; height: 0px; }
+.not_valid {background: #FBD8DB !important; color: #90111A !important;}

htroot/js/yacy-ymarks-bookmark-actions.js

@@ -19,6 +19,7 @@ function bm_action(com,grid) {
 	}
 	else if (com=='Add') {			
 		$('#bmaddform').resetForm();
+        $('#bm_tags').importTags('');
 		$("#bm_url").removeAttr("disabled");
 		$("#bm_url").blur(function() { 
 			var url = $("#bm_url").getValue();
@@ -44,7 +45,8 @@ function bm_action(com,grid) {
 					}
 					$("#bm_title").setValue(title);
 					$("#bm_desc").setValue(desc);
-					$("#bm_tags").setValue(tags);
+					/* $("#bm_tags").setValue(tags); */
+			        $('#bm_tags').importTags(tags);
 				}					
 			});
 		});						
@@ -58,7 +60,8 @@ function bm_action(com,grid) {
 		$("#bm_url").setValue($('.trSelected',grid).find('.url').text());
         $("#bm_title").setValue($('.trSelected',grid).find('h3.linktitle').text().trim());
         $("#bm_desc").setValue($('.trSelected',grid).find('p.desc').text().trim());            		
-        $("#bm_tags").setValue($('.trSelected',grid).find('p.tags').text().trim().replace(/,\s/g,","));            
+        $('#bm_tags').importTags($('.trSelected',grid).find('p.tags').text().trim().replace(/,\s/g,","));
+        /* $("#bm_tags").setValue($('.trSelected',grid).find('p.tags').text().trim().replace(/,\s/g,",")); */                 
         $("#bm_path").setValue($('.trSelected',grid).find('p.folders').text().replace(/,\s/g,","));
         $("#bm_public").setValue($('.trSelected',grid).find('img').attr('alt'));
         $("#ymarks_add_dialog").dialog('open');
@@ -111,10 +114,21 @@ function bm_action(com,grid) {
 }
 
 function bm_dialog() {
+	/* Init Tag Input */
+    $('#bm_tags').tagsInput({
+  	   'height':'105px',
+ 	   'width':'270px',
+ 	   'interactive':true,
+ 	   'removeWithBackspace' : true,
+ 	   'minChars' : 0,
+ 	   'maxChars' : 0,
+ 	   'placeholderColor' : '#666666'       	   
+     }); 
+    
 	/* Initialize Bookmark Dialog */		
 	$("#ymarks_add_dialog").dialog({			
 		autoOpen: false,
-		height: 450,
+		height: 500,
 		width: 340,
 		position: ['top',100],
 		modal: true,			

htroot/js/yacy-ymarks.js

@@ -7,7 +7,7 @@ $(document).ready(function() {
 	qtag = "";
 	
 	/* Initialize Bookmark Dialog */
-	bm_dialog();	
+	bm_dialog();
 	
 	/* Initialize Flexigrid */
 	$('#ymarks_flexigrid').flexigrid({