autoresize/dist/autoresize.es5.js

Automatically resize the inputs.

'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 () {
  'use strict';

  var defaultOptions = Object.freeze({
    minimumRows: 1,
    maximumRows: Infinity,
    rowHeight: null,
    assumeRendered: false
  });

  function getStyles(element) {
    return window.getComputedStyle(element);
  }

  function getPropertyValue(name, styles) {
    var property = styles[name];
    if (property && property.endsWith('px')) {
      return parseInt(property.slice(0, -2), 10);
    }
    return property;
  }

  function throttle(callback) {
    var ticking = false;

    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.apply(undefined, args);
        });
      }
      ticking = true;
    };
  }

  function middleValue(first, second, third) {
    if (first < second) {
      if (second < third) {
        return second;
      }
      return first < third ? third : first;
    }
    if (second > third) {
      return second;
    }
    return first > third ? third : first;
  }

  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) {
    var value = textarea.value;

    textarea.value = '';
    textarea.rows = 1;
    var scrollHeight = textarea.scrollHeight;

    textarea.value = value;
    textarea.rows = rows;
    return scrollHeight;
  }

  function createScrollListener(maximumRows) {
    return function (event) {
      // Forcefully update scroll before the row counter update to prevent text
      // jumps inside the textarea, when the limit is not yet reached
      if (event.target.rows < maximumRows) {
        event.target.scrollTop = 0;
      }
    };
  }

  function createRowCountUpdater(textarea, options) {
    var baseScrollHeight = getBaseScrollHeight(textarea, options.minimumRows);
    var minimumRows = options.minimumRows,
        maximumRows = options.maximumRows;


    return function (rowHeight) {
      textarea.rows = 1;
      var rowsHeight = textarea.scrollHeight - baseScrollHeight + rowHeight;
      var rows = Math.ceil(rowsHeight / rowHeight);
      textarea.rows = middleValue(minimumRows, rows, maximumRows);
    };
  }

  function autoresize(textarea, options) {
    var maximumRows = options.maximumRows;
    var rowHeight = options.rowHeight;

    var resizeListener = void 0;

    var dynamic = rowHeight == null;

    var rowCountUpdater = createRowCountUpdater(textarea, options);
    var updateRowCount = function updateRowCount() {
      return rowCountUpdater(rowHeight);
    };

    if (dynamic) {
      rowHeight = getPropertyValue('lineHeight', getStyles(textarea));
      var updateStyles = function updateStyles() {
        rowHeight = getPropertyValue('lineHeight', getStyles(textarea));
        updateRowCount();
      };

      resizeListener = throttle(updateStyles);
      window.addEventListener('resize', resizeListener);
    }

    var keydownListener = throttle(updateRowCount);
    textarea.addEventListener('keydown', keydownListener);

    var scrollListener = createScrollListener(maximumRows);
    textarea.addEventListener('scroll', scrollListener);

    return function () {
      textarea.removeEventListener('keydown', keydownListener);
      textarea.removeEventListener('scroll', scrollListener);
      if (dynamic) {
        window.removeEventListener('resize', resizeListener);
      }
    };
  }

  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,
    assumeRendered: false
  });

  /* eslint-disable no-unused-vars */

  function autoresize$1(input, options) {
    var fullOptions = Object.assign({}, defaultOptions$1, options);
    var styles = getStyles(input);

    return function () {};
  }

  function autoresize$2(element) {
    var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};

    if (element instanceof HTMLTextAreaElement) {
      return waitForRendered(element, options);
    } else if (element instanceof HTMLInputElement) {
      return autoresize$1(element, options);
    }
    // eslint-disable-next-line
    console.error('Element type is not supported. Supported item types are: HTMLTextAreaElement, HTMLInputElement.');

    return null;
  }

  window.autoresize = autoresize$2;
})();