@randstad-design/orbit-multitheme/src/assets/js/components/text-area.js

multitheme Front-end code based on Randstad Human Forward components

import ElementHelpers from '../helpers/element-helpers';

/**
 * Declare constants
 */
const attributeBase = 'data-rs-textarea';

export class TextArea {
  constructor(element) {
    this.element = element;
    this.expand = ElementHelpers.getElementByAttribute(attributeBase, 'expand');
    this.scrollArea = ElementHelpers.getElementByAttribute(
      'data-rs-textarea-scroll-area'
    );
    this.addEventHandlers();
  }

  /**
   * Add event handlers
   */
  addEventHandlers() {
    this.autoExpand(this.expand);
  }

  autoExpand(field) {
    const _this = this;
    const offset = field.offsetHeight - field.clientHeight;

    field.addEventListener('keydown', function(e) {
      if (e.key === 'Enter') {
        e.preventDefault();
        return;
      }

      this.style.height = 'auto';
      this.style.height = this.scrollHeight + offset * 2 + 'px';

      if (_this.scrollArea) {
        const scrollArea = _this.scrollArea;
        const scrollHeight = scrollArea.scrollHeight;

        const pxScrolledFromBottom =
          scrollHeight - scrollArea.offsetHeight - scrollArea.scrollTop;

        // Set a scroll boundary of 100
        if (pxScrolledFromBottom <= 100) {
          scrollArea.scrollTop = scrollHeight;
        }
      }
    });
  }

  /**
   * Get selector
   */
  static getSelector() {
    return `[${attributeBase}]`;
  }
}