Tag edit support

css/tagit-awesome-blue.css

@@ -171,6 +171,16 @@ ul.tagit li.tagit-choice a.tagit-close:hover {
     text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.7);
 }
 
+ul.tagit div.tagit-label.hidden {
+	display: none;
+}
+
+ul.tagit input.tagit-edit {
+	margin: 0px 0px 0px 2px;
+	border: none;
+	line-height: 16px;
+}
+
 ul.tagit input[type="text"] {
     -moz-box-sizing: border-box;
     border: none !important;

css/tagit-awesome-orange.css

@@ -171,6 +171,16 @@ ul.tagit li.tagit-choice a.tagit-close:hover {
     color: #535353;
 }
 
+ul.tagit div.tagit-label.hidden {
+	display: none;
+}
+
+ul.tagit input.tagit-edit {
+	margin: 0px 0px 0px 2px;
+	border: none;
+	line-height: 16px;
+}
+
 ul.tagit input[type="text"] {
     -moz-box-sizing: border-box;
     border: none !important;

css/tagit-dark-grey.css

@@ -123,6 +123,16 @@ ul.tagit li.tagit-choice a.tagit-close:hover {
     text-shadow: none;
 }
 
+ul.tagit div.tagit-label.hidden {
+	display: none;
+}
+
+ul.tagit input.tagit-edit {
+	margin: 0px 0px 0px 2px;
+	border: none;
+	line-height: 16px;
+}
+
 ul.tagit input[type="text"] {
     -moz-box-sizing: border-box;
     border: none !important;

css/tagit-simple-blue.css

@@ -122,6 +122,16 @@ ul.tagit li.tagit-choice a.tagit-close:hover {
     color: #535353;
 }
 
+ul.tagit div.tagit-label.hidden {
+	display: none;
+}
+
+ul.tagit input.tagit-edit {
+	margin: 0px 0px 0px 2px;
+	border: none;
+	line-height: 16px;
+}
+
 ul.tagit input[type="text"] {
     -moz-box-sizing: border-box;
     border: none !important;

css/tagit-simple-green.css

@@ -122,6 +122,16 @@ ul.tagit li.tagit-choice a.tagit-close:hover {
     color: #535353;
 }
 
+ul.tagit div.tagit-label.hidden {
+	display: none;
+}
+
+ul.tagit input.tagit-edit {
+	margin: 0px 0px 0px 2px;
+	border: none;
+	line-height: 16px;
+}
+
 ul.tagit input[type="text"] {
     -moz-box-sizing: border-box;
     border: none !important;

css/tagit-simple-grey.css

@@ -122,6 +122,16 @@ ul.tagit li.tagit-choice a.tagit-close:hover {
     color: #535353;
 }
 
+ul.tagit div.tagit-label.hidden {
+	display: none;
+}
+
+ul.tagit input.tagit-edit {
+	margin: 0px 0px 0px 2px;
+	border: none;
+	line-height: 16px;
+}
+
 ul.tagit input[type="text"] {
     -moz-box-sizing: border-box;
     border: none !important;

css/tagit-stylish-yellow.css

@@ -131,6 +131,16 @@ ul.tagit li.tagit-choice a.tagit-close:hover {
     color: #f00;
 }
 
+ul.tagit div.tagit-label.hidden {
+	display: none;
+}
+
+ul.tagit input.tagit-edit {
+	margin: 0px 0px 0px 2px;
+	border: none;
+	line-height: 16px;
+}
+
 ul.tagit input[type="text"] {
     -moz-box-sizing: border-box;
     border: none !important;

css/themeroller/tagit.css

@@ -34,6 +34,25 @@ ul.tagit.ui-widget li.tagit-choice a.tagit-close{
 	margin-top: -8px;
 }
 
+ul.tagit div.tagit-label.hidden {
+	display: none;
+}
+
+ul.tagit input.tagit-edit {
+	margin: 0px 0px 0px 2px;
+	border: none;
+	line-height: 16px;
+}
+
+ul.tagit input[type="text"] {
+    -moz-box-sizing: border-box;
+    border: none !important;
+    margin: 0 !important;
+    padding: 0 !important;
+    width: inherit !important;
+    outline: none;
+}
+
 ul.tagit.ui-widget li.tagit-new input[type="text"].tagit-input,
 ul.tagit.ui-widget li.tagit-new input[type="text"].tagit-input:active,
 ul.tagit.ui-widget li.tagit-new input[type="text"].tagit-input:hover,

index.html

@@ -47,6 +47,7 @@
 	  $('#demo5').tagit({maxLength:5, maxTags:5 });
 	  $('#demo6').tagit({tagSource:availableTags, sortable:true});
 	  $('#demo7').tagit({tagSource:availableTags, sortable:'handle'});
+	  $('#demo9').tagit({tagSource:availableTags, editable: true});
 
 
 	  $('#demo1GetTags').click(function () {
@@ -73,7 +74,12 @@
 	  $('#demo7GetTags').click(function () {
 		showTags($('#demo7').tagit('tags'))
 	  });
-
+	  $('#demo8GetTags').click(function () {
+		showTags($('#demo8').tagit('tags'))
+	  });
+	  $('#demo9GetTags').click(function () {
+		showTags($('#demo9').tagit('tags'))
+	  });
 	  function showTags(tags) {
 		console.log(tags);
 		var string = "Tags (label : value)\r\n";
@@ -227,6 +233,25 @@ <h3>Sortable : handle</h3>
   </div>
 </div>
 
+<h3>Editable</h3>
+
+<div class="box">
+  <div class="note">
+	Click on a tag to edit it!
+  </div>
+
+  <ul id="demo9" name="demo9">
+	<li>here</li>
+	<li>are</li>
+	<li>some</li>
+	<li>initial</li>
+	<li>tags</li>
+  </ul>
+  <div class="buttons">
+	<button id="demo9GetTags" value="Get Tags">Get Tags</button>
+  </div>
+</div>
+
 <h3>Custom Autocomplete</h3>
 
 <div class="box">

index.themeroller.html

@@ -235,7 +235,7 @@
 		  .append(rendered)
 		  .appendTo(ul);
 	  };
-
+      $('#demo9').tagit({tagSource:availableTags, editable: true});
 
 	  $('#demo1GetTags').click(function () {
 		showTags($('#demo1').tagit('tags'))
@@ -264,7 +264,9 @@
 	  $('#demo8GetTags').click(function () {
 		showTags($('#demo8').tagit('tags'))
 	  });
-
+	  $('#demo9GetTags').click(function () {
+		showTags($('#demo9').tagit('tags'))
+	  });
 	  function showTags(tags) {
 		console.log(tags);
 		var string = "Tags (label : value)\r\n";
@@ -429,6 +431,24 @@ <h3>Custom Autocomplete</h3>
   </div>
 </div>
 
+<h3>Editable</h3>
+
+<div class="box">
+  <div class="note">
+	Click on a tag to edit it!
+  </div>
+
+  <ul id="demo9" name="demo9">
+	<li>here</li>
+	<li>are</li>
+	<li>some</li>
+	<li>initial</li>
+	<li>tags</li>
+  </ul>
+  <div class="buttons">
+	<button id="demo9GetTags" value="Get Tags">Get Tags</button>
+  </div>
+</div>
 
 <h2></h2>
 

js/tagit-themeroller.js

@@ -91,6 +91,7 @@
             //true: entire tag is draggable
             //'handle': a handle is rendered which is draggable
             sortable:false,
+            editable:false,
             //color to highlight text when a duplicate tag is entered
             highlightOnExistColor:'#0F0',
             //empty search on focus
@@ -122,6 +123,8 @@
             sorting:-1
         },
 
+        _idEditing: false,
+
         //initialization function
         _create:function () {
 
@@ -175,10 +178,15 @@
                     self._popTag(tag);
                 }
                 else {
-                    self.input.focus();
+                    if (!self._isEditing) { //focus default input if we're not editing existing tag at the moment
+                        self.input.focus();
+                    }
                     if (self.options.emptySearch && $(e.target).hasClass('tagit-input') && self.input.val() == '' && self.input.autocomplete != undefined) {
                         self.input.autocomplete('search');
                     }
+                    if (self.options.editable && $(e.target).hasClass('tagit-label')) {
+                        self._edit(e.target);
+                    }
                 }
             });
 
@@ -312,6 +320,64 @@
 
         },
 
+        _postEdit: function(element, editInput, initialValue) {
+            var finishEditing = $.proxy(function() {
+                editInput.remove();
+                $(element).removeClass('hidden');
+                $(element).parent().removeClass('edited');
+                this._isEditing = false;
+            }, this);
+
+            return function() {
+                var initialTagIndex = $(element).parent().index();
+                var initialTag = this.tagsArray[initialTagIndex];
+                //try to add new and if success - remove old
+                var newValue = editInput.val();
+                if (this._splitAt && newValue.search(this._splitAt) > 0) {
+                    newValue = newValue.split(this._splitAt)[0]; //use only first value part - no splitters in edit
+                }
+                if (newValue == initialValue) {
+                    finishEditing();
+                } else if (this._addTag(newValue)) {
+                    //else attempt to add new tag and if succeeded - remove old element and edit box
+                    initialTag.element.remove();
+                    this._popTag(initialTag);
+                    var lastTagIndex = this.tagsArray.length - 1;
+                    if (lastTagIndex != initialTagIndex) {
+                        var lastTag = this.tagsArray[lastTagIndex];
+                        //visually move tag to the old place
+                        lastTag.element.insertBefore(this.tagsArray[initialTagIndex].element);
+                        this._moveTag(this.tagsArray.length - 1, initialTagIndex); //move element from last to old place
+                        if(this.options.tagsChanged) { //fire an update
+                            var tag = this.tagsArray[initialTagIndex];
+                            this.options.tagsChanged(tag.value, 'moved', tag.element);
+                        }
+                    }
+                    finishEditing();
+                }
+            }
+        },
+
+        _edit: function(element) {
+            this._isEditing = true;
+            var initialValue = $(element).text();
+            var editInput = $('<input>');
+            editInput.val(initialValue);
+            $(element).parent().addClass('edited');
+            editInput.addClass('tagit-edit');
+            editInput.css('width', $(element).outerWidth());
+            $(element).addClass('hidden');
+            editInput.blur($.proxy(this._postEdit(element, editInput, initialValue), this));
+            editInput.keypress($.proxy(function(e) {
+                var pressedKey = e.which || e.keyCode || e.charCode;
+                if (this._isInitKey(pressedKey)) {
+                    editInput.blur();
+                }
+            }, this));
+            $(element).before(editInput);
+            editInput[0].select();
+        },
+
         _popSelect:function (tag) {
             $('option:eq(' + tag.index + ')', this.select).remove();
             this.select.change();
@@ -338,7 +404,7 @@
             if (this.options.select)
                 this._popSelect(tag);
             if (this.options.tagsChanged)
-                this.options.tagsChanged(tag.value || tag.label, 'popped', tag);
+                this.options.tagsChanged(tag? (tag.value || tag.label) : null, 'popped', tag);
             return;
         },
 
@@ -372,7 +438,7 @@
             tag.element = $('<li class="tagit-choice ui-widget-content ui-state-default"'
                 + (value !== undefined ? ' tagValue="' + value + '"' : '') + '>'
                 + (this.options.sortable == 'handle' ? '<a class="ui-icon ui-icon-grip-dotted-vertical" style="float:left"></a>' : '')
-                + label + '<a class="tagit-close ui-state-error-text">x</a></li>');
+                + '<div class="tagit-label">' + label + '</div>' + '<a class="tagit-close ui-state-error-text">x</a></li>');
             tag.element.insertBefore(this.input.parent());
             this.tagsArray.push(tag);
 
@@ -413,7 +479,10 @@
             tag.element.stop();
 
             var initialColor = tag.element.css('color');
-            tag.element.animate({color:this.options.highlightOnExistColor}, 100).animate({'color':initialColor}, 800);
+            tag.element.animate({color:this.options.highlightOnExistColor}, 100).animate({'color':initialColor}, 800, null, function() {
+                //reset style to initial
+                tag.element.attr('style', '');
+            });
         },
 
         _isInitKey:function (keyCode) {
@@ -498,6 +567,7 @@
 
         destroy:function () {
             $.Widget.prototype.destroy.apply(this, arguments); // default destroy
+            clearTimeout(this.timer);
             this.tagsArray = [];
         },