Added tagging to "Add to animelist" view

3 files changed, 271 insertions, 0 deletions

diff --git a/webroot/css/jquery.tagsinput.css b/webroot/css/jquery.tagsinput.css
new file mode 100755
index 0000000..f458143
--- /dev/null
+++ b/webroot/css/jquery.tagsinput.css
@@ -0,0 +1,6 @@
+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; }
diff --git a/webroot/jquery.tagsinput.js b/webroot/jquery.tagsinput.js
new file mode 100755
index 0000000..ac37870
--- /dev/null
+++ b/webroot/jquery.tagsinput.js
@@ -0,0 +1,264 @@
+/*
+
+	jQuery Tags Input Plugin 1.2.5
+	
+	Copyright (c) 2011 XOXCO, Inc
+	
+	Documentation for this plugin lives here:
+	http://xoxco.com/clickable/jquery-tags-input
+	
+	Licensed under the MIT license:
+	http://www.opensource.org/licenses/mit-license.php
+
+	ben@xoxco.com
+
+*/
+
+(function($) {
+
+	var delimiter = new Array();
+	var tags_callbacks = new Array();
+	
+	$.fn.addTag = function(value,options) {
+			var options = jQuery.extend({focus:false,callback:true},options);
+			this.each(function() { 
+				id = $(this).attr('id');
+	
+				var tagslist = $(this).val().split(delimiter[id]);
+				if (tagslist[0] == '') { 
+					tagslist = new Array();
+				}
+
+				value = jQuery.trim(value);
+		
+				if (options.unique) {
+					skipTag = $(tagslist).tagExist(value);
+				} else {
+					skipTag = false; 
+				}
+
+				if (value !='' && skipTag != true) { 
+                    $('<span>').addClass('tag').append(
+                        $('<span>').text(value).append('&nbsp;&nbsp;'),
+                        $('<a>', {
+                            href  : '#',
+                            title : 'Removing tag',
+                            text  : 'x'
+                        }).click(function () {
+                            return $('#' + id).removeTag(escape(value));
+                        })
+                    ).insertBefore('#' + id + '_addTag');
+
+					tagslist.push(value);
+				
+					$('#'+id+'_tag').val('');
+					if (options.focus) {
+						$('#'+id+'_tag').focus();
+					} else {		
+						$('#'+id+'_tag').blur();
+					}
+					
+					if (options.callback && tags_callbacks[id] && tags_callbacks[id]['onAddTag']) {
+						var f = tags_callbacks[id]['onAddTag'];
+						f(value);
+					}
+					if(tags_callbacks[id] && tags_callbacks[id]['onChange'])
+					{
+						var i = tagslist.length;
+						var f = tags_callbacks[id]['onChange'];
+						f($(this), tagslist[i]);
+					}					
+				}
+				$.fn.tagsInput.updateTagsField(this,tagslist);
+		
+			});		
+			
+			return false;
+		};
+		
+	$.fn.removeTag = function(value) { 
+			value = unescape(value);
+			this.each(function() { 
+				id = $(this).attr('id');
+	
+				var old = $(this).val().split(delimiter[id]);
+	
+				
+				$('#'+id+'_tagsinput .tag').remove();
+				str = '';
+				for (i=0; i< old.length; i++) { 
+					if (old[i]!=value) { 
+						str = str + delimiter[id] +old[i];
+					}
+				}
+				
+				$.fn.tagsInput.importTags(this,str);
+
+				if (tags_callbacks[id] && tags_callbacks[id]['onRemoveTag']) {
+					var f = tags_callbacks[id]['onRemoveTag'];
+					f(value);
+				}
+			});
+					
+			return false;
+		};
+	
+	$.fn.tagExist = function(val) {
+		if (jQuery.inArray(val, $(this)) == -1) {
+		  return false; /* Cannot find value in array */
+		} else {
+		  return true; /* Value found */
+		}
+	};
+	
+	// clear all existing tags and import new ones from a string
+	$.fn.importTags = function(str) {
+		$('#'+id+'_tagsinput .tag').remove();
+		$.fn.tagsInput.importTags(this,str);
+	}
+		
+	$.fn.tagsInput = function(options) { 
+		var settings = jQuery.extend({interactive:true,defaultText:'add a tag',minChars:0,width:'300px',height:'100px','hide':true,'delimiter':',',autocomplete:{selectFirst:false},'unique':true,removeWithBackspace:true},options);
+	
+		this.each(function() { 
+			if (settings.hide) { 
+				$(this).hide();				
+			}
+				
+			id = $(this).attr('id')
+			
+			data = jQuery.extend({
+				pid:id,
+				real_input: '#'+id,
+				holder: '#'+id+'_tagsinput',
+				input_wrapper: '#'+id+'_addTag',
+				fake_input: '#'+id+'_tag'
+			},settings);
+	
+	
+			delimiter[id] = data.delimiter;
+			
+			if (settings.onAddTag || settings.onRemoveTag || settings.onChange) {
+				tags_callbacks[id] = new Array();
+				tags_callbacks[id]['onAddTag'] = settings.onAddTag;
+				tags_callbacks[id]['onRemoveTag'] = settings.onRemoveTag;
+				tags_callbacks[id]['onChange'] = settings.onChange;
+			}
+	
+			var markup = '<div id="'+id+'_tagsinput" class="tagsinput"><div id="'+id+'_addTag">';
+			
+			if (settings.interactive) {
+				markup = markup + '<input id="'+id+'_tag" value="" data-default="'+settings.defaultText+'" />';
+			}
+			
+			markup = markup + '</div><div class="tags_clear"></div></div>';
+			
+			$(markup).insertAfter(this);
+
+			$(data.holder).css('width',settings.width);
+			$(data.holder).css('height',settings.height);
+	
+			if ($(data.real_input).val()!='') { 
+				$.fn.tagsInput.importTags($(data.real_input),$(data.real_input).val());
+			}		
+			if (settings.interactive) { 
+				$(data.fake_input).val($(data.fake_input).attr('data-default'));
+				$(data.fake_input).css('color','#666666');		
+		
+				$(data.holder).bind('click',data,function(event) {
+					$(event.data.fake_input).focus();
+				});
+			
+				$(data.fake_input).bind('focus',data,function(event) {
+					if ($(event.data.fake_input).val()==$(event.data.fake_input).attr('data-default')) { 
+						$(event.data.fake_input).val('');
+					}
+					$(event.data.fake_input).css('color','#000000');		
+				});
+						
+				if (settings.autocomplete_url != undefined) {
+					$(data.fake_input).autocomplete(settings.autocomplete_url,settings.autocomplete).bind('result',data,function(event,data,formatted) {
+						if (data) 
+						{
+							$(event.data.real_input).addTag(formatted,{focus:true,unique:(settings.unique)});
+						}
+					});
+					
+					$(data.fake_input).bind('blur',data,function(event) {
+						if( $('.ac_results').is(':visible') ) return false;
+						if ( $(event.data.fake_input).val() != $(event.data.fake_input).attr('data-default')) {
+							if((event.data.minChars <= $(event.data.fake_input).val().length) && (!event.data.maxChars || (event.data.maxChars >= $(event.data.fake_input).val().length)))
+								$(event.data.real_input).addTag($(event.data.fake_input).val(),{focus:false,unique:(settings.unique)});						
+						}
+						
+						$(event.data.fake_input).val($(event.data.fake_input).attr('data-default'));
+						$(event.data.fake_input).css('color','#666666');
+						return false;
+					});
+			
+				} else {
+						// if a user tabs out of the field, create a new tag
+						// this is only available if autocomplete is not used.
+						$(data.fake_input).bind('blur',data,function(event) { 
+							var d = $(this).attr('data-default');
+							if ($(event.data.fake_input).val()!='' && $(event.data.fake_input).val()!=d) { 
+								if( (event.data.minChars <= $(event.data.fake_input).val().length) && (!event.data.maxChars || (event.data.maxChars >= $(event.data.fake_input).val().length)) )
+									$(event.data.real_input).addTag($(event.data.fake_input).val(),{focus:true,unique:(settings.unique)});
+							} else {
+								$(event.data.fake_input).val($(event.data.fake_input).attr('data-default'));
+								$(event.data.fake_input).css('color','#666666');
+							}
+							return false;
+						});
+				
+				}
+				// if user types a comma, create a new tag
+				$(data.fake_input).bind('keypress',data,function(event) { 
+					if (event.which==event.data.delimiter.charCodeAt(0) || event.which==13 ) {
+						if( (event.data.minChars <= $(event.data.fake_input).val().length) && (!event.data.maxChars || (event.data.maxChars >= $(event.data.fake_input).val().length)) )
+							$(event.data.real_input).addTag($(event.data.fake_input).val(),{focus:true,unique:(settings.unique)});
+						
+						return false;
+					}
+				});
+				//Delete last tag on backspace
+				data.removeWithBackspace && $(data.fake_input).bind('keyup', function(event)
+				{
+					if(event.keyCode == 8 && $(this).val() == '')
+					{
+						 var last_tag = $(this).closest('.tagsinput').find('.tag:last').text();
+						 var id = $(this).attr('id').replace(/_tag$/, '');
+						 last_tag = last_tag.replace(/[\s]+x$/, '');
+						 $('#' + id).removeTag(escape(last_tag));
+						 $(this).trigger('focus');
+					};
+				});
+				$(data.fake_input).blur();
+			} // if settings.interactive
+			return false;
+		});
+			
+		return this;
+	
+	};
+	
+	$.fn.tagsInput.updateTagsField = function(obj,tagslist) { 
+		id = $(obj).attr('id');
+		$(obj).val(tagslist.join(delimiter[id]));
+	};
+	
+	$.fn.tagsInput.importTags = function(obj,val) {			
+		$(obj).val('');
+		id = $(obj).attr('id');
+		var tags = val.split(delimiter[id]);
+		for (i=0; i<tags.length; i++) { 
+			$(obj).addTag(tags[i],{focus:false,callback:false});
+		}
+		if(tags_callbacks[id] && tags_callbacks[id]['onChange'])
+		{
+			var f = tags_callbacks[id]['onChange'];
+			f(obj, tags[i]);
+		}
+	};
+
+})(jQuery);
diff --git a/webroot/js/jquery.tagsinput.min.js b/webroot/js/jquery.tagsinput.min.js
new file mode 100755
index 0000000..1dba5ae
--- /dev/null
+++ b/webroot/js/jquery.tagsinput.min.js
@@ -0,0 +1 @@
+(function(c){var a=new Array();var b=new Array();c.fn.addTag=function(e,d){var d=jQuery.extend({focus:false,callback:true},d);this.each(function(){id=c(this).attr("id");var g=c(this).val().split(a[id]);if(g[0]==""){g=new Array()}e=jQuery.trim(e);if(d.unique){skipTag=c(g).tagExist(e)}else{skipTag=false}if(e!=""&&skipTag!=true){c("<span>").addClass("tag").append(c("<span>").text(e).append("&nbsp;&nbsp;"),c("<a>",{href:"#",title:"Removing tag",text:"x"}).click(function(){return c("#"+id).removeTag(escape(e))})).insertBefore("#"+id+"_addTag");g.push(e);c("#"+id+"_tag").val("");if(d.focus){c("#"+id+"_tag").focus()}else{c("#"+id+"_tag").blur()}if(d.callback&&b[id]&&b[id]["onAddTag"]){var j=b[id]["onAddTag"];j(e)}if(b[id]&&b[id]["onChange"]){var h=g.length;var j=b[id]["onChange"];j(c(this),g[h])}}c.fn.tagsInput.updateTagsField(this,g)});return false};c.fn.removeTag=function(d){d=unescape(d);this.each(function(){id=c(this).attr("id");var e=c(this).val().split(a[id]);c("#"+id+"_tagsinput .tag").remove();str="";for(i=0;i<e.length;i++){if(e[i]!=d){str=str+a[id]+e[i]}}c.fn.tagsInput.importTags(this,str);if(b[id]&&b[id]["onRemoveTag"]){var g=b[id]["onRemoveTag"];g(d)}});return false};c.fn.tagExist=function(d){if(jQuery.inArray(d,c(this))==-1){return false}else{return true}};c.fn.importTags=function(d){c("#"+id+"_tagsinput .tag").remove();c.fn.tagsInput.importTags(this,d)};c.fn.tagsInput=function(d){var e=jQuery.extend({interactive:true,defaultText:"add a tag",minChars:0,width:"300px",height:"100px",hide:true,delimiter:",",autocomplete:{selectFirst:false},unique:true,removeWithBackspace:true},d);this.each(function(){if(e.hide){c(this).hide()}id=c(this).attr("id");data=jQuery.extend({pid:id,real_input:"#"+id,holder:"#"+id+"_tagsinput",input_wrapper:"#"+id+"_addTag",fake_input:"#"+id+"_tag"},e);a[id]=data.delimiter;if(e.onAddTag||e.onRemoveTag||e.onChange){b[id]=new Array();b[id]["onAddTag"]=e.onAddTag;b[id]["onRemoveTag"]=e.onRemoveTag;b[id]["onChange"]=e.onChange}var f='<div id="'+id+'_tagsinput" class="tagsinput"><div id="'+id+'_addTag">';if(e.interactive){f=f+'<input id="'+id+'_tag" value="" data-default="'+e.defaultText+'" />'}f=f+'</div><div class="tags_clear"></div></div>';c(f).insertAfter(this);c(data.holder).css("width",e.width);c(data.holder).css("height",e.height);if(c(data.real_input).val()!=""){c.fn.tagsInput.importTags(c(data.real_input),c(data.real_input).val())}if(e.interactive){c(data.fake_input).val(c(data.fake_input).attr("data-default"));c(data.fake_input).css("color","#666666");c(data.holder).bind("click",data,function(g){c(g.data.fake_input).focus()});c(data.fake_input).bind("focus",data,function(g){if(c(g.data.fake_input).val()==c(g.data.fake_input).attr("data-default")){c(g.data.fake_input).val("")}c(g.data.fake_input).css("color","#000000")});if(e.autocomplete_url!=undefined){c(data.fake_input).autocomplete(e.autocomplete_url,e.autocomplete).bind("result",data,function(g,j,h){if(j){c(g.data.real_input).addTag(h,{focus:true,unique:(e.unique)})}});c(data.fake_input).bind("blur",data,function(g){if(c(".ac_results").is(":visible")){return false}if(c(g.data.fake_input).val()!=c(g.data.fake_input).attr("data-default")){if((g.data.minChars<=c(g.data.fake_input).val().length)&&(!g.data.maxChars||(g.data.maxChars>=c(g.data.fake_input).val().length))){c(g.data.real_input).addTag(c(g.data.fake_input).val(),{focus:false,unique:(e.unique)})}}c(g.data.fake_input).val(c(g.data.fake_input).attr("data-default"));c(g.data.fake_input).css("color","#666666");return false})}else{c(data.fake_input).bind("blur",data,function(g){var h=c(this).attr("data-default");if(c(g.data.fake_input).val()!=""&&c(g.data.fake_input).val()!=h){if((g.data.minChars<=c(g.data.fake_input).val().length)&&(!g.data.maxChars||(g.data.maxChars>=c(g.data.fake_input).val().length))){c(g.data.real_input).addTag(c(g.data.fake_input).val(),{focus:true,unique:(e.unique)})}}else{c(g.data.fake_input).val(c(g.data.fake_input).attr("data-default"));c(g.data.fake_input).css("color","#666666")}return false})}c(data.fake_input).bind("keypress",data,function(g){if(g.which==g.data.delimiter.charCodeAt(0)||g.which==13){if((g.data.minChars<=c(g.data.fake_input).val().length)&&(!g.data.maxChars||(g.data.maxChars>=c(g.data.fake_input).val().length))){c(g.data.real_input).addTag(c(g.data.fake_input).val(),{focus:true,unique:(e.unique)})}return false}});data.removeWithBackspace&&c(data.fake_input).bind("keyup",function(h){if(h.keyCode==8&&c(this).val()==""){var g=c(this).closest(".tagsinput").find(".tag:last").text();var j=c(this).attr("id").replace(/_tag$/,"");g=g.replace(/[\s]+x$/,"");c("#"+j).removeTag(escape(g));c(this).trigger("focus")}});c(data.fake_input).blur()}return false});return this};c.fn.tagsInput.updateTagsField=function(e,d){id=c(e).attr("id");c(e).val(d.join(a[id]))};c.fn.tagsInput.importTags=function(g,h){c(g).val("");id=c(g).attr("id");var d=h.split(a[id]);for(i=0;i<d.length;i++){c(g).addTag(d[i],{focus:false,callback:false})}if(b[id]&&b[id]["onChange"]){var e=b[id]["onChange"];e(g,d[i])}}})(jQuery);
\ No newline at end of file