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

6 files changed, 48 insertions, 12 deletions

diff --git a/htroot/YMarks.html b/htroot/YMarks.html
index 1f9c5119e..852c94740 100644
--- a/htroot/YMarks.html
+++ b/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">
diff --git a/htroot/env/yacy-ymarks.css b/htroot/env/yacy-ymarks.css
index f0cc34c8e..50ab601bd 100644
--- a/htroot/env/yacy-ymarks.css
+++ b/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 {
diff --git a/htroot/jquery/css/jquery.tagsinput.css b/htroot/jquery/css/jquery.tagsinput.css
new file mode 100644
index 000000000..c595e249f
--- /dev/null
+++ b/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;}
diff --git a/htroot/jquery/js/jquery.tagsinput.min.js b/htroot/jquery/js/jquery.tagsinput.min.js
new file mode 100644
index 000000000..edc0d5f93
--- /dev/null
+++ b/htroot/jquery/js/jquery.tagsinput.min.js
@@ -0,0 +1 @@
+(function(a){var b=new Array;var c=new Array;a.fn.doAutosize=function(b){var c=a(this).data("minwidth"),d=a(this).data("maxwidth"),e="",f=a(this),g=a("#"+a(this).data("tester_id"));if(e===(e=f.val())){return}var h=e.replace(/&/g,"&").replace(/\s/g," ").replace(/</g,"<").replace(/>/g,">");g.html(h);var i=g.width(),j=i+b.comfortZone>=c?i+b.comfortZone:c,k=f.width(),l=j<k&&j>=c||j>c&&j<d;if(l){f.width(j)}};a.fn.resetAutosize=function(b){var c=a(this).data("minwidth")||b.minInputWidth||a(this).width(),d=a(this).data("maxwidth")||b.maxInputWidth||a(this).closest(".tagsinput").width()-b.inputPadding,e="",f=a(this),g=a("<tester/>").css({position:"absolute",top:-9999,left:-9999,width:"auto",fontSize:f.css("fontSize"),fontFamily:f.css("fontFamily"),fontWeight:f.css("fontWeight"),letterSpacing:f.css("letterSpacing"),whiteSpace:"nowrap"}),h=a(this).attr("id")+"_autosize_tester";if(!a("#"+h).length>0){g.attr("id",h);g.appendTo("body")}f.data("minwidth",c);f.data("maxwidth",d);f.data("tester_id",h);f.css("width",c)};a.fn.addTag=function(d,e){e=jQuery.extend({focus:false,callback:true},e);this.each(function(){var f=a(this).attr("id");var g=a(this).val().split(b[f]);if(g[0]==""){g=new Array}d=jQuery.trim(d);if(e.unique){var h=a(g).tagExist(d);if(h==true){a("#"+f+"_tag").addClass("not_valid")}}else{var h=false}if(d!=""&&h!=true){a("<span>").addClass("tag").append(a("<span>").text(d).append("  "),a("<a>",{href:"#",title:"Removing tag",text:"x"}).click(function(){return a("#"+f).removeTag(escape(d))})).insertBefore("#"+f+"_addTag");g.push(d);a("#"+f+"_tag").val("");if(e.focus){a("#"+f+"_tag").focus()}else{a("#"+f+"_tag").blur()}a.fn.tagsInput.updateTagsField(this,g);if(e.callback&&c[f]&&c[f]["onAddTag"]){var i=c[f]["onAddTag"];i.call(this,d)}if(c[f]&&c[f]["onChange"]){var j=g.length;var i=c[f]["onChange"];i.call(this,a(this),g[j-1])}}});return false};a.fn.removeTag=function(d){d=unescape(d);this.each(function(){var e=a(this).attr("id");var f=a(this).val().split(b[e]);a("#"+e+"_tagsinput .tag").remove();str="";for(i=0;i<f.length;i++){if(f[i]!=d){str=str+b[e]+f[i]}}a.fn.tagsInput.importTags(this,str);if(c[e]&&c[e]["onRemoveTag"]){var g=c[e]["onRemoveTag"];g.call(this,d)}});return false};a.fn.tagExist=function(b){return jQuery.inArray(b,a(this))>=0};a.fn.importTags=function(b){id=a(this).attr("id");a("#"+id+"_tagsinput .tag").remove();a.fn.tagsInput.importTags(this,b)};a.fn.tagsInput=function(d){var e=jQuery.extend({interactive:true,defaultText:"add a tag",minChars:0,width:"300px",height:"100px",autocomplete:{selectFirst:false},hide:true,delimiter:",",unique:true,removeWithBackspace:true,placeholderColor:"#666666",autosize:true,comfortZone:20,inputPadding:6*2},d);this.each(function(){if(e.hide){a(this).hide()}var d=a(this).attr("id");var f=jQuery.extend({pid:d,real_input:"#"+d,holder:"#"+d+"_tagsinput",input_wrapper:"#"+d+"_addTag",fake_input:"#"+d+"_tag"},e);b[d]=f.delimiter;if(e.onAddTag||e.onRemoveTag||e.onChange){c[d]=new Array;c[d]["onAddTag"]=e.onAddTag;c[d]["onRemoveTag"]=e.onRemoveTag;c[d]["onChange"]=e.onChange}var g='<div id="'+d+'_tagsinput" class="tagsinput"><div id="'+d+'_addTag">';if(e.interactive){g=g+'<input id="'+d+'_tag" value="" data-default="'+e.defaultText+'" />'}g=g+'</div><div class="tags_clear"></div></div>';a(g).insertAfter(this);a(f.holder).css("width",e.width);a(f.holder).css("height",e.height);if(a(f.real_input).val()!=""){a.fn.tagsInput.importTags(a(f.real_input),a(f.real_input).val())}if(e.interactive){a(f.fake_input).val(a(f.fake_input).attr("data-default"));a(f.fake_input).css("color",e.placeholderColor);a(f.fake_input).resetAutosize(e);a(f.holder).bind("click",f,function(b){a(b.data.fake_input).focus()});a(f.fake_input).bind("focus",f,function(b){if(a(b.data.fake_input).val()==a(b.data.fake_input).attr("data-default")){a(b.data.fake_input).val("")}a(b.data.fake_input).css("color","#000000")});if(e.autocomplete_url!=undefined){autocomplete_options={source:e.autocomplete_url};for(attrname in e.autocomplete){autocomplete_options[attrname]=e.autocomplete[attrname]}if(jQuery.Autocompleter!==undefined){a(f.fake_input).autocomplete(e.autocomplete_url,e.autocomplete);a(f.fake_input).bind("result",f,function(b,c,f){if(c){a("#"+d).addTag(c[0]+"",{focus:true,unique:e.unique})}})}else if(jQuery.ui.autocomplete!==undefined){a(f.fake_input).autocomplete(autocomplete_options);a(f.fake_input).bind("autocompleteselect",f,function(b,c){a(b.data.real_input).addTag(c.item.value,{focus:true,unique:e.unique});return false})}}else{a(f.fake_input).bind("blur",f,function(b){var c=a(this).attr("data-default");if(a(b.data.fake_input).val()!=""&&a(b.data.fake_input).val()!=c){if(b.data.minChars<=a(b.data.fake_input).val().length&&(!b.data.maxChars||b.data.maxChars>=a(b.data.fake_input).val().length))a(b.data.real_input).addTag(a(b.data.fake_input).val(),{focus:true,unique:e.unique})}else{a(b.data.fake_input).val(a(b.data.fake_input).attr("data-default"));a(b.data.fake_input).css("color",e.placeholderColor)}return false})}a(f.fake_input).bind("keypress",f,function(b){if(b.which==b.data.delimiter.charCodeAt(0)||b.which==13){b.preventDefault();if(b.data.minChars<=a(b.data.fake_input).val().length&&(!b.data.maxChars||b.data.maxChars>=a(b.data.fake_input).val().length))a(b.data.real_input).addTag(a(b.data.fake_input).val(),{focus:true,unique:e.unique});a(b.data.fake_input).resetAutosize(e);return false}else if(b.data.autosize){a(b.data.fake_input).doAutosize(e)}});f.removeWithBackspace&&a(f.fake_input).bind("keydown",function(b){if(b.keyCode==8&&a(this).val()==""){b.preventDefault();var c=a(this).closest(".tagsinput").find(".tag:last").text();var d=a(this).attr("id").replace(/_tag$/,"");c=c.replace(/[\s]+x$/,"");a("#"+d).removeTag(escape(c));a(this).trigger("focus")}});a(f.fake_input).blur();if(f.unique){a(f.fake_input).keydown(function(b){if(b.keyCode==8||String.fromCharCode(b.which).match(/\w+|[áéíóúÁÉÍÓÚñÑ,/]+/)){a(this).removeClass("not_valid")}})}}return false});return this};a.fn.tagsInput.updateTagsField=function(c,d){var e=a(c).attr("id");a(c).val(d.join(b[e]))};a.fn.tagsInput.importTags=function(d,e){a(d).val("");var f=a(d).attr("id");var g=e.split(b[f]);for(i=0;i<g.length;i++){a(d).addTag(g[i],{focus:false,callback:false})}if(c[f]&&c[f]["onChange"]){var h=c[f]["onChange"];h.call(d,d,g[i])}}})(jQuery);
diff --git a/htroot/js/yacy-ymarks-bookmark-actions.js b/htroot/js/yacy-ymarks-bookmark-actions.js
index b37dd8369..2587f3c82 100644
--- a/htroot/js/yacy-ymarks-bookmark-actions.js
+++ b/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,			
diff --git a/htroot/js/yacy-ymarks.js b/htroot/js/yacy-ymarks.js
index 0b7937fb5..a1ad65d1e 100644
--- a/htroot/js/yacy-ymarks.js
+++ b/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({