forked from jackmoore/autosize
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
4 changed files
with
144 additions
and
144 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,131 +1,130 @@ | ||
| (function (root, factory) { | ||
| 'use strict'; | ||
|
|
||
| if (typeof define === 'function' && define.amd) { | ||
| // AMD. Register as an anonymous module. | ||
| define([], factory); | ||
| } else if (typeof exports === 'object') { | ||
| // Node. Does not work with strict CommonJS, but | ||
| // only CommonJS-like environments that support module.exports, | ||
| // like Node. | ||
| module.exports = factory(); | ||
| } else { | ||
| // Browser globals (root is window) | ||
| root.autosize = factory(); | ||
| } | ||
| }(this, function () { | ||
| function main(ta) { | ||
| if (!ta || !ta.nodeName || ta.nodeName !== 'TEXTAREA' || ta.hasAttribute('data-autosize-on')) { return; } | ||
|
|
||
| var maxHeight; | ||
| var heightOffset; | ||
|
|
||
| function init() { | ||
| var style = window.getComputedStyle(ta, null); | ||
|
|
||
| if (style.resize === 'vertical') { | ||
| ta.style.resize = 'none'; | ||
| } else if (style.resize === 'both') { | ||
| ta.style.resize = 'horizontal'; | ||
| } | ||
| function main(ta) { | ||
| if (!ta || !ta.nodeName || ta.nodeName !== 'TEXTAREA' || ta.hasAttribute('data-autosize-on')) { return; } | ||
|
|
||
| // Chrome/Safari-specific fix: | ||
| // When the textarea y-overflow 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 { | ||
| heightOffset = parseFloat(style.borderTopWidth)+parseFloat(style.borderBottomWidth); | ||
| } | ||
| var maxHeight; | ||
| var heightOffset; | ||
|
|
||
| adjust(); | ||
| function init() { | ||
| var style = window.getComputedStyle(ta, null); | ||
|
|
||
| if (style.resize === 'vertical') { | ||
| ta.style.resize = 'none'; | ||
| } else if (style.resize === 'both') { | ||
| ta.style.resize = 'horizontal'; | ||
| } | ||
|
|
||
| function adjust() { | ||
| var startHeight = ta.style.height; | ||
| var htmlTop = document.documentElement.scrollTop; | ||
| var bodyTop = document.body.scrollTop; | ||
|
|
||
| ta.style.height = 'auto'; | ||
|
|
||
| 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'; | ||
| } | ||
| // 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 { | ||
| heightOffset = parseFloat(style.borderTopWidth)+parseFloat(style.borderBottomWidth); | ||
| } | ||
|
|
||
| adjust(); | ||
| } | ||
|
|
||
| ta.style.height = endHeight+'px'; | ||
| function adjust() { | ||
| var startHeight = ta.style.height; | ||
| var htmlTop = document.documentElement.scrollTop; | ||
| var bodyTop = document.body.scrollTop; | ||
|
|
||
| ta.style.height = 'auto'; | ||
|
|
||
| // prevents scroll-position jumping | ||
| document.documentElement.scrollTop = htmlTop; | ||
| document.body.scrollTop = bodyTop; | ||
| var endHeight = ta.scrollHeight+heightOffset; | ||
|
|
||
| if (startHeight !== ta.style.height) { | ||
| var evt = document.createEvent('Event'); | ||
| evt.initEvent('autosize.resized', true, false); | ||
| ta.dispatchEvent(evt); | ||
| 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.addEventListener('autosize.destroy', function(style){ | ||
| window.removeEventListener('resize', adjust); | ||
| ta.removeEventListener('input', adjust); | ||
| ta.removeEventListener('keyup', adjust); | ||
| ta.removeAttribute('data-autosize-on'); | ||
| ta.removeEventListener('autosize.destroy'); | ||
|
|
||
| Object.keys(style).forEach(function(key){ | ||
| ta.style[key] = style[key]; | ||
| }); | ||
| }.bind(ta, { | ||
| height: ta.style.height, | ||
| overflowY: ta.style.overflowY, | ||
| resize: ta.style.resize | ||
| })); | ||
|
|
||
| // IE9 does not fire onpropertychange or oninput for deletions, | ||
| // so binding to onkeyup to catch most of those events. | ||
| // There is no way that I know of to detect something like 'cut' in IE9. | ||
| if ('onpropertychange' in ta && 'oninput' in ta) { | ||
| ta.addEventListener('keyup', adjust); | ||
| } | ||
| ta.style.height = endHeight+'px'; | ||
|
|
||
| // prevents scroll-position jumping | ||
| document.documentElement.scrollTop = htmlTop; | ||
| document.body.scrollTop = bodyTop; | ||
|
|
||
| window.addEventListener('resize', adjust); | ||
| ta.addEventListener('input', adjust); | ||
| ta.addEventListener('autosize.update', adjust); | ||
| ta.setAttribute('data-autosize-on', true); | ||
| ta.style.overflowY = 'hidden'; | ||
| init(); | ||
| if (startHeight !== ta.style.height) { | ||
| var evt = document.createEvent('Event'); | ||
| evt.initEvent('autosize.resized', true, false); | ||
| ta.dispatchEvent(evt); | ||
| } | ||
| } | ||
|
|
||
| // Do nothing in IE8 or lower | ||
| if (typeof window.getComputedStyle !== 'function') { | ||
| return function(elements) { | ||
| return elements; | ||
| }; | ||
| } else { | ||
| return function(elements) { | ||
| if (elements && elements.length) { | ||
| Array.prototype.forEach.call(elements, main); | ||
| } else if (elements && elements.nodeName) { | ||
| main(elements); | ||
| } | ||
| return elements; | ||
| }; | ||
| ta.addEventListener('autosize.destroy', function(style){ | ||
| window.removeEventListener('resize', adjust); | ||
| ta.removeEventListener('input', adjust); | ||
| ta.removeEventListener('keyup', adjust); | ||
| ta.removeAttribute('data-autosize-on'); | ||
| ta.removeEventListener('autosize.destroy'); | ||
|
|
||
| Object.keys(style).forEach(function(key){ | ||
| ta.style[key] = style[key]; | ||
| }); | ||
| }.bind(ta, { | ||
| height: ta.style.height, | ||
| overflowY: ta.style.overflowY, | ||
| resize: ta.style.resize | ||
| })); | ||
|
|
||
| // IE9 does not fire onpropertychange or oninput for deletions, | ||
| // so binding to onkeyup to catch most of those events. | ||
| // There is no way that I know of to detect something like 'cut' in IE9. | ||
| if ('onpropertychange' in ta && 'oninput' in ta) { | ||
| ta.addEventListener('keyup', adjust); | ||
| } | ||
| })); | ||
|
|
||
| window.addEventListener('resize', adjust); | ||
| ta.addEventListener('input', adjust); | ||
| ta.addEventListener('autosize.update', adjust); | ||
| ta.setAttribute('data-autosize-on', true); | ||
| ta.style.overflowY = 'hidden'; | ||
| init(); | ||
| } | ||
|
|
||
| var autosize; | ||
|
|
||
| // Do nothing in IE8 or lower | ||
| if (typeof window.getComputedStyle !== 'function') { | ||
| autosize = function(elements) { | ||
| return elements; | ||
| }; | ||
| autosize.destroy = function(){}; | ||
| autosize.update = function(){}; | ||
| } else { | ||
| autosize = function(elements) { | ||
| if (elements && elements.length) { | ||
| Array.prototype.forEach.call(elements, main); | ||
| } else if (elements && elements.nodeName) { | ||
| main(elements); | ||
| } | ||
| return elements; | ||
| }; | ||
| autosize.destroy = function(ta) { | ||
| var evt = document.createEvent('Event'); | ||
| evt.initEvent('autosize.destroy', true, false); | ||
| ta.dispatchEvent(evt); | ||
| }; | ||
| autosize.update = function(ta) { | ||
| var evt = document.createEvent('Event'); | ||
| evt.initEvent('autosize.update', true, false); | ||
| ta.dispatchEvent(evt); | ||
| }; | ||
| } | ||
|
|
||
| export default autosize; |