276 lines
8.4 KiB
JavaScript
276 lines
8.4 KiB
JavaScript
|
(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 = $('<div class="hiddendiv common"></div>');
|
||
|
|
$('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, '<br>');
|
||
|
|
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);
|