Release 0.5.0

mbrodala · Feb 22, 2015 · 28bfe3e · 28bfe3e
1 parent 2e44956
commit 28bfe3e
Show file tree

Hide file tree

Showing 8 changed files with 107 additions and 29 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,3 +1,4 @@
 node_modules/
 bower_components/
 lib/
+examples/local.html
diff --git a/README.md b/README.md
@@ -15,14 +15,14 @@ Not just support for using strings! This means you can use different values
 for a tag's label and value. Each tag also holds a reference to the object
 by which it was created, so by calling <code>tagsinput('items')</code> an
 array of the original items is returned.
-  
+
 ### True multi value support
 Other implementations just concatenate the values to a comma separated string.
 This results in <code>val()</code> returning just this string, and when
 submitting the form, only one big, concatenated value is sent in the request.
 
-Bootstrap Tags Input provides true multivalue support. Just use a 
-<code>&lt;select multiple /&gt;</code> as your input element, and 
+Bootstrap Tags Input provides true multivalue support. Just use a
+<code>&lt;select multiple /&gt;</code> as your input element, and
 <code>val()</code> will return an array of the tag values. When submitting the
 form, an array of values will be sent with the request.
 
@@ -45,6 +45,8 @@ grunt build
 </pre>
 
 ## History
+- 0.5
+  - [Added an optional 3rd parameter to the "add" and "remove" methods](https://github.com/TimSchlechter/bootstrap-tagsinput/pull/298)
 - 0.4
   - [Fix typeahead when using Bootstrap 3](https://github.com/TimSchlechter/bootstrap-tagsinput/pull/73)
 - 0.3.13
@@ -67,4 +69,4 @@ grunt build
   -  [#33: Avoid conflict with other selects when checking for value presence](https://github.com/TimSchlechter/bootstrap-tagsinput/pull/33)
 
 ## License
-This project is licensed under [MIT](https://raw.github.com/TimSchlechter/bootstrap-tagsinput/master/LICENSE "Read more about the MIT license").
+This project is licensed under [MIT](https://raw.github.com/TimSchlechter/bootstrap-tagsinput/master/LICENSE "Read more about the MIT license").
diff --git a/bower.json b/bower.json
@@ -1,9 +1,10 @@
 {
   "name": "bootstrap-tagsinput",
-  "version": "0.4.2",
+  "version": "0.5.0",
   "homepage": "https://github.com/TimSchlechter/bootstrap-tagsinput",
   "authors": [
-    "Tim Schlechter"
+    "Tim Schlechter",
+    "Luckner Jr Jean-Baptiste"
   ],
   "description": "jQuery plugin providing a Twitter Bootstrap user interface for managing tags.",
   "main": [

diff --git a/dist/bootstrap-tagsinput.css b/dist/bootstrap-tagsinput.css
@@ -4,7 +4,6 @@
   box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
   display: inline-block;
   padding: 4px 6px;
-  margin-bottom: 10px;
   color: #555;
   vertical-align: middle;
   border-radius: 4px;
@@ -17,11 +16,21 @@
   box-shadow: none;
   outline: none;
   background-color: transparent;
-  padding: 0;
+  padding: 0 6px;
   margin: 0;
   width: auto !important;
   max-width: inherit;
 }
+.bootstrap-tagsinput.form-control input::-moz-placeholder {
+  color: #777;
+  opacity: 1;
+}
+.bootstrap-tagsinput.form-control input:-ms-input-placeholder {
+  color: #777;
+}
+.bootstrap-tagsinput.form-control input::-webkit-input-placeholder {
+  color: #777;
+}
 .bootstrap-tagsinput input:focus {
   border: none;
   box-shadow: none;

diff --git a/dist/bootstrap-tagsinput.js b/dist/bootstrap-tagsinput.js
@@ -55,7 +55,7 @@
      * Adds the given item as a new tag. Pass true to dontPushVal to prevent
      * updating the elements val()
      */
-    add: function(item, dontPushVal) {
+    add: function(item, dontPushVal, options) {
       var self = this;
 
       if (self.options.maxTags && self.itemsArray.length >= self.options.maxTags)
@@ -115,7 +115,7 @@
         return;
 
       // raise beforeItemAdd arg
-      var beforeItemAddEvent = $.Event('beforeItemAdd', { item: item, cancel: false });
+      var beforeItemAddEvent = $.Event('beforeItemAdd', { item: item, cancel: false, options: options});
       self.$element.trigger(beforeItemAddEvent);
       if (beforeItemAddEvent.cancel)
         return;
@@ -144,14 +144,14 @@
       if (self.options.maxTags === self.itemsArray.length || self.items().toString().length === self.options.maxInputLength)
         self.$container.addClass('bootstrap-tagsinput-max');
 
-      self.$element.trigger($.Event('itemAdded', { item: item }));
+      self.$element.trigger($.Event('itemAdded', { item: item, options: options }));
     },
 
     /**
      * Removes the given item. Pass true to dontPushVal to prevent updating the
      * elements val()
      */
-    remove: function(item, dontPushVal) {
+    remove: function(item, dontPushVal, options) {
       var self = this;
 
       if (self.objectItems) {
@@ -164,7 +164,7 @@
       }
 
       if (item) {
-        var beforeItemRemoveEvent = $.Event('beforeItemRemove', { item: item, cancel: false });
+        var beforeItemRemoveEvent = $.Event('beforeItemRemove', { item: item, cancel: false, options: options });
         self.$element.trigger(beforeItemRemoveEvent);
         if (beforeItemRemoveEvent.cancel)
           return;
@@ -182,7 +182,7 @@
       if (self.options.maxTags > self.itemsArray.length)
         self.$container.removeClass('bootstrap-tagsinput-max');
 
-      self.$element.trigger($.Event('itemRemoved',  { item: item }));
+      self.$element.trigger($.Event('itemRemoved',  { item: item, options: options }));
     },
 
     /**
@@ -493,7 +493,7 @@
   /**
    * Register JQuery plugin
    */
-  $.fn.tagsinput = function(arg1, arg2) {
+  $.fn.tagsinput = function(arg1, arg2, arg3) {
     var results = [];
 
     this.each(function() {
@@ -516,7 +516,11 @@
           results.push(tagsinput);
       } else if(tagsinput[arg1] !== undefined) {
           // Invoke function on existing tags input
-          var retVal = tagsinput[arg1](arg2);
+					if(tagsinput[arg1].length === 3 && arg3 !== undefined){
+						var retVal = tagsinput[arg1](arg2, null, arg3);
+					}else{
+						var retVal = tagsinput[arg1](arg2);
+					}
           if (retVal !== undefined)
               results.push(retVal);
       }

diff --git a/dist/bootstrap-tagsinput.min.js b/dist/bootstrap-tagsinput.min.js
diff --git a/examples/index.html b/examples/index.html
@@ -4,11 +4,11 @@
     <title>Bootstrap Tags Input</title>
     <meta name="robots" content="index, follow" />
     <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
-    
+
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap.min.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap-theme.min.css">
     <link rel="stylesheet" href="../dist/bootstrap-tagsinput.css">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/rainbow/1.2.0/themes/github.css">    
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/rainbow/1.2.0/themes/github.css">
     <link rel="stylesheet" href="assets/app.css">
     <script>
     (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
@@ -21,15 +21,15 @@
     </script>
   </head>
   <body>
-    <div id="fb-root"></div>    
+    <div id="fb-root"></div>
     <div class="jumbotron">
       <div class="container">
         <h1>Bootstrap Tags Input</h1>
         <p>jQuery plugin providing a Twitter Bootstrap user interface for managing tags</p>
         <p>
             <a class="btn btn-default" role="button" href="https://github.com/timschlechter/bootstrap-tagsinput">Code on Github</a>
-            <a class="btn btn-default" role="button" href="bootstrap-2.3.2.html">Bootstrap 2.3.2</a>            
-            <a class="btn btn-primary" role="button" href="http://timschlechter.github.io/bootstrap-tagsinput/dist/bootstrap-tagsinput.zip">Download</a>            
+            <a class="btn btn-default" role="button" href="bootstrap-2.3.2.html">Bootstrap 2.3.2</a>
+            <a class="btn btn-primary" role="button" href="http://timschlechter.github.io/bootstrap-tagsinput/dist/bootstrap-tagsinput.zip">Download</a>
         </p>
         <p>
           <ul class="list-inline">
@@ -133,7 +133,7 @@ <h3>True multi value</h3>
           </div>
            <table class="table table-bordered table-condensed"><thead><tr><th>statement</th><th>returns</th></tr></thead><tbody><tr><td><code>$("select").val()</code></td><td><pre class="val"><code data-language="javascript"></code></pre></td></tr><tr><td><code>$("select").tagsinput('items')</code></td><td><pre class="items"><code data-language="javascript"></code></pre></td></tr></tbody></table>
         </div>
-       
+
         <div class="example example_typeahead">
           <h3>Typeahead</h3>
           Typeahead is not included in Bootstrap 3, so you'll have to include your own typeahead library. I'd recommed <a href="http://twitter.github.io/typeahead.js/">typeahead.js</a>. An example of using this is shown below.
@@ -176,7 +176,7 @@ <h3>Typeahead</h3>
 &lt;/script&gt;</code></pre>
                 </div>
               </div>
-            </div>                  
+            </div>
           </div>
           <table class="table table-bordered table-condensed"><thead><tr><th>statement</th><th>returns</th></tr></thead><tbody><tr><td><code>$("input").val()</code></td><td><pre class="val"><code data-language="javascript"></code></pre></td></tr><tr><td><code>$("input").tagsinput('items')</code></td><td><pre class="items"><code data-language="javascript"></code></pre></td></tr></tbody></table>
         </div>
@@ -438,7 +438,7 @@ <h2>Options</h2>
   maxTags: 3
 });</code></pre>
               </td>
-            </tr>  
+            </tr>
             <tr>
               <td colspan="2"><code>maxChars</code></td>
               <td>
@@ -456,7 +456,7 @@ <h2>Options</h2>
   trimValue: true
 });</code></pre>
               </td>
-            </tr> 
+            </tr>
             <tr>
               <td colspan="2"><code>allowDuplicates</code></td>
               <td>
@@ -499,7 +499,7 @@ <h2>Options</h2>
   }
 });</code></pre>
                 <pre><code data-language="javascript">$('input').tagsinput({
-  typeahead: {                  
+  typeahead: {
     source: function(query) {
       return $.get('http://someservice.com');
     }
@@ -516,7 +516,7 @@ <h2>Options</h2>
   }
 });</code></pre>
               </td>
-            </tr>          
+            </tr>
           </tbody>
         </table>
       </section>
@@ -541,6 +541,31 @@ <h2>Methods</h2>
                 <pre><code data-language="javascript">$('input').tagsinput('add', 'some tag');</code></pre>
 
                 <pre><code data-language="javascript">$('input').tagsinput('add', { id: 1, text: 'some tag' });</code></pre>
+
+                Optionally, you can pass a 3rd parameter (object or value) to the <code>add</code> method to gain more control over the process. The parameter is exposed in the <code>options</code> attribute of the event.
+
+                <pre><code data-language="javascript">$('input').tagsinput('add', 'some tag', {preventPost: true});</code></pre>
+
+                Usage:
+
+                <pre>
+                  <code data-language="javascript">
+$('#tags-input').on('beforeItemAdd', function(event) {
+   var tag = event.item;
+   // Do some processing here
+
+   if (!event.options || !event.options.preventPost) {
+      $.ajax('/ajax-url', ajaxData, function(response) {
+         if (response.failure) {
+            // Remove the tag since there was a failure
+            // "preventPost" here will stop this ajax call from running when the tag is removed
+            $('#tags-input').tagsinput('remove', tag, {preventPost: true});
+         }
+      });
+   }
+});
+                  </code>
+                </pre>
               </td>
             </tr>
             <tr>
@@ -551,6 +576,39 @@ <h2>Methods</h2>
                 <pre><code data-language="javascript">$('input').tagsinput('remove', 'some tag');</code></pre>
 
                 <pre><code data-language="javascript">$('input').tagsinput('remove', { id: 1, text: 'some tag' });</code></pre>
+
+                Optionally, you can pass a 3rd parameter (object or value) to the <code>remove</code> method to gain more control over the process. The parameter is exposed in the <code>options</code> attribute of the event.
+
+                <pre><code data-language="javascript">$('input').tagsinput('remove', 'some tag', {preventPost: true});</code></pre>
+
+                Usage:
+
+                <pre>
+                  <code data-language="javascript">
+$('#tags-input').on('beforeItemRemove', function(event) {
+   var tag = event.item;
+   // Do some processing here
+
+   if (!event.options || !event.options.preventPost) {
+      $.ajax('/ajax-url', ajaxData, function(response) {
+         if (response.failure) {
+            // Re-add the tag since there was a failure
+            // "preventPost" here will stop this ajax call from running when the tag is added
+            $('#tags-input').tagsinput('add', tag, {preventPost: true});
+         }
+      });
+   }
+});
+                  </code>
+                </pre>
+              </td>
+            </tr>
+            <tr>
+              <td><code>removeAll</code></td>
+              <td>
+                <p>Removes all tags</p>
+
+                <pre><code data-language="javascript">$('input').tagsinput('removeAll');</code></pre>
               </td>
             </tr>
             <tr>

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "bootstrap-tagsinput",
   "title": "Bootstrap Tags Input",
-  "version": "0.4.2",
+  "version": "0.5.0",
   "description": "jQuery plugin providing a Twitter Bootstrap user interface for managing tags.",
   "scripts": {
     "test": "karma start --single-run --no-auto-watch"
@@ -11,6 +11,9 @@
     "url": "git://github.com/timschlechter/bootstrap-tagsinput.git"
   },
   "author": "Tim Schlechter",
+  "contributors": [{
+      "name": "Luckner Jr Jean-Baptiste"
+   }],
   "license": "MIT",
   "homepage": "http://timschlechter.github.io/bootstrap-tagsinput/examples/",
   "download": "http://timschlechter.github.io/bootstrap-tagsinput/build/bootstrap-tagsinput.zip",