From f54c962ee59c4b709e53d02bf5714599314c895f Mon Sep 17 00:00:00 2001 From: Steven te Brinke Date: Mon, 18 Apr 2016 11:30:56 +0200 Subject: [PATCH] Adds afterTagSave callback to set tag classes properly. --- demo.html | 40 ++++++++++++++++------------------------ jquery.tag-editor.js | 12 +++++++++--- 2 files changed, 25 insertions(+), 27 deletions(-) diff --git a/demo.html b/demo.html index 73f1f25..e5d9813 100644 --- a/demo.html +++ b/demo.html @@ -163,6 +163,7 @@

Settings

onChange(field, editor, tags)Callback that fires after tags are changed. field is the (hidden) original field, editor is the editor's DOM element (an <ul> list of tag elements), and tags contains the list of current tags. beforeTagSave(field, editor, tags, tag, val)Callback that fires before a tag is saved. field is the (hidden) original field, editor is the editor's DOM element. tags contains the list of current tags, tag is the value that is about to get overwritten (empty string, unless an existing tag gets changed), and val is the new value to be saved. beforeTagSave() may return a string for overwriting the saved tag. Return false for reverting to the tag's previous value (or to skip this tag value in the case of copy-paste insertion). beforeTagDelete(field, editor, tags, val)Callback that fires before a tag is deleted. field is the (hidden) original field, editor is the editor's DOM element. tags contains the list of current tags, val is the tag that is about to get deleted. Return false to prevent this action. + afterTagSave(field, editor, old_tags, old_tag, tag, element)Callback that fires after a tag is saved. field is the (hidden) original field, editor is the editor's DOM element. old_tags contains the list of tags before the save, old_tag is the value that was overwritten (empty string, unless an existing tag was changed), tag is the new value, and element is the jQuery DOM element that contains the tag. Note that this method is called for each added DOM element, even when that didn't result in a tag change. Therefore, this method is useful for adding classes to DOM element, since onChange() will not fire when the DOM is modified, but the tags are unchanged.   Public Methods @@ -304,28 +305,23 @@

Custom style and clickDelete

Custom CSS classes for tags

- Using the onChange callback for adding custom CSS classes to specific tags. + Using the afterTagSave callback for adding custom CSS classes to specific tags. 

 $('#demo6').tagEditor({
     initialTags: ['custom', 'class', 'red', 'green', 'demo'],
-    onChange: tag_classes
+    removeDuplicates: false,
+    afterTagSave: tag_classes
 });
 
-function tag_classes(field, editor, tags) {
-    $('li', editor).each(function(){
-        var li = $(this);
-        if (li.find('.tag-editor-tag').html() == 'red') li.addClass('red-tag');
-        else if (li.find('.tag-editor-tag').html() == 'green') li.addClass('green-tag')
-        else li.removeClass('red-tag green-tag');
-    });
-}
-
-// first assign tag classes after initializing tagEditor; onChange is not called on init
-tag_classes(null, $('#demo6').tagEditor('getTags')[0].editor);
+function tag_classes(field, editor, old_tags, old_tag, tag, tag_element) { + if (tag == 'red') tag_element.addClass('red-tag'); + else if (tag == 'green') tag_element.addClass('green-tag') + else tag_element.removeClass('red-tag green-tag'); +}

- In the onChange callback we iterate over all tags and assign custom CSS classes where appropriate. + In the afterTagSave callback we assign custom CSS classes where appropriate. The DOM structure of the editor looks like this: 

<ul>
@@ -339,7 +335,7 @@ 
Custom CSS classes for tags

 
         

             In the example, we simply add CSS classes to the <li> elements.
-            This is just an exampe of what the onChange callback may be used for. Inside of it, addTag and removeTag may be called to dynamically change the current list of tags.
+            This is just an exampe of what the afterTagSave callback may be used for. Inside of it, addTag and removeTag may be called to dynamically change the current list of tags.
         

 
         

@@ -435,16 +431,12 @@ 
Custom CSS classes for tags

 
             $('#demo5').tagEditor({ clickDelete: true, initialTags: ['custom style', 'dark tags', 'delete on click', 'no delete icon', 'hello', 'world'], placeholder: 'Enter tags ...' });
 
-            function tag_classes(field, editor, tags) {
-                $('li', editor).each(function(){
-                    var li = $(this);
-                    if (li.find('.tag-editor-tag').html() == 'red') li.addClass('red-tag');
-                    else if (li.find('.tag-editor-tag').html() == 'green') li.addClass('green-tag')
-                    else li.removeClass('red-tag green-tag');
-                });
+            function tag_classes(field, editor, old_tags, old_tag, tag, tag_element) {
+                if (tag == 'red') tag_element.addClass('red-tag');
+                else if (tag == 'green') tag_element.addClass('green-tag')
+                else tag_element.removeClass('red-tag green-tag');
             }
-            $('#demo6').tagEditor({ initialTags: ['custom', 'class', 'red', 'green', 'demo'], onChange: tag_classes });
-            tag_classes(null, $('#demo6').tagEditor('getTags')[0].editor); // or editor == $('#demo6').next()
+            $('#demo6').tagEditor({ initialTags: ['custom', 'class', 'red', 'green', 'demo'], removeDuplicates: false, afterTagSave: tag_classes });
         });
 
         if (~window.location.href.indexOf('http')) {
diff --git a/jquery.tag-editor.js b/jquery.tag-editor.js
index 048f538..36b9b87 100644
--- a/jquery.tag-editor.js
+++ b/jquery.tag-editor.js
@@ -199,8 +199,9 @@
                     // remove duplicates
                     if (o.removeDuplicates && ~$.inArray(tag, old_tags))
                         $('.tag-editor-tag', ed).each(function(){ if ($(this).text() == tag) $(this).closest('li').remove(); });
-                    old_tags.push(tag);
                     li.before('
  •  '+o.delimiter[0]+'
    '+escape(tag)+'
    • ');
+                    o.afterTagSave(el, ed, old_tags, old_tag, tag, li.prev());
+                    old_tags.push(tag);
                     if (o.maxTags && old_tags.length >= o.maxTags) { exceeded = true; break; }
                 }
                 input.attr('maxlength', o.maxLength).removeData('old_tag').val('')
@@ -236,9 +237,12 @@
                         try { input.closest('li').remove(); } catch(e){}
                         if (old_tag) update_globals();
                     }
-                    // remove duplicates
-                    else if (o.removeDuplicates)
+                    else {
+                      // remove duplicates
+                      if (o.removeDuplicates)
                         $('.tag-editor-tag:not(.active)', ed).each(function(){ if ($(this).text() == tag) $(this).closest('li').remove(); });
+                      o.afterTagSave(el, ed, tag_list, old_tag, tag, input.closest('li'));
+                    }
                 }
                 input.parent().html(escape(tag)).removeClass('active');
                 if (tag != old_tag) update_globals();
@@ -337,6 +341,7 @@
                     if (o.forceLowercase) tag = tag.toLowerCase();
                     tag_list.push(tag);
                     ed.append('
  •  '+o.delimiter[0]+'
    '+escape(tag)+'
    • ');
+                    o.afterTagSave(el, ed, tag_list, '', tag, ed.children().last());
                 }
             }
             update_globals(true); // true -> no onChange callback
@@ -365,6 +370,7 @@
         // callbacks
         onChange: function(){},
         beforeTagSave: function(){},
+        afterTagSave: function(){},
         beforeTagDelete: function(){}
     };
 }(jQuery));