forms-free.js 5.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173
  1. "use strict";
  2. var _this = void 0;
  3. (function ($) {
  4. var inputSelector = "".concat(['text', 'password', 'email', 'url', 'tel', 'number', 'search', 'search-md'].map(function (selector) {
  5. return "input[type=".concat(selector, "]");
  6. }).join(', '), ", textarea");
  7. var textAreaSelector = '.materialize-textarea';
  8. var updateTextFields = function updateTextFields($input) {
  9. var $labelAndIcon = $input.siblings('label, i');
  10. var hasValue = $input.val().length;
  11. var hasPlaceholder = $input.attr('placeholder');
  12. var addOrRemove = "".concat(hasValue || hasPlaceholder ? 'add' : 'remove', "Class");
  13. $labelAndIcon[addOrRemove]('active');
  14. };
  15. var validateField = function validateField($input) {
  16. if ($input.hasClass('validate')) {
  17. var value = $input.val();
  18. var noValue = !value.length;
  19. var isValid = !$input[0].validity.badInput;
  20. if (noValue && isValid) {
  21. $input.removeClass('valid').removeClass('invalid');
  22. } else {
  23. var valid = $input.is(':valid');
  24. var length = Number($input.attr('length')) || 0;
  25. if (valid && (!length || length > value.length)) {
  26. $input.removeClass('invalid').addClass('valid');
  27. } else {
  28. $input.removeClass('valid').addClass('invalid');
  29. }
  30. }
  31. }
  32. };
  33. var textAreaAutoResize = function textAreaAutoResize() {
  34. var $textarea = $(_this);
  35. if ($textarea.val().length) {
  36. var $hiddenDiv = $('.hiddendiv');
  37. var fontFamily = $textarea.css('font-family');
  38. var fontSize = $textarea.css('font-size');
  39. if (fontSize) {
  40. $hiddenDiv.css('font-size', fontSize);
  41. }
  42. if (fontFamily) {
  43. $hiddenDiv.css('font-family', fontFamily);
  44. }
  45. if ($textarea.attr('wrap') === 'off') {
  46. $hiddenDiv.css('overflow-wrap', 'normal').css('white-space', 'pre');
  47. }
  48. $hiddenDiv.text("".concat($textarea.val(), "\n"));
  49. var content = $hiddenDiv.html().replace(/\n/g, '<br>');
  50. $hiddenDiv.html(content); // When textarea is hidden, width goes crazy.
  51. // Approximate with half of window size
  52. $hiddenDiv.css('width', $textarea.is(':visible') ? $textarea.width() : $(window).width() / 2);
  53. $textarea.css('height', $hiddenDiv.height());
  54. }
  55. };
  56. $(inputSelector).each(function (index, input) {
  57. var $this = $(input);
  58. var $labelAndIcon = $this.siblings('label, i');
  59. updateTextFields($this);
  60. var isValid = input.validity.badInput;
  61. if (isValid) {
  62. $labelAndIcon.addClass('active');
  63. }
  64. });
  65. $(document).on('focus', inputSelector, function (e) {
  66. $(e.target).siblings('label, i').addClass('active');
  67. });
  68. $(document).on('blur', inputSelector, function (e) {
  69. var $this = $(e.target);
  70. var noValue = !$this.val();
  71. var invalid = !e.target.validity.badInput;
  72. var noPlaceholder = $this.attr('placeholder') === undefined;
  73. if (noValue && invalid && noPlaceholder) {
  74. $this.siblings('label, i').removeClass('active');
  75. }
  76. validateField($this);
  77. });
  78. $(document).on('change', inputSelector, function (e) {
  79. var $this = $(e.target);
  80. updateTextFields($this);
  81. validateField($this);
  82. });
  83. $('input[autofocus]').siblings('label, i').addClass('active');
  84. $(document).on('reset', function (e) {
  85. var $formReset = $(e.target);
  86. if ($formReset.is('form')) {
  87. var $formInputs = $formReset.find(inputSelector);
  88. $formInputs.removeClass('valid').removeClass('invalid').each(function (index, input) {
  89. var $this = $(input);
  90. var noDefaultValue = !$this.val();
  91. var noPlaceholder = !$this.attr('placeholder');
  92. if (noDefaultValue && noPlaceholder) {
  93. $this.siblings('label, i').removeClass('active');
  94. }
  95. });
  96. $formReset.find('select.initialized').each(function (index, select) {
  97. var $select = $(select);
  98. var $visibleInput = $select.siblings('input.select-dropdown');
  99. var defaultValue = $select.children('[selected]').val();
  100. $select.val(defaultValue);
  101. $visibleInput.val(defaultValue);
  102. });
  103. }
  104. });
  105. function init() {
  106. var $text = $('.md-textarea-auto');
  107. if ($text.length) {
  108. var observe;
  109. if (window.attachEvent) {
  110. observe = function observe(element, event, handler) {
  111. element.attachEvent("on".concat(event), handler);
  112. };
  113. } else {
  114. observe = function observe(element, event, handler) {
  115. element.addEventListener(event, handler, false);
  116. };
  117. }
  118. $text.each(function () {
  119. var self = this;
  120. function resize() {
  121. self.style.height = 'auto';
  122. self.style.height = "".concat(self.scrollHeight, "px");
  123. }
  124. function delayedResize() {
  125. window.setTimeout(resize, 0);
  126. }
  127. observe(self, 'change', resize);
  128. observe(self, 'cut', delayedResize);
  129. observe(self, 'paste', delayedResize);
  130. observe(self, 'drop', delayedResize);
  131. observe(self, 'keydown', delayedResize);
  132. resize();
  133. });
  134. }
  135. }
  136. init();
  137. var $body = $('body');
  138. if (!$('.hiddendiv').first().length) {
  139. var $hiddenDiv = $('<div class="hiddendiv common"></div>');
  140. $body.append($hiddenDiv);
  141. }
  142. $(textAreaSelector).each(textAreaAutoResize);
  143. $body.on('keyup keydown', textAreaSelector, textAreaAutoResize);
  144. })(jQuery);