Added options object for indicating if the script should set the over…

…flowX and overflowY. The default behavior lets the script control the overflows, which will normalize the appearance between browsers. Fixes jackmoore#220.
4zik88 · May 5, 2015 · 93b5d45 · 93b5d45
1 parent 8c438c7
commit 93b5d45
Show file tree

Hide file tree

Showing 6 changed files with 80 additions and 48 deletions.
diff --git a/bower.json b/bower.json
@@ -1,7 +1,7 @@
 {
 	"name": "autosize",
 	"description": "Autosize is a small, stand-alone script to automatically adjust textarea height to fit text.",
-	"version": "3.0.2",
+	"version": "3.0.4",
 	"dependencies": {},
 	"keywords": [
 		"textarea",

diff --git a/changelog.md b/changelog.md
@@ -1,5 +1,8 @@
 ## Changelog
 
+##### v.3.0.4 - 2015-05-05
+* Added options object for indicating if the script should set the overflowX and overflowY.  The default behavior lets the script control the overflows, which will normalize the appearance between browsers.  Fixes #220.
+
 ##### v.3.0.3 - 2015-04-23
 * Avoided adjusting the height for hidden textarea elements.  Fixes #155.
 

diff --git a/dest/autosize.js b/dest/autosize.js
@@ -1,5 +1,5 @@
 /*!
-	Autosize 3.0.2
+	Autosize 3.0.4
 	license: MIT
 	http://www.jacklmoore.com/autosize
 */
@@ -19,9 +19,17 @@
 	'use strict';
 
 	function assign(ta) {
+		var _ref = arguments[1] === undefined ? {} : arguments[1];
+
+		var _ref$setOverflowX = _ref.setOverflowX;
+		var setOverflowX = _ref$setOverflowX === undefined ? true : _ref$setOverflowX;
+		var _ref$setOverflowY = _ref.setOverflowY;
+		var setOverflowY = _ref$setOverflowY === undefined ? true : _ref$setOverflowY;
+
 		if (!ta || !ta.nodeName || ta.nodeName !== 'TEXTAREA' || ta.hasAttribute('data-autosize-on')) {
 			return;
-		}var heightOffset;
+		}var heightOffset = null;
+		var overflowY = 'hidden';
 
 		function init() {
 			var style = window.getComputedStyle(ta, null);
@@ -55,7 +63,12 @@
 				ta.style.width = width;
 			}
 
-			ta.style.overflowY = value;
+			overflowY = value;
+
+			if (setOverflowY) {
+				ta.style.overflowY = value;
+			}
+
 			update();
 		}
 
@@ -84,14 +97,13 @@
 			var style = window.getComputedStyle(ta, null);
 
 			if (style.height !== ta.style.height) {
-				if (ta.style.overflowY !== 'visible') {
+				if (overflowY !== 'visible') {
 					changeOverflow('visible');
 					return;
 				}
 			} else {
-				if (ta.style.overflowY !== 'hidden') {
+				if (overflowY !== 'hidden') {
 					changeOverflow('hidden');
-					autosize();
 					return;
 				}
 			}
@@ -116,7 +128,9 @@
 		}).bind(ta, {
 			height: ta.style.height,
 			resize: ta.style.resize,
-			overflowY: ta.style.overflowY });
+			overflowY: ta.style.overflowY,
+			overflowX: ta.style.overflowX,
+			wordWrap: ta.style.wordWrap });
 
 		ta.addEventListener('autosize:destroy', destroy);
 
@@ -131,11 +145,20 @@
 		ta.addEventListener('input', update);
 		ta.addEventListener('autosize:update', update);
 		ta.setAttribute('data-autosize-on', true);
+
+		if (setOverflowY) {
+			ta.style.overflowY = 'hidden';
+		}
+		if (setOverflowX) {
+			ta.style.overflowX = 'hidden';
+			ta.style.wordWrap = 'break-word';
+		}
+
 		init();
 	}
 
 	function destroy(ta) {
-		if (!ta || !ta.nodeName || ta.nodeName !== 'TEXTAREA') {
+		if (!(ta && ta.nodeName && ta.nodeName === 'TEXTAREA')) {
 			return;
 		}var evt = document.createEvent('Event');
 		evt.initEvent('autosize:destroy', true, false);
@@ -150,7 +173,7 @@
 		ta.dispatchEvent(evt);
 	}
 
-	var autosize;
+	var autosize = null;
 
 	// Do nothing in IE8 or lower
 	if (typeof window.getComputedStyle !== 'function') {
@@ -164,27 +187,23 @@
 			return el;
 		};
 	} else {
-		autosize = function (el) {
-			if (el && el.length) {
-				Array.prototype.forEach.call(el, assign);
-			} else if (el && el.nodeName) {
-				assign(el);
+		autosize = function (el, options) {
+			if (el) {
+				Array.prototype.forEach.call(el.length ? el : [el], function (x) {
+					return assign(x, options);
+				});
 			}
 			return el;
 		};
 		autosize.destroy = function (el) {
-			if (el && el.length) {
-				Array.prototype.forEach.call(el, destroy);
-			} else if (el && el.nodeName) {
-				destroy(el);
+			if (el) {
+				Array.prototype.forEach.call(el.length ? el : [el], destroy);
 			}
 			return el;
 		};
 		autosize.update = function (el) {
-			if (el && el.length) {
-				Array.prototype.forEach.call(el, update);
-			} else if (el && el.nodeName) {
-				update(el);
+			if (el) {
+				Array.prototype.forEach.call(el.length ? el : [el], update);
 			}
 			return el;
 		};

diff --git a/dest/autosize.min.js b/dest/autosize.min.js
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "autosize",
   "description": "Autosize is a small, stand-alone script to automatically adjust textarea height to fit text.",
-  "version": "3.0.3",
+  "version": "3.0.4",
   "keywords": [
     "textarea",
     "form",

diff --git a/src/autosize.js b/src/autosize.js
@@ -1,7 +1,8 @@
-function assign(ta) {
+function assign(ta, {setOverflowX = true, setOverflowY = true} = {}) {
 	if (!ta || !ta.nodeName || ta.nodeName !== 'TEXTAREA' || ta.hasAttribute('data-autosize-on')) return;
 
-	var heightOffset;
+	let heightOffset = null;
+	let overflowY = 'hidden';
 
 	function init() {
 		const style = window.getComputedStyle(ta, null);
@@ -35,7 +36,12 @@ function assign(ta) {
 			ta.style.width = width;
 		}
 
-		ta.style.overflowY = value;
+		overflowY = value;
+
+		if (setOverflowY) {
+			ta.style.overflowY = value;
+		}
+
 		update();
 	}
 
@@ -64,14 +70,13 @@ function assign(ta) {
 		const style = window.getComputedStyle(ta, null);
 
 		if (style.height !== ta.style.height) {
-			if (ta.style.overflowY !== 'visible') {
+			if (overflowY !== 'visible') {
 				changeOverflow('visible');
 				return;
 			}
 		} else {
-			if (ta.style.overflowY !== 'hidden') {
+			if (overflowY !== 'hidden') {
 				changeOverflow('hidden');
-				autosize();
 				return;
 			}
 		}
@@ -97,6 +102,8 @@ function assign(ta) {
 		height: ta.style.height,
 		resize: ta.style.resize,
 		overflowY: ta.style.overflowY,
+		overflowX: ta.style.overflowX,
+		wordWrap: ta.style.wordWrap,
 	});
 
 	ta.addEventListener('autosize:destroy', destroy);
@@ -112,11 +119,20 @@ function assign(ta) {
 	ta.addEventListener('input', update);
 	ta.addEventListener('autosize:update', update);
 	ta.setAttribute('data-autosize-on', true);
-	init();		
+
+	if (setOverflowY) {
+		ta.style.overflowY = 'hidden';
+	}
+	if (setOverflowX) {
+		ta.style.overflowX = 'hidden';
+		ta.style.wordWrap = 'break-word';
+	}
+
+	init();
 }
 
 function destroy(ta) {
-	if (!ta || !ta.nodeName || ta.nodeName !== 'TEXTAREA') return;
+	if (!(ta && ta.nodeName && ta.nodeName === 'TEXTAREA')) return;
 	const evt = document.createEvent('Event');
 	evt.initEvent('autosize:destroy', true, false);
 	ta.dispatchEvent(evt);
@@ -129,35 +145,29 @@ function update(ta) {
 	ta.dispatchEvent(evt);
 }
 
-var autosize;
+let autosize = null;
 
 // Do nothing in IE8 or lower
 if (typeof window.getComputedStyle !== 'function') {
 	autosize = el => el;
 	autosize.destroy = el => el;
 	autosize.update = el => el;
 } else {
-	autosize = el => {
-		if (el && el.length) {
-			Array.prototype.forEach.call(el, assign);
-		} else if (el && el.nodeName) {
-			assign(el);
+	autosize = (el, options) => {
+		if (el) {
+			Array.prototype.forEach.call(el.length ? el : [el], x => assign(x, options));
 		}
 		return el;
 	};
 	autosize.destroy = el => {
-		if (el && el.length) {
-			Array.prototype.forEach.call(el, destroy);
-		} else if (el && el.nodeName) {
-			destroy(el);
+		if (el) {
+			Array.prototype.forEach.call(el.length ? el : [el], destroy);
 		}
 		return el;
 	};
 	autosize.update = el => {
-		if (el && el.length) {
-			Array.prototype.forEach.call(el, update);
-		} else if (el && el.nodeName) {
-			update(el);
+		if (el) {
+			Array.prototype.forEach.call(el.length ? el : [el], update);
 		}
 		return el;
 	};