From 93b5d45dad7a259a03f953398ae2cd08ef55fb9b Mon Sep 17 00:00:00 2001 From: Jack Moore Date: Tue, 5 May 2015 15:08:56 -0400 Subject: [PATCH] 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. --- bower.json | 2 +- changelog.md | 3 +++ dest/autosize.js | 63 ++++++++++++++++++++++++++++---------------- dest/autosize.min.js | 4 +-- package.json | 2 +- src/autosize.js | 54 +++++++++++++++++++++---------------- 6 files changed, 80 insertions(+), 48 deletions(-) diff --git a/bower.json b/bower.json index 6f56740..eaad968 100644 --- 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 index 8b9fb04..9ba2e50 100644 --- 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 index 56420fa..053cf81 100644 --- 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 index 3dd49dc..d07c336 100644 --- a/dest/autosize.min.js +++ b/dest/autosize.min.js @@ -1,6 +1,6 @@ /*! - Autosize 3.0.2 + Autosize 3.0.4 license: MIT http://www.jacklmoore.com/autosize */ -!function(e,t){if("function"==typeof define&&define.amd)define(["exports","module"],t);else if("undefined"!=typeof exports&&"undefined"!=typeof module)t(exports,module);else{var o={exports:{}};t(o.exports,o),e.autosize=o.exports}}(this,function(e,t){"use strict";function o(e){function t(){var t=window.getComputedStyle(e,null);"vertical"===t.resize?e.style.resize="none":"both"===t.resize&&(e.style.resize="horizontal"),i="content-box"===t.boxSizing?-(parseFloat(t.paddingTop)+parseFloat(t.paddingBottom)):parseFloat(t.borderTopWidth)+parseFloat(t.borderBottomWidth),n()}function o(t){var o=e.style.width;e.style.width="0px",e.offsetWidth,e.style.width=o,e.style.overflowY=t,n()}function n(){var t=e.style.height,n=document.documentElement.scrollTop,d=document.body.scrollTop,s=e.style.height;e.style.height="auto";var a=e.scrollHeight+i;if(0===e.scrollHeight)return void(e.style.height=s);e.style.height=a+"px",document.documentElement.scrollTop=n,document.body.scrollTop=d;var u=window.getComputedStyle(e,null);if(u.height!==e.style.height){if("visible"!==e.style.overflowY)return void o("visible")}else if("hidden"!==e.style.overflowY)return o("hidden"),void r();if(t!==e.style.height){var l=document.createEvent("Event");l.initEvent("autosize:resized",!0,!1),e.dispatchEvent(l)}}if(e&&e.nodeName&&"TEXTAREA"===e.nodeName&&!e.hasAttribute("data-autosize-on")){var i,d=function(t){window.removeEventListener("resize",n),e.removeEventListener("input",n),e.removeEventListener("keyup",n),e.removeAttribute("data-autosize-on"),e.removeEventListener("autosize:destroy",d),Object.keys(t).forEach(function(o){e.style[o]=t[o]})}.bind(e,{height:e.style.height,resize:e.style.resize,overflowY:e.style.overflowY});e.addEventListener("autosize:destroy",d),"onpropertychange"in e&&"oninput"in e&&e.addEventListener("keyup",n),window.addEventListener("resize",n),e.addEventListener("input",n),e.addEventListener("autosize:update",n),e.setAttribute("data-autosize-on",!0),t()}}function n(e){if(e&&e.nodeName&&"TEXTAREA"===e.nodeName){var t=document.createEvent("Event");t.initEvent("autosize:destroy",!0,!1),e.dispatchEvent(t)}}function i(e){if(e&&e.nodeName&&"TEXTAREA"===e.nodeName){var t=document.createEvent("Event");t.initEvent("autosize:update",!0,!1),e.dispatchEvent(t)}}var r;"function"!=typeof window.getComputedStyle?(r=function(e){return e},r.destroy=function(e){return e},r.update=function(e){return e}):(r=function(e){return e&&e.length?Array.prototype.forEach.call(e,o):e&&e.nodeName&&o(e),e},r.destroy=function(e){return e&&e.length?Array.prototype.forEach.call(e,n):e&&e.nodeName&&n(e),e},r.update=function(e){return e&&e.length?Array.prototype.forEach.call(e,i):e&&e.nodeName&&i(e),e}),t.exports=r}); \ No newline at end of file +!function(e,t){if("function"==typeof define&&define.amd)define(["exports","module"],t);else if("undefined"!=typeof exports&&"undefined"!=typeof module)t(exports,module);else{var o={exports:{}};t(o.exports,o),e.autosize=o.exports}}(this,function(e,t){"use strict";function o(e){function t(){var t=window.getComputedStyle(e,null);"vertical"===t.resize?e.style.resize="none":"both"===t.resize&&(e.style.resize="horizontal"),l="content-box"===t.boxSizing?-(parseFloat(t.paddingTop)+parseFloat(t.paddingBottom)):parseFloat(t.borderTopWidth)+parseFloat(t.borderBottomWidth),n()}function o(t){var o=e.style.width;e.style.width="0px",e.offsetWidth,e.style.width=o,u=t,a&&(e.style.overflowY=t),n()}function n(){var t=e.style.height,n=document.documentElement.scrollTop,i=document.body.scrollTop,r=e.style.height;e.style.height="auto";var d=e.scrollHeight+l;if(0===e.scrollHeight)return void(e.style.height=r);e.style.height=d+"px",document.documentElement.scrollTop=n,document.body.scrollTop=i;var s=window.getComputedStyle(e,null);if(s.height!==e.style.height){if("visible"!==u)return void o("visible")}else if("hidden"!==u)return void o("hidden");if(t!==e.style.height){var a=document.createEvent("Event");a.initEvent("autosize:resized",!0,!1),e.dispatchEvent(a)}}var i=void 0===arguments[1]?{}:arguments[1],r=i.setOverflowX,d=void 0===r?!0:r,s=i.setOverflowY,a=void 0===s?!0:s;if(e&&e.nodeName&&"TEXTAREA"===e.nodeName&&!e.hasAttribute("data-autosize-on")){var l=null,u="hidden",v=function(t){window.removeEventListener("resize",n),e.removeEventListener("input",n),e.removeEventListener("keyup",n),e.removeAttribute("data-autosize-on"),e.removeEventListener("autosize:destroy",v),Object.keys(t).forEach(function(o){e.style[o]=t[o]})}.bind(e,{height:e.style.height,resize:e.style.resize,overflowY:e.style.overflowY,overflowX:e.style.overflowX,wordWrap:e.style.wordWrap});e.addEventListener("autosize:destroy",v),"onpropertychange"in e&&"oninput"in e&&e.addEventListener("keyup",n),window.addEventListener("resize",n),e.addEventListener("input",n),e.addEventListener("autosize:update",n),e.setAttribute("data-autosize-on",!0),a&&(e.style.overflowY="hidden"),d&&(e.style.overflowX="hidden",e.style.wordWrap="break-word"),t()}}function n(e){if(e&&e.nodeName&&"TEXTAREA"===e.nodeName){var t=document.createEvent("Event");t.initEvent("autosize:destroy",!0,!1),e.dispatchEvent(t)}}function i(e){if(e&&e.nodeName&&"TEXTAREA"===e.nodeName){var t=document.createEvent("Event");t.initEvent("autosize:update",!0,!1),e.dispatchEvent(t)}}var r=null;"function"!=typeof window.getComputedStyle?(r=function(e){return e},r.destroy=function(e){return e},r.update=function(e){return e}):(r=function(e,t){return e&&Array.prototype.forEach.call(e.length?e:[e],function(e){return o(e,t)}),e},r.destroy=function(e){return e&&Array.prototype.forEach.call(e.length?e:[e],n),e},r.update=function(e){return e&&Array.prototype.forEach.call(e.length?e:[e],i),e}),t.exports=r}); \ No newline at end of file diff --git a/package.json b/package.json index 3b6c14f..96e5ed4 100644 --- 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 index 9847ed5..99fca40 100644 --- 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,7 +145,7 @@ function update(ta) { ta.dispatchEvent(evt); } -var autosize; +let autosize = null; // Do nothing in IE8 or lower if (typeof window.getComputedStyle !== 'function') { @@ -137,27 +153,21 @@ if (typeof window.getComputedStyle !== 'function') { 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; };