first commit

.gitignore

@@ -0,0 +1 @@
+node_modules/

LICENSE

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

README.md

@@ -0,0 +1,86 @@
+<p align="center"><img src="img/social_banner.jpg"></p>
+<h1 align="center">Auto-expandable Textarea for Javascript</h1>
+<p align="center">Auto-expandable Textarea snippet for HTML textarea fields built with native javascript</p>
+<p align="center">
+  <img src="https://img.shields.io/david/giray123/javascript-autoexpandable-textarea?style=for-the-badge" />
+  <img src="https://img.shields.io/github/size/giray123/javascript-autoexpandable-textarea/js/textarea-expander.js?label=JS&logo=javascript&style=for-the-badge" />
+  <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>
+</p>
+
+<p align="center"><img src="img/expand_both_ways.gif"></p>
+
+This snippet:
+- :fire:  is built with **native javascript**
+- :package: requires **no dependencies**
+- :hammer_and_pick: highly **customizable** yet very **simple**
+
+## Demo
+- [JSfiddle](https://jsfiddle.net/giray123/y0wh7xmL/12/)
+- [Github Pages](https://giray123.github.io/javascript-autocomplete/)
+## Usage
+
+Add either unminified or minified JS onto your html
+```html
+<script src="/js/textarea-expander.js"></script>
+<!-- minififed -->
+<script src="/js/textarea-expander.min.js"></script>
+```
+
+### CDN
+You can also use below CDN links. Feel free to change version number with respect to the releases
+```html
+<script src="https://cdn.jsdelivr.net/gh/giray123/[email protected]/js/textarea-expander.js"></script>
+<!-- minififed -->
+<script src="https://cdn.jsdelivr.net/gh/giray123/[email protected]/js/textarea-expander.min.js"></script>
+
+```
+
+Initialize Autocomplete object with your configurations
+### Auto-expandable Textarea Both Vertically and Horizontally
+<p align="center"><img src="img/expand_both_ways.gif" style="margin: 20px;"></p>
+
+```js
+var expander1 = new textAreaAutoExpander('#textarea_expand_both_ways')
+```
+### Auto-expandable Textarea Vertically
+<p align="center"><img src="img/expand_vertically.gif" style="margin: 20px;"></p>
+
+```js
+var expander2 = new textAreaAutoExpander({
+    selector: '#textarea_expand_vertically',
+    safetyMargin: 200,
+    autoHeight: true,
+    autoWidth: false
+})
+```
+### Auto-expandable Textarea Horizontally
+<p align="center"><img src="img/expand_horizontally.gif" style="margin: 20px;"></p>
+
+```js
+var expander3 = new textAreaAutoExpander({
+    selector: '#textarea_expand_horizontally',
+    safetyMargin: 200,
+    autoHeight: false,
+    autoWidth: true
+})
+```
+## How it Works?
+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.
+
+## Configuration
+### Global Options
+| attribute  | type | default | description |
+| -------------       | -------- | ---- | ------------- |
+| `selector`            | string   | required | html input element query selector (`document.querySelector(selector)`)
+| `safetyMargin`        | integer  | `100`    | minimum distance between text and the border before expanding starts
+| `autoHeight`          | boolean  | `true`   | whether to expand vertically
+| `autoWidth`           | boolean  | `true`   | whether to expand horizontally
+## Methods
+| attribute  | description |
+| -----------| ----------- |
+| `state()`  | returns information about the current state
+| `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
+
+
+## LICENSE
+This project is [licensed]("https://github.com/giray123/javascript-autoexpandable-textarea/blob/master/LICENSE") under the terms of the MIT license.

gulpfile.js

@@ -0,0 +1,38 @@
+/**
+ * TYPE 'gulp tutorial' to the terminal to learn how to use' 
+ */
+
+const gulp = require('gulp');
+const uglify = require('gulp-uglify');
+const terser = require('gulp-terser');
+
+const rename = require('gulp-rename');
+const sourcemaps = require('gulp-sourcemaps');
+var clean = require('gulp-clean');
+
+function min_js_all() {
+	console.log(`Minifying JS files...`)
+	return gulp.src('js/*.js')
+		.pipe(rename(function(path) {
+			// path.basename += `_${time_stamp}`;
+			path.extname = ".min.js";
+        }))
+        .pipe(sourcemaps.init())
+        .pipe(terser())
+        .pipe(sourcemaps.write())
+		.pipe(gulp.dest(`js/`));
+}
+exports.min_js_all = min_js_all
+
+async function delete_minified(){
+    return gulp.src(['js/*.min.js'], {read: false})
+                .pipe(clean());
+}
+exports.delete_minified = delete_minified
+
+exports.tutorial = (done) => {
+	console.log(`All available commands:`)
+	console.log(`gulp delete_minified`)
+	console.log(`gulp min_js_all`)
+	done()
+}

index.html

@@ -0,0 +1,95 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Auto-expandable Textarea</title>
+    <style>
+        body{
+            font-family: sans-serif;
+            text-align: center;
+            padding-bottom: 400px;
+        }
+        #main{
+            width: 100%;
+            text-align: left;
+        }
+        h1{
+            margin-top: 60px;
+        }
+        h2{
+            margin-top: 50px;
+        }
+        @media screen and (min-width: 768px) {
+            #main{
+                width: 40%;
+                margin: auto;
+            }
+        }
+        .textarea_styled{
+            min-width: 300px;
+            min-height: 300px;
+            transition: all .25s ease-out;
+            color: #4a5568;
+            padding: 10px 20px 10px 20px;
+            line-height: 1.5;
+            border-width: 1px;
+            border-radius: .5rem;
+            border-color: transparent;
+            background-color: #edf2f7;
+            font-family: sans-serif;
+            font-size: 15px;
+        }
+        .textarea_styled:focus{
+            outline: none;
+            background-color: white;
+            border: 1px solid #edf2f7;
+        }
+    </style>
+</head>
+<body>
+    <div id="main">
+        <h1>Auto-expandable Textarea for Native Javascript</h1>
+        <p>Auto-expandable Textarea snippet for HTML textarea fields build with native javascript and no dependencies</p>
+        <p>
+            This snippet:
+            <ul>
+                <li>is built with <b>native javascript</b></li>
+                <li>requires <b>no dependencies</b></li>
+                <li>highy <b>customizable</b> yet very <b>simple</b></li>
+            </ul>
+
+        </p>
+
+        <h2>Auto-expandable Textarea Both Vertically and Horizontally</h2>
+        <textarea id="textarea_expand_both_ways" class="textarea_styled" placeholder="Type your message..."></textarea>
+
+        <h2>Auto-expandable Textarea Vertically</h2>
+        <textarea id="textarea_expand_vertically" class="textarea_styled" placeholder="Type your message..."></textarea>
+
+        <h2>Auto-expandable Textarea Horizontally</h2>
+        <textarea id="textarea_expand_horizontally" class="textarea_styled" placeholder="Type your message..."></textarea>
+    </div>
+    <script src="js/textarea-expander.js"></script>
+    <script>
+        // Auto-expandable Textarea Both Vertically and Horizontally
+        var expander1 = new textAreaAutoExpander('#textarea_expand_both_ways')
+
+        // Auto-expandable Textarea Vertically
+        var expander2 = new textAreaAutoExpander({
+            selector: '#textarea_expand_vertically',
+            safetyMargin: 200,
+            autoHeight: true,
+            autoWidth: false
+        })
+
+        // Auto-expandable Textarea Horizontally
+        var expander3 = new textAreaAutoExpander({
+            selector: '#textarea_expand_horizontally',
+            safetyMargin: 200,
+            autoHeight: false,
+            autoWidth: true
+        })
+    </script>
+</body>
+</html>

js/textarea-expander.js

@@ -0,0 +1,66 @@
+function textAreaAutoExpander(options){
+    var options = options || {};
+    var $textarea, $div, 
+    safetyMargin = typeof options.safetyMargin != "undefined" ?  options.safetyMargin : 100, 
+    autoHeight    = typeof options.autoHeight    != "undefined" ?  options.autoHeight    : true, 
+    autoWidth     = typeof options.autoWidth     != "undefined" ?  options.autoWidth     : true;
+    if(typeof options == "string"){
+        $textarea = document.querySelector(options);
+    }else{
+        if(options.selector){
+            $textarea    = document.querySelector(options.selector);
+        }else{
+            throw new Error('Provide a selector!')
+        }
+    }
+    // create a hidden textarea copy element
+    var $div = document.createElement('div')
+                $div.style.display  = "inline-block";
+                $div.style.position = "fixed";
+                $div.style.bottom   = "-4000px";
+                $div.style.left     = "-4000px";
+                $div.innerText  = $textarea.value;
+                document.body.appendChild($div)
+
+    // sync text values of textarea and the hidden element
+    $textarea.addEventListener('input', (e)=>{
+        $div.innerText  = e.target.value;
+        resize()
+    })
+
+    syncCssParametersAll()
+    resize()
+
+    function syncCssParametersAll(){
+        var textareaStyles = getComputedStyle($textarea)
+        $div.style.fontFamily = textareaStyles.fontFamily
+        $div.style.whiteSpace = textareaStyles.whiteSpace
+        $div.style.fontSize   = textareaStyles.fontSize
+        $div.style.lineHeight = textareaStyles.lineHeight
+    }
+
+    function resize(){
+        if(autoHeight) $textarea.style.height = safetyMargin + $div.offsetHeight + "px";
+        if(autoWidth)  $textarea.style.width  = safetyMargin + $div.offsetWidth  + "px";   
+    }
+
+    return {
+        state: ()=>{
+            return {
+                selector     : options,
+                $textarea   : $textarea,
+                $div        : $div,
+                safetyMargin : safetyMargin,
+                autoHeight   : autoHeight,
+                autoWidth    : autoWidth
+            }
+        },
+        refresh: (options)=>{
+            var options = options || {};
+            if(typeof options.fontSize != "undefined") $textarea.style.fontSize = options.fontSize + "px";
+            if(typeof options.lineHeight != "undefined") $textarea.style.lineHeight = options.lineHeight + "px";
+            syncCssParametersAll()
+            $textarea.dispatchEvent(new Event("input"))
+        }
+    }
+}