autoresize - npm Package Compare versions

Comparing version 0.0.1 to 0.1.0

dist/autoresize.es5.js

 'use strict';
 
+function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
+
 (function () {
@@ -9,3 +11,4 @@ 'use strict';
     maximumRows: Infinity,
-    rowHeight: null
+    rowHeight: null,
+    assumeRendered: false
   });
@@ -29,6 +32,10 @@
     return function requestTick() {
+      for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
+
       if (!ticking) {
         requestAnimationFrame(function () {
           ticking = false;
-          callback();
+          callback.apply(undefined, args);
         });
@@ -53,2 +60,18 @@ }
 
+  function isPresent(element) {
+    var id = element.id,
+        className = element.className,
+        type = element.type;
+
+    if (id) {
+      return document.getElementById(id) != null;
+    }
+    var classes = className.replace(/\s/, '.');
+    var query = classes ? type + '.' + classes : type;
+    var elements = document.querySelectorAll(query);
+    return [].concat(_toConsumableArray(elements)).some(function (el) {
+      return el === element;
+    });
+  }
+
   function getBaseScrollHeight(textarea, rows) {
@@ -91,5 +114,4 @@ var value = textarea.value;
   function autoresize(textarea, options) {
-    var fullOptions = Object.assign({}, defaultOptions, options);
-    var maximumRows = fullOptions.maximumRows;
-    var rowHeight = fullOptions.rowHeight;
+    var maximumRows = options.maximumRows;
+    var rowHeight = options.rowHeight;
 
@@ -100,3 +122,3 @@ var resizeListener = void 0;
 
-    var rowCountUpdater = createRowCountUpdater(textarea, fullOptions);
+    var rowCountUpdater = createRowCountUpdater(textarea, options);
     var updateRowCount = function updateRowCount() {
@@ -124,6 +146,6 @@ return rowCountUpdater(rowHeight);
     return function () {
-      textarea.removeEventListener(keydownListener);
-      textarea.removeEventListener(scrollListener);
+      textarea.removeEventListener('keydown', keydownListener);
+      textarea.removeEventListener('scroll', scrollListener);
       if (dynamic) {
-        window.removeEventListener(resizeListener);
+        window.removeEventListener('resize', resizeListener);
       }
@@ -133,4 +155,27 @@ };
 
+  function waitForRendered(textarea, options) {
+    var fullOptions = Object.assign({}, defaultOptions, options);
+    var intervalID = void 0;
+    var remove = function remove() {};
+
+    if (fullOptions.assumeRendered || isPresent(textarea)) {
+      remove = autoresize(textarea, fullOptions);
+    } else {
+      intervalID = setInterval(function () {
+        if (isPresent(textarea)) {
+          clearInterval(intervalID);
+          remove = autoresize(textarea, fullOptions);
+        }
+      }, 1000);
+    }
+
+    return function () {
+      clearInterval(intervalID);
+      remove();
+    };
+  }
+
   var defaultOptions$1 = Object.freeze({
-    maxWidth: null
+    maxWidth: null,
+    assumeRendered: false
   });
@@ -151,3 +196,3 @@
     if (element instanceof HTMLTextAreaElement) {
-      return autoresize(element, options);
+      return waitForRendered(element, options);
     } else if (element instanceof HTMLInputElement) {
@@ -154,0 +199,0 @@ return autoresize$1(element, options);

dist/autoresize.es5.min.js

@@ -1,1 +0,1 @@
-"use strict";!function(){var e=Object.freeze({minimumRows:1,maximumRows:1/0,rowHeight:null});function n(e){return window.getComputedStyle(e)}function t(e,n){var t=n[e];return t&&t.endsWith("px")?parseInt(t.slice(0,-2),10):t}function r(e){var n=!1;return function(){n||requestAnimationFrame(function(){n=!1,e()}),n=!0}}function i(i,o){var u=Object.assign({},e,o),s=u.maximumRows,a=u.rowHeight,c=void 0,l=null==a,m=function(e,n){var t=function(e,n){var t=e.value;e.value="",e.rows=1;var r=e.scrollHeight;return e.value=t,e.rows=n,r}(e,n.minimumRows),r=n.minimumRows,i=n.maximumRows;return function(n){e.rows=1;var o,u,s,a=e.scrollHeight-t+n,c=Math.ceil(a/n);e.rows=(s=i,(o=r)<(u=c)?u<s?u:o<s?s:o:u>s?u:o>s?s:o)}}(i,u),v=function(){return m(a)};if(l){a=t("lineHeight",n(i));c=r(function(){a=t("lineHeight",n(i)),v()}),window.addEventListener("resize",c)}var f=r(v);i.addEventListener("keydown",f);var w=function(e){return function(n){n.target.rows<e&&(n.target.scrollTop=0)}}(s);return i.addEventListener("scroll",w),function(){i.removeEventListener(f),i.removeEventListener(w),l&&window.removeEventListener(c)}}var o=Object.freeze({maxWidth:null});window.autoresize=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};return e instanceof HTMLTextAreaElement?i(e,t):e instanceof HTMLInputElement?function(e,t){return Object.assign({},o,t),n(e),function(){}}(e,t):(console.error("Element type is not supported. Supported item types are: HTMLTextAreaElement, HTMLInputElement."),null)}}();
+"use strict";function _toConsumableArray(e){if(Array.isArray(e)){for(var n=0,r=Array(e.length);n<e.length;n++)r[n]=e[n];return r}return Array.from(e)}!function(){var e=Object.freeze({minimumRows:1,maximumRows:1/0,rowHeight:null,assumeRendered:!1});function n(e){return window.getComputedStyle(e)}function r(e,n){var r=n[e];return r&&r.endsWith("px")?parseInt(r.slice(0,-2),10):r}function t(e){var n=!1;return function(){for(var r=arguments.length,t=Array(r),o=0;o<r;o++)t[o]=arguments[o];n||requestAnimationFrame(function(){n=!1,e.apply(void 0,t)}),n=!0}}function o(e){var n=e.id,r=e.className,t=e.type;if(n)return null!=document.getElementById(n);var o=r.replace(/\s/,"."),i=o?t+"."+o:t,u=document.querySelectorAll(i);return[].concat(_toConsumableArray(u)).some(function(n){return n===e})}function i(e,o){var i=o.maximumRows,u=o.rowHeight,a=void 0,s=null==u,l=function(e,n){var r=function(e,n){var r=e.value;e.value="",e.rows=1;var t=e.scrollHeight;return e.value=r,e.rows=n,t}(e,n.minimumRows),t=n.minimumRows,o=n.maximumRows;return function(n){e.rows=1;var i,u,a,s=e.scrollHeight-r+n,l=Math.ceil(s/n);e.rows=(a=o,(i=t)<(u=l)?u<a?u:i<a?a:i:u>a?u:i>a?a:i)}}(e,o),c=function(){return l(u)};if(s){u=r("lineHeight",n(e));a=t(function(){u=r("lineHeight",n(e)),c()}),window.addEventListener("resize",a)}var m=t(c);e.addEventListener("keydown",m);var v=function(e){return function(n){n.target.rows<e&&(n.target.scrollTop=0)}}(i);return e.addEventListener("scroll",v),function(){e.removeEventListener("keydown",m),e.removeEventListener("scroll",v),s&&window.removeEventListener("resize",a)}}var u=Object.freeze({maxWidth:null,assumeRendered:!1});window.autoresize=function(r){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};return r instanceof HTMLTextAreaElement?function(n,r){var t=Object.assign({},e,r),u=void 0,a=function(){};return t.assumeRendered||o(n)?a=i(n,t):u=setInterval(function(){o(n)&&(clearInterval(u),a=i(n,t))},1e3),function(){clearInterval(u),a()}}(r,t):r instanceof HTMLInputElement?function(e,r){return Object.assign({},u,r),n(e),function(){}}(r,t):(console.error("Element type is not supported. Supported item types are: HTMLTextAreaElement, HTMLInputElement."),null)}}();

dist/autoresize.js

@@ -7,3 +7,4 @@ (function () {
     maximumRows: Infinity,
-    rowHeight: null
+    rowHeight: null,
+    assumeRendered: false
   });
@@ -26,7 +27,7 @@
 
-    return function requestTick() {
+    return function requestTick(...args) {
       if (!ticking) {
         requestAnimationFrame(() => {
           ticking = false;
-          callback();
+          callback(...args);
         });
@@ -51,2 +52,13 @@ }
 
+  function isPresent(element) {
+    const { id, className, type } = element;
+    if (id) {
+      return document.getElementById(id) != null;
+    }
+    const classes = className.replace(/\s/, '.');
+    const query = classes ? `${type}.${classes}` : type;
+    const elements = document.querySelectorAll(query);
+    return [...elements].some(el => el === element);
+  }
+
   function getBaseScrollHeight(textarea, rows) {
@@ -85,5 +97,4 @@ const { value } = textarea;
   function autoresize(textarea, options) {
-    const fullOptions = Object.assign({}, defaultOptions, options);
-    const { maximumRows } = fullOptions;
-    let { rowHeight } = fullOptions;
+    const { maximumRows } = options;
+    let { rowHeight } = options;
     let resizeListener;
@@ -93,3 +104,3 @@
 
-    const rowCountUpdater = createRowCountUpdater(textarea, fullOptions);
+    const rowCountUpdater = createRowCountUpdater(textarea, options);
     const updateRowCount = () => rowCountUpdater(rowHeight);
@@ -115,6 +126,6 @@
     return () => {
-      textarea.removeEventListener(keydownListener);
-      textarea.removeEventListener(scrollListener);
+      textarea.removeEventListener('keydown', keydownListener);
+      textarea.removeEventListener('scroll', scrollListener);
       if (dynamic) {
-        window.removeEventListener(resizeListener);
+        window.removeEventListener('resize', resizeListener);
       }
@@ -124,4 +135,27 @@ };
 
+  function waitForRendered(textarea, options) {
+    const fullOptions = Object.assign({}, defaultOptions, options);
+    let intervalID;
+    let remove = () => {};
+
+    if (fullOptions.assumeRendered || isPresent(textarea)) {
+      remove = autoresize(textarea, fullOptions);
+    } else {
+      intervalID = setInterval(() => {
+        if (isPresent(textarea)) {
+          clearInterval(intervalID);
+          remove = autoresize(textarea, fullOptions);
+        }
+      }, 1000);
+    }
+
+    return () => {
+      clearInterval(intervalID);
+      remove();
+    };
+  }
+
   var defaultOptions$1 = Object.freeze({
-    maxWidth: null
+    maxWidth: null,
+    assumeRendered: false
   });
@@ -140,3 +174,3 @@
     if (element instanceof HTMLTextAreaElement) {
-      return autoresize(element, options);
+      return waitForRendered(element, options);
     } else if (element instanceof HTMLInputElement) {
@@ -143,0 +177,0 @@ return autoresize$1(element, options);

dist/autoresize.min.js

@@ -1,1 +0,1 @@
-!function(){"use strict";var e=Object.freeze({minimumRows:1,maximumRows:1/0,rowHeight:null});function t(e){return window.getComputedStyle(e)}function n(e,t){const n=t[e];return n&&n.endsWith("px")?parseInt(n.slice(0,-2),10):n}function r(e){let t=!1;return function(){t||requestAnimationFrame(()=>{t=!1,e()}),t=!0}}function o(o,i){const s=Object.assign({},e,i),{maximumRows:u}=s;let c,{rowHeight:l}=s;const m=null==l,a=function(e,t){const n=function(e,t){const{value:n}=e;e.value="",e.rows=1;const{scrollHeight:r}=e;return e.value=n,e.rows=t,r}(e,t.minimumRows),{minimumRows:r,maximumRows:o}=t;return t=>{e.rows=1;const c=e.scrollHeight-n+t,l=Math.ceil(c/t);e.rows=(u=o,(i=r)<(s=l)?s<u?s:i<u?u:i:s>u?s:i>u?u:i)};var i,s,u}(o,s),w=()=>a(l);if(m){l=n("lineHeight",t(o)),c=r(()=>{l=n("lineHeight",t(o)),w()}),window.addEventListener("resize",c)}const d=r(w);o.addEventListener("keydown",d);const f=function(e){return t=>{t.target.rows<e&&(t.target.scrollTop=0)}}(u);return o.addEventListener("scroll",f),()=>{o.removeEventListener(d),o.removeEventListener(f),m&&window.removeEventListener(c)}}var i=Object.freeze({maxWidth:null});window.autoresize=function(e,n={}){return e instanceof HTMLTextAreaElement?o(e,n):e instanceof HTMLInputElement?function(e,n){return Object.assign({},i,n),t(e),()=>{}}(e,n):(console.error("Element type is not supported. Supported item types are: HTMLTextAreaElement, HTMLInputElement."),null)}}();
+!function(){"use strict";var e=Object.freeze({minimumRows:1,maximumRows:1/0,rowHeight:null,assumeRendered:!1});function n(e){return window.getComputedStyle(e)}function t(e,n){const t=n[e];return t&&t.endsWith("px")?parseInt(t.slice(0,-2),10):t}function r(e){let n=!1;return function(...t){n||requestAnimationFrame(()=>{n=!1,e(...t)}),n=!0}}function o(e){const{id:n,className:t,type:r}=e;if(n)return null!=document.getElementById(n);const o=t.replace(/\s/,"."),s=o?`${r}.${o}`:r;return[...document.querySelectorAll(s)].some(n=>n===e)}function s(e,o){const{maximumRows:s}=o;let i,{rowHeight:u}=o;const l=null==u,c=function(e,n){const t=function(e,n){const{value:t}=e;e.value="",e.rows=1;const{scrollHeight:r}=e;return e.value=t,e.rows=n,r}(e,n.minimumRows),{minimumRows:r,maximumRows:o}=n;return n=>{e.rows=1;const l=e.scrollHeight-t+n,c=Math.ceil(l/n);e.rows=(u=o,(s=r)<(i=c)?i<u?i:s<u?u:s:i>u?i:s>u?u:s)};var s,i,u}(e,o),m=()=>c(u);if(l){u=t("lineHeight",n(e)),i=r(()=>{u=t("lineHeight",n(e)),m()}),window.addEventListener("resize",i)}const a=r(m);e.addEventListener("keydown",a);const d=function(e){return n=>{n.target.rows<e&&(n.target.scrollTop=0)}}(s);return e.addEventListener("scroll",d),()=>{e.removeEventListener("keydown",a),e.removeEventListener("scroll",d),l&&window.removeEventListener("resize",i)}}var i=Object.freeze({maxWidth:null,assumeRendered:!1});window.autoresize=function(t,r={}){return t instanceof HTMLTextAreaElement?function(n,t){const r=Object.assign({},e,t);let i,u=()=>{};return r.assumeRendered||o(n)?u=s(n,r):i=setInterval(()=>{o(n)&&(clearInterval(i),u=s(n,r))},1e3),()=>{clearInterval(i),u()}}(t,r):t instanceof HTMLInputElement?function(e,t){return Object.assign({},i,t),n(e),()=>{}}(t,r):(console.error("Element type is not supported. Supported item types are: HTMLTextAreaElement, HTMLInputElement."),null)}}();

package.json

 {
   "name": "autoresize",
-  "version": "0.0.1",
+  "version": "0.1.0",
   "description": "Automatically resize the inputs.",
@@ -5,0 +5,0 @@ "keywords": [

README.md

@@ -59,4 +59,9 @@ autoresize
 const element = document.querySelector('#textarea');
-const options = { maximumRows: 5 };
-autoresize(element, options);
+const options = { maximumRows: 5, assumeRendered: true };
+
+// Enable autoresize by adding specific listeners
+const disable = autoresize(element, options);
+
+// Remove all listeners and disable autoresize
+disable();
 ```
@@ -80,11 +85,15 @@
   maximumRows: Infinity,
-  rowHeight: null
+  rowHeight: null,
+  assumeRendered: false
 }
 ```
-Passing the `rowHeight` value may be a bit more performant solution, but it will mean you can guarantee that the `lineSize` won't be changed in future with JS or CSS (including some `@media` queries). Otherwise, `rowHeight` will be calculated on the initial step and recalculated on window `'resize'` event.
+Passing the `rowHeight` value may be a bit more performant solution, but it will mean that the `lineSize` is guarantee to be unchanged in future with JS or CSS (including some `@media` queries). Otherwise, `rowHeight` will be calculated on the initial step and recalculated on window `'resize'` event.
 
+Passing the `assumeRendered` with `true` value will skip the check for the presence of the element in the DOM. Otherwise, the `render()` function will wait, until the element is rendered and then will apply the add the event listeners.
+
 __Input__
 ```js
 {
-  maxWidth: null
+  maxWidth: null,
+  assumeRendered: false
 }
@@ -91,0 +100,0 @@ ```

src/input/options.js

 export default Object.freeze({
-  maxWidth: null
+  maxWidth: null,
+  assumeRendered: false
 });

src/textarea/autoresize.js

 import defaultOptions from './options';
-import { getStyles, getPropertyValue, throttle, middleValue } from '../utils';
+import {
+  getStyles,
+  getPropertyValue,
+  throttle,
+  middleValue,
+  isPresent
+} from '../utils';
 
@@ -36,6 +42,5 @@ function getBaseScrollHeight(textarea, rows) {
 
-export default function autoresize(textarea, options) {
-  const fullOptions = Object.assign({}, defaultOptions, options);
-  const { maximumRows } = fullOptions;
-  let { rowHeight } = fullOptions;
+function autoresize(textarea, options) {
+  const { maximumRows } = options;
+  let { rowHeight } = options;
   let resizeListener;
@@ -45,3 +50,3 @@
 
-  const rowCountUpdater = createRowCountUpdater(textarea, fullOptions);
+  const rowCountUpdater = createRowCountUpdater(textarea, options);
   const updateRowCount = () => rowCountUpdater(rowHeight);
@@ -67,8 +72,30 @@
   return () => {
-    textarea.removeEventListener(keydownListener);
-    textarea.removeEventListener(scrollListener);
+    textarea.removeEventListener('keydown', keydownListener);
+    textarea.removeEventListener('scroll', scrollListener);
     if (dynamic) {
-      window.removeEventListener(resizeListener);
+      window.removeEventListener('resize', resizeListener);
     }
   };
 }
+
+export default function waitForRendered(textarea, options) {
+  const fullOptions = Object.assign({}, defaultOptions, options);
+  let intervalID;
+  let remove = () => {};
+
+  if (fullOptions.assumeRendered || isPresent(textarea)) {
+    remove = autoresize(textarea, fullOptions);
+  } else {
+    intervalID = setInterval(() => {
+      if (isPresent(textarea)) {
+        clearInterval(intervalID);
+        remove = autoresize(textarea, fullOptions);
+      }
+    }, 1000);
+  }
+
+  return () => {
+    clearInterval(intervalID);
+    remove();
+  };
+}

src/textarea/options.js

 export default Object.freeze({
   minimumRows: 1,
   maximumRows: Infinity,
-  rowHeight: null
+  rowHeight: null,
+  assumeRendered: false
 });

src/utils.js

@@ -16,7 +16,7 @@ export function getStyles(element) {
 
-  return function requestTick() {
+  return function requestTick(...args) {
     if (!ticking) {
       requestAnimationFrame(() => {
         ticking = false;
-        callback();
+        callback(...args);
       });
@@ -40,1 +40,12 @@ }
 }
+
+export function isPresent(element) {
+  const { id, className, type } = element;
+  if (id) {
+    return document.getElementById(id) != null;
+  }
+  const classes = className.replace(/\s/, '.');
+  const query = classes ? `${type}.${classes}` : type;
+  const elements = document.querySelectorAll(query);
+  return [...elements].some(el => el === element);
+}

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

24649

increased by24.18%

Lines of code

470

increased by28.42%

Number of lines in readme file

103

increased by9.57%

No dependency changes