Source: autosize/autosize.es.js

  1. /**
  2.  * Copyright (c) 2000-present Liferay, Inc. All rights reserved.
  3.  *
  4.  * This library is free software; you can redistribute it and/or modify it under
  5.  * the terms of the GNU Lesser General Public License as published by the Free
  6.  * Software Foundation; either version 2.1 of the License, or (at your option)
  7.  * any later version.
  8.  *
  9.  * This library is distributed in the hope that it will be useful, but WITHOUT
  10.  * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
  11.  * FOR A PARTICULAR PURPOSE. See the GNU Lesser General Public License for more
  12.  * details.
  13.  */
  15. const DEFAULT_APPEND_CONTENT = '  ';
  17. class AutoSize {
  18. 	constructor(inputElement) {
  19. 		this.inputElement = inputElement;
  20. 		this.computedStyle = getComputedStyle(this.inputElement);
  22. 		this.minHeight = parseInt(
  23. 			this.computedStyle.height.replace('px', ''),
  24. 			10
  25. 		);
  27. 		this.paddingHeight =
  28. 			parseInt(this.computedStyle.paddingTop.replace('px', ''), 10) +
  29. 			parseInt(this.computedStyle.paddingBottom.replace('px', ''), 10);
  31. 		this.template = this.createTemplate(this.computedStyle);
  32. 		document.body.appendChild(this.template);
  34. 		this.inputElement.addEventListener('input', this.handleInput);
  35. 		this._resizeInput(this.inputElement);
  36. 	}
  38. 	createTemplate(computedStyle) {
  39. 		const template = document.createElement('pre');
  41. 		template.style.clip = 'rect(0, 0, 0, 0) !important';
  42. 		template.style.left = '0';
  43. 		template.style.overflowWrap = 'break-word';
  44. 		template.style.position = 'absolute';
  45. 		template.style.top = '0';
  46. 		template.style.transform = 'scale(0)';
  47. 		template.style.whiteSpace = 'pre-wrap';
  48. 		template.style.wordBreak = 'break-word';
  50. 		template.style.fontFamily = computedStyle.fontFamily;
  51. 		template.style.fontSize = computedStyle.fontSize;
  52. 		template.style.fontStyle = computedStyle.fontStyle;
  53. 		template.style.fontWeight = computedStyle.fontWeight;
  54. 		template.style.lineHeight = computedStyle.lineHeight;
  55. 		template.style.letterSpacing = computedStyle.letterSpacing;
  56. 		template.style.textTransform = computedStyle.textTransform;
  58. 		template.style.width = computedStyle.width;
  60. 		template.textContent = DEFAULT_APPEND_CONTENT;
  62. 		return template;
  63. 	}
  65. 	handleInput = (event) => {
  66. 		requestAnimationFrame(() => {
  67. 			this._resizeInput(event.target);
  68. 		});
  69. 	};
  71. 	_resizeInput(inputElement) {
  72. 		if (this.template.style.width !== this.computedStyle.width) {
  73. 			this.template.style.width = this.computedStyle.width;
  74. 		}
  76. 		this.template.innerHTML =
  77. 			Liferay.Util.escapeHTML(inputElement.value) +
  78. 			DEFAULT_APPEND_CONTENT;
  80. 		inputElement.style.height = `${
  81. 			this.template.scrollHeight + this.paddingHeight < this.minHeight
  82. 				? this.minHeight
  83. 				: this.template.scrollHeight + this.paddingHeight
  84. 		}px`;
  85. 	}
  86. }
  88. export default AutoSize;