bootstrap_tokenfield_rails 0.0.6 → 0.0.7

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: d6119607e3aa9f6a73b3e134b85f0e55edbbc817
-  data.tar.gz: 9e71a84b6bc48258d8f6ef9c0da426276c313590
+  metadata.gz: a99164ca4c75845c6e28ebbf78eeade419aedefe
+  data.tar.gz: b72c6367bc12f6d3bd9539888c076df50b28f02f
 SHA512:
-  metadata.gz: aefa95d223aa22025b5ea4d87aebb3192ce5975c057c17fffbdbb18ee611239f4f203ccdf588a0d238c4f5072a3beba4af091d123d664ebb5de4cb3608829db2
-  data.tar.gz: 8a960a84a56ff32acb3b67b9cad4ef18544818aeb3801d80a165c47a3d1e00277cfcb24ebfa42056d649067a05347d122347409383376baddee358ba31324a2a
+  metadata.gz: 92a5cd5a835202b06661c05920d01fe4b2d6e7e315e379240abdfcba0e2bec2e705aa3544f7e86d209c8efcca0e05f54f6c6e4e40652d5412fe46a9f41121bba
+  data.tar.gz: af2ed1bfee6c48ce218239f58903e704f69e8849bbeee818b73f93786a67eaff786dab9c47965f64e2c851c7cdb6b3b96d6b6e0f28bc8fbced31d1c873fca147

data/lib/bootstrap_tokenfield_rails/version.rb

@@ -1,3 +1,3 @@
 module BootstrapTokenfieldRails
-  VERSION = "0.0.6"
+  VERSION = "0.0.7"
 end

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

@@ -25,7 +25,7 @@
       };
   } else {
     // Browser globals
-    factory(jQuery);
+    factory(jQuery, window);
   }
 }(function ($, window) {
 
@@ -63,9 +63,9 @@
     }
 
     var specialCharacters = ['\\', '$', '[', '{', '^', '.', '|', '?', '*', '+', '(', ')']
-    $.each(this._delimiters, function (index, char) {
-      var pos = $.inArray(char, specialCharacters)
-      if (pos >= 0) _self._delimiters[index] = '\\' + char;
+    $.each(this._delimiters, function (index, character) {
+      var pos = $.inArray(character, specialCharacters)
+      if (pos >= 0) _self._delimiters[index] = '\\' + character;
     });
 
     // Store original input width
@@ -102,7 +102,7 @@
 
     // 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" autocomplete="off" />')
+    this.$input = $('<input type="'+this.options.inputType+'" class="token-input" autocomplete="off" />')
                     .appendTo( this.$wrapper )
                     .prop( 'placeholder',  this.$element.prop('placeholder') )
                     .prop( 'id', id + '-tokenfield' )
@@ -134,6 +134,11 @@
       this.disable();
     }
 
+    // Set tokenfield readonly, if original input is readonly
+    if (this.$element.prop('readonly')) {
+      this.readonly();
+    }
+
     // Set up mirror for input auto-sizing
     this.$mirror = $('<span style="position:absolute; top:-999px; left:0; white-space:pre;"/>');
     this.$input.css('min-width', this.options.minWidth + 'px')
@@ -159,7 +164,7 @@
     this.update()
 
     // Create initial tokens, if any
-    this.setTokens(this.options.tokens, false, false)
+    this.setTokens(this.options.tokens, false, ! this.$element.val() && this.options.tokens )
 
     // Start listening to events
     this.listen()
@@ -167,23 +172,28 @@
     // Initialize autocomplete, if necessary
     if ( ! $.isEmptyObject( this.options.autocomplete ) ) {
       var side = this.textDirection === 'rtl' ? 'right' : 'left'
-      var autocompleteOptions = $.extend({
-        minLength: this.options.showAutocompleteOnFocus ? 0 : null,
-        position: { my: side + " top", at: side + " bottom", of: this.$wrapper }
-      }, this.options.autocomplete )
+       ,  autocompleteOptions = $.extend({
+            minLength: this.options.showAutocompleteOnFocus ? 0 : null,
+            position: { my: side + " top", at: side + " bottom", of: this.$wrapper }
+          }, this.options.autocomplete )
+
       this.$input.autocomplete( autocompleteOptions )
     }
 
     // Initialize typeahead, if necessary
     if ( ! $.isEmptyObject( this.options.typeahead ) ) {
-      var typeaheadOptions = $.extend({
-        minLength: this.options.showAutocompleteOnFocus ? 0 : null
-      }, this.options.typeahead)
-      this.$input.typeahead( null, typeaheadOptions )
+
+      var typeaheadOptions = this.options.typeahead
+        , defaults = {
+            minLength: this.options.showAutocompleteOnFocus ? 0 : null
+          }
+        , args = $.isArray( typeaheadOptions ) ? typeaheadOptions : [typeaheadOptions, typeaheadOptions]
+
+      args[0] = $.extend( {}, defaults, args[0] )
+
+      this.$input.typeahead.apply( this.$input, args )
       this.typeahead = true
     }
-
-    this.$element.trigger('tokenfield:initialize')
   }
 
   Tokenfield.prototype = {
@@ -191,130 +201,119 @@
     constructor: Tokenfield
 
   , createToken: function (attrs, triggerChange) {
+      var _self = this
+
       if (typeof attrs === 'string') {
         attrs = { value: attrs, label: attrs }
+      } else {
+        // Copy objects to prevent contamination of data sources.
+        attrs = $.extend( {}, attrs )
       }
 
-     if (typeof triggerChange === 'undefined') {
+      if (typeof triggerChange === 'undefined') {
          triggerChange = true
-     }
+      }
 
-      var _self = this
-        , value = $.trim(attrs.value)
-        , label = attrs.label && attrs.label.length ? $.trim(attrs.label) : value
+      // Normalize label and value
+      attrs.value = $.trim(attrs.value.toString());
+      attrs.label = attrs.label && attrs.label.length ? $.trim(attrs.label) : attrs.value
 
-      if (!value.length || !label.length || value.length < this.options.minLength) return
+      // Bail out if has no value or label, or label is too short
+      if (!attrs.value.length || !attrs.label.length || attrs.label.length <= this.options.minLength) return
 
+      // Bail out if maximum number of tokens is reached
       if (this.options.limit && this.getTokens().length >= this.options.limit) return
 
       // Allow changing token data before creating it
-      var prepareEvent = $.Event('tokenfield:preparetoken')
-      prepareEvent.token = {
-        value: value,
-        label: label
-      }
-      this.$element.trigger( prepareEvent )
-
-      if (!prepareEvent.token) return
-
-      value = prepareEvent.token.value
-      label = prepareEvent.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 preventDuplicateEvent = $.Event('tokenfield:preventduplicate')
-        preventDuplicateEvent.token = {
-          value: value,
-          label: label
-        }
-        this.$element.trigger( preventDuplicateEvent )
-        // 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 createEvent = $.Event('tokenfield:createtoken', { attrs: attrs })
+      this.$element.trigger(createEvent)
 
-      var token = $('<div class="token" />')
-            .attr('data-value', value)
+      // Bail out if there if attributes are empty or event was defaultPrevented
+      if (!createEvent.attrs || createEvent.isDefaultPrevented()) return
+
+      var $token = $('<div class="token" />')
             .append('<span class="token-label" />')
             .append('<a href="#" class="close" tabindex="-1">&times;</a>')
+            .data('attrs', attrs)
 
       // Insert token into HTML
       if (this.$input.hasClass('tt-input')) {
-        this.$input.parent().before( token )
+        // If the input has typeahead enabled, insert token before it's parent
+        this.$input.parent().before( $token )
       } else {
-        this.$input.before( token )
+        this.$input.before( $token )
       }
+
+      // Temporarily set input width to minimum
       this.$input.css('width', this.options.minWidth + 'px')
 
-      var tokenLabel = token.find('.token-label')
-        , closeButton = token.find('.close')
+      var $tokenLabel = $token.find('.token-label')
+        , $closeButton = $token.find('.close')
 
       // Determine maximum possible token label width
       if (!this.maxTokenWidth) {
         this.maxTokenWidth =
-          this.$wrapper.width() - closeButton.outerWidth() -
-          parseInt(closeButton.css('margin-left'), 10) -
-          parseInt(closeButton.css('margin-right'), 10) -
-          parseInt(token.css('border-left-width'), 10) -
-          parseInt(token.css('border-right-width'), 10) -
-          parseInt(token.css('padding-left'), 10) -
-          parseInt(token.css('padding-right'), 10)
-          parseInt(tokenLabel.css('border-left-width'), 10) -
-          parseInt(tokenLabel.css('border-right-width'), 10) -
-          parseInt(tokenLabel.css('padding-left'), 10) -
-          parseInt(tokenLabel.css('padding-right'), 10)
-          parseInt(tokenLabel.css('margin-left'), 10) -
-          parseInt(tokenLabel.css('margin-right'), 10)
-      }
-
-      tokenLabel
-        .text(label)
+          this.$wrapper.width() - $closeButton.outerWidth() -
+          parseInt($closeButton.css('margin-left'), 10) -
+          parseInt($closeButton.css('margin-right'), 10) -
+          parseInt($token.css('border-left-width'), 10) -
+          parseInt($token.css('border-right-width'), 10) -
+          parseInt($token.css('padding-left'), 10) -
+          parseInt($token.css('padding-right'), 10)
+          parseInt($tokenLabel.css('border-left-width'), 10) -
+          parseInt($tokenLabel.css('border-right-width'), 10) -
+          parseInt($tokenLabel.css('padding-left'), 10) -
+          parseInt($tokenLabel.css('padding-right'), 10)
+          parseInt($tokenLabel.css('margin-left'), 10) -
+          parseInt($tokenLabel.css('margin-right'), 10)
+      }
+
+      $tokenLabel
+        .text(attrs.label)
         .css('max-width', this.maxTokenWidth)
 
-      // Listen to events
-      token
+      // Listen to events on token
+      $token
         .on('mousedown',  function (e) {
-          if (_self.disabled) return false;
+          if (_self._disabled || _self._readonly) return false
           _self.preventDeactivation = true
         })
         .on('click',    function (e) {
-          if (_self.disabled) return false;
+          if (_self._disabled || _self._readonly) return false
           _self.preventDeactivation = false
 
           if (e.ctrlKey || e.metaKey) {
             e.preventDefault()
-            return _self.toggle( token )
+            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 || !_self.options.allowEditing ) return false;
-          _self.edit( token )
+          if (_self._disabled || _self._readonly || !_self.options.allowEditing ) return false
+          _self.edit( $token )
         })
 
-      closeButton
+      $closeButton
           .on('click',  $.proxy(this.remove, this))
 
-      var createEvent = $.Event('tokenfield:createtoken')
-      createEvent.token = prepareEvent.token
-      createEvent.relatedTarget = token.get(0)
-      this.$element.trigger( createEvent )
+      // Trigger createdtoken event on the original field
+      // indicating that the token is now in the DOM
+      this.$element.trigger($.Event('tokenfield:createdtoken', {
+        attrs: attrs,
+        relatedTarget: $token.get(0)
+      }))
 
-      var changeEvent = $.Event('change')
-      changeEvent.initiator = 'tokenfield'
+      // Trigger change event on the original field
       if (triggerChange) {
-        this.$element.val( this.getTokensList() ).trigger( changeEvent )
+        this.$element.val( this.getTokensList() ).trigger( $.Event('change', { initiator: 'tokenfield' }) )
       }
+
+      // Update tokenfield dimensions
       this.update()
 
-      return this.$input.get(0)
+      // Return original element
+      return this.$element.get(0)
     }
 
   , setTokens: function (tokens, add, triggerChange) {
@@ -336,20 +335,17 @@
       }
 
       var _self = this
-      $.each(tokens, function (i, token) {
-        _self.createToken(token, triggerChange)
+      $.each(tokens, function (i, attrs) {
+        _self.createToken(attrs, triggerChange)
       })
 
       return this.$element.get(0)
     }
 
-  , getTokenData: function(token) {
-      var data = token.map(function() {
+  , getTokenData: function($token) {
+      var data = $token.map(function() {
         var $token = $(this);
-        return {
-          value: $token.attr('data-value'),
-          label: $token.find('.token-label').text()
-        }
+        return $token.data('attrs')
       }).get();
 
       if (data.length == 1) {
@@ -431,7 +427,7 @@
           }
           return false
         })
-        .on('typeahead:selected', function (e, datum, dataset) {
+        .on('typeahead:selected typeahead:autocompleted', function (e, datum, dataset) {
           // Create token
           if (_self.createToken( datum )) {
             _self.$input.typeahead('val', '')
@@ -440,13 +436,6 @@
             }
           }
         })
-        .on('typeahead:autocompleted', function (e, datum, dataset) {
-          _self.createToken( _self.$input.val() )
-          _self.$input.typeahead('val', '')
-          if (_self.$input.data( 'edit' )) {
-            _self.unedit(true)
-          }
-        })
 
       // Listen to window resize
       $(window).on('resize', $.proxy(this.update, this ))
@@ -491,11 +480,11 @@
         case 13: // enter
 
           // 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
+          if (this.$input.data('ui-autocomplete') && this.$input.data('ui-autocomplete').menu.element.find("li:has(a.ui-state-focus), li.ui-state-focus").length) break
 
           // We will handle creating tokens from typeahead in typeahead events
           if (this.$input.hasClass('tt-input') && this.$wrapper.find('.tt-cursor').length ) break
-          if (this.$input.hasClass('tt-input') && this.$wrapper.find('.tt-hint').val().length) break
+          if (this.$input.hasClass('tt-input') && this.$wrapper.find('.tt-hint').val() && this.$wrapper.find('.tt-hint').val().length) break
 
           // Create token
           if (this.$input.is(document.activeElement) && this.$input.val().length || this.$input.data('edit')) {
@@ -515,13 +504,13 @@
           if (_self.$input.val().length > 0) return
 
           direction += 'All'
-          var token = _self.$input.hasClass('tt-input') ? _self.$input.parent()[direction]('.token:first') : _self.$input[direction]('.token:first')
-          if (!token.length) return
+          var $token = _self.$input.hasClass('tt-input') ? _self.$input.parent()[direction]('.token:first') : _self.$input[direction]('.token:first')
+          if (!$token.length) return
 
           _self.preventInputFocus = true
           _self.preventDeactivation = true
 
-          _self.activate( token )
+          _self.activate( $token )
           e.preventDefault()
 
         } else {
@@ -536,16 +525,16 @@
         if (_self.$input.is(document.activeElement)) {
           if (_self.$input.val().length > 0) return
 
-          var token = _self.$input.hasClass('tt-input') ? _self.$input.parent()[direction + 'All']('.token:first') : _self.$input[direction + 'All']('.token:first')
-          if (!token.length) return
+          var $token = _self.$input.hasClass('tt-input') ? _self.$input.parent()[direction + 'All']('.token:first') : _self.$input[direction + 'All']('.token:first')
+          if (!$token.length) return
 
-          _self.activate( token )
+          _self.activate( $token )
         }
 
         var opposite = direction === 'prev' ? 'next' : 'prev'
           , position = direction === 'prev' ? 'first' : 'last'
 
-        _self.firstActiveToken[opposite + 'All']('.token').each(function() {
+        _self.$firstActiveToken[opposite + 'All']('.token').each(function() {
           _self.deactivate( $(this) )
         })
 
@@ -557,11 +546,9 @@
     }
 
   , keypress: function(e) {
-      this.lastKeyPressCode = e.keyCode
-      this.lastKeyPressCharCode = e.charCode
 
       // Comma
-      if ($.inArray( e.charCode, this._triggerKeys) !== -1 && this.$input.is(document.activeElement)) {
+      if ($.inArray( e.which, this._triggerKeys) !== -1 && this.$input.is(document.activeElement)) {
         if (this.$input.val()) {
           this.createTokensFromInput(e)
         }
@@ -580,11 +567,11 @@
             if (this.$input.val().length || this.lastInputValue.length && this.lastKeyDown === 8) break
 
             this.preventDeactivation = true
-            var prev = this.$input.hasClass('tt-input') ? this.$input.parent().prevAll('.token:first') : this.$input.prevAll('.token:first')
+            var $prevToken = this.$input.hasClass('tt-input') ? this.$input.parent().prevAll('.token:first') : this.$input.prevAll('.token:first')
 
-            if (!prev.length) break
+            if (!$prevToken.length) break
 
-            this.activate( prev )
+            this.activate( $prevToken )
           } else {
             this.remove(e)
           }
@@ -603,7 +590,7 @@
 
       if (this.$input.is(document.activeElement)) {
         this.$wrapper.find('.active').removeClass('active')
-        this.firstActiveToken = null
+        this.$firstActiveToken = null
 
         if (this.options.showAutocompleteOnFocus) {
           this.search()
@@ -618,7 +605,7 @@
 
       if (!this.preventDeactivation && !this.$element.is(document.activeElement)) {
         this.$wrapper.find('.active').removeClass('active')
-        this.firstActiveToken = null
+        this.$firstActiveToken = null
       }
 
       if (!this.preventCreateTokens && (this.$input.data('edit') && !this.$input.is(document.activeElement) || this.options.createTokensOnBlur )) {
@@ -633,9 +620,11 @@
       var _self = this
 
       // Add tokens to existing ones
-      setTimeout(function () {
-        _self.createTokensFromInput(e)
-      }, 1)
+      if (_self.options.allowPasting) {
+        setTimeout(function () {
+          _self.createTokensFromInput(e)
+        }, 1)
+      }
     }
 
   , change: function (e) {
@@ -671,52 +660,50 @@
 
   , next: function (add) {
       if (add) {
-        var firstActive = this.$wrapper.find('.active:first')
-          , deactivate = firstActive && this.firstActiveToken ? firstActive.index() < this.firstActiveToken.index() : false
+        var $firstActiveToken = this.$wrapper.find('.active:first')
+          , deactivate = $firstActiveToken && this.$firstActiveToken ? $firstActiveToken.index() < this.$firstActiveToken.index() : false
 
-        if (deactivate) return this.deactivate( firstActive )
+        if (deactivate) return this.deactivate( $firstActiveToken )
       }
 
-      var active = this.$wrapper.find('.active:last')
-        , next = active.nextAll('.token:first')
+      var $lastActiveToken = this.$wrapper.find('.active:last')
+        , $nextToken = $lastActiveToken.nextAll('.token:first')
 
-      if (!next.length) {
+      if (!$nextToken.length) {
         this.$input.focus()
         return
       }
 
-      this.activate(next, add)
+      this.activate($nextToken, add)
     }
 
   , prev: function (add) {
 
       if (add) {
-        var lastActive = this.$wrapper.find('.active:last')
-          , deactivate = lastActive && this.firstActiveToken ? lastActive.index() > this.firstActiveToken.index() : false
+        var $lastActiveToken = this.$wrapper.find('.active:last')
+          , deactivate = $lastActiveToken && this.$firstActiveToken ? $lastActiveToken.index() > this.$firstActiveToken.index() : false
 
-        if (deactivate) return this.deactivate( lastActive )
+        if (deactivate) return this.deactivate( $lastActiveToken )
       }
 
-      var active = this.$wrapper.find('.active:first')
-        , prev = active.prevAll('.token:first')
+      var $firstActiveToken = this.$wrapper.find('.active:first')
+        , $prevToken = $firstActiveToken.prevAll('.token:first')
 
-      if (!prev.length) {
-        prev = this.$wrapper.find('.token:first')
+      if (!$prevToken.length) {
+        $prevToken = this.$wrapper.find('.token:first')
       }
 
-      if (!prev.length && !add) {
+      if (!$prevToken.length && !add) {
         this.$input.focus()
         return
       }
 
-      this.activate( prev, add )
+      this.activate( $prevToken, add )
     }
 
-  , activate: function (token, add, multi, remember) {
-
-      if (!token) return
+  , activate: function ($token, add, multi, remember) {
 
-      if (this.$wrapper.find('.token.active').length === this.$wrapper.find('.token').length) return
+      if (!$token) return
 
       if (typeof remember === 'undefined') var remember = true
 
@@ -727,17 +714,17 @@
       if (!add) {
         this.$wrapper.find('.active').removeClass('active')
         if (remember) {
-          this.firstActiveToken = token
+          this.$firstActiveToken = $token
         } else {
-          delete this.firstActiveToken
+          delete this.$firstActiveToken
         }
       }
 
-      if (multi && this.firstActiveToken) {
+      if (multi && this.$firstActiveToken) {
         // Determine first active token and the current tokens indicies
         // Account for the 1 hidden textarea by subtracting 1 from both
-        var i = this.firstActiveToken.index() - 2
-          , a = token.index() - 2
+        var i = this.$firstActiveToken.index() - 2
+          , a = $token.index() - 2
           , _self = this
 
         this.$wrapper.find('.token').slice( Math.min(i, a) + 1, Math.max(i, a) ).each( function() {
@@ -745,7 +732,7 @@
         })
       }
 
-      token.addClass('active')
+      $token.addClass('active')
       this.$copyHelper.val( this.getTokensList( null, null, true ) ).select()
     }
 
@@ -757,55 +744,51 @@
       })
     }
 
-  , deactivate: function(token) {
-      if (!token) return
+  , deactivate: function($token) {
+      if (!$token) return
 
-      token.removeClass('active')
+      $token.removeClass('active')
       this.$copyHelper.val( this.getTokensList( null, null, true ) ).select()
     }
 
-  , toggle: function(token) {
-      if (!token) return
+  , toggle: function($token) {
+      if (!$token) return
 
-      token.toggleClass('active')
+      $token.toggleClass('active')
       this.$copyHelper.val( this.getTokensList( null, null, true ) ).select()
     }
 
-  , edit: function (token) {
-      if (!token) return
+  , edit: function ($token) {
+      if (!$token) return
 
-      var value = token.data('value')
-        , label = token.find('.token-label').text()
+      var attrs = $token.data('attrs')
 
       // Allow changing input value before editing
-      var editEvent = $.Event('tokenfield:edittoken')
-      editEvent.token = {
-        value: value,
-        label: label
-      }
-      editEvent.relatedTarget = token.get(0)
+      var options = { attrs: attrs, relatedTarget: $token.get(0) }
+      var editEvent = $.Event('tokenfield:edittoken', options)
       this.$element.trigger( editEvent )
 
-      if (!editEvent.token) return
-
-      value = editEvent.token.value
-      label = editEvent.token.label
+      // Edit event can be cancelled if default is prevented
+      if (editEvent.isDefaultPrevented()) return
 
-      token.find('.token-label').text(value)
-      var tokenWidth = token.outerWidth()
+      $token.find('.token-label').text(attrs.value)
+      var tokenWidth = $token.outerWidth()
 
       var $_input = this.$input.hasClass('tt-input') ? this.$input.parent() : this.$input
 
-      token.replaceWith( $_input )
+      $token.replaceWith( $_input )
 
       this.preventCreateTokens = true
 
-      this.$input.val( value )
+      this.$input.val( attrs.value )
                 .select()
                 .data( 'edit', true )
                 .width( tokenWidth )
 
       this.update();
+
+      // Indicate that token is now being edited, and is replaced with an input field in the DOM
+      this.$element.trigger($.Event('tokenfield:editedtoken', options ))
     }
 
   , unedit: function (focus) {
@@ -829,31 +812,35 @@
     }
 
   , remove: function (e, direction) {
-      if (this.$input.is(document.activeElement) || this.disabled) return
+      if (this.$input.is(document.activeElement) || this._disabled || this._readonly) return
 
-      var token = (e.type === 'click') ? $(e.target).closest('.token') : this.$wrapper.find('.token.active')
+      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]()
 
-        // Was this the first token?
-        if (direction === 'prev') var firstToken = token.first().prevAll('.token:first').length === 0
+        // Was it the first token?
+        if (direction === 'prev') var firstToken = $token.first().prevAll('.token:first').length === 0
       }
 
-      // Prepare events
+      // Prepare events and their options
+      var options = { attrs: this.getTokenData( $token ), relatedTarget: $token.get(0) }
+        , removeEvent = $.Event('tokenfield:removetoken', options)
+
+      this.$element.trigger(removeEvent);
 
-      var removeEvent = $.Event('tokenfield:removetoken')
-      removeEvent.token = this.getTokenData( token )
+      // Remove event can be intercepted and cancelled
+      if (removeEvent.isDefaultPrevented()) return
 
-      var changeEvent = $.Event('change')
-      changeEvent.initiator = 'tokenfield'
+      var removedEvent = $.Event('tokenfield:removedtoken', options)
+        , changeEvent = $.Event('change', { initiator: 'tokenfield' })
 
       // Remove token from DOM
-      token.remove()
+      $token.remove()
 
       // Trigger events
-      this.$element.val( this.getTokensList() ).trigger( removeEvent ).trigger( changeEvent )
+      this.$element.val( this.getTokensList() ).trigger( removedEvent ).trigger( changeEvent )
 
       // Focus, when necessary:
       // When there are no more tokens, or if this was the first token
@@ -864,15 +851,19 @@
       this.$input.css('width', this.options.minWidth + 'px')
       this.update()
 
+      // Cancel original event handlers
       e.preventDefault()
       e.stopPropagation()
     }
 
+    /**
+     * Update tokenfield dimensions
+     */
   , update: function (e) {
       var value = this.$input.val()
-        , inputLeftPadding = parseInt(this.$input.css('padding-left'), 10)
-        , inputRightPadding = parseInt(this.$input.css('padding-right'), 10)
-        , inputPadding = inputLeftPadding + inputRightPadding
+        , inputPaddingLeft = parseInt(this.$input.css('padding-left'), 10)
+        , inputPaddingRight = parseInt(this.$input.css('padding-right'), 10)
+        , inputPadding = inputPaddingLeft + inputPaddingRight
 
       if (this.$input.data('edit')) {
 
@@ -891,16 +882,19 @@
         this.$input.width( mirrorWidth )
       }
       else {
-        this.$input.css( 'width', this.options.minWidth + 'px' )
-        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) - inputPadding - 1 )
-        }
-        this.$input.width( this.$wrapper.offset().left + this.$wrapper.width() + parseInt(this.$wrapper.css('padding-left'), 10) - this.$input.offset().left - inputPadding )
+        var w = (this.textDirection === 'rtl')
+              ? this.$input.offset().left + this.$input.outerWidth() - this.$wrapper.offset().left - parseInt(this.$wrapper.css('padding-left'), 10) - inputPadding - 1
+              : this.$wrapper.offset().left + this.$wrapper.width() + parseInt(this.$wrapper.css('padding-left'), 10) - this.$input.offset().left - inputPadding;
+        //
+        // some usecases pre-render widget before attaching to DOM,
+        // dimensions returned by jquery will be NaN -> we default to 100%
+        // so placeholder won't be cut off.
+        isNaN(w) ? this.$input.width('100%') : this.$input.width(w);
       }
     }
 
   , focusInput: function (e) {
-      if ($(e.target).closest('.token').length || $(e.target).closest('.token-input').length) return
+      if ( $(e.target).closest('.token').length || $(e.target).closest('.token-input').length || $(e.target).closest('.tt-dropdown-menu').length ) return
       // Focus only after the current call stack has cleared,
       // otherwise has no effect.
       // Reason: mousedown is too early - input will lose focus
@@ -919,19 +913,28 @@
     }
 
   , disable: function () {
-      this.disabled = true;
-      this.$input.prop('disabled', true);
-      this.$element.prop('disabled', true);
-      this.$wrapper.addClass('disabled');
+      this.setProperty('disabled', true);
     }
 
   , enable: function () {
-      this.disabled = false;
-      this.$input.prop('disabled', false);
-      this.$element.prop('disabled', false);
-      this.$wrapper.removeClass('disabled');
+      this.setProperty('disabled', false);
+    }
+
+  , readonly: function () {
+      this.setProperty('readonly', true);
     }
 
+  , writeable: function () {
+      this.setProperty('readonly', false);
+    }
+
+  , setProperty: function(property, value) {
+      this['_' + property] = value;
+      this.$input.prop(property, value);
+      this.$element.prop(property, value);
+      this.$wrapper[ value ? 'addClass' : 'removeClass' ](property);
+  }
+
   , destroy: function() {
       // Set field value
       this.$element.val( this.getTokensList() );
@@ -939,7 +942,7 @@
       this.$element.css( this.$element.data('original-styles') );
       this.$element.prop( 'tabindex', this.$element.data('original-tabindex') );
 
-      // Re-route tokenfield labele to original input
+      // Re-route tokenfield label to original input
       var $label = $( 'label[for="' + this.$input.prop('id') + '"]' )
       if ( $label.length ) {
         $label.prop( 'for', this.$element.prop('id') )
@@ -949,15 +952,15 @@
       this.$element.insertBefore( this.$wrapper );
 
       // Remove tokenfield-related data
-      this.$element.removeData('original-styles');
-      this.$element.removeData('original-tabindex');
-      this.$element.removeData('bs.tokenfield');
+      this.$element.removeData('original-styles')
+                   .removeData('original-tabindex')
+                   .removeData('bs.tokenfield');
 
       // Remove tokenfield from DOM
       this.$wrapper.remove();
+      this.$mirror.remove();
 
       var $_element = this.$element;
-      delete this;
 
       return $_element;
   }
@@ -985,7 +988,10 @@
         args.shift()
         value = data[option].apply(data, args)
       } else {
-        if (!data && typeof option !== 'string' && !param) $this.data('bs.tokenfield', (data = new Tokenfield(this, options)))
+        if (!data && typeof option !== 'string' && !param) {
+          $this.data('bs.tokenfield', (data = new Tokenfield(this, options)))
+          $this.trigger('tokenfield:initialize')
+        }
       }
     })
 
@@ -995,15 +1001,16 @@
   $.fn.tokenfield.defaults = {
     minWidth: 60,
     minLength: 0,
-    allowDuplicates: false,
     allowEditing: true,
+    allowPasting: true,
     limit: 0,
     autocomplete: {},
     typeahead: {},
     showAutocompleteOnFocus: false,
     createTokensOnBlur: false,
     delimiter: ',',
-    beautify: true
+    beautify: true,
+    inputType: 'text'
   }
 
   $.fn.tokenfield.Constructor = Tokenfield

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

@@ -3,7 +3,7 @@
  * https://github.com/sliptree/bootstrap-tokenfield
  * Copyright 2013-2014 Sliptree and other contributors; Licensed MIT
  */
-@-webkit-keyframes 'blink' {
+@-webkit-keyframes blink {
   0% {
     border-color: #ededed;
   }
@@ -11,7 +11,7 @@
     border-color: #b94a48;
   }
 }
-@-moz-keyframes 'blink' {
+@-moz-keyframes blink {
   0% {
     border-color: #ededed;
   }
@@ -19,7 +19,7 @@
     border-color: #b94a48;
   }
 }
-@keyframes 'blink' {
+@keyframes blink {
   0% {
     border-color: #ededed;
   }

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: bootstrap_tokenfield_rails
 version: !ruby/object:Gem::Version
-  version: 0.0.6
+  version: 0.0.7
 platform: ruby
 authors:
 - Akash Devaraju
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2014-03-16 00:00:00.000000000 Z
+date: 2014-10-24 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: bundler
@@ -76,3 +76,4 @@ signing_key:
 specification_version: 4
 summary: A jQuery tagging / tokenizer input plugin for Twitter's Bootstrap
 test_files: []
+has_rdoc: