diff --git a/demo/assets/css/style.css b/demo/assets/css/style.css
index f93159f..3f435d1 100644
--- a/demo/assets/css/style.css
+++ b/demo/assets/css/style.css
@@ -386,64 +386,15 @@ small { text-shadow: 0 1px 0 #fff }
:-moz-placeholder { color: #aaa }
-/* Base styles */
-
-.flex-text-wrap {
- position: relative;
- *zoom: 1;
-}
-
-textarea,
-.flex-text-wrap {
- outline: 0;
- margin: 0;
- border: none;
- padding: 0;
- *padding-bottom: 0!important;
-}
-
-.flex-text-wrap textarea,
-.flex-text-wrap pre {
- *white-space: pre;
- *word-wrap: break-word;
- white-space: pre-wrap;
- width: 100%;
- -webkit-box-sizing: border-box;
- -moz-box-sizing: border-box;
- -ms-box-sizing: border-box;
- box-sizing: border-box;
-}
-
-.flex-text-wrap textarea {
- overflow: hidden;
- position: absolute;
- top: 0;
- left: 0;
- height: 100%;
- width: 100%;
- resize: none;
- /* IE7 box-sizing fudge factor */
- *height: 94%;
- *width: 94%;
-}
-
-.flex-text-wrap pre {
- display: block;
- visibility: hidden;
-}
-
/* Custom styles */
-.flex-text-wrap,
-textarea { margin-bottom: 25px }
-
-textarea,
-.flex-text-wrap pre {
+textarea {
/* Ensure typography, padding, border-width & min-height are identical across textarea & pre */
line-height: 1.7;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 100%;
- padding: 22px 25px 0;
+ padding: 25px;
+ margin-bottom: 25px;
min-height: 125px;
border: 1px solid #c6c8ce;
width: 100%;
diff --git a/jquery.flexText.js b/jquery.flexText.js
index 2b5ca78..f992d56 100644
--- a/jquery.flexText.js
+++ b/jquery.flexText.js
@@ -5,7 +5,16 @@
* Usage example: $('textarea').flexText()
* Info: https://github.com/alexdunphy/flexible-textareas
*/
-;(function ($) {
+
+(function (factory) {
+ if (typeof define === 'function' && define.amd) {
+ define(['jquery'], factory);
+ } else if (typeof exports === 'object') {
+ module.exports = factory(require('jquery'));
+ } else {
+ factory(jQuery);
+ }
+}(function ($) {
// Constructor
function FT(elem) {
@@ -13,16 +22,54 @@
this._init();
}
+
+ var cssGlobWrapper = {
+ position: 'relative',
+ padding: '0',
+ outline: '0'
+ },
+ cssGlobPre = {
+ margin: '0',
+ border: '0',
+ outline: '0',
+ width: '100%',
+ visibility: 'hidden',
+ 'white-space': 'pre-wrap',
+ 'box-sizing': 'border-box'
+ },
+ cssGlobTextArea = {
+ position: 'absolute',
+ top: '0',
+ left: '0',
+ width: '100%',
+ height: '100%',
+ resize: 'none',
+ margin: '0',
+ 'box-sizing': 'border-box'
+ };
FT.prototype = {
_init: function () {
- var _this = this;
+ var _this = this,
+ cssPre = this.$textarea.css([
+ 'border','outline','padding',
+ 'font','letter-spacing','word-spacing',
+ 'text-align','text-decoration',
+ 'text-indent','text-transform'
+ ]),
+ cssWrapper = this.$textarea.css(['margin']);
+ cssWrapper['min-height'] = this.$textarea.outerHeight();
+
// Insert wrapper elem & pre/span for textarea mirroring
- this.$textarea.wrap('').before('
');
+ this.$textarea.wrap('').before('
');
this.$span = this.$textarea.prev().find('span');
+ this.$textarea.parent().css(cssGlobWrapper).css(cssWrapper);
+ this.$textarea.prev().css(cssGlobPre).css(cssPre);
+ this.$textarea.css(cssGlobTextArea);
+
// Add input event listeners
// * input for modern browsers
// * propertychange for IE 7 & 8
@@ -61,4 +108,4 @@
});
};
-})(jQuery);
\ No newline at end of file
+}));
\ No newline at end of file
diff --git a/jquery.flexText.min.js b/jquery.flexText.min.js
index 9c6f699..70f1b35 100644
--- a/jquery.flexText.min.js
+++ b/jquery.flexText.min.js
@@ -5,4 +5,4 @@
* Usage example: $('textarea').flexText()
* Info: https://github.com/alexdunphy/flexible-textareas
*/
- ;(function(b){function a(c){this.$textarea=b(c);this._init()}a.prototype={_init:function(){var c=this;this.$textarea.wrap('').before("
");this.$span=this.$textarea.prev().find("span");this.$textarea.on("input propertychange keyup change",function(){c._mirror()});b.valHooks.textarea={get:function(d){return d.value.replace(/\r?\n/g,"\r\n")}};this._mirror()},_mirror:function(){this.$span.text(this.$textarea.val())}};b.fn.flexText=function(){return this.each(function(){if(!b.data(this,"flexText")){b.data(this,"flexText",new a(this))}})}})(jQuery);
\ No newline at end of file
+!function(t){"function"==typeof define&&define.amd?define(["jquery"],t):"object"==typeof exports?module.exports=t(require("jquery")):t(jQuery)}(function(t){function e(e){this.$textarea=t(e),this._init()}var i={position:"relative",padding:"0",outline:"0"},r={margin:"0",border:"0",outline:"0",width:"100%",visibility:"hidden","white-space":"pre-wrap","box-sizing":"border-box"},n={position:"absolute",top:"0",left:"0",width:"100%",height:"100%",resize:"none",margin:"0","box-sizing":"border-box"};e.prototype={_init:function(){var e=this,a=this.$textarea.css(["border","outline","padding","font","letter-spacing","word-spacing","text-align","text-decoration","text-indent","text-transform"]),s=this.$textarea.css(["margin"]);s["min-height"]=this.$textarea.outerHeight(),this.$textarea.wrap("").before('
'),this.$span=this.$textarea.prev().find("span"),this.$textarea.parent().css(i).css(s),this.$textarea.prev().css(r).css(a),this.$textarea.css(n),this.$textarea.on("input propertychange keyup change",function(){e._mirror()}),t.valHooks.textarea={get:function(t){return t.value.replace(/\r?\n/g,"\r\n")}},this._mirror()},_mirror:function(){this.$span.text(this.$textarea.val())}},t.fn.flexText=function(){return this.each(function(){t.data(this,"flexText")||t.data(this,"flexText",new e(this))})}});
\ No newline at end of file