(function ($) { // Function to update labels of text fields M.updateTextFields = function () { var input_selector = 'input[type=text], input[type=password], input[type=email], input[type=url], input[type=tel], input[type=number], input[type=search], textarea'; $(input_selector).each(function (element, index) { var $this = $(this); if (element.value.length > 0 || $(element).is(':focus') || element.autofocus || $this.attr('placeholder') !== null) { $this.siblings('label').addClass('active'); } else if (element.validity) { $this.siblings('label').toggleClass('active', element.validity.badInput === true); } else { $this.siblings('label').removeClass('active'); } }); }; M.validate_field = function (object) { var hasLength = object.attr('data-length') !== null; var lenAttr = parseInt(object.attr('data-length')); var len = object[0].value.length; if (len === 0 && object[0].validity.badInput === false && !object.is(':required')) { if (object.hasClass('validate')) { object.removeClass('valid'); object.removeClass('invalid'); } } else { if (object.hasClass('validate')) { // Check for character counter attributes if (object.is(':valid') && hasLength && len <= lenAttr || object.is(':valid') && !hasLength) { object.removeClass('invalid'); object.addClass('valid'); } else { object.removeClass('valid'); object.addClass('invalid'); } } } }; M.textareaAutoResize = function ($textarea) { // Wrap if native element if ($textarea instanceof Element) { $textarea = $($textarea); } // Textarea Auto Resize var hiddenDiv = $('.hiddendiv').first(); if (!hiddenDiv.length) { hiddenDiv = $('
'); $('body').append(hiddenDiv); } // Set font properties of hiddenDiv var fontFamily = $textarea.css('font-family'); var fontSize = $textarea.css('font-size'); var lineHeight = $textarea.css('line-height'); // Firefox can't handle padding shorthand. var paddingTop = $textarea.css('padding-top'); var paddingRight = $textarea.css('padding-right'); var paddingBottom = $textarea.css('padding-bottom'); var paddingLeft = $textarea.css('padding-left'); if (fontSize) { hiddenDiv.css('font-size', fontSize); } if (fontFamily) { hiddenDiv.css('font-family', fontFamily); } if (lineHeight) { hiddenDiv.css('line-height', lineHeight); } if (paddingTop) { hiddenDiv.css('padding-top', paddingTop); } if (paddingRight) { hiddenDiv.css('padding-right', paddingRight); } if (paddingBottom) { hiddenDiv.css('padding-bottom', paddingBottom); } if (paddingLeft) { hiddenDiv.css('padding-left', paddingLeft); } // Set original-height, if none if (!$textarea.data('original-height')) { $textarea.data('original-height', $textarea.height()); } if ($textarea.attr('wrap') === 'off') { hiddenDiv.css('overflow-wrap', 'normal').css('white-space', 'pre'); } hiddenDiv.text($textarea[0].value + '\n'); var content = hiddenDiv.html().replace(/\n/g, '
'); hiddenDiv.html(content); // When textarea is hidden, width goes crazy. // Approximate with half of window size if ($textarea.css('display') !== 'hidden') { hiddenDiv.css('width', $textarea.width() + 'px'); } else { hiddenDiv.css('width', $(window).width() / 2 + 'px'); } /** * Resize if the new height is greater than the * original height of the textarea */ if ($textarea.data('original-height') <= hiddenDiv.innerHeight()) { $textarea.css('height', hiddenDiv.innerHeight() + 'px'); } else if ($textarea[0].value.length < $textarea.data('previous-length')) { /** * In case the new height is less than original height, it * means the textarea has less text than before * So we set the height to the original one */ $textarea.css('height', $textarea.data('original-height') + 'px'); } $textarea.data('previous-length', $textarea[0].value.length); }; $(document).on('ready turbolinks:load', function () { // Text based inputs var input_selector = 'input[type=text], input[type=password], input[type=email], input[type=url], input[type=tel], input[type=number], input[type=search], textarea'; // Add active if form auto complete $(document).on('change', input_selector, function () { if (this.value.length !== 0 || $(this).attr('placeholder') !== null) { $(this).siblings('label').addClass('active'); } M.validate_field($(this)); }); // Add active if input element has been pre-populated on document ready $(document).on('ready turbolinks:load', function () { M.updateTextFields(); }); // HTML DOM FORM RESET handling $(document).on('reset', function (e) { var formReset = $(e.target); if (formReset.is('form')) { formReset.find(input_selector).removeClass('valid').removeClass('invalid'); formReset.find(input_selector).each(function (e) { if (this.value.length) { $(this).siblings('label').removeClass('active'); } }); // Reset select (after native reset) setTimeout(function () { formReset.find('select').each(function () { // check if initialized if (this.M_Select) { var reset_text = $(this).find('option[selected]').text(); $(this).siblings('input.select-dropdown')[0].value = reset_text; } }); }, 0); } }); /** * Add active when element has focus * @param {Event} e */ document.addEventListener('focus', function (e) { if ($(e.target).is(input_selector)) { $(e.target).siblings('label, .prefix').addClass('active'); } }, true); /** * Remove active when element is blurred * @param {Event} e */ document.addEventListener('blur', function (e) { var $inputElement = $(e.target); if ($inputElement.is(input_selector)) { var selector = ".prefix"; if ($inputElement[0].value.length === 0 && $inputElement[0].validity.badInput !== true && $inputElement.attr('placeholder') === null) { selector += ", label"; } $inputElement.siblings(selector).removeClass('active'); M.validate_field($inputElement); } }, true); // Radio and Checkbox focus class var radio_checkbox = 'input[type=radio], input[type=checkbox]'; $(document).on('keyup', radio_checkbox, function (e) { // TAB, check if tabbing to radio or checkbox. if (e.which === M.keys.TAB) { $(this).addClass('tabbed'); var $this = $(this); $this.one('blur', function (e) { $(this).removeClass('tabbed'); }); return; } }); var text_area_selector = '.materialize-textarea'; $(text_area_selector).each(function () { var $textarea = $(this); /** * Resize textarea on document load after storing * the original height and the original length */ $textarea.data('original-height', $textarea.height()); $textarea.data('previous-length', this.value.length); M.textareaAutoResize($textarea); }); $(document).on('keyup', text_area_selector, function () { M.textareaAutoResize($(this)); }); $(document).on('keydown', text_area_selector, function () { M.textareaAutoResize($(this)); }); // File Input Path $(document).on('change', '.file-field input[type="file"]', function () { var file_field = $(this).closest('.file-field'); var path_input = file_field.find('input.file-path'); var files = $(this)[0].files; var file_names = []; for (var i = 0; i < files.length; i++) { file_names.push(files[i].name); } path_input[0].value = file_names.join(", "); path_input.trigger('change'); }); }); // End of $(document).ready })(cash);