Skip to content

Commit

Permalink
Reworked to respect max-height of any unit-type. Fixes jackmoore#191.
Browse files Browse the repository at this point in the history
jackmoore committed Apr 23, 2015
1 parent 6de563d commit 85ccb80
Showing 7 changed files with 106 additions and 69 deletions.
2 changes: 1 addition & 1 deletion bower.json
Original file line number Diff line number Diff line change
@@ -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.1",
"version": "3.0.2",
"dependencies": {},
"keywords": [
"textarea",
36 changes: 26 additions & 10 deletions build.js
Original file line number Diff line number Diff line change
@@ -3,6 +3,7 @@ var fs = require('fs');
var ugly = require('uglify-js');
var jshint = require('jshint').JSHINT;
var babel = require('babel');
var gaze = require('gaze');

function writeBower() {
var bower = {
@@ -39,8 +40,10 @@ function lint(full) {
console.log(err.line+':'+err.character+' '+err.reason);
});
} else {
return true;
console.log('linted')
}

return true;
}

function build(code) {
@@ -54,15 +57,28 @@ function build(code) {
''
].join('\n');

fs.writeFile('dest/'+pkg.config.fileName+'.js', header+code);
fs.writeFile('dest/'+pkg.config.fileName+'.min.js', header+minified);
fs.writeFile('dest/'+pkg.config.filename+'.js', header+code);
fs.writeFile('dest/'+pkg.config.filename+'.min.js', header+minified);
writeBower();
console.log('built');
}

babel.transformFile('src/'+pkg.config.fileName+'.js', {modules: 'umd'}, function (err,res) {
if (err) {
return console.log(err);
} else {
lint(res.code) && build(res.code);
}
});
function transform(filepath) {
babel.transformFile(filepath, {modules: 'umd'}, function (err,res) {
if (err) {
return console.log(err);
} else {
lint(res.code);
build(res.code);
}
});
}

gaze('src/'+pkg.config.filename+'.js', function(err, watcher){
// On file changed
this.on('changed', function(filepath) {
transform(filepath);
});
});

transform('src/'+pkg.config.filename+'.js');
3 changes: 3 additions & 0 deletions changelog.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,8 @@
## Changelog

##### v.3.0.2 - 2015-04-23
* Reworked to respect max-height of any unit-type. Fixes #191.

##### v.3.0.1 - 2015-04-23
* Fixed the destroy event so that it removes it's own event handler. Fixes #218.

66 changes: 37 additions & 29 deletions dest/autosize.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
/*!
Autosize 3.0.1
Autosize 3.0.2
license: MIT
http://www.jacklmoore.com/autosize
*/
@@ -21,8 +21,7 @@
function assign(ta) {
if (!ta || !ta.nodeName || ta.nodeName !== 'TEXTAREA' || ta.hasAttribute('data-autosize-on')) {
return;
}var maxHeight;
var heightOffset;
}var heightOffset;

function init() {
var style = window.getComputedStyle(ta, null);
@@ -33,19 +32,6 @@
ta.style.resize = 'horizontal';
}

// Chrome/Safari-specific fix:
// When the textarea y-over is hidden, Chrome/Safari doesn't reflow the text to account for the space
// made available by removing the scrollbar. This workaround will cause the text to reflow.
var width = ta.style.width;
ta.style.width = '0px';
// Force reflow:
/* jshint ignore:start */
ta.offsetWidth;
/* jshint ignore:end */
ta.style.width = width;

maxHeight = style.maxHeight !== 'none' ? parseFloat(style.maxHeight) : false;

if (style.boxSizing === 'content-box') {
heightOffset = -(parseFloat(style.paddingTop) + parseFloat(style.paddingBottom));
} else {
@@ -55,6 +41,24 @@
update();
}

function changeOverflow(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 width = ta.style.width;
ta.style.width = '0px';
// Force reflow:
/* jshint ignore:start */
ta.offsetWidth;
/* jshint ignore:end */
ta.style.width = width;
}

ta.style.overflowY = value;
update();
}

function update() {
var startHeight = ta.style.height;
var htmlTop = document.documentElement.scrollTop;
@@ -64,21 +68,27 @@

var endHeight = ta.scrollHeight + heightOffset;

if (maxHeight !== false && maxHeight < endHeight) {
endHeight = maxHeight;
if (ta.style.overflowY !== 'scroll') {
ta.style.overflowY = 'scroll';
}
} else if (ta.style.overflowY !== 'hidden') {
ta.style.overflowY = 'hidden';
}

ta.style.height = endHeight + 'px';

// prevents scroll-position jumping
document.documentElement.scrollTop = htmlTop;
document.body.scrollTop = bodyTop;

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

if (style.height !== ta.style.height) {
if (ta.style.overflowY !== 'visible') {
changeOverflow('visible');
return;
}
} else {
if (ta.style.overflowY !== 'hidden') {
changeOverflow('hidden');
autosize();
return;
}
}

if (startHeight !== ta.style.height) {
var evt = document.createEvent('Event');
evt.initEvent('autosize:resized', true, false);
@@ -98,9 +108,8 @@
});
}).bind(ta, {
height: ta.style.height,
overflowY: ta.style.overflowY,
resize: ta.style.resize
});
resize: ta.style.resize,
overflowY: ta.style.overflowY });

ta.addEventListener('autosize:destroy', destroy);

@@ -115,7 +124,6 @@
ta.addEventListener('input', update);
ta.addEventListener('autosize:update', update);
ta.setAttribute('data-autosize-on', true);
ta.style.overflowY = 'hidden';
init();
}

4 changes: 2 additions & 2 deletions dest/autosize.min.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

5 changes: 3 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
@@ -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.1",
"version": "3.0.2",
"keywords": [
"textarea",
"form",
@@ -23,6 +23,7 @@
"dependencies": {},
"devDependencies": {
"babel": "^5.1.9",
"gaze": "^0.5.1",
"jshint": "^2.5.6",
"uglify-js": "^2.4.15"
},
@@ -32,6 +33,6 @@
"ignore": []
},
"title": "Autosize",
"fileName": "autosize"
"filename": "autosize"
}
}
59 changes: 34 additions & 25 deletions src/autosize.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
function assign(ta) {
if (!ta || !ta.nodeName || ta.nodeName !== 'TEXTAREA' || ta.hasAttribute('data-autosize-on')) return;

var maxHeight;
var heightOffset;

function init() {
@@ -13,19 +12,6 @@ function assign(ta) {
ta.style.resize = 'horizontal';
}

// Chrome/Safari-specific fix:
// When the textarea y-over is hidden, Chrome/Safari doesn't reflow the text to account for the space
// made available by removing the scrollbar. This workaround will cause the text to reflow.
const width = ta.style.width;
ta.style.width = '0px';
// Force reflow:
/* jshint ignore:start */
ta.offsetWidth;
/* jshint ignore:end */
ta.style.width = width;

maxHeight = style.maxHeight !== 'none' ? parseFloat(style.maxHeight) : false;

if (style.boxSizing === 'content-box') {
heightOffset = -(parseFloat(style.paddingTop)+parseFloat(style.paddingBottom));
} else {
@@ -35,6 +21,24 @@ function assign(ta) {
update();
}

function changeOverflow(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.
const width = ta.style.width;
ta.style.width = '0px';
// Force reflow:
/* jshint ignore:start */
ta.offsetWidth;
/* jshint ignore:end */
ta.style.width = width;
}

ta.style.overflowY = value;
update();
}

function update() {
const startHeight = ta.style.height;
const htmlTop = document.documentElement.scrollTop;
@@ -44,21 +48,27 @@ function assign(ta) {

let endHeight = ta.scrollHeight+heightOffset;

if (maxHeight !== false && maxHeight < endHeight) {
endHeight = maxHeight;
if (ta.style.overflowY !== 'scroll') {
ta.style.overflowY = 'scroll';
}
} else if (ta.style.overflowY !== 'hidden') {
ta.style.overflowY = 'hidden';
}

ta.style.height = endHeight+'px';

// prevents scroll-position jumping
document.documentElement.scrollTop = htmlTop;
document.body.scrollTop = bodyTop;

const style = window.getComputedStyle(ta, null);

if (style.height !== ta.style.height) {
if (ta.style.overflowY !== 'visible') {
changeOverflow('visible');
return;
}
} else {
if (ta.style.overflowY !== 'hidden') {
changeOverflow('hidden');
autosize();
return;
}
}

if (startHeight !== ta.style.height) {
const evt = document.createEvent('Event');
evt.initEvent('autosize:resized', true, false);
@@ -78,8 +88,8 @@ function assign(ta) {
});
}.bind(ta, {
height: ta.style.height,
resize: ta.style.resize,
overflowY: ta.style.overflowY,
resize: ta.style.resize
});

ta.addEventListener('autosize:destroy', destroy);
@@ -95,7 +105,6 @@ function assign(ta) {
ta.addEventListener('input', update);
ta.addEventListener('autosize:update', update);
ta.setAttribute('data-autosize-on', true);
ta.style.overflowY = 'hidden';
init();
}

0 comments on commit 85ccb80

Please sign in to comment.