(function($) { // Function to update labels of text fields M.updateTextFields = function() { let input_selector = 'input[type=text], input[type=password], input[type=email], input[type=url], input[type=tel], input[type=number], input[type=search], input[type=date], input[type=time], textarea'; $(input_selector).each(function(element, index) { let $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) { let hasLength = object.attr('data-length') !== null; let lenAttr = parseInt(object.attr('data-length')); let 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); } if (!$textarea.length) { console.error('No textarea element found'); return; } // Textarea Auto Resize let hiddenDiv = $('.hiddendiv').first(); if (!hiddenDiv.length) { hiddenDiv = $('
'); $('body').append(hiddenDiv); } // Set font properties of hiddenDiv let fontFamily = $textarea.css('font-family'); let fontSize = $textarea.css('font-size'); let lineHeight = $textarea.css('line-height'); // Firefox can't handle padding shorthand. let paddingTop = $textarea.css('padding-top'); let paddingRight = $textarea.css('padding-right'); let paddingBottom = $textarea.css('padding-bottom'); let 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'); let content = hiddenDiv.html().replace(/\n/g, '
'); hiddenDiv.html(content); // When textarea is hidden, width goes crazy. // Approximate with half of window size if ($textarea[0].offsetWidth > 0 && $textarea[0].offsetHeight > 0) { hiddenDiv.css('width', $textarea.width() + 'px'); } else { hiddenDiv.css('width', window.innerWidth / 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).ready(function() { // Text based inputs let input_selector = 'input[type=text], input[type=password], input[type=email], input[type=url], input[type=tel], input[type=number], input[type=search], input[type=date], input[type=time], 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).ready(function() { M.updateTextFields(); }); // HTML DOM FORM RESET handling $(document).on('reset', function(e) { let 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_FormSelect) { $(this).trigger('change'); } }); }, 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) { let $inputElement = $(e.target); if ($inputElement.is(input_selector)) { let 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 let 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'); let $this = $(this); $this.one('blur', function(e) { $(this).removeClass('tabbed'); }); return; } }); let text_area_selector = '.materialize-textarea'; $(text_area_selector).each(function() { let $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() { let file_field = $(this).closest('.file-field'); let path_input = file_field.find('input.file-path'); let files = $(this)[0].files; let file_names = []; for (let 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);