| 1 |
/*! |
| 2 |
autosize 4.0.2 |
| 3 |
license: MIT |
| 4 |
http://www.jacklmoore.com/autosize |
| 5 |
*/ |
| 6 |
(function (global, factory) { |
| 7 |
if (typeof define === "function" && define.amd) { |
| 8 |
define(['module', 'exports'], factory); |
| 9 |
} else if (typeof exports !== "undefined") { |
| 10 |
factory(module, exports); |
| 11 |
} else { |
| 12 |
var mod = { |
| 13 |
exports: {} |
| 14 |
}; |
| 15 |
factory(mod, mod.exports); |
| 16 |
global.autosize = mod.exports; |
| 17 |
} |
| 18 |
})(this, function (module, exports) { |
| 19 |
'use strict'; |
| 20 |
|
| 21 |
var map = typeof Map === "function" ? new Map() : function () { |
| 22 |
var keys = []; |
| 23 |
var values = []; |
| 24 |
|
| 25 |
return { |
| 26 |
has: function has(key) { |
| 27 |
return keys.indexOf(key) > -1; |
| 28 |
}, |
| 29 |
get: function get(key) { |
| 30 |
return values[keys.indexOf(key)]; |
| 31 |
}, |
| 32 |
set: function set(key, value) { |
| 33 |
if (keys.indexOf(key) === -1) { |
| 34 |
keys.push(key); |
| 35 |
values.push(value); |
| 36 |
} |
| 37 |
}, |
| 38 |
delete: function _delete(key) { |
| 39 |
var index = keys.indexOf(key); |
| 40 |
if (index > -1) { |
| 41 |
keys.splice(index, 1); |
| 42 |
values.splice(index, 1); |
| 43 |
} |
| 44 |
} |
| 45 |
}; |
| 46 |
}(); |
| 47 |
|
| 48 |
var createEvent = function createEvent(name) { |
| 49 |
return new Event(name, { bubbles: true }); |
| 50 |
}; |
| 51 |
try { |
| 52 |
new Event('test'); |
| 53 |
} catch (e) { |
| 54 |
// IE does not support `new Event()` |
| 55 |
createEvent = function createEvent(name) { |
| 56 |
var evt = document.createEvent('Event'); |
| 57 |
evt.initEvent(name, true, false); |
| 58 |
return evt; |
| 59 |
}; |
| 60 |
} |
| 61 |
|
| 62 |
function assign(ta) { |
| 63 |
if (!ta || !ta.nodeName || ta.nodeName !== 'TEXTAREA' || map.has(ta)) return; |
| 64 |
|
| 65 |
var heightOffset = null; |
| 66 |
var clientWidth = null; |
| 67 |
var cachedHeight = null; |
| 68 |
|
| 69 |
function init() { |
| 70 |
var style = window.getComputedStyle(ta, null); |
| 71 |
|
| 72 |
if (style.resize === 'vertical') { |
| 73 |
ta.style.resize = 'none'; |
| 74 |
} else if (style.resize === 'both') { |
| 75 |
ta.style.resize = 'horizontal'; |
| 76 |
} |
| 77 |
|
| 78 |
if (style.boxSizing === 'content-box') { |
| 79 |
heightOffset = -(parseFloat(style.paddingTop) + parseFloat(style.paddingBottom)); |
| 80 |
} else { |
| 81 |
heightOffset = parseFloat(style.borderTopWidth) + parseFloat(style.borderBottomWidth); |
| 82 |
} |
| 83 |
// Fix when a textarea is not on document body and heightOffset is Not a Number |
| 84 |
if (isNaN(heightOffset)) { |
| 85 |
heightOffset = 0; |
| 86 |
} |
| 87 |
|
| 88 |
update(); |
| 89 |
} |
| 90 |
|
| 91 |
function changeOverflow(value) { |
| 92 |
{ |
| 93 |
// Chrome/Safari-specific fix: |
| 94 |
// When the textarea y-overflow is hidden, Chrome/Safari do not reflow the text to account for the space |
| 95 |
// made available by removing the scrollbar. The following forces the necessary text reflow. |
| 96 |
var width = ta.style.width; |
| 97 |
ta.style.width = '0px'; |
| 98 |
// Force reflow: |
| 99 |
/* jshint ignore:start */ |
| 100 |
ta.offsetWidth; |
| 101 |
/* jshint ignore:end */ |
| 102 |
ta.style.width = width; |
| 103 |
} |
| 104 |
|
| 105 |
ta.style.overflowY = value; |
| 106 |
} |
| 107 |
|
| 108 |
function getParentOverflows(el) { |
| 109 |
var arr = []; |
| 110 |
|
| 111 |
while (el && el.parentNode && el.parentNode instanceof Element) { |
| 112 |
if (el.parentNode.scrollTop) { |
| 113 |
arr.push({ |
| 114 |
node: el.parentNode, |
| 115 |
scrollTop: el.parentNode.scrollTop |
| 116 |
}); |
| 117 |
} |
| 118 |
el = el.parentNode; |
| 119 |
} |
| 120 |
|
| 121 |
return arr; |
| 122 |
} |
| 123 |
|
| 124 |
function resize() { |
| 125 |
if (ta.scrollHeight === 0) { |
| 126 |
// If the scrollHeight is 0, then the element probably has display:none or is detached from the DOM. |
| 127 |
return; |
| 128 |
} |
| 129 |
|
| 130 |
var overflows = getParentOverflows(ta); |
| 131 |
var docTop = document.documentElement && document.documentElement.scrollTop; // Needed for Mobile IE (ticket #240) |
| 132 |
|
| 133 |
ta.style.height = ''; |
| 134 |
ta.style.height = ta.scrollHeight + heightOffset + 'px'; |
| 135 |
|
| 136 |
// used to check if an update is actually necessary on window.resize |
| 137 |
clientWidth = ta.clientWidth; |
| 138 |
|
| 139 |
// prevents scroll-position jumping |
| 140 |
overflows.forEach(function (el) { |
| 141 |
el.node.scrollTop = el.scrollTop; |
| 142 |
}); |
| 143 |
|
| 144 |
if (docTop) { |
| 145 |
document.documentElement.scrollTop = docTop; |
| 146 |
} |
| 147 |
} |
| 148 |
|
| 149 |
function update() { |
| 150 |
resize(); |
| 151 |
|
| 152 |
var styleHeight = Math.round(parseFloat(ta.style.height)); |
| 153 |
var computed = window.getComputedStyle(ta, null); |
| 154 |
|
| 155 |
// Using offsetHeight as a replacement for computed.height in IE, because IE does not account use of border-box |
| 156 |
var actualHeight = computed.boxSizing === 'content-box' ? Math.round(parseFloat(computed.height)) : ta.offsetHeight; |
| 157 |
|
| 158 |
// The actual height not matching the style height (set via the resize method) indicates that |
| 159 |
// the max-height has been exceeded, in which case the overflow should be allowed. |
| 160 |
if (actualHeight < styleHeight) { |
| 161 |
if (computed.overflowY === 'hidden') { |
| 162 |
changeOverflow('scroll'); |
| 163 |
resize(); |
| 164 |
actualHeight = computed.boxSizing === 'content-box' ? Math.round(parseFloat(window.getComputedStyle(ta, null).height)) : ta.offsetHeight; |
| 165 |
} |
| 166 |
} else { |
| 167 |
// Normally keep overflow set to hidden, to avoid flash of scrollbar as the textarea expands. |
| 168 |
if (computed.overflowY !== 'hidden') { |
| 169 |
changeOverflow('hidden'); |
| 170 |
resize(); |
| 171 |
actualHeight = computed.boxSizing === 'content-box' ? Math.round(parseFloat(window.getComputedStyle(ta, null).height)) : ta.offsetHeight; |
| 172 |
} |
| 173 |
} |
| 174 |
|
| 175 |
if (cachedHeight !== actualHeight) { |
| 176 |
cachedHeight = actualHeight; |
| 177 |
var evt = createEvent('autosize:resized'); |
| 178 |
try { |
| 179 |
ta.dispatchEvent(evt); |
| 180 |
} catch (err) { |
| 181 |
// Firefox will throw an error on dispatchEvent for a detached element |
| 182 |
// https://bugzilla.mozilla.org/show_bug.cgi?id=889376 |
| 183 |
} |
| 184 |
} |
| 185 |
} |
| 186 |
|
| 187 |
var pageResize = function pageResize() { |
| 188 |
if (ta.clientWidth !== clientWidth) { |
| 189 |
update(); |
| 190 |
} |
| 191 |
}; |
| 192 |
|
| 193 |
var destroy = function (style) { |
| 194 |
window.removeEventListener('resize', pageResize, false); |
| 195 |
ta.removeEventListener('input', update, false); |
| 196 |
ta.removeEventListener('keyup', update, false); |
| 197 |
ta.removeEventListener('autosize:destroy', destroy, false); |
| 198 |
ta.removeEventListener('autosize:update', update, false); |
| 199 |
|
| 200 |
Object.keys(style).forEach(function (key) { |
| 201 |
ta.style[key] = style[key]; |
| 202 |
}); |
| 203 |
|
| 204 |
map.delete(ta); |
| 205 |
}.bind(ta, { |
| 206 |
height: ta.style.height, |
| 207 |
resize: ta.style.resize, |
| 208 |
overflowY: ta.style.overflowY, |
| 209 |
overflowX: ta.style.overflowX, |
| 210 |
wordWrap: ta.style.wordWrap |
| 211 |
}); |
| 212 |
|
| 213 |
ta.addEventListener('autosize:destroy', destroy, false); |
| 214 |
|
| 215 |
// IE9 does not fire onpropertychange or oninput for deletions, |
| 216 |
// so binding to onkeyup to catch most of those events. |
| 217 |
// There is no way that I know of to detect something like 'cut' in IE9. |
| 218 |
if ('onpropertychange' in ta && 'oninput' in ta) { |
| 219 |
ta.addEventListener('keyup', update, false); |
| 220 |
} |
| 221 |
|
| 222 |
window.addEventListener('resize', pageResize, false); |
| 223 |
ta.addEventListener('input', update, false); |
| 224 |
ta.addEventListener('autosize:update', update, false); |
| 225 |
ta.style.overflowX = 'hidden'; |
| 226 |
ta.style.wordWrap = 'break-word'; |
| 227 |
|
| 228 |
map.set(ta, { |
| 229 |
destroy: destroy, |
| 230 |
update: update |
| 231 |
}); |
| 232 |
|
| 233 |
init(); |
| 234 |
} |
| 235 |
|
| 236 |
function destroy(ta) { |
| 237 |
var methods = map.get(ta); |
| 238 |
if (methods) { |
| 239 |
methods.destroy(); |
| 240 |
} |
| 241 |
} |
| 242 |
|
| 243 |
function update(ta) { |
| 244 |
var methods = map.get(ta); |
| 245 |
if (methods) { |
| 246 |
methods.update(); |
| 247 |
} |
| 248 |
} |
| 249 |
|
| 250 |
var autosize = null; |
| 251 |
|
| 252 |
// Do nothing in Node.js environment and IE8 (or lower) |
| 253 |
if (typeof window === 'undefined' || typeof window.getComputedStyle !== 'function') { |
| 254 |
autosize = function autosize(el) { |
| 255 |
return el; |
| 256 |
}; |
| 257 |
autosize.destroy = function (el) { |
| 258 |
return el; |
| 259 |
}; |
| 260 |
autosize.update = function (el) { |
| 261 |
return el; |
| 262 |
}; |
| 263 |
} else { |
| 264 |
autosize = function autosize(el, options) { |
| 265 |
if (el) { |
| 266 |
Array.prototype.forEach.call(el.length ? el : [el], function (x) { |
| 267 |
return assign(x, options); |
| 268 |
}); |
| 269 |
} |
| 270 |
return el; |
| 271 |
}; |
| 272 |
autosize.destroy = function (el) { |
| 273 |
if (el) { |
| 274 |
Array.prototype.forEach.call(el.length ? el : [el], destroy); |
| 275 |
} |
| 276 |
return el; |
| 277 |
}; |
| 278 |
autosize.update = function (el) { |
| 279 |
if (el) { |
| 280 |
Array.prototype.forEach.call(el.length ? el : [el], update); |
| 281 |
} |
| 282 |
return el; |
| 283 |
}; |
| 284 |
} |
| 285 |
|
| 286 |
exports.default = autosize; |
| 287 |
module.exports = exports['default']; |
| 288 |
}); |
