elastic-textarea 1.0.0
Sign up to get free protection for your applications and to get access to all the features.
- data/.gitignore +18 -0
- data/Gemfile +4 -0
- data/LICENSE +22 -0
- data/README.md +34 -0
- data/Rakefile +2 -0
- data/elastic-textarea.gemspec +17 -0
- data/lib/elastic-textarea.rb +14 -0
- data/lib/elastic-textarea/engine.rb +9 -0
- data/lib/elastic-textarea/form_helper.rb +17 -0
- data/lib/elastic-textarea/version.rb +5 -0
- data/vendor/assets/javascripts/elastic-textarea/elastic.js +162 -0
- data/vendor/assets/javascripts/elastic-textarea/index.js +7 -0
- metadata +57 -0
data/.gitignore
ADDED
data/Gemfile
ADDED
data/LICENSE
ADDED
@@ -0,0 +1,22 @@
|
|
1
|
+
Copyright (c) 2012 Mark McConachie
|
2
|
+
|
3
|
+
MIT License
|
4
|
+
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining
|
6
|
+
a copy of this software and associated documentation files (the
|
7
|
+
"Software"), to deal in the Software without restriction, including
|
8
|
+
without limitation the rights to use, copy, modify, merge, publish,
|
9
|
+
distribute, sublicense, and/or sell copies of the Software, and to
|
10
|
+
permit persons to whom the Software is furnished to do so, subject to
|
11
|
+
the following conditions:
|
12
|
+
|
13
|
+
The above copyright notice and this permission notice shall be
|
14
|
+
included in all copies or substantial portions of the Software.
|
15
|
+
|
16
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
17
|
+
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
|
18
|
+
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
|
19
|
+
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
|
20
|
+
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
|
21
|
+
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
|
22
|
+
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
data/README.md
ADDED
@@ -0,0 +1,34 @@
|
|
1
|
+
# Elastic::Textarea
|
2
|
+
|
3
|
+
Makes elastic textarea's which grow and shrink to fit the text included in them.
|
4
|
+
Includes JavaScript by [Jan Jarfalk](http://unwrongest.com/projects/elastic/).
|
5
|
+
|
6
|
+
Requires rails >= 3.1
|
7
|
+
|
8
|
+
## Installation
|
9
|
+
|
10
|
+
Add this line to your application's Gemfile:
|
11
|
+
|
12
|
+
gem 'elastic-textarea'
|
13
|
+
|
14
|
+
And then execute:
|
15
|
+
|
16
|
+
$ bundle
|
17
|
+
|
18
|
+
## Usage
|
19
|
+
|
20
|
+
In your form user elastic_text_area where you would use a standard text area.
|
21
|
+
Accepts all the same options as the standard text_area.
|
22
|
+
|
23
|
+
<div class="field">
|
24
|
+
<%= f.label :description %><br />
|
25
|
+
<%= f.elastic_text_area :description %>
|
26
|
+
</div>
|
27
|
+
|
28
|
+
## Contributing
|
29
|
+
|
30
|
+
1. Fork it
|
31
|
+
2. Create your feature branch (`git checkout -b my-new-feature`)
|
32
|
+
3. Commit your changes (`git commit -am 'Added some feature'`)
|
33
|
+
4. Push to the branch (`git push origin my-new-feature`)
|
34
|
+
5. Create new Pull Request
|
data/Rakefile
ADDED
@@ -0,0 +1,17 @@
|
|
1
|
+
# -*- encoding: utf-8 -*-
|
2
|
+
require File.expand_path('../lib/elastic-textarea/version', __FILE__)
|
3
|
+
|
4
|
+
Gem::Specification.new do |gem|
|
5
|
+
gem.authors = ["Mark McConachie"]
|
6
|
+
gem.email = ["mark@markmcconachie.com"]
|
7
|
+
gem.description = %q{makes textarea's grow and shrink to fit contents}
|
8
|
+
gem.summary = %q{makes textarea's grow and shrink to fit contents}
|
9
|
+
gem.homepage = "https://github.com/markmcconachie/elastic-textareas"
|
10
|
+
|
11
|
+
gem.files = `git ls-files`.split($\)
|
12
|
+
gem.executables = gem.files.grep(%r{^bin/}).map{ |f| File.basename(f) }
|
13
|
+
gem.test_files = gem.files.grep(%r{^(test|spec|features)/})
|
14
|
+
gem.name = "elastic-textarea"
|
15
|
+
gem.require_paths = ["lib"]
|
16
|
+
gem.version = Elastic::Textarea::VERSION
|
17
|
+
end
|
@@ -0,0 +1,14 @@
|
|
1
|
+
require "elastic-textarea/version"
|
2
|
+
require "elastic-textarea/engine"
|
3
|
+
require "elastic-textarea/form_helper"
|
4
|
+
|
5
|
+
module Elastic
|
6
|
+
module Textarea
|
7
|
+
class Railtie < Rails::Railtie
|
8
|
+
initializer "ElasticTextarea" do
|
9
|
+
ActionView::Helpers::FormHelper.send(:include, Elastic::Textarea::FormHelper)
|
10
|
+
ActionView::Helpers::FormBuilder.send(:include, Elastic::Textarea::FormBuilder)
|
11
|
+
end
|
12
|
+
end
|
13
|
+
end
|
14
|
+
end
|
@@ -0,0 +1,17 @@
|
|
1
|
+
module Elastic
|
2
|
+
module Textarea
|
3
|
+
module FormHelper
|
4
|
+
def elastic_text_area(object_name, method, options = {})
|
5
|
+
options.merge!({:class => "elastic"}) { |key, v1, v2| "#{v1} #{v2}" }
|
6
|
+
options.merge!({:rows => 5}) { |key, v1, v2| v1 }
|
7
|
+
text_area(object_name, method, options)
|
8
|
+
end
|
9
|
+
end
|
10
|
+
end
|
11
|
+
end
|
12
|
+
|
13
|
+
module Elastic::Textarea::FormBuilder
|
14
|
+
def elastic_text_area(method, options = {}, &block)
|
15
|
+
@template.elastic_text_area(@object_name, method, objectify_options(options), &block)
|
16
|
+
end
|
17
|
+
end
|
@@ -0,0 +1,162 @@
|
|
1
|
+
/**
|
2
|
+
* @name Elastic
|
3
|
+
* @descripton Elastic is jQuery plugin that grow and shrink your textareas automatically
|
4
|
+
* @version 1.6.11
|
5
|
+
* @requires jQuery 1.2.6+
|
6
|
+
*
|
7
|
+
* @author Jan Jarfalk
|
8
|
+
* @author-email jan.jarfalk@unwrongest.com
|
9
|
+
* @author-website http://www.unwrongest.com
|
10
|
+
*
|
11
|
+
* @licence MIT License - http://www.opensource.org/licenses/mit-license.php
|
12
|
+
*/
|
13
|
+
|
14
|
+
(function($){
|
15
|
+
jQuery.fn.extend({
|
16
|
+
elastic: function() {
|
17
|
+
|
18
|
+
// We will create a div clone of the textarea
|
19
|
+
// by copying these attributes from the textarea to the div.
|
20
|
+
var mimics = [
|
21
|
+
'paddingTop',
|
22
|
+
'paddingRight',
|
23
|
+
'paddingBottom',
|
24
|
+
'paddingLeft',
|
25
|
+
'fontSize',
|
26
|
+
'lineHeight',
|
27
|
+
'fontFamily',
|
28
|
+
'width',
|
29
|
+
'fontWeight',
|
30
|
+
'border-top-width',
|
31
|
+
'border-right-width',
|
32
|
+
'border-bottom-width',
|
33
|
+
'border-left-width',
|
34
|
+
'borderTopStyle',
|
35
|
+
'borderTopColor',
|
36
|
+
'borderRightStyle',
|
37
|
+
'borderRightColor',
|
38
|
+
'borderBottomStyle',
|
39
|
+
'borderBottomColor',
|
40
|
+
'borderLeftStyle',
|
41
|
+
'borderLeftColor'
|
42
|
+
];
|
43
|
+
|
44
|
+
return this.each( function() {
|
45
|
+
|
46
|
+
// Elastic only works on textareas
|
47
|
+
if ( this.type !== 'textarea' ) {
|
48
|
+
return false;
|
49
|
+
}
|
50
|
+
|
51
|
+
var $textarea = jQuery(this),
|
52
|
+
$twin = jQuery('<div />').css({
|
53
|
+
'position' : 'absolute',
|
54
|
+
'display' : 'none',
|
55
|
+
'word-wrap' : 'break-word',
|
56
|
+
'white-space' :'pre-wrap'
|
57
|
+
}),
|
58
|
+
lineHeight = parseInt($textarea.css('line-height'),10) || parseInt($textarea.css('font-size'),'10'),
|
59
|
+
minheight = parseInt($textarea.css('height'),10) || lineHeight*3,
|
60
|
+
maxheight = parseInt($textarea.css('max-height'),10) || Number.MAX_VALUE,
|
61
|
+
goalheight = 0;
|
62
|
+
|
63
|
+
// Opera returns max-height of -1 if not set
|
64
|
+
if (maxheight < 0) { maxheight = Number.MAX_VALUE; }
|
65
|
+
|
66
|
+
// Append the twin to the DOM
|
67
|
+
// We are going to meassure the height of this, not the textarea.
|
68
|
+
$twin.appendTo($textarea.parent());
|
69
|
+
|
70
|
+
// Copy the essential styles (mimics) from the textarea to the twin
|
71
|
+
var i = mimics.length;
|
72
|
+
while(i--){
|
73
|
+
$twin.css(mimics[i].toString(),$textarea.css(mimics[i].toString()));
|
74
|
+
}
|
75
|
+
|
76
|
+
// Updates the width of the twin. (solution for textareas with widths in percent)
|
77
|
+
function setTwinWidth(){
|
78
|
+
var curatedWidth = Math.floor(parseInt($textarea.width(),10));
|
79
|
+
if($twin.width() !== curatedWidth){
|
80
|
+
$twin.css({'width': curatedWidth + 'px'});
|
81
|
+
|
82
|
+
// Update height of textarea
|
83
|
+
update(true);
|
84
|
+
}
|
85
|
+
}
|
86
|
+
|
87
|
+
// Sets a given height and overflow state on the textarea
|
88
|
+
function setHeightAndOverflow(height, overflow){
|
89
|
+
|
90
|
+
var curratedHeight = Math.floor(parseInt(height,10));
|
91
|
+
if($textarea.height() !== curratedHeight){
|
92
|
+
$textarea.css({'height': curratedHeight + 'px','overflow':overflow});
|
93
|
+
}
|
94
|
+
}
|
95
|
+
|
96
|
+
// This function will update the height of the textarea if necessary
|
97
|
+
function update(forced) {
|
98
|
+
|
99
|
+
// Get curated content from the textarea.
|
100
|
+
var textareaContent = $textarea.val().replace(/&/g,'&').replace(/ {2}/g, ' ').replace(/<|>/g, '>').replace(/\n/g, '<br />');
|
101
|
+
|
102
|
+
// Compare curated content with curated twin.
|
103
|
+
var twinContent = $twin.html().replace(/<br>/ig,'<br />');
|
104
|
+
|
105
|
+
if(forced || textareaContent+' ' !== twinContent){
|
106
|
+
|
107
|
+
// Add an extra white space so new rows are added when you are at the end of a row.
|
108
|
+
$twin.html(textareaContent+' ');
|
109
|
+
|
110
|
+
// Change textarea height if twin plus the height of one line differs more than 3 pixel from textarea height
|
111
|
+
if(Math.abs($twin.height() + lineHeight - $textarea.height()) > 3){
|
112
|
+
|
113
|
+
var goalheight = $twin.height()+lineHeight;
|
114
|
+
if(goalheight >= maxheight) {
|
115
|
+
setHeightAndOverflow(maxheight,'auto');
|
116
|
+
} else if(goalheight <= minheight) {
|
117
|
+
setHeightAndOverflow(minheight,'hidden');
|
118
|
+
} else {
|
119
|
+
setHeightAndOverflow(goalheight,'hidden');
|
120
|
+
}
|
121
|
+
|
122
|
+
}
|
123
|
+
|
124
|
+
}
|
125
|
+
|
126
|
+
}
|
127
|
+
|
128
|
+
// Hide scrollbars
|
129
|
+
$textarea.css({'overflow':'hidden'});
|
130
|
+
|
131
|
+
// Update textarea size on keyup, change, cut and paste
|
132
|
+
$textarea.bind('keyup change cut paste', function(){
|
133
|
+
update();
|
134
|
+
});
|
135
|
+
|
136
|
+
// Update width of twin if browser or textarea is resized (solution for textareas with widths in percent)
|
137
|
+
$(window).bind('resize', setTwinWidth);
|
138
|
+
$textarea.bind('resize', setTwinWidth);
|
139
|
+
$textarea.bind('update', update);
|
140
|
+
|
141
|
+
// Compact textarea on blur
|
142
|
+
$textarea.bind('blur',function(){
|
143
|
+
if($twin.height() < maxheight){
|
144
|
+
if($twin.height() > minheight) {
|
145
|
+
$textarea.height($twin.height());
|
146
|
+
} else {
|
147
|
+
$textarea.height(minheight);
|
148
|
+
}
|
149
|
+
}
|
150
|
+
});
|
151
|
+
|
152
|
+
// And this line is to catch the browser paste event
|
153
|
+
$textarea.bind('input paste',function(e){ setTimeout( update, 250); });
|
154
|
+
|
155
|
+
// Run update once when elastic is initialized
|
156
|
+
update();
|
157
|
+
|
158
|
+
});
|
159
|
+
|
160
|
+
}
|
161
|
+
});
|
162
|
+
})(jQuery);
|
metadata
ADDED
@@ -0,0 +1,57 @@
|
|
1
|
+
--- !ruby/object:Gem::Specification
|
2
|
+
name: elastic-textarea
|
3
|
+
version: !ruby/object:Gem::Version
|
4
|
+
version: 1.0.0
|
5
|
+
prerelease:
|
6
|
+
platform: ruby
|
7
|
+
authors:
|
8
|
+
- Mark McConachie
|
9
|
+
autorequire:
|
10
|
+
bindir: bin
|
11
|
+
cert_chain: []
|
12
|
+
date: 2012-04-03 00:00:00.000000000 Z
|
13
|
+
dependencies: []
|
14
|
+
description: makes textarea's grow and shrink to fit contents
|
15
|
+
email:
|
16
|
+
- mark@markmcconachie.com
|
17
|
+
executables: []
|
18
|
+
extensions: []
|
19
|
+
extra_rdoc_files: []
|
20
|
+
files:
|
21
|
+
- .gitignore
|
22
|
+
- Gemfile
|
23
|
+
- LICENSE
|
24
|
+
- README.md
|
25
|
+
- Rakefile
|
26
|
+
- elastic-textarea.gemspec
|
27
|
+
- lib/elastic-textarea.rb
|
28
|
+
- lib/elastic-textarea/engine.rb
|
29
|
+
- lib/elastic-textarea/form_helper.rb
|
30
|
+
- lib/elastic-textarea/version.rb
|
31
|
+
- vendor/assets/javascripts/elastic-textarea/elastic.js
|
32
|
+
- vendor/assets/javascripts/elastic-textarea/index.js
|
33
|
+
homepage: https://github.com/markmcconachie/elastic-textareas
|
34
|
+
licenses: []
|
35
|
+
post_install_message:
|
36
|
+
rdoc_options: []
|
37
|
+
require_paths:
|
38
|
+
- lib
|
39
|
+
required_ruby_version: !ruby/object:Gem::Requirement
|
40
|
+
none: false
|
41
|
+
requirements:
|
42
|
+
- - ! '>='
|
43
|
+
- !ruby/object:Gem::Version
|
44
|
+
version: '0'
|
45
|
+
required_rubygems_version: !ruby/object:Gem::Requirement
|
46
|
+
none: false
|
47
|
+
requirements:
|
48
|
+
- - ! '>='
|
49
|
+
- !ruby/object:Gem::Version
|
50
|
+
version: '0'
|
51
|
+
requirements: []
|
52
|
+
rubyforge_project:
|
53
|
+
rubygems_version: 1.8.11
|
54
|
+
signing_key:
|
55
|
+
specification_version: 3
|
56
|
+
summary: makes textarea's grow and shrink to fit contents
|
57
|
+
test_files: []
|