autowidthjs 1.0 → 1.1

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.
Files changed (6) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +13 -2
  3. data/autowidthjs.gemspec +4 -4
  4. data/lib/autowidthjs/version.rb +1 -1
  5. data/vendor/assets/javascripts/jquery.autowidth.js +53 -61
  6. metadata +15 -13
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA1:
3
- metadata.gz: 27b22cfa715624c217c513161a641e4da97e0f00
4
- data.tar.gz: 8caa74d5dbb5b77748c762581d84bb339007a692
3
+ metadata.gz: 345c2a8c89751ea94c5f2d1b9d04c9425bcc70c3
4
+ data.tar.gz: d227fb25584fe4dd62a967b6c31d811378ad5539
5
5
  SHA512:
6
- metadata.gz: e1bf3c03a251a1dd2818e83364d1a0eacd9794ccea26dc1738b3a0a3b04ac1ec2609e136c5af913cd7479d8b1506692b1aa9e3520eaf17548d97f91f97aaa84a
7
- data.tar.gz: fad7094e57b86aaaacce33a1b7f30c385d928c7487d6dfd42e3e73bbf5be13e97a1b1e8128e7cd140f04d305caa6399e4751bc68ae09abe641c5bbac0665bea5
6
+ metadata.gz: 4020734cbe4467ec7eced21157a2093509acb05c4cf350d05c70b34b62b130751c16c6c22dc81f230f8c29789a4bfb06308c90f1e2ca54ec6ecbf75e68d4eae7
7
+ data.tar.gz: e2db0d1c6c5f2dd22f18824177d18ece051f6896fa2172c588e6b86cd2dc52ff45945a5422e43a1bd8d90f322c3b2cdc7b78e7bbb8ed0372f4057f7ab6b0577c
data/README.md CHANGED
@@ -1,6 +1,7 @@
1
1
  # Autowidthjs
2
2
 
3
- TODO: Write a gem description
3
+ Automatically adjusts the width of the object *input* to the width of the content.
4
+ DEMO: http://jsbin.com/ahaxe
4
5
 
5
6
  ## Installation
6
7
 
@@ -18,7 +19,17 @@ Or install it yourself as:
18
19
 
19
20
  ## Usage
20
21
 
21
- TODO: Write usage instructions here
22
+ Add to your application.js:
23
+
24
+ //= require jquery.autowidth
25
+
26
+ And to your *.js:
27
+
28
+ $('input#yourinput').autoGrowInput({
29
+ comfortZone: 50, // Zone after text in input
30
+ minWidth: 200, // Minimal input width
31
+ maxWidth: 2000 // Maximal input width
32
+ });
22
33
 
23
34
  ## Contributing
24
35
 
data/autowidthjs.gemspec CHANGED
@@ -6,11 +6,11 @@ require 'autowidthjs/version'
6
6
  Gem::Specification.new do |spec|
7
7
  spec.name = "autowidthjs"
8
8
  spec.version = Autowidthjs::VERSION
9
- spec.authors = ["niki-timofe"]
9
+ spec.authors = ["niki-timofe", "@padolsey"]
10
10
  spec.email = ["niki-timofe@ya.ru"]
11
- spec.description = "Automatically sets input width"
12
- spec.summary = "Automatically sets input width"
13
- spec.homepage = ""
11
+ spec.description = "Automatically adjusts the width of the object *input* to the width of the content."
12
+ spec.summary = "Automatically sets the width of the object *input*."
13
+ spec.homepage = "http://stackoverflow.com/questions/931207/is-there-a-jquery-autogrow-plugin-for-text-fields"
14
14
  spec.license = "MIT"
15
15
 
16
16
  spec.files = `git ls-files`.split($/)
data/lib/autowidthjs/version.rb CHANGED
@@ -1,3 +1,3 @@
1
1
  module Autowidthjs
2
- VERSION = "1.0"
2
+ VERSION = "1.1"
3
3
  end
data/vendor/assets/javascripts/jquery.autowidth.js CHANGED
@@ -1,62 +1,54 @@
1
- (function($){
2
-
3
- // jQuery autoGrowInput plugin by James Padolsey
4
- // See related thread: http://stackoverflow.com/questions/931207/is-there-a-jquery-autogrow-plugin-for-text-fields
5
-
6
- $.fn.autoGrowInput = function(o) {
7
-
8
- o = $.extend({
9
- maxWidth: 1000,
10
- minWidth: 0,
11
- comfortZone: 70
12
- }, o);
13
-
14
- this.filter('input:text').each(function(){
15
-
16
- var minWidth = o.minWidth || $(this).width(),
17
- val = '',
18
- input = $(this),
19
- testSubject = $('<tester/>').css({
20
- position: 'absolute',
21
- top: -9999,
22
- left: -9999,
23
- width: 'auto',
24
- fontSize: input.css('fontSize'),
25
- fontFamily: input.css('fontFamily'),
26
- fontWeight: input.css('fontWeight'),
27
- letterSpacing: input.css('letterSpacing'),
28
- whiteSpace: 'nowrap'
29
- }),
30
- check = function() {
31
-
32
- if (val === (val = input.val())) {return;}
33
-
34
- // Enter new content into testSubject
35
- var escaped = val.replace(/&/g, '&amp;').replace(/\s/g,'&nbsp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
36
- testSubject.html(escaped);
37
-
38
- // Calculate new width + whether to change
39
- var testerWidth = testSubject.width(),
40
- newWidth = (testerWidth + o.comfortZone) >= minWidth ? testerWidth + o.comfortZone : minWidth,
41
- currentWidth = input.width(),
42
- isValidWidthChange = (newWidth < currentWidth && newWidth >= minWidth)
43
- || (newWidth > minWidth && newWidth < o.maxWidth);
44
-
45
- // Animate width
46
- if (isValidWidthChange) {
47
- input.width(newWidth);
48
- }
49
-
50
- };
51
-
52
- testSubject.insertAfter(input);
53
-
54
- check();
55
-
56
- });
57
-
58
- return this;
59
-
60
- };
61
-
1
+ // jQuery autoGrowInput plugin by James Padolsey
2
+ // See related thread: http://stackoverflow.com/questions/931207/is-there-a-jquery-autogrow-plugin-for-text-fields
3
+
4
+
5
+ (function($) {
6
+ $.fn.autoGrowInput = function(o) {
7
+ o = $.extend({
8
+ maxWidth: 1000,
9
+ minWidth: 10,
10
+ comfortZone: 0
11
+ }, o);
12
+
13
+ this.filter('input:text').each(function() {
14
+ var minWidth = o.minWidth || $(this).width(),
15
+ val = '',
16
+ input = $(this),
17
+ testSubject = $('<tester/>').css({
18
+ position: 'absolute',
19
+ top: -9999,
20
+ left: -9999,
21
+ width: 'auto',
22
+ fontSize: input.css('fontSize'),
23
+ fontFamily: input.css('fontFamily'),
24
+ fontWeight: input.css('fontWeight'),
25
+ letterSpacing: input.css('letterSpacing'),
26
+ whiteSpace: 'nowrap'
27
+ }),
28
+ check = function() {
29
+ if (val === (val = input.val())) {
30
+ return;
31
+ }
32
+
33
+ // Enter new content into testSubject
34
+ var escaped = val.replace(/&/g, '&amp;').replace(/\s/g, '&nbsp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
35
+ testSubject.html(escaped);
36
+
37
+ // Calculate new width + whether to change
38
+ var testerWidth = testSubject.width(),
39
+ newWidth = (testerWidth + o.comfortZone) >= minWidth ? testerWidth + o.comfortZone : minWidth,
40
+ currentWidth = input.width(),
41
+ isValidWidthChange = (newWidth < currentWidth && newWidth >= minWidth) || (newWidth > minWidth && newWidth < o.maxWidth);
42
+
43
+ // Animate width
44
+ if (isValidWidthChange) {
45
+ input.width(newWidth);
46
+ }
47
+ };
48
+ testSubject.insertAfter(input);
49
+ $(this).bind('keyup keydown blur update', check);
50
+ check();
51
+ });
52
+ return this;
53
+ };
62
54
  })(jQuery);
metadata CHANGED
@@ -1,51 +1,53 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: autowidthjs
3
3
  version: !ruby/object:Gem::Version
4
- version: '1.0'
4
+ version: '1.1'
5
5
  platform: ruby
6
6
  authors:
7
7
  - niki-timofe
8
+ - "@padolsey"
8
9
  autorequire:
9
10
  bindir: bin
10
11
  cert_chain: []
11
- date: 2014-01-25 00:00:00.000000000 Z
12
+ date: 2014-01-27 00:00:00.000000000 Z
12
13
  dependencies:
13
14
  - !ruby/object:Gem::Dependency
14
15
  name: bundler
15
16
  requirement: !ruby/object:Gem::Requirement
16
17
  requirements:
17
- - - ~>
18
+ - - "~>"
18
19
  - !ruby/object:Gem::Version
19
20
  version: '1.3'
20
21
  type: :development
21
22
  prerelease: false
22
23
  version_requirements: !ruby/object:Gem::Requirement
23
24
  requirements:
24
- - - ~>
25
+ - - "~>"
25
26
  - !ruby/object:Gem::Version
26
27
  version: '1.3'
27
28
  - !ruby/object:Gem::Dependency
28
29
  name: rake
29
30
  requirement: !ruby/object:Gem::Requirement
30
31
  requirements:
31
- - - '>='
32
+ - - ">="
32
33
  - !ruby/object:Gem::Version
33
34
  version: '0'
34
35
  type: :development
35
36
  prerelease: false
36
37
  version_requirements: !ruby/object:Gem::Requirement
37
38
  requirements:
38
- - - '>='
39
+ - - ">="
39
40
  - !ruby/object:Gem::Version
40
41
  version: '0'
41
- description: Automatically sets input width
42
+ description: Automatically adjusts the width of the object *input* to the width of
43
+ the content.
42
44
  email:
43
45
  - niki-timofe@ya.ru
44
46
  executables: []
45
47
  extensions: []
46
48
  extra_rdoc_files: []
47
49
  files:
48
- - .gitignore
50
+ - ".gitignore"
49
51
  - Gemfile
50
52
  - LICENSE.txt
51
53
  - README.md
@@ -54,7 +56,7 @@ files:
54
56
  - lib/autowidthjs.rb
55
57
  - lib/autowidthjs/version.rb
56
58
  - vendor/assets/javascripts/jquery.autowidth.js
57
- homepage: ''
59
+ homepage: http://stackoverflow.com/questions/931207/is-there-a-jquery-autogrow-plugin-for-text-fields
58
60
  licenses:
59
61
  - MIT
60
62
  metadata: {}
@@ -64,18 +66,18 @@ require_paths:
64
66
  - lib
65
67
  required_ruby_version: !ruby/object:Gem::Requirement
66
68
  requirements:
67
- - - '>='
69
+ - - ">="
68
70
  - !ruby/object:Gem::Version
69
71
  version: '0'
70
72
  required_rubygems_version: !ruby/object:Gem::Requirement
71
73
  requirements:
72
- - - '>='
74
+ - - ">="
73
75
  - !ruby/object:Gem::Version
74
76
  version: '0'
75
77
  requirements: []
76
78
  rubyforge_project:
77
- rubygems_version: 2.0.5
79
+ rubygems_version: 2.2.1
78
80
  signing_key:
79
81
  specification_version: 4
80
- summary: Automatically sets input width
82
+ summary: Automatically sets the width of the object *input*.
81
83
  test_files: []