From 41b3da95e3c90b2756818c1cf90dbfabd91a1d4a Mon Sep 17 00:00:00 2001 From: Marc Reichel Date: Sun, 13 Feb 2022 13:03:20 +0100 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Finalize=20autoresize=20feature?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- dist/alpine-autosize.js | 23 ++++++++++++++++++++--- dist/alpine-autosize.js.map | 2 +- src/index.js | 21 ++++++++++++++++++--- 3 files changed, 39 insertions(+), 7 deletions(-) diff --git a/dist/alpine-autosize.js b/dist/alpine-autosize.js index 3ef1826..ad792c5 100644 --- a/dist/alpine-autosize.js +++ b/dist/alpine-autosize.js @@ -4,9 +4,26 @@ })((function () { 'use strict'; function Autosize(Alpine) { - Alpine.directive('autosize', el => { - el.style.height = '4px'; - el.style.height = `${el.scrollHeight}px`; + Alpine.directive('autosize', (el, {}, { + cleanup + }) => { + const previousResizeValue = el.style.resize; + el.style.resize = 'none'; + + const handler = event => { + const element = event.target; + element.style.height = '4px'; + element.style.height = `${element.scrollHeight}px`; + }; + + handler({ + target: el + }); + el.addEventListener('input', handler); + cleanup(() => { + el.style.resize = previousResizeValue; + el.removeEventListener('input', handler); + }); }); } diff --git a/dist/alpine-autosize.js.map b/dist/alpine-autosize.js.map index 3c5c6d7..b6555fe 100644 --- a/dist/alpine-autosize.js.map +++ b/dist/alpine-autosize.js.map @@ -1 +1 @@ -{"version":3,"file":"alpine-autosize.js","sources":["../src/index.js","../builds/cdn.js"],"sourcesContent":["function Autosize(Alpine) {\n Alpine.directive('autosize', (el) => {\n el.style.height = '4px';\n el.style.height = `${el.scrollHeight}px`;\n });\n}\n\nexport default Autosize;\n","import autosize from '../src/index.js';\n\ndocument.addEventListener('alpine:init', () => {\n autosize(window.Alpine);\n});\n"],"names":["Autosize","Alpine","directive","el","style","height","scrollHeight","document","addEventListener","autosize","window"],"mappings":";;;;;IAAA,SAASA,QAAT,CAAkBC,MAAlB,EAA0B;IACtBA,EAAAA,MAAM,CAACC,SAAP,CAAiB,UAAjB,EAA8BC,EAAD,IAAQ;IACjCA,IAAAA,EAAE,CAACC,KAAH,CAASC,MAAT,GAAkB,KAAlB;IACAF,IAAAA,EAAE,CAACC,KAAH,CAASC,MAAT,GAAmB,GAAEF,EAAE,CAACG,YAAa,IAArC;IACH,GAHD;IAIH;;ICHDC,QAAQ,CAACC,gBAAT,CAA0B,aAA1B,EAAyC,MAAM;IAC3CC,EAAAA,QAAQ,CAACC,MAAM,CAACT,MAAR,CAAR;IACH,CAFD;;;;;;"} \ No newline at end of file +{"version":3,"file":"alpine-autosize.js","sources":["../src/index.js","../builds/cdn.js"],"sourcesContent":["function Autosize(Alpine) {\n Alpine.directive('autosize', (el, {}, { cleanup }) => {\n const previousResizeValue = el.style.resize;\n el.style.resize = 'none';\n\n const handler = (event) => {\n const element = event.target;\n element.style.height = '4px';\n element.style.height = `${element.scrollHeight}px`;\n };\n\n handler({ target: el });\n\n el.addEventListener('input', handler);\n\n cleanup(() => {\n el.style.resize = previousResizeValue;\n el.removeEventListener('input', handler);\n });\n });\n}\n\nexport default Autosize;\n","import autosize from '../src/index.js';\n\ndocument.addEventListener('alpine:init', () => {\n autosize(window.Alpine);\n});\n"],"names":["Autosize","Alpine","directive","el","cleanup","previousResizeValue","style","resize","handler","event","element","target","height","scrollHeight","addEventListener","removeEventListener","document","autosize","window"],"mappings":";;;;;IAAA,SAASA,QAAT,CAAkBC,MAAlB,EAA0B;IACtBA,EAAAA,MAAM,CAACC,SAAP,CAAiB,UAAjB,EAA6B,CAACC,EAAD,EAAK,EAAL,EAAS;IAAEC,IAAAA;IAAF,GAAT,KAAyB;IAClD,UAAMC,mBAAmB,GAAGF,EAAE,CAACG,KAAH,CAASC,MAArC;IACAJ,IAAAA,EAAE,CAACG,KAAH,CAASC,MAAT,GAAkB,MAAlB;;IAEA,UAAMC,OAAO,GAAIC,KAAD,IAAW;IACvB,YAAMC,OAAO,GAAGD,KAAK,CAACE,MAAtB;IACAD,MAAAA,OAAO,CAACJ,KAAR,CAAcM,MAAd,GAAuB,KAAvB;IACAF,MAAAA,OAAO,CAACJ,KAAR,CAAcM,MAAd,GAAwB,GAAEF,OAAO,CAACG,YAAa,IAA/C;IACH,KAJD;;IAMAL,IAAAA,OAAO,CAAC;IAAEG,MAAAA,MAAM,EAAER;IAAV,KAAD,CAAP;IAEAA,IAAAA,EAAE,CAACW,gBAAH,CAAoB,OAApB,EAA6BN,OAA7B;IAEAJ,IAAAA,OAAO,CAAC,MAAM;IACVD,MAAAA,EAAE,CAACG,KAAH,CAASC,MAAT,GAAkBF,mBAAlB;IACAF,MAAAA,EAAE,CAACY,mBAAH,CAAuB,OAAvB,EAAgCP,OAAhC;IACH,KAHM,CAAP;IAIH,GAlBD;IAmBH;;IClBDQ,QAAQ,CAACF,gBAAT,CAA0B,aAA1B,EAAyC,MAAM;IAC3CG,EAAAA,QAAQ,CAACC,MAAM,CAACjB,MAAR,CAAR;IACH,CAFD;;;;;;"} \ No newline at end of file diff --git a/src/index.js b/src/index.js index 25765f6..03c5a5f 100644 --- a/src/index.js +++ b/src/index.js @@ -1,7 +1,22 @@ function Autosize(Alpine) { - Alpine.directive('autosize', (el) => { - el.style.height = '4px'; - el.style.height = `${el.scrollHeight}px`; + Alpine.directive('autosize', (el, {}, { cleanup }) => { + const previousResizeValue = el.style.resize; + el.style.resize = 'none'; + + const handler = (event) => { + const element = event.target; + element.style.height = '4px'; + element.style.height = `${element.scrollHeight}px`; + }; + + handler({ target: el }); + + el.addEventListener('input', handler); + + cleanup(() => { + el.style.resize = previousResizeValue; + el.removeEventListener('input', handler); + }); }); }