Skip to content

Commit b14b7be

Browse files
giray123giray123
committed
first commit
0 parents  commit b14b7be

13 files changed

+3473
-0
lines changed

‎.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
node_modules/

‎LICENSE

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2020 Giray Songul
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

‎README.md

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
<p align="center"><img src="img/social_banner.jpg"></p>
2+
<h1 align="center">Auto-expandable Textarea for Javascript</h1>
3+
<p align="center">Auto-expandable Textarea snippet for HTML textarea fields built with native javascript</p>
4+
<p align="center">
5+
<img src="https://img.shields.io/david/giray123/javascript-autoexpandable-textarea?style=for-the-badge" />
6+
<img src="https://img.shields.io/github/size/giray123/javascript-autoexpandable-textarea/js/textarea-expander.js?label=JS&logo=javascript&style=for-the-badge" />
7+
<a href="https://github.com/giray123/javascript-autoexpandable-textarea/blob/master/LICENSE"><img src="https://img.shields.io/github/license/giray123/javascript-autoexpandable-textarea?style=for-the-badge" /></a>
8+
</p>
9+
10+
<p align="center"><img src="img/expand_both_ways.gif"></p>
11+
12+
This snippet:
13+
- :fire: is built with **native javascript**
14+
- :package: requires **no dependencies**
15+
- :hammer_and_pick: highly **customizable** yet very **simple**
16+
17+
## Demo
18+
- [JSfiddle](https://jsfiddle.net/giray123/y0wh7xmL/12/)
19+
- [Github Pages](https://giray123.github.io/javascript-autocomplete/)
20+
## Usage
21+
22+
Add either unminified or minified JS onto your html
23+
```html
24+
<script src="/js/textarea-expander.js"></script>
25+
<!-- minififed -->
26+
<script src="/js/textarea-expander.min.js"></script>
27+
```
28+
29+
### CDN
30+
You can also use below CDN links. Feel free to change version number with respect to the releases
31+
```html
32+
<script src="https://cdn.jsdelivr.net/gh/giray123/[email protected]/js/textarea-expander.js"></script>
33+
<!-- minififed -->
34+
<script src="https://cdn.jsdelivr.net/gh/giray123/[email protected]/js/textarea-expander.min.js"></script>
35+
36+
```
37+
38+
Initialize Autocomplete object with your configurations
39+
### Auto-expandable Textarea Both Vertically and Horizontally
40+
<p align="center"><img src="img/expand_both_ways.gif" style="margin: 20px;"></p>
41+
42+
```js
43+
var expander1 = new textAreaAutoExpander('#textarea_expand_both_ways')
44+
```
45+
### Auto-expandable Textarea Vertically
46+
<p align="center"><img src="img/expand_vertically.gif" style="margin: 20px;"></p>
47+
48+
```js
49+
var expander2 = new textAreaAutoExpander({
50+
selector: '#textarea_expand_vertically',
51+
safetyMargin: 200,
52+
autoHeight: true,
53+
autoWidth: false
54+
})
55+
```
56+
### Auto-expandable Textarea Horizontally
57+
<p align="center"><img src="img/expand_horizontally.gif" style="margin: 20px;"></p>
58+
59+
```js
60+
var expander3 = new textAreaAutoExpander({
61+
selector: '#textarea_expand_horizontally',
62+
safetyMargin: 200,
63+
autoHeight: false,
64+
autoWidth: true
65+
})
66+
```
67+
## How it Works?
68+
Auto expanding a textarea based on user input is a tedious task. However, there is a workaround which this snippet is using. When you initialize the snippet, it creates a copy div element of the textarea which is not possible, it then syncs all the related CSS attributes so that their width and height changes the same amount. When user types, it calculates the width/height of the hidden element and copies it to the textarea. Because of this dynamic, you can not style your textarea during expansion and expect it to continue expanding properly. You need to call `expander.refresh()` after you style your textarea so that the snippet syncs CSS parameters again.
69+
70+
## Configuration
71+
### Global Options
72+
| attribute | type | default | description |
73+
| ------------- | -------- | ---- | ------------- |
74+
| `selector` | string | required | html input element query selector (`document.querySelector(selector)`)
75+
| `safetyMargin` | integer | `100` | minimum distance between text and the border before expanding starts
76+
| `autoHeight` | boolean | `true` | whether to expand vertically
77+
| `autoWidth` | boolean | `true` | whether to expand horizontally
78+
## Methods
79+
| attribute | description |
80+
| -----------| ----------- |
81+
| `state()` | returns information about the current state
82+
| `refresh()`| syncs fontFamily, whiteSpace, fontSize, lineHeight between the textarea and the hidden element. You can `expander.refresh({fontSize: 20, lineHeight: 20})` to change fontSize and lineHeight directly
83+
84+
85+
## LICENSE
86+
This project is [licensed]("https://github.com/giray123/javascript-autoexpandable-textarea/blob/master/LICENSE") under the terms of the MIT license.

‎gulpfile.js

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
/**
2+
* TYPE 'gulp tutorial' to the terminal to learn how to use'
3+
*/
4+
5+
const gulp = require('gulp');
6+
const uglify = require('gulp-uglify');
7+
const terser = require('gulp-terser');
8+
9+
const rename = require('gulp-rename');
10+
const sourcemaps = require('gulp-sourcemaps');
11+
var clean = require('gulp-clean');
12+
13+
function min_js_all() {
14+
console.log(`Minifying JS files...`)
15+
return gulp.src('js/*.js')
16+
.pipe(rename(function(path) {
17+
// path.basename += `_${time_stamp}`;
18+
path.extname = ".min.js";
19+
}))
20+
.pipe(sourcemaps.init())
21+
.pipe(terser())
22+
.pipe(sourcemaps.write())
23+
.pipe(gulp.dest(`js/`));
24+
}
25+
exports.min_js_all = min_js_all
26+
27+
async function delete_minified(){
28+
return gulp.src(['js/*.min.js'], {read: false})
29+
.pipe(clean());
30+
}
31+
exports.delete_minified = delete_minified
32+
33+
exports.tutorial = (done) => {
34+
console.log(`All available commands:`)
35+
console.log(`gulp delete_minified`)
36+
console.log(`gulp min_js_all`)
37+
done()
38+
}

‎img/expand_both_ways.gif

667 KB
Loading

‎img/expand_horizontally.gif

586 KB
Loading

‎img/expand_vertically.gif

452 KB
Loading

‎img/social_banner.jpg

125 KB
Loading

‎index.html

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Auto-expandable Textarea</title>
7+
<style>
8+
body{
9+
font-family: sans-serif;
10+
text-align: center;
11+
padding-bottom: 400px;
12+
}
13+
#main{
14+
width: 100%;
15+
text-align: left;
16+
}
17+
h1{
18+
margin-top: 60px;
19+
}
20+
h2{
21+
margin-top: 50px;
22+
}
23+
@media screen and (min-width: 768px) {
24+
#main{
25+
width: 40%;
26+
margin: auto;
27+
}
28+
}
29+
.textarea_styled{
30+
min-width: 300px;
31+
min-height: 300px;
32+
transition: all .25s ease-out;
33+
color: #4a5568;
34+
padding: 10px 20px 10px 20px;
35+
line-height: 1.5;
36+
border-width: 1px;
37+
border-radius: .5rem;
38+
border-color: transparent;
39+
background-color: #edf2f7;
40+
font-family: sans-serif;
41+
font-size: 15px;
42+
}
43+
.textarea_styled:focus{
44+
outline: none;
45+
background-color: white;
46+
border: 1px solid #edf2f7;
47+
}
48+
</style>
49+
</head>
50+
<body>
51+
<div id="main">
52+
<h1>Auto-expandable Textarea for Native Javascript</h1>
53+
<p>Auto-expandable Textarea snippet for HTML textarea fields build with native javascript and no dependencies</p>
54+
<p>
55+
This snippet:
56+
<ul>
57+
<li>is built with <b>native javascript</b></li>
58+
<li>requires <b>no dependencies</b></li>
59+
<li>highy <b>customizable</b> yet very <b>simple</b></li>
60+
</ul>
61+
62+
</p>
63+
64+
<h2>Auto-expandable Textarea Both Vertically and Horizontally</h2>
65+
<textarea id="textarea_expand_both_ways" class="textarea_styled" placeholder="Type your message..."></textarea>
66+
67+
<h2>Auto-expandable Textarea Vertically</h2>
68+
<textarea id="textarea_expand_vertically" class="textarea_styled" placeholder="Type your message..."></textarea>
69+
70+
<h2>Auto-expandable Textarea Horizontally</h2>
71+
<textarea id="textarea_expand_horizontally" class="textarea_styled" placeholder="Type your message..."></textarea>
72+
</div>
73+
<script src="js/textarea-expander.js"></script>
74+
<script>
75+
// Auto-expandable Textarea Both Vertically and Horizontally
76+
var expander1 = new textAreaAutoExpander('#textarea_expand_both_ways')
77+
78+
// Auto-expandable Textarea Vertically
79+
var expander2 = new textAreaAutoExpander({
80+
selector: '#textarea_expand_vertically',
81+
safetyMargin: 200,
82+
autoHeight: true,
83+
autoWidth: false
84+
})
85+
86+
// Auto-expandable Textarea Horizontally
87+
var expander3 = new textAreaAutoExpander({
88+
selector: '#textarea_expand_horizontally',
89+
safetyMargin: 200,
90+
autoHeight: false,
91+
autoWidth: true
92+
})
93+
</script>
94+
</body>
95+
</html>

‎js/textarea-expander.js

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
function textAreaAutoExpander(options){
2+
var options = options || {};
3+
var $textarea, $div,
4+
safetyMargin = typeof options.safetyMargin != "undefined" ? options.safetyMargin : 100,
5+
autoHeight = typeof options.autoHeight != "undefined" ? options.autoHeight : true,
6+
autoWidth = typeof options.autoWidth != "undefined" ? options.autoWidth : true;
7+
if(typeof options == "string"){
8+
$textarea = document.querySelector(options);
9+
}else{
10+
if(options.selector){
11+
$textarea = document.querySelector(options.selector);
12+
}else{
13+
throw new Error('Provide a selector!')
14+
}
15+
}
16+
// create a hidden textarea copy element
17+
var $div = document.createElement('div')
18+
$div.style.display = "inline-block";
19+
$div.style.position = "fixed";
20+
$div.style.bottom = "-4000px";
21+
$div.style.left = "-4000px";
22+
$div.innerText = $textarea.value;
23+
document.body.appendChild($div)
24+
25+
// sync text values of textarea and the hidden element
26+
$textarea.addEventListener('input', (e)=>{
27+
$div.innerText = e.target.value;
28+
resize()
29+
})
30+
31+
syncCssParametersAll()
32+
resize()
33+
34+
function syncCssParametersAll(){
35+
var textareaStyles = getComputedStyle($textarea)
36+
$div.style.fontFamily = textareaStyles.fontFamily
37+
$div.style.whiteSpace = textareaStyles.whiteSpace
38+
$div.style.fontSize = textareaStyles.fontSize
39+
$div.style.lineHeight = textareaStyles.lineHeight
40+
}
41+
42+
function resize(){
43+
if(autoHeight) $textarea.style.height = safetyMargin + $div.offsetHeight + "px";
44+
if(autoWidth) $textarea.style.width = safetyMargin + $div.offsetWidth + "px";
45+
}
46+
47+
return {
48+
state: ()=>{
49+
return {
50+
selector : options,
51+
$textarea : $textarea,
52+
$div : $div,
53+
safetyMargin : safetyMargin,
54+
autoHeight : autoHeight,
55+
autoWidth : autoWidth
56+
}
57+
},
58+
refresh: (options)=>{
59+
var options = options || {};
60+
if(typeof options.fontSize != "undefined") $textarea.style.fontSize = options.fontSize + "px";
61+
if(typeof options.lineHeight != "undefined") $textarea.style.lineHeight = options.lineHeight + "px";
62+
syncCssParametersAll()
63+
$textarea.dispatchEvent(new Event("input"))
64+
}
65+
}
66+
}

0 commit comments

Comments
 (0)