Initial commit

ro31337 · Oct 2, 2015 · f85cba9 · f85cba9
commit f85cba9
Show file tree

Hide file tree

Showing 10 changed files with 391 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+node_modules
diff --git a/README.md b/README.md
@@ -0,0 +1,17 @@
+
+The only reason I wrote this jQuery plugin is that other plugins suck. They are wide-spread, but outdated and buggy.
+
+Advantages of jquery-ns-textarea-autogrow:
+
+* Grows vertically, horizontally or both
+* Correctly handles 2 or more spaces
+* Copies css and font styles to shadow div
+* Correctly handles long words on one line
+* Doesn't flick on Enter
+* Doesn't add more than one handler to textarea
+* Handles scrollbar if any
+* Supports tags, quotes, ampersands
+
+Plans:
+
+* Test and support arabic languages
diff --git a/demo/index.html b/demo/index.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+
+  <head>
+    <script data-require="jquery@2.1.4" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
+    <script src="../dist/jquery.ns-autogrow.min.js"></script>
+    <link rel="stylesheet" href="style.css" />
+    <script src="script.js"></script>
+  </head>
+
+  <body>
+    <div class="example1">
+      <textarea placeholder="horizontal and vertical"></textarea>
+    </div>
+
+    <div class="example2">
+      <textarea placeholder="vertical only"></textarea>
+    </div>
+
+    <div class="example3">
+      <textarea placeholder="horizontal only"></textarea>
+    </div>
+
+  </body>
+
+</html>
diff --git a/demo/script.js b/demo/script.js
@@ -0,0 +1,6 @@
+$(function(){
+  $('.example1 textarea').autogrow();
+  $('.example2 textarea').autogrow({vertical: true, horizontal: false});
+  $('.example3 textarea').autogrow({vertical: false, horizontal: true});
+});
+
diff --git a/demo/style.css b/demo/style.css
@@ -0,0 +1,2 @@
+textarea { min-width: 180px; }
+.example3 textarea { min-height: 50px; }
diff --git a/dist/jquery.ns-autogrow.js b/dist/jquery.ns-autogrow.js
@@ -0,0 +1,129 @@
+/*!
+  Non-Sucking Autogrow 1.0.0
+  license: MIT
+  author: Roman Pushkin
+  https://github.com/ro31337/jquery.ns-autogrow
+*/
+(function() {
+  var getVerticalScrollbarWidth;
+
+  (function($, window) {
+    return $.fn.autogrow = function(options) {
+      if (options == null) {
+        options = {};
+      }
+      if (options.horizontal == null) {
+        options.horizontal = true;
+      }
+      if (options.vertical == null) {
+        options.vertical = true;
+      }
+      if (options.debugx == null) {
+        options.debugx = -10000;
+      }
+      if (options.debugy == null) {
+        options.debugy = -10000;
+      }
+      if (options.debugcolor == null) {
+        options.debugcolor = 'yellow';
+      }
+      if (options.verticalScrollbarWidth == null) {
+        options.verticalScrollbarWidth = getVerticalScrollbarWidth();
+      }
+      if (options.horizontal === false && options.vertical === false) {
+        return;
+      }
+      return this.filter('textarea').each(function() {
+        var $e, $shadow, fontSize, heightPadding, minHeight, minWidth, update;
+        $e = $(this);
+        if ($e.data('autogrow-enabled')) {
+          return;
+        }
+        $e.data('autogrow-enabled');
+        minHeight = $e.height();
+        minWidth = $e.width();
+        heightPadding = $e.css('lineHeight') * 1 || 0;
+        $e.hasVerticalScrollBar = function() {
+          return $e[0].clientHeight < $e[0].scrollHeight;
+        };
+        $shadow = $('<div class="autogrow-shadow"></div>').css({
+          position: 'absolute',
+          display: 'inline-block',
+          'background-color': options.debugcolor,
+          top: options.debugy,
+          left: options.debugx,
+          'max-width': $e.css('max-width'),
+          'padding': $e.css('padding'),
+          fontSize: $e.css('fontSize'),
+          fontFamily: $e.css('fontFamily'),
+          fontWeight: $e.css('fontWeight'),
+          lineHeight: $e.css('lineHeight'),
+          resize: 'none',
+          'word-wrap': 'break-word'
+        }).appendTo(document.body);
+        if (options.horizontal === false) {
+          $shadow.css({
+            'width': $e.width()
+          });
+        } else {
+          fontSize = $e.css('font-size');
+          $shadow.css('padding-right', '+=' + fontSize);
+          $shadow.normalPaddingRight = $shadow.css('padding-right');
+        }
+        update = (function(_this) {
+          return function(event) {
+            var height, val, width;
+            val = _this.value.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/\n /g, '<br/>&nbsp;').replace(/"/g, '&quot;').replace(/'/g, '&#39;').replace(/\n$/, '<br/>&nbsp;').replace(/\n/g, '<br/>').replace(/ {2,}/g, function(space) {
+              return Array(space.length - 1).join('&nbsp;') + ' ';
+            });
+            if (/(\n|\r)/.test(_this.value)) {
+              val += '<br /><br />';
+            }
+            $shadow.html(val);
+            if (options.vertical === true) {
+              height = Math.max($shadow.height() + heightPadding, minHeight);
+              $e.height(height);
+            }
+            if (options.horizontal === true) {
+              $shadow.css('padding-right', $shadow.normalPaddingRight);
+              if (options.vertical === false && $e.hasVerticalScrollBar()) {
+                $shadow.css('padding-right', "+=" + options.verticalScrollbarWidth + "px");
+              }
+              width = Math.max($shadow.outerWidth(), minWidth);
+              return $e.width(width);
+            }
+          };
+        })(this);
+        $e.change(update).keyup(update).keydown(update);
+        $(window).resize(update);
+        return update();
+      });
+    };
+  })(window.jQuery, window);
+
+  getVerticalScrollbarWidth = function() {
+    var inner, outer, w1, w2;
+    inner = document.createElement('p');
+    inner.style.width = "100%";
+    inner.style.height = "200px";
+    outer = document.createElement('div');
+    outer.style.position = "absolute";
+    outer.style.top = "0px";
+    outer.style.left = "0px";
+    outer.style.visibility = "hidden";
+    outer.style.width = "200px";
+    outer.style.height = "150px";
+    outer.style.overflow = "hidden";
+    outer.appendChild(inner);
+    document.body.appendChild(outer);
+    w1 = inner.offsetWidth;
+    outer.style.overflow = 'scroll';
+    w2 = inner.offsetWidth;
+    if (w1 === w2) {
+      w2 = outer.clientWidth;
+    }
+    document.body.removeChild(outer);
+    return w1 - w2;
+  };
+
+}).call(this);
diff --git a/dist/jquery.ns-autogrow.min.js b/dist/jquery.ns-autogrow.min.js
diff --git a/gulpfile.coffee b/gulpfile.coffee
@@ -0,0 +1,54 @@
+gulp = require 'gulp'
+del = require 'del'
+coffee = require 'gulp-coffee'
+coffeelint = require 'gulp-coffeelint'
+header = require 'gulp-header'
+uglify = require 'gulp-uglify'
+rename = require 'gulp-rename'
+pjson = require './package.json'
+copyright = """
+/*!
+  Non-Sucking Autogrow #{pjson.version}
+  license: #{pjson.license}
+  author: Roman Pushkin
+  #{pjson.homepage}
+*/
+
+"""
+
+dest = 'dist/'
+source = 'src/'
+code =
+  in: "#{source}*.coffee"
+  out: "#{dest}"
+
+gulp.task 'clean', ->
+  del [dest + '*']
+
+gulp.task 'build', ->
+  gulp
+    .src code.in
+    .pipe coffeelint()
+    .pipe coffeelint.reporter() # Show coffeelint errors
+    .pipe coffeelint.reporter('fail') # Make sure it fails in case of error
+    .pipe coffee()
+    .pipe header copyright
+    .pipe gulp.dest(code.out)
+
+  gulp
+    .src code.in
+    .pipe coffeelint()
+    .pipe coffeelint.reporter() # Show coffeelint errors
+    .pipe coffeelint.reporter('fail') # Make sure it fails in case of error
+    .pipe coffee()
+    .pipe uglify()
+    .pipe rename({ suffix: '.min' })
+    .pipe header copyright
+    .pipe gulp.dest(code.out)
+
+gulp.task 'watch', ->
+  gulp
+    .watch code.in, ['build']
+
+gulp.task 'default', ['clean', 'build', 'watch'], ->
+
diff --git a/package.json b/package.json
@@ -0,0 +1,26 @@
+{
+  "name": "jquery.ns-autogrow",
+  "version": "1.0.0",
+  "description": "Automatically adjust textarea height based on user input. Non-sucking version.",
+  "main": "dist/jquery.ns-autogrow.js",
+  "keywords": [
+    "autogrow",
+    "textarea",
+    "form",
+    "autosize",
+    "ui"
+  ],
+  "author": "Roman Pushkin <roman.pushkin@gmail.com>",
+  "homepage": "https://github.com/ro31337/jquery.ns-autogrow",
+  "license": "MIT",
+  "devDependencies": {
+    "coffee-script": "^1.10.0",
+    "del": "^2.0.2",
+    "gulp": "^3.9.0",
+    "gulp-coffee": "^2.3.1",
+    "gulp-coffeelint": "^0.5.0",
+    "gulp-header": "^1.7.1",
+    "gulp-rename": "^1.2.2",
+    "gulp-uglify": "^1.4.1"
+  }
+}