expanding.js 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119
  1. // Expanding Textareas
  2. // https://github.com/bgrins/ExpandingTextareas
  3. (function(factory) {
  4. // Add jQuery via AMD registration or browser globals
  5. if (typeof define === 'function' && define.amd) {
  6. define([ 'jquery' ], factory);
  7. }
  8. else {
  9. factory(jQuery);
  10. }
  11. }(function ($) {
  12. $.expandingTextarea = $.extend({
  13. autoInitialize: true,
  14. initialSelector: "textarea.expanding",
  15. opts: {
  16. resize: function() { }
  17. }
  18. }, $.expandingTextarea || {});
  19. var cloneCSSProperties = [
  20. 'lineHeight', 'textDecoration', 'letterSpacing',
  21. 'fontSize', 'fontFamily', 'fontStyle',
  22. 'fontWeight', 'textTransform', 'textAlign',
  23. 'direction', 'wordSpacing', 'fontSizeAdjust',
  24. 'wordWrap',
  25. 'borderLeftWidth', 'borderRightWidth',
  26. 'borderTopWidth','borderBottomWidth',
  27. 'paddingLeft', 'paddingRight',
  28. 'paddingTop','paddingBottom',
  29. 'marginLeft', 'marginRight',
  30. 'marginTop','marginBottom',
  31. 'boxSizing', 'webkitBoxSizing', 'mozBoxSizing', 'msBoxSizing'
  32. ];
  33. var textareaCSS = {
  34. position: "absolute",
  35. height: "100%",
  36. resize: "none"
  37. };
  38. var preCSS = {
  39. visibility: "hidden",
  40. border: "0 solid",
  41. whiteSpace: "pre-wrap"
  42. };
  43. var containerCSS = {
  44. position: "relative"
  45. };
  46. function resize() {
  47. $(this).closest('.expandingText').find("div").text(this.value + ' ');
  48. $(this).trigger("resize.expanding");
  49. }
  50. $.fn.expandingTextarea = function(o) {
  51. var opts = $.extend({ }, $.expandingTextarea.opts, o);
  52. if (o === "resize") {
  53. return this.trigger("input.expanding");
  54. }
  55. if (o === "destroy") {
  56. this.filter(".expanding-init").each(function() {
  57. var textarea = $(this).removeClass('expanding-init');
  58. var container = textarea.closest('.expandingText');
  59. container.before(textarea).remove();
  60. textarea
  61. .attr('style', textarea.data('expanding-styles') || '')
  62. .removeData('expanding-styles');
  63. });
  64. return this;
  65. }
  66. this.filter("textarea").not(".expanding-init").addClass("expanding-init").each(function() {
  67. var textarea = $(this);
  68. textarea.wrap("<div class='expandingText'></div>");
  69. textarea.after("<pre class='textareaClone'><div></div></pre>");
  70. var container = textarea.parent().css(containerCSS);
  71. var pre = container.find("pre").css(preCSS);
  72. // Store the original styles in case of destroying.
  73. textarea.data('expanding-styles', textarea.attr('style'));
  74. textarea.css(textareaCSS);
  75. $.each(cloneCSSProperties, function(i, p) {
  76. var val = textarea.css(p);
  77. // Only set if different to prevent overriding percentage css values.
  78. if (pre.css(p) !== val) {
  79. pre.css(p, val);
  80. }
  81. });
  82. textarea.bind("input.expanding propertychange.expanding", resize);
  83. resize.apply(this);
  84. if (opts.resize) {
  85. textarea.bind("resize.expanding", opts.resize);
  86. }
  87. });
  88. return this;
  89. };
  90. $(function () {
  91. if ($.expandingTextarea.autoInitialize) {
  92. $($.expandingTextarea.initialSelector).expandingTextarea();
  93. }
  94. });
  95. }));