From 1b9c109fbb77f10cd029389802d15d30d2fe77df Mon Sep 17 00:00:00 2001 From: Jack Date: Fri, 10 Feb 2023 21:54:14 -0500 Subject: [PATCH] dropped support for Internet Explorer --- changelog.md | 3 ++ dist/autosize.esm.js | 2 +- dist/autosize.js | 103 +++++++++++-------------------------------- dist/autosize.min.js | 2 +- package.json | 2 +- readme.md | 6 --- src/autosize.js | 83 +++++++--------------------------- 7 files changed, 47 insertions(+), 154 deletions(-) diff --git a/changelog.md b/changelog.md index 703c9c9..7687100 100644 --- a/changelog.md +++ b/changelog.md @@ -1,5 +1,8 @@ ## Changelog +##### v.6.0.0 - 2023-02-10 +* Dropped support for Internet Explorer + ##### v.5.0.2 - 2022-11-20 * Avoid issue caused by using 'smooth' scroll-behavior diff --git a/dist/autosize.esm.js b/dist/autosize.esm.js index 48aa632..1caed73 100644 --- a/dist/autosize.esm.js +++ b/dist/autosize.esm.js @@ -1 +1 @@ -var e,t,n="function"==typeof Map?new Map:(e=[],t=[],{has:function(t){return e.indexOf(t)>-1},get:function(n){return t[e.indexOf(n)]},set:function(n,o){-1===e.indexOf(n)&&(e.push(n),t.push(o))},delete:function(n){var o=e.indexOf(n);o>-1&&(e.splice(o,1),t.splice(o,1))}}),o=function(e){return new Event(e,{bubbles:!0})};try{new Event("test")}catch(e){o=function(e){var t=document.createEvent("Event");return t.initEvent(e,!0,!1),t}}function r(e){var t=n.get(e);t&&t.destroy()}function i(e){var t=n.get(e);t&&t.update()}var l=null;"undefined"==typeof window||"function"!=typeof window.getComputedStyle?((l=function(e){return e}).destroy=function(e){return e},l.update=function(e){return e}):((l=function(e,t){return e&&Array.prototype.forEach.call(e.length?e:[e],function(e){return function(e){if(e&&e.nodeName&&"TEXTAREA"===e.nodeName&&!n.has(e)){var t,r=null,i=null,l=null,a=function(){e.clientWidth!==i&&p()},d=function(t){window.removeEventListener("resize",a,!1),e.removeEventListener("input",p,!1),e.removeEventListener("keyup",p,!1),e.removeEventListener("autosize:destroy",d,!1),e.removeEventListener("autosize:update",p,!1),Object.keys(t).forEach(function(n){e.style[n]=t[n]}),n.delete(e)}.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",d,!1),"onpropertychange"in e&&"oninput"in e&&e.addEventListener("keyup",p,!1),window.addEventListener("resize",a,!1),e.addEventListener("input",p,!1),e.addEventListener("autosize:update",p,!1),e.style.overflowX="hidden",e.style.wordWrap="break-word",n.set(e,{destroy:d,update:p}),"vertical"===(t=window.getComputedStyle(e,null)).resize?e.style.resize="none":"both"===t.resize&&(e.style.resize="horizontal"),r="content-box"===t.boxSizing?-(parseFloat(t.paddingTop)+parseFloat(t.paddingBottom)):parseFloat(t.borderTopWidth)+parseFloat(t.borderBottomWidth),isNaN(r)&&(r=0),p()}function s(t){var n=e.style.width;e.style.width="0px",e.style.width=n,e.style.overflowY=t}function u(){if(0!==e.scrollHeight){var t=function(e){for(var t=[];e&&e.parentNode&&e.parentNode instanceof Element;)e.parentNode.scrollTop&&(e.parentNode.style.scrollBehavior="auto",t.push([e.parentNode,e.parentNode.scrollTop])),e=e.parentNode;return function(){return t.forEach(function(e){var t=e[0];t.scrollTop=e[1],t.style.scrollBehavior=null})}}(e);e.style.height="",e.style.height=e.scrollHeight+r+"px",i=e.clientWidth,t()}}function p(){u();var t=Math.round(parseFloat(e.style.height)),n=window.getComputedStyle(e,null),r="content-box"===n.boxSizing?Math.round(parseFloat(n.height)):e.offsetHeight;if(r -1; - }, - get: function get(key) { - return values[keys.indexOf(key)]; - }, - set: function set(key, value) { - if (keys.indexOf(key) === -1) { - keys.push(key); - values.push(value); - } - }, - "delete": function _delete(key) { - var index = keys.indexOf(key); - - if (index > -1) { - keys.splice(index, 1); - values.splice(index, 1); - } - } - }; - }(); - - var createEvent = function createEvent(name) { - return new Event(name, { - bubbles: true - }); - }; - - try { - new Event('test'); - } catch (e) { - // IE does not support `new Event()` - createEvent = function createEvent(name) { - var evt = document.createEvent('Event'); - evt.initEvent(name, true, false); - return evt; - }; - } + var assignedElements = new Map(); function assign(ta) { - if (!ta || !ta.nodeName || ta.nodeName !== 'TEXTAREA' || map.has(ta)) return; + if (!ta || !ta.nodeName || ta.nodeName !== 'TEXTAREA' || assignedElements.has(ta)) return; var heightOffset = null; var clientWidth = null; var cachedHeight = null; function init() { - var style = window.getComputedStyle(ta, null); + var style = window.getComputedStyle(ta); if (style.resize === 'vertical') { ta.style.resize = 'none'; @@ -90,12 +48,11 @@ ta.style.overflowY = value; } - function bookmarkOverflows(el) { + function cacheScrollTops(el) { var arr = []; while (el && el.parentNode && el.parentNode instanceof Element) { if (el.parentNode.scrollTop) { - el.parentNode.style.scrollBehavior = 'auto'; arr.push([el.parentNode, el.parentNode.scrollTop]); } @@ -106,6 +63,7 @@ return arr.forEach(function (_ref) { var node = _ref[0], scrollTop = _ref[1]; + node.style.scrollBehavior = 'auto'; node.scrollTop = scrollTop; node.style.scrollBehavior = null; }); @@ -116,49 +74,45 @@ if (ta.scrollHeight === 0) { // If the scrollHeight is 0, then the element probably has display:none or is detached from the DOM. return; - } // remove smooth scroll & prevent scroll-position jumping by restoring original scroll position + } // ensure the scrollTop values of parent elements are not modified as a consequence of calculating the textarea height + + var restoreScrollTops = cacheScrollTops(ta); + ta.style.height = ''; // this is necessary for getting an accurate scrollHeight on the next line - var restoreOverflows = bookmarkOverflows(ta); - ta.style.height = ''; ta.style.height = ta.scrollHeight + heightOffset + 'px'; // used to check if an update is actually necessary on window.resize clientWidth = ta.clientWidth; - restoreOverflows(); + restoreScrollTops(); } function update() { resize(); - var styleHeight = Math.round(parseFloat(ta.style.height)); - var computed = window.getComputedStyle(ta, null); // Using offsetHeight as a replacement for computed.height in IE, because IE does not account use of border-box - - var actualHeight = computed.boxSizing === 'content-box' ? Math.round(parseFloat(computed.height)) : ta.offsetHeight; // The actual height not matching the style height (set via the resize method) indicates that + var styleHeight = parseFloat(ta.style.height); + var computed = window.getComputedStyle(ta); + var actualHeight = parseFloat(computed.height); // The actual height not matching the style height (set via the resize method) indicates that // the max-height has been exceeded, in which case the overflow should be allowed. if (actualHeight < styleHeight) { if (computed.overflowY === 'hidden') { changeOverflow('scroll'); resize(); - actualHeight = computed.boxSizing === 'content-box' ? Math.round(parseFloat(window.getComputedStyle(ta, null).height)) : ta.offsetHeight; + actualHeight = parseFloat(window.getComputedStyle(ta).height); } } else { // Normally keep overflow set to hidden, to avoid flash of scrollbar as the textarea expands. if (computed.overflowY !== 'hidden') { changeOverflow('hidden'); resize(); - actualHeight = computed.boxSizing === 'content-box' ? Math.round(parseFloat(window.getComputedStyle(ta, null).height)) : ta.offsetHeight; + actualHeight = parseFloat(window.getComputedStyle(ta).height); } } if (cachedHeight !== actualHeight) { cachedHeight = actualHeight; - var evt = createEvent('autosize:resized'); - - try { - ta.dispatchEvent(evt); - } catch (err) {// Firefox will throw an error on dispatchEvent for a detached element - // https://bugzilla.mozilla.org/show_bug.cgi?id=889376 - } + ta.dispatchEvent(new Event('autosize:resized', { + bubbles: true + })); } } @@ -177,7 +131,7 @@ Object.keys(style).forEach(function (key) { ta.style[key] = style[key]; }); - map["delete"](ta); + assignedElements["delete"](ta); }.bind(ta, { height: ta.style.height, resize: ta.style.resize, @@ -186,20 +140,13 @@ wordWrap: ta.style.wordWrap }); - ta.addEventListener('autosize:destroy', destroy, false); // 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', update, false); - } - + ta.addEventListener('autosize:destroy', destroy, false); window.addEventListener('resize', pageResize, false); ta.addEventListener('input', update, false); ta.addEventListener('autosize:update', update, false); ta.style.overflowX = 'hidden'; ta.style.wordWrap = 'break-word'; - map.set(ta, { + assignedElements.set(ta, { destroy: destroy, update: update }); @@ -207,7 +154,7 @@ } function destroy(ta) { - var methods = map.get(ta); + var methods = assignedElements.get(ta); if (methods) { methods.destroy(); @@ -215,16 +162,16 @@ } function update(ta) { - var methods = map.get(ta); + var methods = assignedElements.get(ta); if (methods) { methods.update(); } } - var autosize = null; // Do nothing in Node.js environment and IE8 (or lower) + var autosize = null; // Do nothing in Node.js environment - if (typeof window === 'undefined' || typeof window.getComputedStyle !== 'function') { + if (typeof window === 'undefined') { autosize = function autosize(el) { return el; }; diff --git a/dist/autosize.min.js b/dist/autosize.min.js index d9c6490..d64e636 100644 --- a/dist/autosize.min.js +++ b/dist/autosize.min.js @@ -1 +1 @@ -!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e||self).autosize=t()}(this,function(){var e,t,n="function"==typeof Map?new Map:(e=[],t=[],{has:function(t){return e.indexOf(t)>-1},get:function(n){return t[e.indexOf(n)]},set:function(n,o){-1===e.indexOf(n)&&(e.push(n),t.push(o))},delete:function(n){var o=e.indexOf(n);o>-1&&(e.splice(o,1),t.splice(o,1))}}),o=function(e){return new Event(e,{bubbles:!0})};try{new Event("test")}catch(e){o=function(e){var t=document.createEvent("Event");return t.initEvent(e,!0,!1),t}}function r(e){var t=n.get(e);t&&t.destroy()}function i(e){var t=n.get(e);t&&t.update()}var l=null;return"undefined"==typeof window||"function"!=typeof window.getComputedStyle?((l=function(e){return e}).destroy=function(e){return e},l.update=function(e){return e}):((l=function(e,t){return e&&Array.prototype.forEach.call(e.length?e:[e],function(e){return function(e){if(e&&e.nodeName&&"TEXTAREA"===e.nodeName&&!n.has(e)){var t,r=null,i=null,l=null,a=function(){e.clientWidth!==i&&f()},d=function(t){window.removeEventListener("resize",a,!1),e.removeEventListener("input",f,!1),e.removeEventListener("keyup",f,!1),e.removeEventListener("autosize:destroy",d,!1),e.removeEventListener("autosize:update",f,!1),Object.keys(t).forEach(function(n){e.style[n]=t[n]}),n.delete(e)}.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",d,!1),"onpropertychange"in e&&"oninput"in e&&e.addEventListener("keyup",f,!1),window.addEventListener("resize",a,!1),e.addEventListener("input",f,!1),e.addEventListener("autosize:update",f,!1),e.style.overflowX="hidden",e.style.wordWrap="break-word",n.set(e,{destroy:d,update:f}),"vertical"===(t=window.getComputedStyle(e,null)).resize?e.style.resize="none":"both"===t.resize&&(e.style.resize="horizontal"),r="content-box"===t.boxSizing?-(parseFloat(t.paddingTop)+parseFloat(t.paddingBottom)):parseFloat(t.borderTopWidth)+parseFloat(t.borderBottomWidth),isNaN(r)&&(r=0),f()}function s(t){var n=e.style.width;e.style.width="0px",e.style.width=n,e.style.overflowY=t}function u(){if(0!==e.scrollHeight){var t=function(e){for(var t=[];e&&e.parentNode&&e.parentNode instanceof Element;)e.parentNode.scrollTop&&(e.parentNode.style.scrollBehavior="auto",t.push([e.parentNode,e.parentNode.scrollTop])),e=e.parentNode;return function(){return t.forEach(function(e){var t=e[0];t.scrollTop=e[1],t.style.scrollBehavior=null})}}(e);e.style.height="",e.style.height=e.scrollHeight+r+"px",i=e.clientWidth,t()}}function f(){u();var t=Math.round(parseFloat(e.style.height)),n=window.getComputedStyle(e,null),r="content-box"===n.boxSizing?Math.round(parseFloat(n.height)):e.offsetHeight;if(r -1; - }, - get(key) { - return values[keys.indexOf(key)]; - }, - set(key, value) { - if (keys.indexOf(key) === -1) { - keys.push(key); - values.push(value); - } - }, - delete(key) { - const index = keys.indexOf(key); - if (index > -1) { - keys.splice(index, 1); - values.splice(index, 1); - } - }, - } -})(); - -let createEvent = (name)=> new Event(name, {bubbles: true}); -try { - new Event('test'); -} catch(e) { - // IE does not support `new Event()` - createEvent = (name)=> { - const evt = document.createEvent('Event'); - evt.initEvent(name, true, false); - return evt; - }; -} +const assignedElements = new Map(); function assign(ta) { - if (!ta || !ta.nodeName || ta.nodeName !== 'TEXTAREA' || map.has(ta)) return; + if (!ta || !ta.nodeName || ta.nodeName !== 'TEXTAREA' || assignedElements.has(ta)) return; let heightOffset = null; let clientWidth = null; let cachedHeight = null; function init() { - const style = window.getComputedStyle(ta, null); + const style = window.getComputedStyle(ta); if (style.resize === 'vertical') { ta.style.resize = 'none'; @@ -109,7 +72,7 @@ function assign(ta) { // ensure the scrollTop values of parent elements are not modified as a consequence of calculating the textarea height const restoreScrollTops = cacheScrollTops(ta); - ta.style.height = ''; + ta.style.height = ''; // this is necessary for getting an accurate scrollHeight on the next line ta.style.height = (ta.scrollHeight+heightOffset)+'px'; // used to check if an update is actually necessary on window.resize @@ -121,11 +84,10 @@ function assign(ta) { function update() { resize(); - const styleHeight = Math.round(parseFloat(ta.style.height)); - const computed = window.getComputedStyle(ta, null); + const styleHeight = parseFloat(ta.style.height); + const computed = window.getComputedStyle(ta); - // Using offsetHeight as a replacement for computed.height in IE, because IE does not account use of border-box - var actualHeight = computed.boxSizing === 'content-box' ? Math.round(parseFloat(computed.height)) : ta.offsetHeight; + var actualHeight = parseFloat(computed.height); // The actual height not matching the style height (set via the resize method) indicates that // the max-height has been exceeded, in which case the overflow should be allowed. @@ -133,26 +95,20 @@ function assign(ta) { if (computed.overflowY === 'hidden') { changeOverflow('scroll'); resize(); - actualHeight = computed.boxSizing === 'content-box' ? Math.round(parseFloat(window.getComputedStyle(ta, null).height)) : ta.offsetHeight; + actualHeight = parseFloat(window.getComputedStyle(ta).height); } } else { // Normally keep overflow set to hidden, to avoid flash of scrollbar as the textarea expands. if (computed.overflowY !== 'hidden') { changeOverflow('hidden'); resize(); - actualHeight = computed.boxSizing === 'content-box' ? Math.round(parseFloat(window.getComputedStyle(ta, null).height)) : ta.offsetHeight; + actualHeight = parseFloat(window.getComputedStyle(ta).height); } } if (cachedHeight !== actualHeight) { cachedHeight = actualHeight; - const evt = createEvent('autosize:resized'); - try { - ta.dispatchEvent(evt); - } catch (err) { - // Firefox will throw an error on dispatchEvent for a detached element - // https://bugzilla.mozilla.org/show_bug.cgi?id=889376 - } + ta.dispatchEvent(new Event('autosize:resized', {bubbles: true})); } } @@ -173,7 +129,7 @@ function assign(ta) { ta.style[key] = style[key]; }); - map.delete(ta); + assignedElements.delete(ta); }).bind(ta, { height: ta.style.height, resize: ta.style.resize, @@ -184,20 +140,13 @@ function assign(ta) { ta.addEventListener('autosize:destroy', destroy, false); - // 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', update, false); - } - window.addEventListener('resize', pageResize, false); ta.addEventListener('input', update, false); ta.addEventListener('autosize:update', update, false); ta.style.overflowX = 'hidden'; ta.style.wordWrap = 'break-word'; - map.set(ta, { + assignedElements.set(ta, { destroy, update, }); @@ -206,14 +155,14 @@ function assign(ta) { } function destroy(ta) { - const methods = map.get(ta); + const methods = assignedElements.get(ta); if (methods) { methods.destroy(); } } function update(ta) { - const methods = map.get(ta); + const methods = assignedElements.get(ta); if (methods) { methods.update(); } @@ -221,8 +170,8 @@ function update(ta) { let autosize = null; -// Do nothing in Node.js environment and IE8 (or lower) -if (typeof window === 'undefined' || typeof window.getComputedStyle !== 'function') { +// Do nothing in Node.js environment +if (typeof window === 'undefined') { autosize = el => el; autosize.destroy = el => el; autosize.update = el => el;