@cloudfour/elastic-textarea - npm Package Compare versions

Comparing version 1.0.3 to 1.0.4

index.js

@@ -5,2 +5,5 @@ customElements.define(
     connectedCallback() {
+      /**
+       * Find all inner textareas and use their rows attributes as a minimum count
+       */
       [...this.querySelectorAll("textarea")].forEach((textareaEl) => {
@@ -12,6 +15,7 @@ textareaEl.setAttribute(
 
+        // If textareas are prefilled they may need to be resized
         this.update(textareaEl);
       });
 
-      // TODO: Do I also need change?
+      // Use event delegation to listent for textarea inputs and update the areas
       this.addEventListener("input", ({ target }) => {
@@ -24,2 +28,5 @@ if (!target instanceof HTMLTextAreaElement) return;
 
+    /**
+     * Determine if the element is overflowing
+     */
     isScrolling(textareaEl) {
@@ -43,3 +50,3 @@ return textareaEl.scrollHeight > textareaEl.clientHeight;
         // If the height hasn't changed, break the loop
-        // This safety check is to prevent an infinite loop in IE11
+        // This is an important safety check in case the height is hard coded
         if (newHeight === previousHeight) break;
@@ -52,4 +59,7 @@
 
-    /** Shrink until the textarea matches the minimum rows or starts scrolling */
+    /** Shrink until the textarea matches the minimum rows or starts overflowing */
     shrink(textareaEl) {
+      // Store initial height of textarea
+      let previousHeight = textareaEl.clientHeight;
+
       const minRows = textareaEl.getAttribute("data-min-rows");
@@ -61,2 +71,10 @@ let rows = this.rows(textareaEl);
 
+        // Get height after rows change is made
+        const newHeight = textareaEl.clientHeight;
+
+        // If the height hasn't changed, break the loop
+        // This is an important safety check in case the height is hard coded
+        if (newHeight === previousHeight) break;
+
+        // If we shrunk so far that we're overflowing, add a row back on.
         if (this.isScrolling(textareaEl)) {
@@ -63,0 +81,0 @@ this.grow(textareaEl);

index.min.js

@@ -1,1 +0,1 @@
-customElements.define("elastic-textarea",class extends HTMLElement{connectedCallback(){[...this.querySelectorAll("textarea")].forEach((t=>{t.setAttribute("data-min-rows",t.getAttribute("rows")||2),this.update(t)})),this.addEventListener("input",(({target:t})=>{!t instanceof HTMLTextAreaElement||this.update(t)}))}isScrolling(t){return t.scrollHeight>t.clientHeight}grow(t){let e=t.clientHeight,i=this.rows(t);for(;this.isScrolling(t);){i++,t.setAttribute("rows",String(i));const s=t.clientHeight;if(s===e)break;e=s}}shrink(t){const e=t.getAttribute("data-min-rows");let i=this.rows(t);for(;!this.isScrolling(t)&&i>e;)if(i--,t.setAttribute("rows",String(Math.max(i,e))),this.isScrolling(t)){this.grow(t);break}}update(t){this.isScrolling(t)?this.grow(t):this.shrink(t)}rows(t){return t.getAttribute("rows")||t.dataset.minRows}});
+customElements.define("elastic-textarea",class extends HTMLElement{connectedCallback(){[...this.querySelectorAll("textarea")].forEach((t=>{t.setAttribute("data-min-rows",t.getAttribute("rows")||2),this.update(t)})),this.addEventListener("input",(({target:t})=>{!t instanceof HTMLTextAreaElement||this.update(t)}))}isScrolling(t){return t.scrollHeight>t.clientHeight}grow(t){let e=t.clientHeight,i=this.rows(t);for(;this.isScrolling(t);){i++,t.setAttribute("rows",String(i));const r=t.clientHeight;if(r===e)break;e=r}}shrink(t){let e=t.clientHeight;const i=t.getAttribute("data-min-rows");let r=this.rows(t);for(;!this.isScrolling(t)&&r>i;){r--,t.setAttribute("rows",String(Math.max(r,i)));if(t.clientHeight===e)break;if(this.isScrolling(t)){this.grow(t);break}}}update(t){this.isScrolling(t)?this.grow(t):this.shrink(t)}rows(t){return t.getAttribute("rows")||t.dataset.minRows}});

manifests/manifest.md

@@ -8,4 +8,4 @@ # elastic-textarea
 | `grow`        | `(textareaEl: any): void`    | Grow until the textarea stops scrolling          |
-| `isScrolling` | `(textareaEl: any): boolean` |                                                  |
+| `isScrolling` | `(textareaEl: any): boolean` | Determine if the element is overflowing          |
 | `rows`        | `(textareaEl: any): any`     |                                                  |
-| `shrink`      | `(textareaEl: any): void`    | Shrink until the textarea matches the minimum rows or starts scrolling |
+| `shrink`      | `(textareaEl: any): void`    | Shrink until the textarea matches the minimum rows or starts overflowing |

package.json

 {
   "name": "@cloudfour/elastic-textarea",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "A web component for progressively-enhanced auto-expanding textareas",
@@ -5,0 +5,0 @@ "main": "index.js",

README.md

@@ -9,2 +9,4 @@ # Elastic Textarea
 
+(Note: if a user manually resizes a textarea it will no longer be elastic.)
+
 ## Installation
@@ -11,0 +13,0 @@

No alert changes

Improved metrics

Total package byte prevSize

8787

increased by11%

Lines of code

99

increased by17.86%

Number of lines in readme file

67

increased by3.08%

No dependency changes