autowidthjs 1.0 → 1.1
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/README.md +13 -2
- data/autowidthjs.gemspec +4 -4
- data/lib/autowidthjs/version.rb +1 -1
- data/vendor/assets/javascripts/jquery.autowidth.js +53 -61
- metadata +15 -13
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA1:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 345c2a8c89751ea94c5f2d1b9d04c9425bcc70c3
|
4
|
+
data.tar.gz: d227fb25584fe4dd62a967b6c31d811378ad5539
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 4020734cbe4467ec7eced21157a2093509acb05c4cf350d05c70b34b62b130751c16c6c22dc81f230f8c29789a4bfb06308c90f1e2ca54ec6ecbf75e68d4eae7
|
7
|
+
data.tar.gz: e2db0d1c6c5f2dd22f18824177d18ece051f6896fa2172c588e6b86cd2dc52ff45945a5422e43a1bd8d90f322c3b2cdc7b78e7bbb8ed0372f4057f7ab6b0577c
|
data/README.md
CHANGED
@@ -1,6 +1,7 @@
|
|
1
1
|
# Autowidthjs
|
2
2
|
|
3
|
-
|
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
|
-
|
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
|
12
|
-
spec.summary = "Automatically sets
|
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,62 +1,54 @@
|
|
1
|
-
|
2
|
-
|
3
|
-
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
|
37
|
-
|
38
|
-
|
39
|
-
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
|
46
|
-
|
47
|
-
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
|
52
|
-
|
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, '&').replace(/\s/g, ' ').replace(/</g, '<').replace(/>/g, '>');
|
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.
|
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-
|
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
|
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.
|
79
|
+
rubygems_version: 2.2.1
|
78
80
|
signing_key:
|
79
81
|
specification_version: 4
|
80
|
-
summary: Automatically sets
|
82
|
+
summary: Automatically sets the width of the object *input*.
|
81
83
|
test_files: []
|