var Form = {
bind: function(elements)
{
$('form.form', elements).find('input[type=text],input[type=password],textarea,select').change(Form.validate);
$('form label:hidden', elements).each(Form.attachInputHints);
$('form.form', elements).each(Form.fetchSettings);
$('form.form .optionsYN input[type="checkbox"]').bind('changeStatus', Form.optionsYNchange).change(Form.optionsYN).trigger('changeStatus');
Form.helpTooltips(elements);
FormCheckbox.bind(elements);
FormRadio.bind(elements);
/*FormInput.bind(elements);*/
/*FormSelect.bind(elements);*/
FormSubmit.bind(elements);
},
validate: function(e)
{
var input = $(this);
if (input.hasClass('skip_validation')) {
return;
}
var form = input.closest('form');
var data = 'ajax_content_id=' + formContent[form.attr('id')] + '&' + form.serialize();
$.ajax({
url : Utils.getUrl(),
type : 'POST',
dataType : 'json',
data : data,
success : function(data) {
var error = data.errors[input.name()];
if (error) {
Form.setError(input, error);
} else {
Form.setValid(input);
}
}
});
},
setError: function(input, error)
{
Form.getFamily(input).removeClass('valid').addClass('error');
Form.removeErrorMessage(input);
input.closest('div[class=""]').append('' + error + '');
input.trigger('error');
},
removeErrorMessage: function(input)
{
input.closest('div[class=""]').find('strong').remove();
},
setValid: function(input)
{
Form.getFamily(input).removeClass('error').addClass('valid');
Form.removeErrorMessage(input);
input.trigger('valid');
},
getFamily: function(input)
{
return input.add(input.parent().parent());
},
attachInputHints: function()
{
var label = $(this);
var input = $('#' + label.attr('for'), label.closest('form'));
if (!input.length) {
return;
}
var title = label.text();
if (!input.val()) {
input.val(title);
}
input
.data('title', title)
.click(Form.clearHint)
.blur(Form.resetHint)
.closest('form').bind('submit', {input: input}, Form.removeHint)
;
},
clearHint: function(event)
{
var input = $(this);
if (input.val() == input.data('title')) {
input.val('');
}
},
resetHint: function(event)
{
var input = $(this);
if (!input.val()) {
input.val(input.data('title'));
}
},
removeHint: function(event)
{
var input = event.data.input;
if (input.val() == input.data('title')) {
input.val('');
}
},
fetchSettings: function()
{
var form = $(this);
if (!form.attr('id')) {
return;
}
var data = null;
eval("if (typeof(_"+ form.attr('id') +") != 'undefined') { data = _"+ form.attr('id') +"; }");
if (!data) {
return;
}
$.each(data, function(key, value) {
var result = key.split('=', 2);
form.find(':input[name="'+ result[0] +'"]').data(result[1], value);
});
},
helpTooltips: function(elements)
{
if (!$('.tooltip').length) {
$('body').append('');
}
$('form.form :input[title!=""]', elements).tooltip({
position: 'center right',
offset: [0, 20],
effect: 'toggle',
opacity: 0.7,
tip: '.tooltip'
});
},
optionsYN: function()
{
$(this).trigger('changeStatus');
},
optionsYNchange: function()
{
var input = $(this);
var label = input.nextAll('label:first');
label.find('span').hide();
label.find('span.' + (input.attr('checked') ? 'yes' : 'no')).show();
}
}
Events.register(Form.bind);
var FormCheckbox = {
classMain : 'customCheckbox',
classOn : 'customCheckboxOn',
classOnDisabled : 'customCheckboxOnDisabled',
classOff : 'customCheckboxOff',
classOffDisabled : 'customCheckboxOffDisabled',
bind: function(elements)
{
$('form.form input[type="checkbox"]', elements).each(FormCheckbox.replace);
},
replace: function()
{
var input = $(this);
var overlay = $('');
input.before(overlay);
FormCheckbox.synchronize(input, overlay);
input
.click(FormCheckbox.onInputClick)
.change(FormCheckbox.onInputChange)
.bind('customChange', FormCheckbox.onInputCustomChange)
.css('display', 'none')
;
/*$('label[for="'+ input.attr('id') +'"]')
.click(FormCheckbox.onLabelClick)
;*/
overlay
.click(FormCheckbox.onOverlayClick)
.keydown(FormCheckbox.onOverlayKeyDown)
;
},
synchronize: function(input, overlay)
{
overlay.removeClass().addClass(FormCheckbox.classMain);
if (input.attr('disabled')) {
if (input.attr('checked')) {
overlay.addClass(FormCheckbox.classOnDisabled);
} else {
overlay.addClass(FormCheckbox.classOffDisabled);
}
} else if (input.attr('checked')) {
overlay.addClass(FormCheckbox.classOn);
} else {
overlay.addClass(FormCheckbox.classOff);
}
},
onInputClick: function(event)
{
$(this).trigger('customChange');
},
onInputChange: function(event)
{
event.preventDefault();
return false;
},
onInputCustomChange: function(event)
{
var input = $(this);
var overlay = input.parent().find('a.' + FormCheckbox.classMain);
FormCheckbox.synchronize(input, overlay);
},
onLabelClick: function(event)
{
event.preventDefault();
$('input#'+ $(this).attr('for')).trigger('click');
return false;
},
onOverlayClick: function(event)
{
event.preventDefault();
var overlay = $(this);
var input = overlay.parent().find('input[type="checkbox"]:eq(0)');
if (!input.attr('disabled')) {
input.trigger('click');
FormCheckbox.synchronize(input, overlay);
input.trigger('change');
}
},
onOverlayKeyDown: function(event)
{
if (event.keyCode == 32) { // space = 32, enter = 13
$(event.currentTarget).trigger('click');
return false;
}
if (event.keyCode == 13) {
$(event.currentTarget).closest('form').submit();
return false;
}
}
}
var FormRadio = {
classMain : 'customRadio',
classOn : 'customRadioOn',
classOnDisabled : 'customRadioOnDisabled',
classOff : 'customRadioOff',
classOffDisabled : 'customRadioOffDisabled',
bind: function(elements)
{
var inputs = $('form.form input[type="radio"]', elements);
inputs.each(FormRadio.replace);
FormRadio.synchronization(inputs);
},
replace: function()
{
var input = $(this);
var overlay = $('');
input.before(overlay);
input
.click(FormRadio.onInputClick)
.css('display', 'none')
;
$('label[for="' + input.attr('id') + '"]').click(FormRadio.onLabelClick);
overlay.click(FormRadio.onOverlayClick).keydown(FormRadio.onOverlayKeyDown);
},
synchronization: function(inputs)
{
inputs.each(function() {
var input = $(this);
var overlay = input.parent().find('a.' + FormRadio.classMain);
overlay.removeClass().addClass(FormRadio.classMain);
if (input.attr('disabled')) {
if (input.attr('checked')) {
overlay.addClass(FormRadio.classOnDisabled);
} else {
overlay.addClass(FormRadio.classOffDisabled);
}
} else if (input.attr('checked')) {
overlay.addClass(FormRadio.classOn);
} else {
overlay.addClass(FormRadio.classOff);
}
});
},
onInputClick: function(event)
{
var input = $(this);
var inputs = input.closest('form').find('input[type="radio"][name="' + input.attr('name') + '"]');
FormRadio.synchronization(inputs);
},
onLabelClick: function(event)
{
event.preventDefault();
var label = $(this);
var input = $('input#' + label.attr('for'));
input.attr('checked', true);
var inputs = input.closest('form').find('input[type="radio"][name="' + input.attr('name') + '"]');
FormRadio.synchronization(inputs);
},
onOverlayClick: function(event)
{
event.preventDefault();
var overlay = $(this);
var input = overlay.parent().find('input[type="radio"]:eq(0)');
var inputs = input.closest('form').find('input[type="radio"][name="' + input.attr('name') + '"]');
if (!input.attr('disabled')) {
input.attr('checked', true);
FormRadio.synchronization(inputs);
input.trigger('change');
}
},
onOverlayKeyDown: function(event)
{
if (event.keyCode == 32) { // space = 32, enter = 13
$(event.currentTarget).trigger('click');
}
if (event.keyCode == 32) {
return false;
}
}
}
var FormInput = {
bind: function(elements)
{
$('form.form input[type="text"],form.form input[type="password"],form.form tex1tarea', elements).each(FormInput.replace);
},
replace: function()
{
var input = $(this);
input.wrap('');
input.wrap('');
input.wrap('');
}
}
var FormSelect = {
bind: function(elements)
{
$('form.form select', elements).each(FormSelect.replace);
},
replace: function()
{
var select = $(this);
if (select.attr('multiple')) {
return;
}
var overlay = $(
''
);
select
.before(overlay)
.addClass('custom')
.change(FormSelect.onSelectChange)
;
var selectWidth =
select.width() +
parseInt(select.css('margin-left')) +
parseInt(select.css('margin-right')) +
parseInt(select.css('border-left-width')) +
parseInt(select.css('border-right-width'))
;
overlay
.css('width', selectWidth + 'px')
.click(FormSelect.overlayOnEvent)
.mouseover(FormSelect.overlayOnEvent)
.mouseout(FormSelect.overlayOnEvent)
.find('.customSelectTitle').text(select.find('option:selected').text())
;
},
overlayOnEvent: function(event)
{
$(this).next().trigger(event.type);
},
onSelectChange: function(event)
{
var select = $(this);
var overlay = select.prev().find('.customSelectTitle').text(select.find('option:selected').text());
console.log(overlay);
}
}
var FormSubmit = {
classMain: 'customSubmit',
bind: function(elements)
{
$('form.form input[type="submit"],form.form input[type="button"]', elements).each(FormSubmit.replace);
},
replace: function()
{
var input = $(this);
var aClasses = FormSubmit.classMain + ' ' + input.attr('className');
var overlay = $(''+ input.val() +'');
input.before(overlay).hide().css('visibility', 'hidden');
overlay.click(FormSubmit.onOverlayClick);
},
onOverlayClick: function(event)
{
event.preventDefault();
$(this).next('input').trigger('click');
}
}