@cloudfour/elastic-textarea
Advanced tools
Comparing version 1.0.5 to 1.0.6
@@ -60,4 +60,5 @@ customElements.define( | ||
const minRows = textareaEl.getAttribute("data-min-rows"); | ||
const minRows = parseInt(textareaEl.getAttribute("data-min-rows")); | ||
let rows = this.rows(textareaEl); | ||
while (!this.isScrolling(textareaEl) && rows > minRows) { | ||
@@ -91,5 +92,7 @@ rows--; | ||
rows(textareaEl) { | ||
return textareaEl.getAttribute("rows") || textareaEl.dataset.minRows; | ||
return parseInt( | ||
textareaEl.getAttribute("rows") || textareaEl.dataset.minRows | ||
); | ||
} | ||
} | ||
); |
@@ -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 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}}); | ||
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=parseInt(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 parseInt(t.getAttribute("rows")||t.dataset.minRows)}}); |
@@ -9,3 +9,3 @@ # elastic-textarea | ||
| `isScrolling` | `(textareaEl: any): boolean` | Determine if the element is overflowing | | ||
| `rows` | `(textareaEl: any): any` | | | ||
| `rows` | `(textareaEl: any): number` | | | ||
| `shrink` | `(textareaEl: any): void` | Shrink until the textarea matches the minimum rows or starts overflowing | |
{ | ||
"name": "@cloudfour/elastic-textarea", | ||
"version": "1.0.5", | ||
"version": "1.0.6", | ||
"description": "A web component for progressively-enhanced auto-expanding textareas", | ||
@@ -34,10 +34,10 @@ "main": "index.js", | ||
"devDependencies": { | ||
"browser-sync": "^2.27.9", | ||
"jest": "^27.5.1", | ||
"minify": "^8.0.4", | ||
"npm-run-all": "^4.1.5", | ||
"pleasantest": "^2.0.0", | ||
"web-component-analyzer": "^2.0.0-next.4" | ||
"browser-sync": "2.27.9", | ||
"jest": "27.5.1", | ||
"minify": "8.0.4", | ||
"npm-run-all": "4.1.5", | ||
"pleasantest": "2.0.0", | ||
"web-component-analyzer": "2.0.0-next.4" | ||
}, | ||
"dependencies": {} | ||
} |
# Elastic Textarea | ||
[![NPM version](http://img.shields.io/npm/v/@cloudfour/elastic-textarea.svg)](https://www.npmjs.org/package/@cloudfour/elastic-textarea) [![Build Status](https://github.com/cloudfour/elastic-textarea/workflows/CI/badge.svg)](https://github.com/cloudfour/elastic-textarea/actions?query=workflow%3ACI) [![Renovate](https://img.shields.io/badge/renovate-enabled-brightgreen.svg)](https://renovatebot.com) | ||
_A web component for progressively-enhanced auto-expanding textareas._ | ||
@@ -4,0 +7,0 @@ |
9240
101
70