From be279931fb647bd3190c17389e94a43436da280d Mon Sep 17 00:00:00 2001
From: Ben Brown <ben@xoxco.com>
Date: Sun, 19 Feb 2012 20:18:53 -0600
Subject: [PATCH] Refactor to support broader range of selectors, less
 dependence on ID attribute, use of .data to store settings instead of global
 variables, add tag validation

---
 example.html        |  24 +++++-
 jquery.tagsinput.js | 185 +++++++++++++++++++++++++++-----------------
 2 files changed, 134 insertions(+), 75 deletions(-)

diff --git a/example.html b/example.html
index 2dea0a5..ee4ab95 100644
--- a/example.html
+++ b/example.html
@@ -1,7 +1,7 @@
 
 	<link rel="stylesheet" type="text/css" href="http://xoxco.com/projects/code/tagsinput/jquery.tagsinput.css" />
 	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
-	<script type="text/javascript" src="http://xoxco.com/projects/code/tagsinput/jquery.tagsinput.js"></script>
+	<script type="text/javascript" src="jquery.tagsinput.js"></script>
 	<!-- To test using the original jQuery.autocomplete, uncomment the following -->
 	<!--
 	<script type='text/javascript' src='http://xoxco.com/x/tagsinput/jquery-autocomplete/jquery.autocomplete.min.js'></script>
@@ -14,18 +14,33 @@
 	<script type="text/javascript">
 		
 		function onAddTag(tag) {
-			alert("Added a tag: " + tag);
+			console.log("Added a tag: " + tag);
 		}
 		function onRemoveTag(tag) {
-			alert("Removed a tag: " + tag);
+			console.log("Removed a tag: " + tag);
 		}
 		
 		function onChangeTag(input,tag) {
-			alert("Changed a tag: " + tag);
+			console.log("Changed a tag: " + tag);
+		}
+		
+		function validateTag(tag) {
+			console.log("Validating tag " + tag);
+			return true;
+		
+		}
+		
+		function onError(msg) {
+			console.log(msg);
 		}
 		
 		$(function() {
 
+		//	$('.tags').tagsInput({validateTag: validateTag,onError: onError,onAddTag:onAddTag,onRemoveTag:onRemoveTag,onChange: onChangeTag});		
+			
+			
+
+
 			$('#tags_1').tagsInput({width:'auto'});
 			$('#tags_2').tagsInput({
 				width: 'auto',
@@ -45,6 +60,7 @@
 				//autocomplete_url:'test/fake_plaintext_endpoint.html' //jquery.autocomplete (not jquery ui)
 				autocomplete_url:'test/fake_json_endpoint.html' // jquery ui autocomplete requires a json endpoint
 			});
+
 			
 
 // Uncomment this line to see the callback functions in action
diff --git a/jquery.tagsinput.js b/jquery.tagsinput.js
index da274a1..a21bf55 100644
--- a/jquery.tagsinput.js
+++ b/jquery.tagsinput.js
@@ -1,8 +1,8 @@
 /*
 
-	jQuery Tags Input Plugin 1.3.3
+	jQuery Tags Input Plugin 2.0
 	
-	Copyright (c) 2011 XOXCO, Inc
+	Copyright (c) 2012 XOXCO, Inc
 	
 	Documentation for this plugin lives here:
 	http://xoxco.com/clickable/jquery-tags-input
@@ -12,12 +12,19 @@
 
 	ben@xoxco.com
 
+	GOALS FOR 2.0
+	
+	Fix identifier issue - should work with any valid jquery selector
+	Make internationalization friendly
+	add tag input validation
+	make sure autocomplete works with newest jquery
+
+
 */
 
 (function($) {
 
-	var delimiter = new Array();
-	var tags_callbacks = new Array();
+	var internal_counter = 0; // this is used to create unique ids for each tag input
 	$.fn.doAutosize = function(o){
 	    var minWidth = $(this).data('minwidth'),
 	        maxWidth = $(this).data('maxwidth'),
@@ -76,9 +83,10 @@
 	$.fn.addTag = function(value,options) {
 			options = jQuery.extend({focus:false,callback:true},options);
 			this.each(function() { 
-				var id = $(this).attr('id');
 
-				var tagslist = $(this).val().split(delimiter[id]);
+				var settings = $(this).data('settings');
+
+				var tagslist = $(this).val().split(settings.delimiter);
 				if (tagslist[0] == '') { 
 					tagslist = new Array();
 				}
@@ -89,71 +97,89 @@
 					var skipTag = $(tagslist).tagExist(value);
 					if(skipTag == true) {
 					    //Marks fake input as not_valid to let styling it
-    				    $('#'+id+'_tag').addClass('not_valid');
+    				    $(settings.fake_input).addClass('not_valid');
+    				    if (settings.onError) {
+    				    	var f = settings.onError;
+    				    	f.call(this,'duplicate');
+    				    }
     				}
 				} else {
 					var skipTag = false; 
 				}
 				
+				if (settings.validateTag) {
+					var f = settings.validateTag;
+					if (!f.call(this,value)) {
+						skipTag = true;
+    				    $(settings.fake_input).addClass('not_valid');
+    				    if (settings.onError) {
+    				    	var f = settings.onError;
+    				    	f.call(this,'validation');
+    				    }
+
+					}
+				}
+				
 				if (value !='' && skipTag != true) { 
                     $('<span>').addClass('tag').append(
                         $('<span>').text(value).append('&nbsp;&nbsp;'),
                         $('<a>', {
                             href  : '#',
-                            title : 'Removing tag',
+                            title : settings.removeText,
                             text  : 'x'
                         }).click(function () {
-                            return $('#' + id).removeTag(escape(value));
+                            return $(settings.real_input).removeTag(escape(value));
                         })
-                    ).insertBefore('#' + id + '_addTag');
+                    ).insertBefore(settings.fake_input);
 
 					tagslist.push(value);
 				
-					$('#'+id+'_tag').val('');
+					$(settings.fake_input).val('');
 					if (options.focus) {
-						$('#'+id+'_tag').focus();
+						$(settings.fake_input).focus();
 					} else {		
-						$('#'+id+'_tag').blur();
+						$(settings.fake_input).blur();
 					}
 					
+				
 					$.fn.tagsInput.updateTagsField(this,tagslist);
 					
-					if (options.callback && tags_callbacks[id] && tags_callbacks[id]['onAddTag']) {
-						var f = tags_callbacks[id]['onAddTag'];
+					if (settings.onAddTag) {
+						var f = settings.onAddTag;
 						f.call(this, value);
 					}
-					if(tags_callbacks[id] && tags_callbacks[id]['onChange'])
+					if(settings.onChange)
 					{
 						var i = tagslist.length;
-						var f = tags_callbacks[id]['onChange'];
+						var f = settings.onChange;
 						f.call(this, $(this), tagslist[i-1]);
 					}					
 				}
 		
 			});		
-			
+			console.log('added tag');
 			return false;
 		};
 		
 	$.fn.removeTag = function(value) { 
 			value = unescape(value);
 			this.each(function() { 
-				var id = $(this).attr('id');
-	
-				var old = $(this).val().split(delimiter[id]);
+				console.log("Remove tag " + value);
+				var settings = $(this).data('settings');	
+				var old = $(this).val().split(settings.delimiter);
 					
-				$('#'+id+'_tagsinput .tag').remove();
+				$(settings.holder + ' .tag').remove();
 				str = '';
 				for (i=0; i< old.length; i++) { 
 					if (old[i]!=value) { 
-						str = str + delimiter[id] +old[i];
+						str = str + settings.delimiter +old[i];
 					}
 				}
 				
 				$.fn.tagsInput.importTags(this,str);
 
-				if (tags_callbacks[id] && tags_callbacks[id]['onRemoveTag']) {
-					var f = tags_callbacks[id]['onRemoveTag'];
+				if (settings.onRemoveTag) {
+					var f = settings.onRemoveTag;
 					f.call(this, value);
 				}
 			});
@@ -167,54 +193,55 @@
 	
 	// clear all existing tags and import new ones from a string
 	$.fn.importTags = function(str) {
-                id = $(this).attr('id');
-		$('#'+id+'_tagsinput .tag').remove();
+		var settings = $(this).data('settings');
+		$(settings.holder + ' .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',
-      autocomplete: {selectFirst: false },
-      'hide':true,
-      'delimiter':',',
-      'unique':true,
-      removeWithBackspace:true,
-      placeholderColor:'#666666',
-      autosize: true,
-      comfortZone: 20,
-      inputPadding: 6*2
-    },options);
+	    var settings = jQuery.extend({
+	      interactive:true,
+	      defaultText:'add a tag',
+	      removeText:'Remove Tag',
+	      minChars:0,
+	      width:'auto',
+	      minHeight:'100px',
+	      height: 'auto',
+	      autocomplete: {selectFirst: false },
+	      'hide':true,
+	      'delimiter':',',
+	      'unique':true,
+	      removeWithBackspace:true,
+	      placeholderColor:'#666666',
+	      autosize: true,
+	      comfortZone: 20,
+	      inputPadding: 6*2,
+	      onChange: null, // events and handlers
+	      onAddTag: null,
+	      onRemoveTag: null,
+	      validateTag: null,
+	      onError: null
+	    },options);
 
 		this.each(function() { 
 			if (settings.hide) { 
 				$(this).hide();				
 			}
 				
-			var id = $(this).attr('id')
+	
+			var id = internal_counter++;
 			
 			var data = jQuery.extend({
 				pid:id,
-				real_input: '#'+id,
+				real_input: this,
 				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">';
+
+			$(this).addClass('tagsinput_processed');
+		
+			var markup = '<div id="'+id+'_tagsinput" class="tagsinput"><div id="'+id+'_addTag" class="tagsinput_inputwrapper">';
 			
 			if (settings.interactive) {
 				markup = markup + '<input id="'+id+'_tag" value="" data-default="'+settings.defaultText+'" />';
@@ -226,26 +253,41 @@
 
 			$(data.holder).css('width',settings.width);
 			$(data.holder).css('height',settings.height);
+			$(data.holder).css('min-height',settings.minHeight);
+
+			// store the settings with the DOM object so we can use them in other functions
+			$(this).data('settings',data);
+
 	
-			if ($(data.real_input).val()!='') { 
-				$.fn.tagsInput.importTags($(data.real_input),$(data.real_input).val());
-			}		
+			if ($(this).val()!='') { 
+				$.fn.tagsInput.importTags($(this),$(this).val());
+			}
+
+
+
+					
 			if (settings.interactive) { 
 				$(data.fake_input).val($(data.fake_input).attr('data-default'));
 				$(data.fake_input).css('color',settings.placeholderColor);
 		        $(data.fake_input).resetAutosize(settings);
 		
+		
+				// if the user clicks anywhere in the tag box, focus the input field
 				$(data.holder).bind('click',data,function(event) {
 					$(event.data.fake_input).focus();
 				});
 			
+				// if the user clicks in the input field…
 				$(data.fake_input).bind('focus',data,function(event) {
+					// empty the field
 					if ($(event.data.fake_input).val()==$(event.data.fake_input).attr('data-default')) { 
 						$(event.data.fake_input).val('');
 					}
+					// set the field to the active color
 					$(event.data.fake_input).css('color','#000000');		
 				});
-						
+			
+				// if an autocomplete url has been specified, do some stuff...			
 				if (settings.autocomplete_url != undefined) {
 					autocomplete_options = {source: settings.autocomplete_url};
 					for (attrname in settings.autocomplete) { 
@@ -284,6 +326,7 @@
 						});
 				
 				}
+
 				// 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 ) {
@@ -297,23 +340,23 @@
             
           			}
 				});
+
 				//Delete last tag on backspace
-				data.removeWithBackspace && $(data.fake_input).bind('keydown', function(event)
+				data.removeWithBackspace && $(data.fake_input).bind('keydown',data, function(event)
 				{
 					if(event.keyCode == 8 && $(this).val() == '')
 					{
 						 event.preventDefault();
 						 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));
+						 $(data.real_input).removeTag(escape(last_tag));
 						 $(this).trigger('focus');
 					}
 				});
 				$(data.fake_input).blur();
 				
 				//Removes the not_valid class when user changes the value of the fake input
-				if(data.unique) {
+				if(data.unique || data.validateTag) {
 				    $(data.fake_input).keydown(function(event){
 				        if(event.keyCode == 8 || String.fromCharCode(event.which).match(/\w+|[áéíóúÁÉÍÓÚñÑ,/]+/)) {
 				            $(this).removeClass('not_valid');
@@ -321,7 +364,7 @@
 				    });
 				}
 			} // if settings.interactive
-			return false;
+			//return false;
 		});
 			
 		return this;
@@ -329,20 +372,20 @@
 	};
 	
 	$.fn.tagsInput.updateTagsField = function(obj,tagslist) { 
-		var id = $(obj).attr('id');
-		$(obj).val(tagslist.join(delimiter[id]));
+		var settings = $(obj).data('settings');
+		$(obj).val(tagslist.join(settings.delimiter));
 	};
 	
 	$.fn.tagsInput.importTags = function(obj,val) {			
+		var settings = $(obj).data('settings');
 		$(obj).val('');
-		var id = $(obj).attr('id');
-		var tags = val.split(delimiter[id]);
+		var tags = val.split(settings.delimiter);
 		for (i=0; i<tags.length; i++) { 
 			$(obj).addTag(tags[i],{focus:false,callback:false});
 		}
-		if(tags_callbacks[id] && tags_callbacks[id]['onChange'])
+		if(settings.onChange)
 		{
-			var f = tags_callbacks[id]['onChange'];
+			var f = settings.onChange;
 			f.call(obj, obj, tags[i]);
 		}
 	};