bootstrap_tokenfield_rails 0.0.4 → 0.0.5

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: f3d4cbd95d07bf80fb85a296164a4d7d1bf9533a
-  data.tar.gz: 744fcb50397de2b1f5d6abef4b2c06c86e1efd8d
+  metadata.gz: c533323348030827ed5e4aa4eee743ffd435b4d7
+  data.tar.gz: b6862dacd523e99ce27c70e42f3d08d721112016
 SHA512:
-  metadata.gz: f8c4b25ed5582ee998b5bbef75812291a507246c42d04e374d0080327e6f3c649f81842a440b3468dd5c2c6419d5a92afcef4da145ea29be40d8c066c03a5623
-  data.tar.gz: 0c6e60aab1fa060cc81901d097711a07b0daf935a3731ddbea25ca87bc1f7b87ee09b1d7ef7cd6e723e02a6292d6094f49492be6b937ed2dd96d4e814eb19075
+  metadata.gz: f3d34d14b0a4ad365eab53c23bff25e2ae9b60c620e7dad34a68e731fc724d2ea77ec4c010fb282e4756a132325d68ecdc6bf8f901ead01aa84833d6431c3ff9
+  data.tar.gz: e749645820da94d53d92fbd609b3f8e3d66c82603e32a5b47c412d2df7a17fa8d8dd59146187afb7e9cd65c751a8dec0bdc695e54d8603dfd05d08aedc91e31a

data/lib/bootstrap_tokenfield_rails/version.rb

@@ -1,3 +1,3 @@
 module BootstrapTokenfieldRails
-  VERSION = "0.0.4"
+  VERSION = "0.0.5"
 end

data/vendor/assets/javascripts/bootstrap-tokenfield.js

@@ -1,11 +1,17 @@
 /* ============================================================
- * bootstrap-tokenfield.js v0.9.9-2
+ * bootstrap-tokenfield.js v0.11.0
  * ============================================================
  *
  * Copyright 2013 Sliptree
  * ============================================================ */
 
-!function ($) {
+(function (root, factory) {
+  if (typeof define === 'function' && define.amd) {
+    define(['jquery'], factory);
+  } else {
+    root.Tokenfield = factory(root.jQuery);
+  }
+}(this, function ($) {
 
   "use strict"; // jshint ;_;
 
@@ -16,10 +22,11 @@
     var _self = this
 
     this.$element = $(element)
-    
+    this.textDirection = this.$element.css('direction');
+
     // Extend options
     this.options = $.extend({}, $.fn.tokenfield.defaults, { tokens: this.$element.val() }, options)
-    
+
     // Setup delimiters and trigger keys
     this._delimiters = (typeof this.options.delimiter === 'string') ? [this.options.delimiter] : this.options.delimiter
     this._triggerKeys = $.map(this._delimiters, function (delimiter) {
@@ -41,19 +48,18 @@
     }
 
     // Move original input out of the way
-    this.$element.css({
-      'position': 'absolute',
-      'left': '-10000px'
-    }).prop('tabindex', -1);
+    var hidingPosition = $('body').css('direction') === 'rtl' ? 'right' : 'left';
+    this.$element.css('position', 'absolute').css(hidingPosition, '-10000px').prop('tabindex', -1)
 
     // Create a wrapper
     this.$wrapper = $('<div class="tokenfield form-control" />')
     if (this.$element.hasClass('input-lg')) this.$wrapper.addClass('input-lg')
     if (this.$element.hasClass('input-sm')) this.$wrapper.addClass('input-sm')
+    if (this.textDirection === 'rtl') this.$wrapper.addClass('rtl')
 
     // Create a new input
     var id = this.$element.prop('id') || new Date().getTime() + '' + Math.floor((1 + Math.random()) * 100)
-    this.$input = $('<input type="text" class="token-input" />')
+    this.$input = $('<input type="text" class="token-input" autocomplete="off" />')
                     .appendTo( this.$wrapper )
                     .prop( 'placeholder',  this.$element.prop('placeholder') )
                     .prop( 'id', id + '-tokenfield' )
@@ -65,11 +71,8 @@
     }
 
     // Set up a copy helper to handle copy & paste
-    this.$copyHelper = $('<input type="text" />').css({
-      'position': 'absolute',
-      'left': '-10000px'
-    }).prop('tabindex', -1).prependTo( this.$wrapper )
-    
+    this.$copyHelper = $('<input type="text" />').css('position', 'absolute').css(hidingPosition, '-10000px').prop('tabindex', -1).prependTo( this.$wrapper )
+
     // Set wrapper width
     if (elStyleWidth) {
       this.$wrapper.css('width', elStyleWidth);
@@ -91,13 +94,13 @@
     this.$mirror = $('<span style="position:absolute; top:-999px; left:0; white-space:pre;"/>');
     this.$input.css('min-width', this.options.minWidth + 'px')
     $.each([
-        'fontFamily', 
-        'fontSize', 
-        'fontWeight', 
-        'fontStyle', 
-        'letterSpacing', 
-        'textTransform', 
-        'wordSpacing', 
+        'fontFamily',
+        'fontSize',
+        'fontWeight',
+        'fontStyle',
+        'letterSpacing',
+        'textTransform',
+        'wordSpacing',
         'textIndent'
     ], function (i, val) {
         _self.$mirror[0].style[val] = _self.$input.css(val);
@@ -110,7 +113,7 @@
 
     // Calculate inner input width
     this.update()
-    
+
     // Create initial tokens, if any
     this.setTokens(this.options.tokens, false, false)
 
@@ -119,9 +122,10 @@
 
     // Initialize autocomplete, if necessary
     if ( ! $.isEmptyObject( this.options.autocomplete ) ) {
+      var side = this.textDirection === 'rtl' ? 'right' : 'left'
       var autocompleteOptions = $.extend({}, this.options.autocomplete, {
         minLength: this.options.showAutocompleteOnFocus ? 0 : null,
-        position: { my: "left top", at: "left bottom", of: this.$wrapper }
+        position: { my: side + " top", at: side + " bottom", of: this.$wrapper }
       })
       this.$input.autocomplete( autocompleteOptions )
     }
@@ -146,25 +150,14 @@
      if (typeof triggerChange === 'undefined') {
          triggerChange = true
      }
-      
+
       var _self = this
         , value = $.trim(attrs.value)
         , label = attrs.label.length ? $.trim(attrs.label) : value
 
       if (!value.length || !label.length || value.length < this.options.minLength) return
 
-      if (!this.options.allowDuplicates && $.grep(this.getTokens(), function (token) {
-        return token.value === value
-      }).length) {
-        // Allow listening to when duplicates get prevented
-        var duplicateEvent = $.Event('preventDuplicateToken')
-        duplicateEvent.token = {
-          value: value,
-          label: label
-        }
-        this.$element.trigger( duplicateEvent )        
-        return
-      }
+      if (this.options.limit && this.getTokens().length >= this.options.limit) return
 
       // Allow changing token data before creating it
       var beforeCreateEvent = $.Event('beforeCreateToken')
@@ -179,6 +172,25 @@
       value = beforeCreateEvent.token.value
       label = beforeCreateEvent.token.label
 
+      // Check for duplicates
+      if (!this.options.allowDuplicates && $.grep(this.getTokens(), function (token) {
+        return token.value === value
+      }).length) {
+        // Allow listening to when duplicates get prevented
+        var duplicateEvent = $.Event('preventDuplicateToken')
+        duplicateEvent.token = {
+          value: value,
+          label: label
+        }
+        this.$element.trigger( duplicateEvent )
+        // Add duplicate warning class to existing token for 250ms
+        var duplicate = this.$wrapper.find( '.token[data-value="' + value + '"]' ).addClass('duplicate')
+        setTimeout(function() {
+          duplicate.removeClass('duplicate');
+        }, 250)
+        return false
+      }
+
       var token = $('<div class="token" />')
             .attr('data-value', value)
             .append('<span class="token-label" />')
@@ -198,7 +210,7 @@
       // Determine maximum possible token label width
       if (!this.maxTokenWidth) {
         this.maxTokenWidth =
-          this.$wrapper.width() - closeButton.outerWidth() - 
+          this.$wrapper.width() - closeButton.outerWidth() -
           parseInt(closeButton.css('margin-left'), 10) -
           parseInt(closeButton.css('margin-right'), 10) -
           parseInt(token.css('border-left-width'), 10) -
@@ -231,8 +243,8 @@
             e.preventDefault()
             return _self.toggle( token )
           }
-          
-          _self.activate( token, e.shiftKey, e.shiftKey )          
+
+          _self.activate( token, e.shiftKey, e.shiftKey )
         })
         .on('dblclick', function (e) {
           if (_self.disabled) return false;
@@ -255,7 +267,7 @@
       this.update()
 
       return this.$input.get(0)
-    }    
+    }
 
   , setTokens: function (tokens, add, triggerChange) {
       if (!tokens) return
@@ -311,7 +323,7 @@
   , getTokensList: function(delimiter, beautify, active) {
       delimiter = delimiter || this._delimiters[0]
       beautify = ( typeof beautify !== 'undefined' && beautify !== null ) ? beautify : this.options.beautify
-      
+
       var separator = delimiter + ( beautify && delimiter !== ' ' ? ' ' : '')
       return $.map( this.getTokens(active), function (token) {
         return token.value
@@ -341,7 +353,7 @@
 
       this.$copyHelper
         .on('focus',    $.proxy(this.focus, this))
-        .on('blur',     $.proxy(this.blur, this))        
+        .on('blur',     $.proxy(this.blur, this))
         .on('keydown',  $.proxy(this.keydown, this))
         .on('keyup',    $.proxy(this.keyup, this))
 
@@ -354,7 +366,7 @@
         .on('autocompletecreate', function() {
           // Set minimum autocomplete menu width
           var $_menuElement = $(this).data('ui-autocomplete').menu.element
-          
+
           var minWidth = _self.$wrapper.outerWidth() -
               parseInt( $_menuElement.css('border-left-width'), 10 ) -
               parseInt( $_menuElement.css('border-right-width'), 10 )
@@ -362,10 +374,11 @@
           $_menuElement.css( 'min-width', minWidth + 'px' )
         })
         .on('autocompleteselect', function (e, ui) {
-          _self.$input.val('')
-          _self.createToken( ui.item )
-          if (_self.$input.data( 'edit' )) {
-            _self.unedit(true)
+          if (_self.createToken( ui.item )) {
+            _self.$input.val('')
+            if (_self.$input.data( 'edit' )) {
+              _self.unedit(true)
+            }
           }
           return false
         })
@@ -380,10 +393,11 @@
           })
 
           // Create token
-          _self.createToken( datum[valueKey] )
-          _self.$input.typeahead('setQuery', '')
-          if (_self.$input.data( 'edit' )) {
-            _self.unedit(true)
+          if (_self.createToken( datum[valueKey] )) {
+            _self.$input.typeahead('setQuery', '')
+            if (_self.$input.data( 'edit' )) {
+              _self.unedit(true)
+            }
           }
         })
         .on('typeahead:autocompleted', function (e, datum, dataset) {
@@ -403,6 +417,8 @@
 
       if (!this.focused) return
 
+      var _self = this
+
       switch(e.keyCode) {
         case 8: // backspace
           if (!this.$input.is(document.activeElement)) break
@@ -410,88 +426,20 @@
           break
 
         case 37: // left arrow
-          if (this.$input.is(document.activeElement)) {
-            if (this.$input.val().length > 0) break
-
-            var prev = this.$input.hasClass('tt-query') ? this.$input.parent().prevAll('.token:first') : this.$input.prevAll('.token:first')
-
-            if (!prev.length) break
-
-            this.preventInputFocus = true
-            this.preventDeactivation = true
-
-            this.activate( prev )
-            e.preventDefault()
-
-          } else {
-
-            this.prev( e.shiftKey )
-            e.preventDefault()
-          }
+          leftRight( this.textDirection === 'rtl' ? 'next': 'prev' )
           break
 
         case 38: // up arrow
-          if (!e.shiftKey) return
-
-          if (this.$input.is(document.activeElement)) {
-            if (this.$input.val().length > 0) break
-
-            var prev = this.$input.hasClass('tt-query') ? this.$input.parent().prevAll('.token:last') : this.$input.prevAll('.token:last')
-            if (!prev.length) return
-
-            this.activate( prev )
-          }
-
-          var _self = this
-          this.firstActiveToken.nextAll('.token').each(function() {
-            _self.deactivate( $(this) )
-          })
-
-          this.activate( this.$wrapper.find('.token:first'), true, true )
-          e.preventDefault()
+          upDown('prev')
           break
 
         case 39: // right arrow
-          if (this.$input.is(document.activeElement)) {
-
-            if (this.$input.val().length > 0) break
-            
-            var next = this.$input.hasClass('tt-query') ? this.$input.parent().nextAll('.token:first') : this.$input.nextAll('.token:first')
-
-            if (!next.length) break
-
-            this.preventInputFocus = true
-            this.preventDeactivation = true
-
-            this.activate( next )
-            e.preventDefault()              
-
-          } else {
-            this.next( e.shiftKey )
-            e.preventDefault()
-          }
+          leftRight( this.textDirection === 'rtl' ? 'prev': 'next' )
           break
 
         case 40: // down arrow
-          if (!e.shiftKey) return
-
-          if (this.$input.is(document.activeElement)) {
-            if (this.$input.val().length > 0) break
-
-            var next = this.$input.hasClass('tt-query') ? this.$input.parent().nextAll('.token:first') : this.$input.nextAll('.token:first')
-            if (!next.length) return
-
-            this.activate( next )
-          }
-
-          var _self = this
-          this.firstActiveToken.prevAll('.token').each(function() {
-            _self.deactivate( $(this) )
-          })          
-
-          this.activate( this.$wrapper.find('.token:last'), true, true )
-          e.preventDefault()
-          break        
+          upDown('next')
+          break
 
         case 65: // a (to handle ctrl + a)
           if (this.$input.val().length > 0 || !(e.ctrlKey || e.metaKey)) break
@@ -504,20 +452,66 @@
 
           // We will handle creating tokens from autocomplete in autocomplete events
           if (this.$input.data('ui-autocomplete') && this.$input.data('ui-autocomplete').menu.element.find("li:has(a.ui-state-focus)").length) break
+
           // We will handle creating tokens from typeahead in typeahead events
           if (this.$input.hasClass('tt-query') && this.$wrapper.find('.tt-is-under-cursor').length ) break
           if (this.$input.hasClass('tt-query') && this.$wrapper.find('.tt-hint').val().length) break
-          
+
           // Create token
           if (this.$input.is(document.activeElement) && this.$input.val().length || this.$input.data('edit')) {
-            this.createTokensFromInput(e, this.$input.data('edit'))
+            return this.createTokensFromInput(e, this.$input.data('edit'));
           }
+
+          // Edit token
           if (e.keyCode === 13) {
             if (!this.$copyHelper.is(document.activeElement) || this.$wrapper.find('.token.active').length !== 1) break
             this.edit( this.$wrapper.find('.token.active') )
           }
       }
 
+      function leftRight(direction) {
+        if (_self.$input.is(document.activeElement)) {
+          if (_self.$input.val().length > 0) return
+
+          direction += 'All'
+          var token = _self.$input.hasClass('tt-query') ? _self.$input.parent()[direction]('.token:first') : _self.$input[direction]('.token:first')
+          if (!token.length) return
+
+          _self.preventInputFocus = true
+          _self.preventDeactivation = true
+
+          _self.activate( token )
+          e.preventDefault()
+
+        } else {
+          _self[direction]( e.shiftKey )
+          e.preventDefault()
+        }
+      }
+
+      function upDown(direction) {
+        if (!e.shiftKey) return
+
+        if (_self.$input.is(document.activeElement)) {
+          if (_self.$input.val().length > 0) return
+
+          var token = _self.$input.hasClass('tt-query') ? _self.$input.parent()[direction + 'All']('.token:first') : _self.$input[direction + 'All']('.token:first')
+          if (!token.length) return
+
+          _self.activate( token )
+        }
+
+        var opposite = direction === 'prev' ? 'next' : 'prev'
+          , position = direction === 'prev' ? 'first' : 'last'
+
+        _self.firstActiveToken[opposite + 'All']('.token').each(function() {
+          _self.deactivate( $(this) )
+        })
+
+        _self.activate( _self.$wrapper.find('.token:' + position), true, true )
+        e.preventDefault()
+      }
+
       this.lastKeyDown = e.keyCode
     }
 
@@ -543,7 +537,7 @@
         case 8: // backspace
           if (this.$input.is(document.activeElement)) {
             if (this.$input.val().length || this.lastInputValue.length && this.lastKeyDown === 8) break
-            
+
             this.preventDeactivation = true
             var prev = this.$input.hasClass('tt-query') ? this.$input.parent().prevAll('.token:first') : this.$input.prevAll('.token:first')
 
@@ -587,16 +581,16 @@
       }
 
       if (!this.preventCreateTokens && (this.$input.data('edit') && !this.$input.is(document.activeElement) || this.options.createTokensOnBlur )) {
-        this.createTokensFromInput(e) 
+        this.createTokensFromInput(e)
       }
-      
+
       this.preventDeactivation = false
       this.preventCreateTokens = false
     }
 
   , paste: function (e) {
       var _self = this
-      
+
       // Add tokens to existing ones
       setTimeout(function () {
         _self.createTokensFromInput(e)
@@ -605,16 +599,19 @@
 
   , change: function (e) {
       if ( e.initiator === 'tokenfield' ) return // Prevent loops
-      
+
       this.setTokens( this.$element.val() )
     }
 
   , createTokensFromInput: function (e, focus) {
-      if (this.$input.val().length < this.options.minLength) return
+      if (this.$input.val().length < this.options.minLength)
+        return // No input, simply return
 
       var tokensBefore = this.getTokensList()
       this.setTokens( this.$input.val(), true )
-      if (tokensBefore == this.getTokensList() && this.$input.val().length) return // No tokens were added, do nothing
+
+      if (tokensBefore == this.getTokensList() && this.$input.val().length)
+        return false // No tokens were added, do nothing (prevent form submit)
 
       if (this.$input.hasClass('tt-query')) {
         // Typeahead acts weird when simply setting input value to empty,
@@ -628,9 +625,8 @@
         this.unedit(focus)
       }
 
-      e.preventDefault()
-      e.stopPropagation()
-    }  
+      return false // Prevent form being submitted
+    }
 
   , next: function (add) {
       if (add) {
@@ -690,7 +686,7 @@
       if (!add) {
         this.$wrapper.find('.active').removeClass('active')
         if (remember) {
-          this.firstActiveToken = token 
+          this.firstActiveToken = token
         } else {
           delete this.firstActiveToken
         }
@@ -748,7 +744,7 @@
       }
       beforeEditEvent.relatedTarget = token.get(0)
       this.$element.trigger( beforeEditEvent )
-      
+
       if (!beforeEditEvent.token) return
 
       value = beforeEditEvent.token.value
@@ -772,12 +768,12 @@
   , unedit: function (focus) {
       var $_input = this.$input.hasClass('tt-query') ? this.$input.parent() : this.$input
       $_input.appendTo( this.$wrapper )
-      
+
       this.$input.data('edit', false)
 
       this.update()
 
-      // Because moving the input element around in DOM 
+      // Because moving the input element around in DOM
       // will cause it to lose focus, we provide an option
       // to re-focus the input after appending it to the wrapper
       if (focus) {
@@ -792,7 +788,7 @@
       if (this.$input.is(document.activeElement) || this.disabled) return
 
       var token = (e.type === 'click') ? $(e.target).closest('.token') : this.$wrapper.find('.token.active')
-      
+
       if (e.type !== 'click') {
         if (!direction) var direction = 'prev'
         this[direction]()
@@ -839,7 +835,7 @@
         if (value === this.$mirror.text()) return
 
         this.$mirror.text(value)
-        
+
         var mirrorWidth = this.$mirror.width() + 10;
         if ( mirrorWidth > this.$wrapper.width() ) {
           return this.$input.width( this.$wrapper.width() )
@@ -849,7 +845,10 @@
       }
       else {
         this.$input.css( 'width', this.options.minWidth + 'px' )
-        this.$input.width( this.$wrapper.offset().left + this.$wrapper.width() - this.$input.offset().left + 5 )
+        if (this.textDirection === 'rtl') {
+          return this.$input.width( this.$input.offset().left + this.$input.outerWidth() - this.$wrapper.offset().left - parseInt(this.$wrapper.css('padding-left'), 10) - 1 )
+        }
+        this.$input.width( this.$wrapper.offset().left + this.$wrapper.width() + parseInt(this.$wrapper.css('padding-left'), 10) - this.$input.offset().left )
       }
     }
 
@@ -897,7 +896,7 @@
   $.fn.tokenfield = function (option, param) {
     var value
       , args = []
-    
+
     Array.prototype.push.apply( args, arguments );
 
     var elements = this.each(function () {
@@ -920,6 +919,7 @@
     minWidth: 60,
     minLength: 0,
     allowDuplicates: false,
+    limit: 0,
     autocomplete: {},
     typeahead: {},
     showAutocompleteOnFocus: false,
@@ -939,4 +939,6 @@
     return this
   }
 
-}(window.jQuery);
+  return Tokenfield;
+
+}));

data/vendor/assets/stylesheets/bootstrap-tokenfield.css

@@ -6,21 +6,35 @@
 .tokenfield.focus {
   border-color: #66afe9;
   outline: 0;
-  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
-          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
+  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, 0.6);
+  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, 0.6);
+}
+.has-warning .tokenfield.focus {
+  border-color: #66512c;
+  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #c0a16b;
+  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #c0a16b;
+}
+.has-error .tokenfield.focus {
+  border-color: #843534;
+  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ce8483;
+  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ce8483;
+}
+.has-success .tokenfield.focus {
+  border-color: #2b542c;
+  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #67b168;
+  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #67b168;
 }
-
 .tokenfield .token {
   box-sizing: border-box;
-  -moz-box-sizing: border-box; /* Firefox */  
+  -moz-box-sizing: border-box;
   display: inline-block;
   border: 1px solid #d9d9d9;
   background-color: #ededed;
   -webkit-border-radius: 3px;
   -moz-border-radius: 3px;
   border-radius: 3px;
-  white-space: nowrap; 
-  margin: -1px 5px 5px 0; 
+  white-space: nowrap;
+  margin: -1px 5px 5px 0;
   height: 22px;
   vertical-align: top;
   cursor: default;
@@ -28,12 +42,42 @@
 .tokenfield .token:hover {
   border-color: #b9b9b9;
 }
-
 .tokenfield .token.active {
-  border-color: rgb(82, 168, 236);
+  border-color: #52a8ec;
   border-color: rgba(82, 168, 236, 0.8);
 }
-
+.tokenfield .token.duplicate {
+  border-color: #b94a48;
+  -webkit-animation-direction: normal;
+  -webkit-animation-duration: 0.1s;
+  -webkit-animation-iteration-count: infinite;
+  -webkit-animation-name: blink;
+  -webkit-animation-timing-function: ease;
+}
+@-webkit-keyframes 'blink' {
+  0% {
+    border-color: #ededed;
+  }
+  100% {
+    border-color: #b94a48;
+  }
+}
+@-moz-keyframes 'blink' {
+  0% {
+    border-color: #ededed;
+  }
+  100% {
+    border-color: #b94a48;
+  }
+}
+@keyframes 'blink' {
+  0% {
+    border-color: #ededed;
+  }
+  100% {
+    border-color: #b94a48;
+  }
+}
 .tokenfield .token .token-label {
   display: inline-block;
   overflow: hidden;
@@ -41,7 +85,6 @@
   padding-left: 4px;
   vertical-align: top;
 }
-
 .tokenfield .token .close {
   font-family: Arial;
   display: inline-block;
@@ -54,7 +97,6 @@
   vertical-align: top;
   padding-right: 4px;
 }
-
 .tokenfield .token-input {
   background: none;
   width: 60px;
@@ -72,17 +114,16 @@
   outline: 0;
   /* IE6-9 */
   -webkit-box-shadow: none;
-     -moz-box-shadow: none;
-          box-shadow: none;
+  -moz-box-shadow: none;
+  box-shadow: none;
 }
-
 /* Invalid token */
 .tokenfield .token.invalid {
   background: none;
   border: 1px solid transparent;
   -webkit-border-radius: 0;
   -moz-border-radius: 0;
-  border-radius: 0;  
+  border-radius: 0;
   border-bottom: 1px dotted #b94a48;
 }
 .tokenfield .token.invalid.active {
@@ -92,7 +133,6 @@
   -moz-border-radius: 3px;
   border-radius: 3px;
 }
-
 /* Disabled tokenfield */
 .tokenfield.disabled {
   cursor: not-allowed;
@@ -105,7 +145,6 @@
   cursor: not-allowed;
   opacity: 0.2;
 }
-
 /* Different sizes */
 .tokenfield.input-sm,
 .input-group-sm .tokenfield {
@@ -122,7 +161,6 @@
   height: 18px;
   margin-bottom: 5px;
 }
-
 .tokenfield.input-lg,
 .input-group-lg .tokenfield {
   min-height: 45px;
@@ -147,3 +185,15 @@
   margin-bottom: 6px;
   vertical-align: top;
 }
+/* RTL */
+.tokenfield.rtl {
+  direction: rtl;
+  text-align: right;
+}
+.tokenfield.rtl .token {
+  margin: -1px 0 5px 5px;
+}
+.tokenfield.rtl .token .token-label {
+  padding-left: 0px;
+  padding-right: 4px;
+}

data/vendor/assets/stylesheets/tokenfield-typeahead.css

@@ -0,0 +1,137 @@
+/* General Typeahead styling, from http://jsfiddle.net/ragulka/Dy9au/1/ */
+.twitter-typeahead {
+  width: 100%;
+  position: relative;
+  vertical-align: top;
+}
+.twitter-typeahead .tt-query,
+.twitter-typeahead .tt-hint {
+  margin: 0;
+  width: 100%;
+  vertical-align: middle;
+  background-color: #ffffff;
+}
+.twitter-typeahead .tt-hint {
+  color: #999999;
+  z-index: 1;
+  border: 1px solid transparent;
+}
+.twitter-typeahead .tt-query {
+  color: #555555;
+  z-index: 2;
+}
+.twitter-typeahead .tt-query,
+.twitter-typeahead .tt-hint {
+  height: 34px;
+  padding: 6px 12px;
+  font-size: 14px;
+  line-height: 1.428571429;
+}
+.twitter-typeahead .input-sm.tt-query,
+.twitter-typeahead .hint-sm.tt-hint {
+  border-radius: 3px;
+}
+.twitter-typeahead .input-lg.tt-query,
+.twitter-typeahead .hint-lg.tt-hint {
+  border-radius: 6px;
+}
+.input-group .twitter-typeahead:first-child .tt-query,
+.input-group .twitter-typeahead:first-child .tt-hint {
+  border-radius: 4px 0 0 4px !important;
+}
+.input-group .twitter-typeahead:last-child .tt-query,
+.input-group .twitter-typeahead:last-child .tt-hint {
+  border-radius: 0 4px 4px 0 !important;
+}
+.input-group.input-group-sm .twitter-typeahead:first-child .tt-query,
+.input-group.input-group-sm .twitter-typeahead:first-child .tt-hint {
+  border-radius: 3px 0 0 3px !important;
+}
+.input-group.input-group-sm .twitter-typeahead:last-child .tt-query,
+.input-group.input-group-sm .twitter-typeahead:last-child .tt-hint {
+  border-radius: 0 3px 3px 0 !important;
+}
+.input-sm.tt-query,
+.hint-sm.tt-hint,
+.input-group.input-group-sm .tt-query,
+.input-group.input-group-sm .tt-hint {
+  height: 30px;
+  padding: 5px 10px;
+  font-size: 12px;
+  line-height: 1.5;
+}
+.input-group.input-group-lg .twitter-typeahead:first-child .tt-query,
+.input-group.input-group-lg .twitter-typeahead:first-child .tt-hint {
+  border-radius: 6px 0 0 6px !important;
+}
+.input-group.input-group-lg .twitter-typeahead:last-child .tt-query,
+.input-group.input-group-lg .twitter-typeahead:last-child .tt-hint {
+  border-radius: 0 6px 6px 0 !important;
+}
+.input-lg.tt-query,
+.hint-lg.tt-hint,
+.input-group.input-group-lg .tt-query,
+.input-group.input-group-lg .tt-hint {
+  height: 45px;
+  padding: 10px 16px;
+  font-size: 18px;
+  line-height: 1.33;
+}
+.tt-dropdown-menu {
+  width: 100%;
+  min-width: 160px;
+  margin-top: 2px;
+  padding: 5px 0;
+  background-color: #ffffff;
+  border: 1px solid #ccc;
+  border: 1px solid rgba(0, 0, 0, 0.15);
+  *border-right-width: 2px;
+  *border-bottom-width: 2px;
+  border-radius: 6px;
+  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
+  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
+  -webkit-background-clip: padding-box;
+  -moz-background-clip: padding;
+  background-clip: padding-box;
+}
+.tt-suggestion {
+  display: block;
+  padding: 3px 20px;
+}
+.tt-suggestion.tt-is-under-cursor {
+  color: #262626;
+  background-image: -webkit-linear-gradient(top, #f5f5f5 0%, #e8e8e8 100%);
+  background-image: linear-gradient(to bottom, #f5f5f5 0%, #e8e8e8 100%);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5', endColorstr='#ffe8e8e8', GradientType=0);
+}
+.tt-suggestion.tt-is-under-cursor a {
+  color: #ffffff;
+}
+.tt-suggestion p {
+  margin: 0;
+}
+/* Tokenfield-specific Typeahead styling */
+.tokenfield .twitter-typeahead {
+  width: auto;
+}
+.tokenfield .twitter-typeahead .tt-hint {
+  padding: 0;
+  margin-left: -1px;
+  height: 20px;
+}
+.tokenfield.input-sm .twitter-typeahead .tt-query,
+.tokenfield.input-sm .twitter-typeahead .tt-hint {
+  height: 18px;
+  font-size: 12px;
+  line-height: 1.5;
+}
+.tokenfield.input-lg .twitter-typeahead .tt-query,
+.tokenfield.input-lg .twitter-typeahead .tt-hint {
+  height: 23px;
+  font-size: 18px;
+  line-height: 1.33;
+}
+.tokenfield .twitter-typeahead .tt-suggestions {
+  font-size: 14px;
+}

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: bootstrap_tokenfield_rails
 version: !ruby/object:Gem::Version
-  version: 0.0.4
+  version: 0.0.5
 platform: ruby
 authors:
 - Akash Devaraju
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2013-11-18 00:00:00.000000000 Z
+date: 2014-01-14 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: bundler
@@ -49,6 +49,7 @@ files:
 - lib/bootstrap_tokenfield_rails.rb
 - lib/bootstrap_tokenfield_rails/version.rb
 - vendor/assets/stylesheets/bootstrap-tokenfield.css
+- vendor/assets/stylesheets/tokenfield-typeahead.css
 - vendor/assets/javascripts/bootstrap-tokenfield.js
 homepage: http://www.icicletech.com/open-source-software/bootstrap-tokenfield-rails
 licenses:
@@ -75,3 +76,4 @@ signing_key:
 specification_version: 4
 summary: A jQuery tagging / tokenizer input plugin for Twitter's Bootstrap
 test_files: []
+has_rdoc: