bootstrap_tokenfield_rails 0.0.5 → 0.0.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA1:
3
- metadata.gz: c533323348030827ed5e4aa4eee743ffd435b4d7
4
- data.tar.gz: b6862dacd523e99ce27c70e42f3d08d721112016
3
+ metadata.gz: d6119607e3aa9f6a73b3e134b85f0e55edbbc817
4
+ data.tar.gz: 9e71a84b6bc48258d8f6ef9c0da426276c313590
5
5
  SHA512:
6
- metadata.gz: f3d34d14b0a4ad365eab53c23bff25e2ae9b60c620e7dad34a68e731fc724d2ea77ec4c010fb282e4756a132325d68ecdc6bf8f901ead01aa84833d6431c3ff9
7
- data.tar.gz: e749645820da94d53d92fbd609b3f8e3d66c82603e32a5b47c412d2df7a17fa8d8dd59146187afb7e9cd65c751a8dec0bdc695e54d8603dfd05d08aedc91e31a
6
+ metadata.gz: aefa95d223aa22025b5ea4d87aebb3192ce5975c057c17fffbdbb18ee611239f4f203ccdf588a0d238c4f5072a3beba4af091d123d664ebb5de4cb3608829db2
7
+ data.tar.gz: 8a960a84a56ff32acb3b67b9cad4ef18544818aeb3801d80a165c47a3d1e00277cfcb24ebfa42056d649067a05347d122347409383376baddee358ba31324a2a
@@ -1,3 +1,3 @@
1
1
  module BootstrapTokenfieldRails
2
- VERSION = "0.0.5"
2
+ VERSION = "0.0.6"
3
3
  end
@@ -1,17 +1,33 @@
1
- /* ============================================================
2
- * bootstrap-tokenfield.js v0.11.0
3
- * ============================================================
4
- *
5
- * Copyright 2013 Sliptree
6
- * ============================================================ */
7
-
8
- (function (root, factory) {
1
+ /*!
2
+ * bootstrap-tokenfield
3
+ * https://github.com/sliptree/bootstrap-tokenfield
4
+ * Copyright 2013-2014 Sliptree and other contributors; Licensed MIT
5
+ */
6
+
7
+ (function (factory) {
9
8
  if (typeof define === 'function' && define.amd) {
9
+ // AMD. Register as an anonymous module.
10
10
  define(['jquery'], factory);
11
+ } else if (typeof exports === 'object') {
12
+ // For CommonJS and CommonJS-like environments where a window with jQuery
13
+ // is present, execute the factory with the jQuery instance from the window object
14
+ // For environments that do not inherently posses a window with a document
15
+ // (such as Node.js), expose a Tokenfield-making factory as module.exports
16
+ // This accentuates the need for the creation of a real window or passing in a jQuery instance
17
+ // e.g. require("bootstrap-tokenfield")(window); or require("bootstrap-tokenfield")($);
18
+ module.exports = global.window && global.window.$ ?
19
+ factory( global.window.$ ) :
20
+ function( input ) {
21
+ if ( !input.$ && !input.fn ) {
22
+ throw new Error( "Tokenfield requires a window object with jQuery or a jQuery instance" );
23
+ }
24
+ return factory( input.$ || input );
25
+ };
11
26
  } else {
12
- root.Tokenfield = factory(root.jQuery);
27
+ // Browser globals
28
+ factory(jQuery);
13
29
  }
14
- }(this, function ($) {
30
+ }(function ($, window) {
15
31
 
16
32
  "use strict"; // jshint ;_;
17
33
 
@@ -25,16 +41,35 @@
25
41
  this.textDirection = this.$element.css('direction');
26
42
 
27
43
  // Extend options
28
- this.options = $.extend({}, $.fn.tokenfield.defaults, { tokens: this.$element.val() }, options)
44
+ this.options = $.extend(true, {}, $.fn.tokenfield.defaults, { tokens: this.$element.val() }, this.$element.data(), options)
29
45
 
30
46
  // Setup delimiters and trigger keys
31
47
  this._delimiters = (typeof this.options.delimiter === 'string') ? [this.options.delimiter] : this.options.delimiter
32
48
  this._triggerKeys = $.map(this._delimiters, function (delimiter) {
33
49
  return delimiter.charCodeAt(0);
34
50
  });
51
+ this._firstDelimiter = this._delimiters[0];
52
+
53
+ // Check for whitespace, dash and special characters
54
+ var whitespace = $.inArray(' ', this._delimiters)
55
+ , dash = $.inArray('-', this._delimiters)
56
+
57
+ if (whitespace >= 0)
58
+ this._delimiters[whitespace] = '\\s'
59
+
60
+ if (dash >= 0) {
61
+ delete this._delimiters[dash]
62
+ this._delimiters.unshift('-')
63
+ }
64
+
65
+ var specialCharacters = ['\\', '$', '[', '{', '^', '.', '|', '?', '*', '+', '(', ')']
66
+ $.each(this._delimiters, function (index, char) {
67
+ var pos = $.inArray(char, specialCharacters)
68
+ if (pos >= 0) _self._delimiters[index] = '\\' + char;
69
+ });
35
70
 
36
71
  // Store original input width
37
- var elRules = (typeof window.getMatchedCSSRules === 'function') ? window.getMatchedCSSRules( element ) : null
72
+ var elRules = (window && typeof window.getMatchedCSSRules === 'function') ? window.getMatchedCSSRules( element ) : null
38
73
  , elStyleWidth = element.style.width
39
74
  , elCSSWidth
40
75
  , elWidth = this.$element.width()
@@ -48,8 +83,16 @@
48
83
  }
49
84
 
50
85
  // Move original input out of the way
51
- var hidingPosition = $('body').css('direction') === 'rtl' ? 'right' : 'left';
52
- this.$element.css('position', 'absolute').css(hidingPosition, '-10000px').prop('tabindex', -1)
86
+ var hidingPosition = $('body').css('direction') === 'rtl' ? 'right' : 'left',
87
+ originalStyles = { position: this.$element.css('position') };
88
+ originalStyles[hidingPosition] = this.$element.css(hidingPosition);
89
+
90
+ this.$element
91
+ .data('original-styles', originalStyles)
92
+ .data('original-tabindex', this.$element.prop('tabindex'))
93
+ .css('position', 'absolute')
94
+ .css(hidingPosition, '-10000px')
95
+ .prop('tabindex', -1)
53
96
 
54
97
  // Create a wrapper
55
98
  this.$wrapper = $('<div class="tokenfield form-control" />')
@@ -63,6 +106,7 @@
63
106
  .appendTo( this.$wrapper )
64
107
  .prop( 'placeholder', this.$element.prop('placeholder') )
65
108
  .prop( 'id', id + '-tokenfield' )
109
+ .prop( 'tabindex', this.$element.data('original-tabindex') )
66
110
 
67
111
  // Re-route original input label to new input
68
112
  var $label = $( 'label[for="' + this.$element.prop('id') + '"]' )
@@ -123,19 +167,23 @@
123
167
  // Initialize autocomplete, if necessary
124
168
  if ( ! $.isEmptyObject( this.options.autocomplete ) ) {
125
169
  var side = this.textDirection === 'rtl' ? 'right' : 'left'
126
- var autocompleteOptions = $.extend({}, this.options.autocomplete, {
170
+ var autocompleteOptions = $.extend({
127
171
  minLength: this.options.showAutocompleteOnFocus ? 0 : null,
128
172
  position: { my: side + " top", at: side + " bottom", of: this.$wrapper }
129
- })
173
+ }, this.options.autocomplete )
130
174
  this.$input.autocomplete( autocompleteOptions )
131
175
  }
132
176
 
133
177
  // Initialize typeahead, if necessary
134
178
  if ( ! $.isEmptyObject( this.options.typeahead ) ) {
135
- var typeaheadOptions = $.extend({}, this.options.typeahead, {})
136
- this.$input.typeahead( typeaheadOptions )
179
+ var typeaheadOptions = $.extend({
180
+ minLength: this.options.showAutocompleteOnFocus ? 0 : null
181
+ }, this.options.typeahead)
182
+ this.$input.typeahead( null, typeaheadOptions )
137
183
  this.typeahead = true
138
184
  }
185
+
186
+ this.$element.trigger('tokenfield:initialize')
139
187
  }
140
188
 
141
189
  Tokenfield.prototype = {
@@ -153,36 +201,36 @@
153
201
 
154
202
  var _self = this
155
203
  , value = $.trim(attrs.value)
156
- , label = attrs.label.length ? $.trim(attrs.label) : value
204
+ , label = attrs.label && attrs.label.length ? $.trim(attrs.label) : value
157
205
 
158
206
  if (!value.length || !label.length || value.length < this.options.minLength) return
159
207
 
160
208
  if (this.options.limit && this.getTokens().length >= this.options.limit) return
161
209
 
162
210
  // Allow changing token data before creating it
163
- var beforeCreateEvent = $.Event('beforeCreateToken')
164
- beforeCreateEvent.token = {
211
+ var prepareEvent = $.Event('tokenfield:preparetoken')
212
+ prepareEvent.token = {
165
213
  value: value,
166
214
  label: label
167
215
  }
168
- this.$element.trigger( beforeCreateEvent )
216
+ this.$element.trigger( prepareEvent )
169
217
 
170
- if (!beforeCreateEvent.token) return
218
+ if (!prepareEvent.token) return
171
219
 
172
- value = beforeCreateEvent.token.value
173
- label = beforeCreateEvent.token.label
220
+ value = prepareEvent.token.value
221
+ label = prepareEvent.token.label
174
222
 
175
223
  // Check for duplicates
176
224
  if (!this.options.allowDuplicates && $.grep(this.getTokens(), function (token) {
177
225
  return token.value === value
178
226
  }).length) {
179
227
  // Allow listening to when duplicates get prevented
180
- var duplicateEvent = $.Event('preventDuplicateToken')
181
- duplicateEvent.token = {
228
+ var preventDuplicateEvent = $.Event('tokenfield:preventduplicate')
229
+ preventDuplicateEvent.token = {
182
230
  value: value,
183
231
  label: label
184
232
  }
185
- this.$element.trigger( duplicateEvent )
233
+ this.$element.trigger( preventDuplicateEvent )
186
234
  // Add duplicate warning class to existing token for 250ms
187
235
  var duplicate = this.$wrapper.find( '.token[data-value="' + value + '"]' ).addClass('duplicate')
188
236
  setTimeout(function() {
@@ -197,7 +245,7 @@
197
245
  .append('<a href="#" class="close" tabindex="-1">&times;</a>')
198
246
 
199
247
  // Insert token into HTML
200
- if (this.$input.hasClass('tt-query')) {
248
+ if (this.$input.hasClass('tt-input')) {
201
249
  this.$input.parent().before( token )
202
250
  } else {
203
251
  this.$input.before( token )
@@ -247,17 +295,17 @@
247
295
  _self.activate( token, e.shiftKey, e.shiftKey )
248
296
  })
249
297
  .on('dblclick', function (e) {
250
- if (_self.disabled) return false;
298
+ if (_self.disabled || !_self.options.allowEditing ) return false;
251
299
  _self.edit( token )
252
300
  })
253
301
 
254
302
  closeButton
255
303
  .on('click', $.proxy(this.remove, this))
256
304
 
257
- var afterCreateEvent = $.Event('afterCreateToken')
258
- afterCreateEvent.token = beforeCreateEvent.token
259
- afterCreateEvent.relatedTarget = token.get(0)
260
- this.$element.trigger( afterCreateEvent )
305
+ var createEvent = $.Event('tokenfield:createtoken')
306
+ createEvent.token = prepareEvent.token
307
+ createEvent.relatedTarget = token.get(0)
308
+ this.$element.trigger( createEvent )
261
309
 
262
310
  var changeEvent = $.Event('change')
263
311
  changeEvent.initiator = 'tokenfield'
@@ -280,6 +328,7 @@
280
328
 
281
329
  if (typeof tokens === 'string') {
282
330
  if (this._delimiters.length) {
331
+ // Split based on delimiters
283
332
  tokens = tokens.split( new RegExp( '[' + this._delimiters.join('') + ']' ) )
284
333
  } else {
285
334
  tokens = [tokens];
@@ -298,7 +347,7 @@
298
347
  var data = token.map(function() {
299
348
  var $token = $(this);
300
349
  return {
301
- value: $token.attr('data-value') || $token.find('.token-label').text(),
350
+ value: $token.attr('data-value'),
302
351
  label: $token.find('.token-label').text()
303
352
  }
304
353
  }).get();
@@ -321,7 +370,7 @@
321
370
  }
322
371
 
323
372
  , getTokensList: function(delimiter, beautify, active) {
324
- delimiter = delimiter || this._delimiters[0]
373
+ delimiter = delimiter || this._firstDelimiter
325
374
  beautify = ( typeof beautify !== 'undefined' && beautify !== null ) ? beautify : this.options.beautify
326
375
 
327
376
  var separator = delimiter + ( beautify && delimiter !== ' ' ? ' ' : '')
@@ -383,18 +432,9 @@
383
432
  return false
384
433
  })
385
434
  .on('typeahead:selected', function (e, datum, dataset) {
386
- var valueKey = 'value'
387
-
388
- // Get the actual valueKey for this dataset
389
- $.each(_self.$input.data('ttView').datasets, function (i, set) {
390
- if (set.name === dataset) {
391
- valueKey = set.valueKey
392
- }
393
- })
394
-
395
435
  // Create token
396
- if (_self.createToken( datum[valueKey] )) {
397
- _self.$input.typeahead('setQuery', '')
436
+ if (_self.createToken( datum )) {
437
+ _self.$input.typeahead('val', '')
398
438
  if (_self.$input.data( 'edit' )) {
399
439
  _self.unedit(true)
400
440
  }
@@ -402,7 +442,7 @@
402
442
  })
403
443
  .on('typeahead:autocompleted', function (e, datum, dataset) {
404
444
  _self.createToken( _self.$input.val() )
405
- _self.$input.typeahead('setQuery', '')
445
+ _self.$input.typeahead('val', '')
406
446
  if (_self.$input.data( 'edit' )) {
407
447
  _self.unedit(true)
408
448
  }
@@ -454,8 +494,8 @@
454
494
  if (this.$input.data('ui-autocomplete') && this.$input.data('ui-autocomplete').menu.element.find("li:has(a.ui-state-focus)").length) break
455
495
 
456
496
  // We will handle creating tokens from typeahead in typeahead events
457
- if (this.$input.hasClass('tt-query') && this.$wrapper.find('.tt-is-under-cursor').length ) break
458
- if (this.$input.hasClass('tt-query') && this.$wrapper.find('.tt-hint').val().length) break
497
+ if (this.$input.hasClass('tt-input') && this.$wrapper.find('.tt-cursor').length ) break
498
+ if (this.$input.hasClass('tt-input') && this.$wrapper.find('.tt-hint').val().length) break
459
499
 
460
500
  // Create token
461
501
  if (this.$input.is(document.activeElement) && this.$input.val().length || this.$input.data('edit')) {
@@ -465,6 +505,7 @@
465
505
  // Edit token
466
506
  if (e.keyCode === 13) {
467
507
  if (!this.$copyHelper.is(document.activeElement) || this.$wrapper.find('.token.active').length !== 1) break
508
+ if (!_self.options.allowEditing) break
468
509
  this.edit( this.$wrapper.find('.token.active') )
469
510
  }
470
511
  }
@@ -474,7 +515,7 @@
474
515
  if (_self.$input.val().length > 0) return
475
516
 
476
517
  direction += 'All'
477
- var token = _self.$input.hasClass('tt-query') ? _self.$input.parent()[direction]('.token:first') : _self.$input[direction]('.token:first')
518
+ var token = _self.$input.hasClass('tt-input') ? _self.$input.parent()[direction]('.token:first') : _self.$input[direction]('.token:first')
478
519
  if (!token.length) return
479
520
 
480
521
  _self.preventInputFocus = true
@@ -495,7 +536,7 @@
495
536
  if (_self.$input.is(document.activeElement)) {
496
537
  if (_self.$input.val().length > 0) return
497
538
 
498
- var token = _self.$input.hasClass('tt-query') ? _self.$input.parent()[direction + 'All']('.token:first') : _self.$input[direction + 'All']('.token:first')
539
+ var token = _self.$input.hasClass('tt-input') ? _self.$input.parent()[direction + 'All']('.token:first') : _self.$input[direction + 'All']('.token:first')
499
540
  if (!token.length) return
500
541
 
501
542
  _self.activate( token )
@@ -539,7 +580,7 @@
539
580
  if (this.$input.val().length || this.lastInputValue.length && this.lastKeyDown === 8) break
540
581
 
541
582
  this.preventDeactivation = true
542
- var prev = this.$input.hasClass('tt-query') ? this.$input.parent().prevAll('.token:first') : this.$input.prevAll('.token:first')
583
+ var prev = this.$input.hasClass('tt-input') ? this.$input.parent().prevAll('.token:first') : this.$input.prevAll('.token:first')
543
584
 
544
585
  if (!prev.length) break
545
586
 
@@ -613,10 +654,10 @@
613
654
  if (tokensBefore == this.getTokensList() && this.$input.val().length)
614
655
  return false // No tokens were added, do nothing (prevent form submit)
615
656
 
616
- if (this.$input.hasClass('tt-query')) {
657
+ if (this.$input.hasClass('tt-input')) {
617
658
  // Typeahead acts weird when simply setting input value to empty,
618
659
  // so we set the query to empty instead
619
- this.$input.typeahead('setQuery', '')
660
+ this.$input.typeahead('val', '')
620
661
  } else {
621
662
  this.$input.val('')
622
663
  }
@@ -737,23 +778,23 @@
737
778
  , label = token.find('.token-label').text()
738
779
 
739
780
  // Allow changing input value before editing
740
- var beforeEditEvent = $.Event('beforeEditToken')
741
- beforeEditEvent.token = {
781
+ var editEvent = $.Event('tokenfield:edittoken')
782
+ editEvent.token = {
742
783
  value: value,
743
784
  label: label
744
785
  }
745
- beforeEditEvent.relatedTarget = token.get(0)
746
- this.$element.trigger( beforeEditEvent )
786
+ editEvent.relatedTarget = token.get(0)
787
+ this.$element.trigger( editEvent )
747
788
 
748
- if (!beforeEditEvent.token) return
789
+ if (!editEvent.token) return
749
790
 
750
- value = beforeEditEvent.token.value
751
- label = beforeEditEvent.token.label
791
+ value = editEvent.token.value
792
+ label = editEvent.token.label
752
793
 
753
794
  token.find('.token-label').text(value)
754
795
  var tokenWidth = token.outerWidth()
755
796
 
756
- var $_input = this.$input.hasClass('tt-query') ? this.$input.parent() : this.$input
797
+ var $_input = this.$input.hasClass('tt-input') ? this.$input.parent() : this.$input
757
798
 
758
799
  token.replaceWith( $_input )
759
800
 
@@ -763,13 +804,16 @@
763
804
  .select()
764
805
  .data( 'edit', true )
765
806
  .width( tokenWidth )
807
+
808
+ this.update();
766
809
  }
767
810
 
768
811
  , unedit: function (focus) {
769
- var $_input = this.$input.hasClass('tt-query') ? this.$input.parent() : this.$input
812
+ var $_input = this.$input.hasClass('tt-input') ? this.$input.parent() : this.$input
770
813
  $_input.appendTo( this.$wrapper )
771
814
 
772
815
  this.$input.data('edit', false)
816
+ this.$mirror.text('')
773
817
 
774
818
  this.update()
775
819
 
@@ -799,7 +843,7 @@
799
843
 
800
844
  // Prepare events
801
845
 
802
- var removeEvent = $.Event('removeToken')
846
+ var removeEvent = $.Event('tokenfield:removetoken')
803
847
  removeEvent.token = this.getTokenData( token )
804
848
 
805
849
  var changeEvent = $.Event('change')
@@ -826,6 +870,9 @@
826
870
 
827
871
  , update: function (e) {
828
872
  var value = this.$input.val()
873
+ , inputLeftPadding = parseInt(this.$input.css('padding-left'), 10)
874
+ , inputRightPadding = parseInt(this.$input.css('padding-right'), 10)
875
+ , inputPadding = inputLeftPadding + inputRightPadding
829
876
 
830
877
  if (this.$input.data('edit')) {
831
878
 
@@ -846,9 +893,9 @@
846
893
  else {
847
894
  this.$input.css( 'width', this.options.minWidth + 'px' )
848
895
  if (this.textDirection === 'rtl') {
849
- return this.$input.width( this.$input.offset().left + this.$input.outerWidth() - this.$wrapper.offset().left - parseInt(this.$wrapper.css('padding-left'), 10) - 1 )
896
+ return this.$input.width( this.$input.offset().left + this.$input.outerWidth() - this.$wrapper.offset().left - parseInt(this.$wrapper.css('padding-left'), 10) - inputPadding - 1 )
850
897
  }
851
- this.$input.width( this.$wrapper.offset().left + this.$wrapper.width() + parseInt(this.$wrapper.css('padding-left'), 10) - this.$input.offset().left )
898
+ this.$input.width( this.$wrapper.offset().left + this.$wrapper.width() + parseInt(this.$wrapper.css('padding-left'), 10) - this.$input.offset().left - inputPadding )
852
899
  }
853
900
  }
854
901
 
@@ -885,6 +932,36 @@
885
932
  this.$wrapper.removeClass('disabled');
886
933
  }
887
934
 
935
+ , destroy: function() {
936
+ // Set field value
937
+ this.$element.val( this.getTokensList() );
938
+ // Restore styles and properties
939
+ this.$element.css( this.$element.data('original-styles') );
940
+ this.$element.prop( 'tabindex', this.$element.data('original-tabindex') );
941
+
942
+ // Re-route tokenfield labele to original input
943
+ var $label = $( 'label[for="' + this.$input.prop('id') + '"]' )
944
+ if ( $label.length ) {
945
+ $label.prop( 'for', this.$element.prop('id') )
946
+ }
947
+
948
+ // Move original element outside of tokenfield wrapper
949
+ this.$element.insertBefore( this.$wrapper );
950
+
951
+ // Remove tokenfield-related data
952
+ this.$element.removeData('original-styles');
953
+ this.$element.removeData('original-tabindex');
954
+ this.$element.removeData('bs.tokenfield');
955
+
956
+ // Remove tokenfield from DOM
957
+ this.$wrapper.remove();
958
+
959
+ var $_element = this.$element;
960
+ delete this;
961
+
962
+ return $_element;
963
+ }
964
+
888
965
  }
889
966
 
890
967
 
@@ -908,7 +985,7 @@
908
985
  args.shift()
909
986
  value = data[option].apply(data, args)
910
987
  } else {
911
- if (!data) $this.data('bs.tokenfield', (data = new Tokenfield(this, options)))
988
+ if (!data && typeof option !== 'string' && !param) $this.data('bs.tokenfield', (data = new Tokenfield(this, options)))
912
989
  }
913
990
  })
914
991
 
@@ -919,6 +996,7 @@
919
996
  minWidth: 60,
920
997
  minLength: 0,
921
998
  allowDuplicates: false,
999
+ allowEditing: true,
922
1000
  limit: 0,
923
1001
  autocomplete: {},
924
1002
  typeahead: {},
@@ -1,3 +1,32 @@
1
+ /*!
2
+ * bootstrap-tokenfield
3
+ * https://github.com/sliptree/bootstrap-tokenfield
4
+ * Copyright 2013-2014 Sliptree and other contributors; Licensed MIT
5
+ */
6
+ @-webkit-keyframes 'blink' {
7
+ 0% {
8
+ border-color: #ededed;
9
+ }
10
+ 100% {
11
+ border-color: #b94a48;
12
+ }
13
+ }
14
+ @-moz-keyframes 'blink' {
15
+ 0% {
16
+ border-color: #ededed;
17
+ }
18
+ 100% {
19
+ border-color: #b94a48;
20
+ }
21
+ }
22
+ @keyframes 'blink' {
23
+ 0% {
24
+ border-color: #ededed;
25
+ }
26
+ 100% {
27
+ border-color: #b94a48;
28
+ }
29
+ }
1
30
  .tokenfield {
2
31
  height: auto;
3
32
  min-height: 34px;
@@ -9,30 +38,16 @@
9
38
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, 0.6);
10
39
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, 0.6);
11
40
  }
12
- .has-warning .tokenfield.focus {
13
- border-color: #66512c;
14
- -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #c0a16b;
15
- box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #c0a16b;
16
- }
17
- .has-error .tokenfield.focus {
18
- border-color: #843534;
19
- -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ce8483;
20
- box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ce8483;
21
- }
22
- .has-success .tokenfield.focus {
23
- border-color: #2b542c;
24
- -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #67b168;
25
- box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #67b168;
26
- }
27
41
  .tokenfield .token {
28
- box-sizing: border-box;
42
+ -webkit-box-sizing: border-box;
29
43
  -moz-box-sizing: border-box;
30
- display: inline-block;
31
- border: 1px solid #d9d9d9;
32
- background-color: #ededed;
44
+ box-sizing: border-box;
33
45
  -webkit-border-radius: 3px;
34
46
  -moz-border-radius: 3px;
35
47
  border-radius: 3px;
48
+ display: inline-block;
49
+ border: 1px solid #d9d9d9;
50
+ background-color: #ededed;
36
51
  white-space: nowrap;
37
52
  margin: -1px 5px 5px 0;
38
53
  height: 22px;
@@ -47,36 +62,32 @@
47
62
  border-color: rgba(82, 168, 236, 0.8);
48
63
  }
49
64
  .tokenfield .token.duplicate {
50
- border-color: #b94a48;
51
- -webkit-animation-direction: normal;
52
- -webkit-animation-duration: 0.1s;
53
- -webkit-animation-iteration-count: infinite;
65
+ border-color: #ebccd1;
54
66
  -webkit-animation-name: blink;
67
+ animation-name: blink;
68
+ -webkit-animation-duration: 0.1s;
69
+ animation-duration: 0.1s;
70
+ -webkit-animation-direction: normal;
71
+ animation-direction: normal;
55
72
  -webkit-animation-timing-function: ease;
73
+ animation-timing-function: ease;
74
+ -webkit-animation-iteration-count: infinite;
75
+ animation-iteration-count: infinite;
56
76
  }
57
- @-webkit-keyframes 'blink' {
58
- 0% {
59
- border-color: #ededed;
60
- }
61
- 100% {
62
- border-color: #b94a48;
63
- }
64
- }
65
- @-moz-keyframes 'blink' {
66
- 0% {
67
- border-color: #ededed;
68
- }
69
- 100% {
70
- border-color: #b94a48;
71
- }
77
+ .tokenfield .token.invalid {
78
+ background: none;
79
+ border: 1px solid transparent;
80
+ -webkit-border-radius: 0;
81
+ -moz-border-radius: 0;
82
+ border-radius: 0;
83
+ border-bottom: 1px dotted #d9534f;
72
84
  }
73
- @keyframes 'blink' {
74
- 0% {
75
- border-color: #ededed;
76
- }
77
- 100% {
78
- border-color: #b94a48;
79
- }
85
+ .tokenfield .token.invalid.active {
86
+ background: #ededed;
87
+ border: 1px solid #ededed;
88
+ -webkit-border-radius: 3px;
89
+ -moz-border-radius: 3px;
90
+ border-radius: 3px;
80
91
  }
81
92
  .tokenfield .token .token-label {
82
93
  display: inline-block;
@@ -102,50 +113,50 @@
102
113
  width: 60px;
103
114
  min-width: 60px;
104
115
  border: 0;
105
- -webkit-box-shadow: none;
106
- -moz-box-shadow: none;
107
- box-shadow: none;
108
116
  height: 20px;
109
117
  padding: 0;
110
118
  margin-bottom: 6px;
119
+ -webkit-box-shadow: none;
120
+ box-shadow: none;
111
121
  }
112
122
  .tokenfield .token-input:focus {
113
123
  border-color: transparent;
114
124
  outline: 0;
115
125
  /* IE6-9 */
116
126
  -webkit-box-shadow: none;
117
- -moz-box-shadow: none;
118
127
  box-shadow: none;
119
128
  }
120
- /* Invalid token */
121
- .tokenfield .token.invalid {
122
- background: none;
123
- border: 1px solid transparent;
124
- -webkit-border-radius: 0;
125
- -moz-border-radius: 0;
126
- border-radius: 0;
127
- border-bottom: 1px dotted #b94a48;
128
- }
129
- .tokenfield .token.invalid.active {
130
- background: #ededed;
131
- border: 1px solid #ededed;
132
- -webkit-border-radius: 3px;
133
- -moz-border-radius: 3px;
134
- border-radius: 3px;
135
- }
136
- /* Disabled tokenfield */
137
129
  .tokenfield.disabled {
138
130
  cursor: not-allowed;
139
- background-color: #eee;
131
+ background-color: #eeeeee;
140
132
  }
141
133
  .tokenfield.disabled .token-input {
142
134
  cursor: not-allowed;
143
135
  }
144
- .tokenfield.disabled .close:hover {
136
+ .tokenfield.disabled .token:hover {
137
+ cursor: not-allowed;
138
+ border-color: #d9d9d9;
139
+ }
140
+ .tokenfield.disabled .token:hover .close {
145
141
  cursor: not-allowed;
146
142
  opacity: 0.2;
143
+ filter: alpha(opacity=20);
144
+ }
145
+ .has-warning .tokenfield.focus {
146
+ border-color: #66512c;
147
+ -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #c0a16b;
148
+ box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #c0a16b;
149
+ }
150
+ .has-error .tokenfield.focus {
151
+ border-color: #843534;
152
+ -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ce8483;
153
+ box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ce8483;
154
+ }
155
+ .has-success .tokenfield.focus {
156
+ border-color: #2b542c;
157
+ -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #67b168;
158
+ box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #67b168;
147
159
  }
148
- /* Different sizes */
149
160
  .tokenfield.input-sm,
150
161
  .input-group-sm .tokenfield {
151
162
  min-height: 30px;
@@ -185,7 +196,6 @@
185
196
  margin-bottom: 6px;
186
197
  vertical-align: top;
187
198
  }
188
- /* RTL */
189
199
  .tokenfield.rtl {
190
200
  direction: rtl;
191
201
  text-align: right;
@@ -1,10 +1,15 @@
1
+ /*!
2
+ * bootstrap-tokenfield
3
+ * https://github.com/sliptree/bootstrap-tokenfield
4
+ * Copyright 2013-2014 Sliptree and other contributors; Licensed MIT
5
+ */
1
6
  /* General Typeahead styling, from http://jsfiddle.net/ragulka/Dy9au/1/ */
2
7
  .twitter-typeahead {
3
8
  width: 100%;
4
9
  position: relative;
5
10
  vertical-align: top;
6
11
  }
7
- .twitter-typeahead .tt-query,
12
+ .twitter-typeahead .tt-input,
8
13
  .twitter-typeahead .tt-hint {
9
14
  margin: 0;
10
15
  width: 100%;
@@ -16,61 +21,61 @@
16
21
  z-index: 1;
17
22
  border: 1px solid transparent;
18
23
  }
19
- .twitter-typeahead .tt-query {
24
+ .twitter-typeahead .tt-input {
20
25
  color: #555555;
21
26
  z-index: 2;
22
27
  }
23
- .twitter-typeahead .tt-query,
28
+ .twitter-typeahead .tt-input,
24
29
  .twitter-typeahead .tt-hint {
25
30
  height: 34px;
26
31
  padding: 6px 12px;
27
32
  font-size: 14px;
28
33
  line-height: 1.428571429;
29
34
  }
30
- .twitter-typeahead .input-sm.tt-query,
35
+ .twitter-typeahead .input-sm.tt-input,
31
36
  .twitter-typeahead .hint-sm.tt-hint {
32
37
  border-radius: 3px;
33
38
  }
34
- .twitter-typeahead .input-lg.tt-query,
39
+ .twitter-typeahead .input-lg.tt-input,
35
40
  .twitter-typeahead .hint-lg.tt-hint {
36
41
  border-radius: 6px;
37
42
  }
38
- .input-group .twitter-typeahead:first-child .tt-query,
43
+ .input-group .twitter-typeahead:first-child .tt-input,
39
44
  .input-group .twitter-typeahead:first-child .tt-hint {
40
45
  border-radius: 4px 0 0 4px !important;
41
46
  }
42
- .input-group .twitter-typeahead:last-child .tt-query,
47
+ .input-group .twitter-typeahead:last-child .tt-input,
43
48
  .input-group .twitter-typeahead:last-child .tt-hint {
44
49
  border-radius: 0 4px 4px 0 !important;
45
50
  }
46
- .input-group.input-group-sm .twitter-typeahead:first-child .tt-query,
51
+ .input-group.input-group-sm .twitter-typeahead:first-child .tt-input,
47
52
  .input-group.input-group-sm .twitter-typeahead:first-child .tt-hint {
48
53
  border-radius: 3px 0 0 3px !important;
49
54
  }
50
- .input-group.input-group-sm .twitter-typeahead:last-child .tt-query,
55
+ .input-group.input-group-sm .twitter-typeahead:last-child .tt-input,
51
56
  .input-group.input-group-sm .twitter-typeahead:last-child .tt-hint {
52
57
  border-radius: 0 3px 3px 0 !important;
53
58
  }
54
- .input-sm.tt-query,
59
+ .input-sm.tt-input,
55
60
  .hint-sm.tt-hint,
56
- .input-group.input-group-sm .tt-query,
61
+ .input-group.input-group-sm .tt-input,
57
62
  .input-group.input-group-sm .tt-hint {
58
63
  height: 30px;
59
64
  padding: 5px 10px;
60
65
  font-size: 12px;
61
66
  line-height: 1.5;
62
67
  }
63
- .input-group.input-group-lg .twitter-typeahead:first-child .tt-query,
68
+ .input-group.input-group-lg .twitter-typeahead:first-child .tt-input,
64
69
  .input-group.input-group-lg .twitter-typeahead:first-child .tt-hint {
65
70
  border-radius: 6px 0 0 6px !important;
66
71
  }
67
- .input-group.input-group-lg .twitter-typeahead:last-child .tt-query,
72
+ .input-group.input-group-lg .twitter-typeahead:last-child .tt-input,
68
73
  .input-group.input-group-lg .twitter-typeahead:last-child .tt-hint {
69
74
  border-radius: 0 6px 6px 0 !important;
70
75
  }
71
- .input-lg.tt-query,
76
+ .input-lg.tt-input,
72
77
  .hint-lg.tt-hint,
73
- .input-group.input-group-lg .tt-query,
78
+ .input-group.input-group-lg .tt-input,
74
79
  .input-group.input-group-lg .tt-hint {
75
80
  height: 45px;
76
81
  padding: 10px 16px;
@@ -98,14 +103,14 @@
98
103
  display: block;
99
104
  padding: 3px 20px;
100
105
  }
101
- .tt-suggestion.tt-is-under-cursor {
106
+ .tt-suggestion.tt-cursor {
102
107
  color: #262626;
103
108
  background-image: -webkit-linear-gradient(top, #f5f5f5 0%, #e8e8e8 100%);
104
109
  background-image: linear-gradient(to bottom, #f5f5f5 0%, #e8e8e8 100%);
105
110
  background-repeat: repeat-x;
106
111
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5', endColorstr='#ffe8e8e8', GradientType=0);
107
112
  }
108
- .tt-suggestion.tt-is-under-cursor a {
113
+ .tt-suggestion.tt-cursor a {
109
114
  color: #ffffff;
110
115
  }
111
116
  .tt-suggestion p {
@@ -117,16 +122,15 @@
117
122
  }
118
123
  .tokenfield .twitter-typeahead .tt-hint {
119
124
  padding: 0;
120
- margin-left: -1px;
121
125
  height: 20px;
122
126
  }
123
- .tokenfield.input-sm .twitter-typeahead .tt-query,
127
+ .tokenfield.input-sm .twitter-typeahead .tt-input,
124
128
  .tokenfield.input-sm .twitter-typeahead .tt-hint {
125
129
  height: 18px;
126
130
  font-size: 12px;
127
131
  line-height: 1.5;
128
132
  }
129
- .tokenfield.input-lg .twitter-typeahead .tt-query,
133
+ .tokenfield.input-lg .twitter-typeahead .tt-input,
130
134
  .tokenfield.input-lg .twitter-typeahead .tt-hint {
131
135
  height: 23px;
132
136
  font-size: 18px;
metadata CHANGED
@@ -1,14 +1,14 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: bootstrap_tokenfield_rails
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.0.5
4
+ version: 0.0.6
5
5
  platform: ruby
6
6
  authors:
7
7
  - Akash Devaraju
8
8
  autorequire:
9
9
  bindir: bin
10
10
  cert_chain: []
11
- date: 2014-01-14 00:00:00.000000000 Z
11
+ date: 2014-03-16 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: bundler
@@ -48,9 +48,9 @@ extra_rdoc_files: []
48
48
  files:
49
49
  - lib/bootstrap_tokenfield_rails.rb
50
50
  - lib/bootstrap_tokenfield_rails/version.rb
51
+ - vendor/assets/javascripts/bootstrap-tokenfield.js
51
52
  - vendor/assets/stylesheets/bootstrap-tokenfield.css
52
53
  - vendor/assets/stylesheets/tokenfield-typeahead.css
53
- - vendor/assets/javascripts/bootstrap-tokenfield.js
54
54
  homepage: http://www.icicletech.com/open-source-software/bootstrap-tokenfield-rails
55
55
  licenses:
56
56
  - MIT
@@ -71,9 +71,8 @@ required_rubygems_version: !ruby/object:Gem::Requirement
71
71
  version: '0'
72
72
  requirements: []
73
73
  rubyforge_project:
74
- rubygems_version: 2.1.11
74
+ rubygems_version: 2.2.1
75
75
  signing_key:
76
76
  specification_version: 4
77
77
  summary: A jQuery tagging / tokenizer input plugin for Twitter's Bootstrap
78
78
  test_files: []
79
- has_rdoc: