Merge upstream

mbrodala · Jul 17, 2015 · cfe7b07 · cfe7b07
2 parents c2f7693 + 3a6a359
commit cfe7b07
Show file tree

Hide file tree

Showing 17 changed files with 237 additions and 86 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,3 +1,4 @@
 node_modules/
 bower_components/
 lib/
+examples/local.html
diff --git a/Gruntfile.js b/Gruntfile.js
@@ -55,8 +55,13 @@ module.exports = function(grunt) {
     },
     zip: {
       delpoy: {
-        cwd: 'dist/',
-        src:  ['dist/bootstrap-tagsinput*.*'],
+        // cwd: 'dist/',
+        src:  [
+            'dist/bootstrap-tagsinput*.js',
+            'dist/bootstrap-tagsinput*.css',
+            'dist/bootstrap-tagsinput*.less',
+            'dist/bootstrap-tagsinput*.map'
+         ],
         dest:  'dist/<%= pkg.name %>.zip'
       }
     },

diff --git a/README.md b/README.md
@@ -1,4 +1,4 @@
-# Bootstrap Tags Input [![Build Status](https://travis-ci.org/TimSchlechter/bootstrap-tagsinput.svg?branch=master)](https://travis-ci.org/TimSchlechter/bootstrap-tagsinput)
+# Bootstrap Tags Input [![Build Status](https://travis-ci.org/timschlechter/bootstrap-tagsinput.svg?branch=master)](https://travis-ci.org/TimSchlechter/bootstrap-tagsinput)
 Bootstrap Tags Input is a jQuery plugin providing a Twitter Bootstrap user interface for managing tags.
 
 ## Usage
@@ -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/bootstrap-tagsinput.jquery.json b/bootstrap-tagsinput.jquery.json
@@ -1,6 +1,6 @@
 {
   "name": "bootstrap-tagsinput",
-  "version": "0.4.2",
+  "version": "0.5.0",
   "title": "Bootstrap Tags Input",
   "author": {
     "name": "Tim Schlechter"

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-angular.min.js b/dist/bootstrap-tagsinput-angular.min.js
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;
+  width: auto;
   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
@@ -11,6 +11,9 @@
     itemText: function(item) {
       return this.itemValue(item);
     },
+    itemTitle: function(item) {
+      return null;
+    },
     freeInput: true,
     addOnBlur: true,
     maxTags: undefined,
@@ -41,10 +44,8 @@
     this.$container = $('<div class="bootstrap-tagsinput"></div>');
     this.$input = $('<input type="text" placeholder="' + this.placeholderText + '"/>').appendTo(this.$container);
 
-    this.$element.after(this.$container);
+    this.$element.before(this.$container);
 
-    var inputWidth = (this.inputSize < 3 ? 3 : this.inputSize) + "em";
-    this.$input.get(0).style.cssText = "width: " + inputWidth + " !important;";
     this.build(options);
   }
 
@@ -55,7 +56,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)
@@ -97,7 +98,8 @@
 
       var itemValue = self.options.itemValue(item),
           itemText = self.options.itemText(item),
-          tagClass = self.options.tagClass(item);
+          tagClass = self.options.tagClass(item),
+          itemTitle = self.options.itemTitle(item);
 
       // Ignore items allready added
       var existing = $.grep(self.itemsArray, function(item) { return self.options.itemValue(item) === itemValue; } )[0];
@@ -115,7 +117,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;
@@ -124,7 +126,8 @@
       self.itemsArray.push(item);
 
       // add a tag element
-      var $tag = $('<span class="tag ' + htmlEncode(tagClass) + '">' + htmlEncode(itemText) + '<span data-role="remove"></span></span>');
+
+      var $tag = $('<span class="tag ' + htmlEncode(tagClass) + (itemTitle !== null ? ('" title="' + itemTitle) : '') + '">' + htmlEncode(itemText) + '<span data-role="remove"></span></span>');
       $tag.data('item', item);
       self.findInputWrapper().before($tag);
       $tag.after(' ');
@@ -144,14 +147,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 +167,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 +185,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 }));
     },
 
     /**
@@ -261,7 +264,7 @@
       makeOptionItemFunction(self.options, 'itemValue');
       makeOptionItemFunction(self.options, 'itemText');
       makeOptionFunction(self.options, 'tagClass');
-      
+
       // Typeahead Bootstrap version 2.3.2
       if (self.options.typeahead) {
         var typeahead = self.options.typeahead || {};
@@ -299,6 +302,7 @@
           },
           updater: function (text) {
             self.add(this.map[text]);
+            return this.map[text];
           },
           matcher: function (text) {
             return (text.toLowerCase().indexOf(this.query.trim().toLowerCase()) !== -1);
@@ -315,11 +319,21 @@
 
       // typeahead.js
       if (self.options.typeaheadjs) {
-          var typeaheadjs = self.options.typeaheadjs || {};
-
-          self.$input.typeahead(null, typeaheadjs).on('typeahead:selected', $.proxy(function (obj, datum) {
-            if (typeaheadjs.valueKey)
-              self.add(datum[typeaheadjs.valueKey]);
+          var typeaheadConfig = null;
+          var typeaheadDatasets = {};
+
+          // Determine if main configurations were passed or simply a dataset
+          var typeaheadjs = self.options.typeaheadjs;
+          if ($.isArray(typeaheadjs)) {
+            typeaheadConfig = typeaheadjs[0];
+            typeaheadDatasets = typeaheadjs[1];
+          } else {
+            typeaheadDatasets = typeaheadjs;
+          }
+
+          self.$input.typeahead(typeaheadConfig, typeaheadDatasets).on('typeahead:selected', $.proxy(function (obj, datum) {
+            if (typeaheadDatasets.valueKey)
+              self.add(datum[typeaheadDatasets.valueKey]);
             else
               self.add(datum);
             self.$input.typeahead('val', '');
@@ -343,7 +357,7 @@
               }
           }, self));
         }
-        
+
 
       self.$container.on('keydown', 'input', $.proxy(function(event) {
         var $input = $(event.target),
@@ -493,7 +507,7 @@
   /**
    * Register JQuery plugin
    */
-  $.fn.tagsinput = function(arg1, arg2) {
+  $.fn.tagsinput = function(arg1, arg2, arg3) {
     var results = [];
 
     this.each(function() {
@@ -516,7 +530,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);
       }
@@ -579,7 +597,7 @@
   }
 
   /**
-    * Returns boolean indicates whether user has pressed an expected key combination. 
+    * Returns boolean indicates whether user has pressed an expected key combination.
     * @param object keyPressEvent: JavaScript event object, refer
     *     http://www.w3.org/TR/2003/WD-DOM-Level-3-Events-20030331/ecma-script-binding.html
     * @param object lookupList: expected key combinations, as in:

diff --git a/dist/bootstrap-tagsinput.min.js b/dist/bootstrap-tagsinput.min.js
diff --git a/dist/bootstrap-tagsinput.zip b/dist/bootstrap-tagsinput.zip
diff --git a/examples/assets/app_bs3.js b/examples/assets/app_bs3.js
@@ -67,11 +67,23 @@ elt.tagsinput({
   },
   itemValue: 'value',
   itemText: 'text',
-  typeaheadjs: {
-    name: 'cities',
-    displayKey: 'text',
-    source: cities.ttAdapter()
-  }
+  // typeaheadjs: {
+  //   name: 'cities',
+  //   displayKey: 'text',
+  //   source: cities.ttAdapter()
+  // }
+  typeaheadjs: [
+  {
+      hint: true,
+     highlight: true,
+     minLength: 2
+  },
+   {
+      name: 'cities',
+       displayKey: 'text',
+       source: cities.ttAdapter()
+   }
+  ]
 });
 elt.tagsinput('add', { "value": 1 , "text": "Amsterdam"   , "continent": "Europe"    });
 elt.tagsinput('add', { "value": 4 , "text": "Washington"  , "continent": "America"   });
@@ -80,4 +92,4 @@ elt.tagsinput('add', { "value": 10, "text": "Beijing"     , "continent": "Asia"
 elt.tagsinput('add', { "value": 13, "text": "Cairo"       , "continent": "Africa"    });
 
 // HACK: overrule hardcoded display inline-block of typeahead.js
-$(".twitter-typeahead").css('display', 'inline');
+$(".twitter-typeahead").css('display', 'inline');
diff --git a/examples/bootstrap-2.3.2.html b/examples/bootstrap-2.3.2.html
@@ -228,7 +228,7 @@ <h3>Objects as tags</h3>
         <div class="example example_tagclass">
           <h3>Categorizing tags</h3>
           <p>
-            You can set a fixed css class for your tags, or determine dynamically by provinding a custom function.
+            You can set a fixed css class for your tags, or determine dynamically by providing a custom function.
           </p>
           <div class="bs-docs-example">
             <input type="text" />