(function ($) {
$(document).ready(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).val().length !== 0) {
$(this).siblings('label, i').addClass('active');
}
validate_field($(this));
});
// Add active if input element has been pre-populated on document ready
$(document).ready(function() {
$(input_selector).each(function(index, element) {
if($(element).val().length > 0) {
$(this).siblings('label, i').addClass('active');
}
});
});
// HTML DOM FORM RESET handling
$(document).on('reset', function(e) {
if ($(e.target).is('form')) {
$(this).find(input_selector).removeClass('valid').removeClass('invalid');
// Reset select
$(this).find('select.initialized').each(function () {
var reset_text = $(this).find('option[selected]').text();
$(this).siblings('input.select-dropdown').val(reset_text);
});
}
});
// Add active when element has focus
$(document).on('focus', input_selector, function () {
$(this).siblings('label, i').addClass('active');
});
$(document).on('blur', input_selector, function () {
if ($(this).val().length === 0) {
$(this).siblings('label, i').removeClass('active');
}
validate_field($(this));
});
validate_field = function(object) {
if (object.val().length === 0) {
if (object.hasClass('validate')) {
object.removeClass('valid');
object.removeClass('invalid');
}
}
else {
if (object.hasClass('validate')) {
if (object.is(':valid')) {
object.removeClass('invalid');
object.addClass('valid');
}
else {
object.removeClass('valid');
object.addClass('invalid');
}
}
}
}
// Textarea Auto Resize
if ($('.hiddendiv').length === 0) {
var hiddenDiv = $('
'),
content = null;
$('body').append(hiddenDiv);
}
var text_area_selector = '.materialize-textarea';
$('.hiddendiv').css('width', $(text_area_selector).width());
$(text_area_selector).each(function () {
if ($(this).val().length) {
content = $(this).val();
content = content.replace(/\n/g, '
');
hiddenDiv.html(content + '
');
$(this).css('height', hiddenDiv.height());
}
});
$('body').on('keyup keydown',text_area_selector , function () {
// console.log($(this).val());
content = $(this).val();
content = content.replace(/\n/g, '
');
hiddenDiv.html(content + '
');
// console.log(hiddenDiv.html());
$(this).css('height', hiddenDiv.height());
});
// File Input Path
$('.file-field').each(function() {
var path_input = $(this).find('input.file-path');
$(this).find('input[type="file"]').change(function () {
path_input.val($(this).val());
path_input.trigger('change');
});
});
// Range Input
var range_type = 'input[type=range]';
var range_mousedown = false;
$(range_type).each(function () {
var thumb = $('');
$(this).after(thumb);
});
var range_wrapper = '.range-field';
$(document).on("mousedown", range_wrapper, function(e) {
var thumb = $(this).children('.thumb');
if (thumb.length <= 0) {
thumb = $('');
$(this).append(thumb);
}
range_mousedown = true;
$(this).addClass('active');
if (!thumb.hasClass('active')) {
thumb.velocity({ height: "30px", width: "30px", top: "-20px", marginLeft: "-15px"}, { duration: 300, easing: 'easeOutExpo' });
}
var left = e.pageX - $(this).offset().left;
var width = $(this).outerWidth();
if (left < 0) {
left = 0;
}
else if (left > width) {
left = width;
}
thumb.addClass('active').css('left', left);
thumb.find('.value').html($(this).children('input[type=range]').val());
});
$(document).on("mouseup", range_wrapper, function() {
range_mousedown = false;
$(this).removeClass('active');
});
$(document).on("mousemove", range_wrapper, function(e) {
var thumb = $(this).children('.thumb');
if (range_mousedown) {
if (!thumb.hasClass('active')) {
thumb.velocity({ height: "30px", width: "30px", top: "-20px", marginLeft: "-15px"}, { duration: 300, easing: 'easeOutExpo' });
}
var left = e.pageX - $(this).offset().left;
var width = $(this).outerWidth();
if (left < 0) {
left = 0;
}
else if (left > width) {
left = width;
}
thumb.addClass('active').css('left', left);
thumb.find('.value').html($(this).children('input[type=range]').val());
}
});
$(document).on("mouseout", range_wrapper, function() {
if (!range_mousedown) {
var thumb = $(this).children('.thumb');
if (thumb.hasClass('active')) {
thumb.velocity({ height: "0", width: "0", top: "10px", marginLeft: "-6px"}, { duration: 100 });
}
thumb.removeClass('active');
}
});
// Select Functionality
// Select Plugin
$.fn.material_select = function (callback) {
$(this).each(function(){
$select = $(this);
if ( $select.hasClass('browser-default') || $select.hasClass('initialized')) {
return; // Continue to next (return false breaks out of entire loop)
}
var uniqueID = guid();
var wrapper = $('');
var options = $('');
var selectOptions = $select.children('option');
if ($select.find('option:selected') !== undefined) {
var label = $select.find('option:selected');
}
else {
var label = options.first();
}
// Create Dropdown structure
selectOptions.each(function () {
// Add disabled attr if disabled
options.append($('' + $(this).html() + ''));
});
options.find('li').each(function (i) {
var $curr_select = $select;
$(this).click(function () {
// Check if option element is disabled
if (!$(this).hasClass('disabled')) {
$curr_select.find('option').eq(i).prop('selected', true);
// Trigger onchange() event
$curr_select.trigger('change');
$curr_select.siblings('input.select-dropdown').val($(this).text());
if (typeof callback !== 'undefined') callback();
}
});
});
// Wrap Elements
$select.wrap(wrapper);
// Add Select Display Element
var $newSelect = $('');
$select.before($newSelect);
$('body').append(options);
// Check if section element is disabled
if (!$select.is(':disabled')) {
$newSelect.dropdown({"hover": false});
}
$select.addClass('initialized');
$newSelect.on('focus', function(){
$(this).trigger('open');
label = $(this).val();
selectedOption = options.find('li').filter(function() {
return $(this).text().toLowerCase() === label.toLowerCase();
})[0];
activateOption(options, selectedOption);
});
$newSelect.on('blur', function(){
$(this).trigger('close');
});
// Make option as selected and scroll to selected position
activateOption = function(collection, newOption) {
collection.find('li.active').removeClass('active');
$(newOption).addClass('active');
collection.scrollTo(newOption);
}
// Allow user to search by typing
// this array is cleared after 1 second
filterQuery = []
onKeyDown = function(event){
// TAB - switch to another input
if(event.which == 9){
$newSelect.trigger('close');
return
}
// ARROW DOWN WHEN SELECT IS CLOSED - open select options
if(event.which == 40 && !options.is(":visible")){
$newSelect.trigger('open');
return
}
// ENTER WHEN SELECT IS CLOSED - submit form
if(event.which == 13 && !options.is(":visible")){
return
}
event.preventDefault();
// CASE WHEN USER TYPE LETTERS
letter = String.fromCharCode(event.which).toLowerCase();
if (letter){
filterQuery.push(letter);
string = filterQuery.join("");
newOption = options.find('li').filter(function() {
return $(this).text().toLowerCase().indexOf(string) === 0;
})[0];
if(newOption){
activateOption(options, newOption);
}
}
// ENTER - select option and close when select options are opened
if(event.which == 13){
activeOption = options.find('li.active:not(.disabled)')[0];
if(activeOption){
$(activeOption).trigger('click');
$newSelect.trigger('close');
}
}
// ARROW DOWN - move to next not disabled option
if(event.which == 40){
newOption = options.find('li.active').next('li:not(.disabled)')[0];
if(newOption){
activateOption(options, newOption);
}
}
// ESC - close options
if(event.which == 27){
$newSelect.trigger('close');
}
// ARROW UP - move to previous not disabled option
if(event.which == 38){
newOption = options.find('li.active').prev('li:not(.disabled)')[0];
if(newOption){
activateOption(options, newOption);
}
}
// Automaticaly clean filter query so user can search again by starting letters
setTimeout(function(){filterQuery = []}, 1000)
}
$newSelect.on('keydown', onKeyDown);
});
}
// Unique ID
var guid = (function() {
function s4() {
return Math.floor((1 + Math.random()) * 0x10000)
.toString(16)
.substring(1);
}
return function() {
return s4() + s4() + '-' + s4() + '-' + s4() + '-' +
s4() + '-' + s4() + s4() + s4();
};
})();
});
}( jQuery ));