Skip to content

Commit

Permalink
jackmoore#290 Support autosize on width
Browse files Browse the repository at this point in the history
  • Loading branch information
Danesh Karimi committed Mar 11, 2016
1 parent 1e94f8a commit c386066
Showing 1 changed file with 79 additions and 9 deletions.
88 changes: 79 additions & 9 deletions dist/autosize.js
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@
};
}

function assign(ta) {
function assign(ta, options) {
var _ref = arguments[1] === undefined ? {} : arguments[1];

var _ref$setOverflowX = _ref.setOverflowX;
Expand All @@ -58,13 +58,16 @@
if (!ta || !ta.nodeName || ta.nodeName !== 'TEXTAREA' || set.has(ta)) return;

var heightOffset = null;
var overflowY = null;
var widthOffset = null;
var overflowY = null;
var overflowX = null;
var clientWidth = ta.clientWidth;

function init() {
var style = window.getComputedStyle(ta, null);

overflowY = style.overflowY;
overflowX = style.overflowX;

if (style.resize === 'vertical') {
ta.style.resize = 'none';
Expand All @@ -74,8 +77,10 @@

if (style.boxSizing === 'content-box') {
heightOffset = -(parseFloat(style.paddingTop) + parseFloat(style.paddingBottom));
widthOffset = -(parseFloat(style.paddingLeft) + parseFloat(style.paddingRight));
} else {
heightOffset = parseFloat(style.borderTopWidth) + parseFloat(style.borderBottomWidth);
widthOffset = parseFloat(style.borderLeftWidth) + parseFloat(style.borderRightWidth);
}
// Fix when a textarea is not on document body and heightOffset is Not a Number
if (isNaN(heightOffset)) {
Expand All @@ -85,7 +90,7 @@
update();
}

function changeOverflow(value) {
function changeYOverflow(value) {
{
// Chrome/Safari-specific fix:
// When the textarea y-overflow is hidden, Chrome/Safari do not reflow the text to account for the space
Expand All @@ -107,8 +112,35 @@

resize();
}

function resize() {
function changeXOverflow(value) {
{
// Chrome/Safari-specific fix:
// When the textarea y-overflow is hidden, Chrome/Safari do not reflow the text to account for the space
// made available by removing the scrollbar. The following forces the necessary text reflow.
var height = ta.style.height;
ta.style.height = '0px';
// Force reflow:
/* jshint ignore:start */
ta.offsetHeight;
/* jshint ignore:end */
ta.style.height = height;
}

overflowX = value;

if (setOverflowX) {
ta.style.overflowX = value;
}

resize();
}

function resize() {
resizeWidth();
resizeHeight();
}

function resizeHeight() {
var htmlTop = window.pageYOffset;
var bodyTop = document.body.scrollTop;
var originalHeight = ta.style.height;
Expand All @@ -133,6 +165,35 @@
document.body.scrollTop = bodyTop;
}

function resizeWidth() {
var htmlTop = window.pageYOffset;
var bodyTop = document.body.scrollTop;
var originalWidth = ta.style.width;

ta.style.width = 'auto';
ta.style.whiteSpace = "nowrap";


var endWidth = ta.scrollWidth + widthOffset;
var maxWidth = null;
if (ta.style.maxWidth) {
maxWidth = parseInt(ta.style.maxWidth);
}
if (maxWidth && endWidth > maxWidth) {
endWidth = maxWidth;
ta.style.whiteSpace = "normal";
} else {
ta.style.whiteSpace = "nowrap";
}

ta.style.width = endWidth + 'px';
// used to check if an update is actually necessary on window.resize
clientWidth = ta.clientWidth;

// prevents scroll-position jumping
document.documentElement.scrollTop = htmlTop;
document.body.scrollTop = bodyTop;
}
function update() {
var startHeight = ta.style.height;

Expand All @@ -142,13 +203,22 @@

if (style.height !== ta.style.height) {
if (overflowY !== 'visible') {
changeOverflow('visible');
changeYOverflow('visible');
}
} else {
if (overflowY !== 'hidden') {
changeOverflow('hidden');
}
}
changeYOverflow('hidden');
}
}
if (style.width !== ta.style.width) {
if (overflowX !== 'visible') {
changeXOverflow('visible');
}
} else {
if (overflowX !== 'hidden') {
changeXOverflow('hidden');
}
}

if (startHeight !== ta.style.height) {
var evt = createEvent('autosize:resized');
Expand Down

0 comments on commit c386066

Please sign in to comment.