autoResize.js 4.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184
  1. /**
  2. * autoResize - resizes a DOM element to the width and height of another DOM element
  3. *
  4. * Copyright 2014, Marcin Warpechowski
  5. * Licensed under the MIT license
  6. */
  7. function autoResize() {
  8. var defaults = {
  9. minHeight: 200,
  10. maxHeight: 300,
  11. minWidth: 100,
  12. maxWidth: 300
  13. },
  14. el,
  15. body = document.body,
  16. text = document.createTextNode(''),
  17. span = document.createElement('SPAN'),
  18. observe = function (element, event, handler) {
  19. if (window.attachEvent) {
  20. element.attachEvent('on' + event, handler);
  21. } else {
  22. element.addEventListener(event, handler, false);
  23. }
  24. },
  25. unObserve = function (element, event, handler) {
  26. if (window.removeEventListener) {
  27. element.removeEventListener(event, handler, false);
  28. } else {
  29. element.detachEvent('on' + event, handler);
  30. }
  31. },
  32. resize = function (newChar) {
  33. var width, scrollHeight;
  34. if (!newChar) {
  35. newChar = "";
  36. } else if (!/^[a-zA-Z \.,\\\/\|0-9]$/.test(newChar)) {
  37. newChar = ".";
  38. }
  39. if (text.textContent !== void 0) {
  40. text.textContent = el.value + newChar;
  41. }
  42. else {
  43. text.data = el.value + newChar; //IE8
  44. }
  45. span.style.fontSize = getComputedStyle(el).fontSize;
  46. span.style.fontFamily = getComputedStyle(el).fontFamily;
  47. span.style.whiteSpace = "pre";
  48. body.appendChild(span);
  49. width = span.clientWidth + 2;
  50. body.removeChild(span);
  51. el.style.height = defaults.minHeight + 'px';
  52. if (defaults.minWidth > width) {
  53. el.style.width = defaults.minWidth + 'px';
  54. } else if (width > defaults.maxWidth) {
  55. el.style.width = defaults.maxWidth + 'px';
  56. } else {
  57. el.style.width = width + 'px';
  58. }
  59. scrollHeight = el.scrollHeight ? el.scrollHeight - 1 : 0;
  60. if (defaults.minHeight > scrollHeight) {
  61. el.style.height = defaults.minHeight + 'px';
  62. } else if (defaults.maxHeight < scrollHeight) {
  63. el.style.height = defaults.maxHeight + 'px';
  64. el.style.overflowY = 'visible';
  65. } else {
  66. el.style.height = scrollHeight + 'px';
  67. }
  68. },
  69. delayedResize = function () {
  70. window.setTimeout(resize, 0);
  71. },
  72. extendDefaults = function (config) {
  73. if (config && config.minHeight) {
  74. if (config.minHeight == 'inherit') {
  75. defaults.minHeight = el.clientHeight;
  76. } else {
  77. var minHeight = parseInt(config.minHeight);
  78. if (!isNaN(minHeight)) {
  79. defaults.minHeight = minHeight;
  80. }
  81. }
  82. }
  83. if (config && config.maxHeight) {
  84. if (config.maxHeight == 'inherit') {
  85. defaults.maxHeight = el.clientHeight;
  86. } else {
  87. var maxHeight = parseInt(config.maxHeight);
  88. if (!isNaN(maxHeight)) {
  89. defaults.maxHeight = maxHeight;
  90. }
  91. }
  92. }
  93. if (config && config.minWidth) {
  94. if (config.minWidth == 'inherit') {
  95. defaults.minWidth = el.clientWidth;
  96. } else {
  97. var minWidth = parseInt(config.minWidth);
  98. if (!isNaN(minWidth)) {
  99. defaults.minWidth = minWidth;
  100. }
  101. }
  102. }
  103. if (config && config.maxWidth) {
  104. if (config.maxWidth == 'inherit') {
  105. defaults.maxWidth = el.clientWidth;
  106. } else {
  107. var maxWidth = parseInt(config.maxWidth);
  108. if (!isNaN(maxWidth)) {
  109. defaults.maxWidth = maxWidth;
  110. }
  111. }
  112. }
  113. if(!span.firstChild) {
  114. span.className = "autoResize";
  115. span.style.display = 'inline-block';
  116. span.appendChild(text);
  117. }
  118. },
  119. init = function (el_, config, doObserve) {
  120. el = el_;
  121. extendDefaults(config);
  122. if (el.nodeName == 'TEXTAREA') {
  123. el.style.resize = 'none';
  124. el.style.overflowY = '';
  125. el.style.height = defaults.minHeight + 'px';
  126. el.style.minWidth = defaults.minWidth + 'px';
  127. el.style.maxWidth = defaults.maxWidth + 'px';
  128. el.style.overflowY = 'hidden';
  129. }
  130. if(doObserve) {
  131. observe(el, 'change', resize);
  132. observe(el, 'cut', delayedResize);
  133. observe(el, 'paste', delayedResize);
  134. observe(el, 'drop', delayedResize);
  135. observe(el, 'keydown', delayedResize);
  136. observe(el, 'focus', resize);
  137. }
  138. resize();
  139. };
  140. function getComputedStyle(element) {
  141. return element.currentStyle || document.defaultView.getComputedStyle(element);
  142. }
  143. return {
  144. init: function (el_, config, doObserve) {
  145. init(el_, config, doObserve);
  146. },
  147. unObserve: function () {
  148. unObserve(el, 'change', resize);
  149. unObserve(el, 'cut', delayedResize);
  150. unObserve(el, 'paste', delayedResize);
  151. unObserve(el, 'drop', delayedResize);
  152. unObserve(el, 'keydown', delayedResize);
  153. unObserve(el, 'focus', resize);
  154. },
  155. resize: resize
  156. };
  157. }
  158. if (typeof exports !== 'undefined') {
  159. module.exports = autoResize;
  160. }