(function(factory) {
if (typeof define === 'function' && define.amd) {
define(['jquery'], factory);
} else if (typeof module === 'object' && module.exports) {
module.exports = function(root, jQuery) {
if (jQuery === undefined) {
if (typeof window !== 'undefined') {
jQuery = require('jquery');
} else {
jQuery = require('jquery')(root);
}
}
factory(jQuery);
return jQuery;
};
} else {
factory(jQuery);
}
}(function($) {
var methods = {
init: function(options) {
console.log(this.length);
return this.each(function(index) {
var selector = $(this).attr('id') ? $(this).attr('id') : '';
var select = $(this),
mainSelectContainer = 'select-container-' +selector+'-'+ index,
mainSelectButton = 'select-main-button-' +selector+'-'+ index,
mainSelectLabel = 'select-main-label-' +selector+'-'+ index,
mainSelectGroupOptions = 'select-group-options-' +selector+'-'+ index,
mainSelectSelectedText = 'select-main-selected-tex-' +selector+'-'+ index,
mouseDown = false,
options = function() {
var tpl = '';
select.find('option').each(function(i, el) {
if (select.attr('data-placeholder')) {
if ($(el).val() != '') tpl = tpl + '';
} else {
tpl = tpl + '';
}
});
return tpl;
};
select.attr('tabindex', '-1');
select.wrap('
');
$('#' + mainSelectContainer).prepend(
'' +
'' +
options() +
'
'
);
$('#' + mainSelectButton).on('focus', function() {
$('#' + mainSelectContainer).find('.MTM-form-field').addClass('MTM-form-field-focus');
});
$('#' + mainSelectButton).on('blur', function() {
$('#' + mainSelectContainer).find('.MTM-form-field').removeClass('MTM-form-field-focus');
});
$('#' + mainSelectContainer).on('click', function() {
toogleSelectDropdown();
});
$('#' + mainSelectButton).on('keydown', function(e) {
if (e.keyCode == 38) {
e.preventDefault();
toogleSelectDropdown();
$('#' + mainSelectGroupOptions).find('button:first-child').focus();
} else if (e.keyCode == 40) {
e.preventDefault();
toogleSelectDropdown();
$('#' + mainSelectGroupOptions).find('button:first-child').focus();
}
});
$(document).on('click', function(e) {
if ($(e.target).closest('#' + mainSelectContainer).length === 0)
$('#' + mainSelectContainer).removeClass('MTM-mask-select-open');
});
select.find('option').each(function(i, el) {
$('#select-option-' + selector + '-' + index + '-' + i).on('keydown', function(e) {
if (e.keyCode == 9) {
e.preventDefault();
}
if (e.keyCode == 27) {
$('#' + mainSelectContainer).toggleClass('MTM-mask-select-open');
$('#' + mainSelectButton).focus();
}
if (e.keyCode == 38) {
e.preventDefault();
$(this).prev().focus();
} else if (e.keyCode == 40) {
e.preventDefault();
$(this).next().focus();
}
});
$('#select-option-' + selector + '-' + index + '-' + i).on('click', function(e) {
select.val($(this).attr('data-value'));
$(this).addClass('MTM-mask-select-option-selected').attr('aria-selected', true);
$(this).siblings().removeClass('MTM-mask-select-option-selected').attr('aria-selected', false);
$('#' + mainSelectButton).trigger('click').focus();
$('#' + mainSelectSelectedText).html($(this).html());
select.trigger('change').trigger('click');
});
});
function toogleSelectDropdown() {
$('#' + mainSelectContainer).toggleClass('MTM-mask-select-open');
}
})
},
update: function() {
return this.each(function(index) {
var mainSelectSelectedText = 'select-main-selected-tex-' + index,
mainSelectGroupOptions = 'select-group-options-' + index,
optionSelected = $(this).find('option:selected');
$('#' + mainSelectGroupOptions)
.find('[data-value="' + optionSelected.val() + '"]')
.attr('aria-selected', true)
.addClass('MTM-mask-select-option-selected')
.siblings()
.removeClass('MTM-mask-select-option-selected')
.attr('aria-selected', false);
$('#' + mainSelectSelectedText).html(optionSelected.html());
})
}
}
$.fn.mtmMaskSelect = function(optionsAndMethods) {
if (methods[optionsAndMethods]) {
return methods[optionsAndMethods].apply(this, Array.prototype.slice.call(arguments, 1));
} else if (typeof optionsAndMethods === 'object' || !optionsAndMethods) {
return methods.init.apply(this, arguments);
} else {
$.error('Method ' + optionsAndMethods + ' does not exist on jQuery.mtmMaskSelect');
}
};
}));