297 lines
12 KiB
JavaScript
297 lines
12 KiB
JavaScript
/**
|
|
* Copyright 2014 Openstack Foundation
|
|
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
* you may not use this file except in compliance with the License.
|
|
* You may obtain a copy of the License at
|
|
* http://www.apache.org/licenses/LICENSE-2.0
|
|
* Unless required by applicable law or agreed to in writing, software
|
|
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
* See the License for the specific language governing permissions and
|
|
* limitations under the License.
|
|
**/
|
|
(function( $ ){
|
|
|
|
|
|
var form = null;
|
|
var table = null;
|
|
var form_validator = null;
|
|
|
|
var methods = {
|
|
init : function(options) {
|
|
form = $(this);
|
|
if(form.length>0){
|
|
|
|
table = $("table",form);
|
|
|
|
form_validator = form.validate({
|
|
rules: {
|
|
'add-office-address1' : {
|
|
ValidPlainText:true,
|
|
maxlength: 255,
|
|
validate_duplicate_field:[table,'.office-address1']
|
|
},
|
|
'add-office-address2' : {
|
|
ValidPlainText:true,
|
|
maxlength: 255,
|
|
validate_duplicate_field:[table,'.office-address2']
|
|
},
|
|
'add-office-city' : {
|
|
required:true,
|
|
ValidPlainText:true,
|
|
maxlength: 125
|
|
},
|
|
'add-office-state' : {
|
|
ValidPlainText:true,
|
|
maxlength: 125
|
|
},
|
|
'add-office-zip-code' : {
|
|
maxlength: 25
|
|
},
|
|
'add-office-country': {
|
|
required:true
|
|
}
|
|
},
|
|
ignore:[],
|
|
onfocusout: false,
|
|
focusCleanup: true,
|
|
focusInvalid: false,
|
|
invalidHandler: function(form, validator) {
|
|
if (!validator.numberOfInvalids())
|
|
return;
|
|
var element = $(validator.errorList[0].element);
|
|
if(!element.is(":visible")){
|
|
element = element.parent();
|
|
}
|
|
|
|
$('html, body').animate({
|
|
scrollTop: element.offset().top
|
|
}, 2000);
|
|
},
|
|
errorPlacement: function(error, element) {
|
|
if(!element.is(":visible")){
|
|
element = element.parent();
|
|
}
|
|
error.insertAfter(element);
|
|
}
|
|
});
|
|
|
|
$('#add-office-country',form).chosen({disable_search_threshold: 10});
|
|
|
|
$('#add-office-country',form).change(function () {
|
|
form_validator.resetForm();
|
|
});
|
|
|
|
$('tbody',table).sortable(
|
|
{
|
|
items: '> tr:not(.add-additional-office)',
|
|
update: function( event, ui ) {
|
|
renderOrders();
|
|
}
|
|
}
|
|
);
|
|
|
|
$('.remove-additional-office').live('click',function(event){
|
|
var remove_btn = $(this);
|
|
var tr = remove_btn.parent().parent();
|
|
tr.remove();
|
|
renderOrders();
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
return false;
|
|
});
|
|
|
|
$('#add-additional-office').click(function(event){
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
var is_valid = form.valid();
|
|
if(is_valid){
|
|
var address1 = $('#add-office-address1',form);
|
|
var address2 = $('#add-office-address2',form);
|
|
var city = $('#add-office-city',form);
|
|
var state = $('#add-office-state',form);
|
|
var zip_code = $('#add-office-zip-code',form);
|
|
var country = $('#add-office-country',form);
|
|
|
|
var new_office = {
|
|
address_1: address1.val(),
|
|
address_2: address2.val(),
|
|
city : city.val(),
|
|
state : state.val(),
|
|
zip_code : zip_code.val(),
|
|
country : country.val()
|
|
};
|
|
|
|
addAdditionalOffice(new_office);
|
|
|
|
address1.val('');
|
|
address2.val('');
|
|
city.val('');
|
|
state.val('');
|
|
zip_code.val('');
|
|
country.val('');
|
|
country.trigger("chosen:updated");
|
|
form_validator.resetForm();
|
|
}
|
|
return false;
|
|
});
|
|
|
|
}
|
|
},
|
|
serialize:function(){
|
|
//remove validator for add controls
|
|
form_validator.settings.ignore = ".add-control";
|
|
var is_valid = form.valid();
|
|
//re add rules
|
|
form_validator.settings.ignore = [];
|
|
if(!is_valid){
|
|
return false;
|
|
}
|
|
var res = [];
|
|
var rows = $("tbody > tr",table);
|
|
for(var i=0;i<rows.length-1;i++){
|
|
var new_office = {
|
|
address_1: $('input.office-address1',rows[i]).val().trim(),
|
|
address_2: $('input.office-address2',rows[i]).val().trim(),
|
|
city : $('input.office-city',rows[i]).val().trim(),
|
|
state : $('input.office-state',rows[i]).val().trim(),
|
|
zip_code : $('input.office-zip-code',rows[i]).val().trim(),
|
|
country : $('.office-country-select',rows[i]).val()
|
|
};
|
|
res.push(new_office);
|
|
}
|
|
return res;
|
|
},
|
|
load: function(offices){
|
|
for(var i in offices){
|
|
addAdditionalOffice(offices[i]);
|
|
}
|
|
}
|
|
};
|
|
|
|
$.fn.offices = function(methodOrOptions) {
|
|
if ( methods[methodOrOptions] ) {
|
|
return methods[ methodOrOptions ].apply( this, Array.prototype.slice.call( arguments, 1 ));
|
|
} else if ( typeof methodOrOptions === 'object' || ! methodOrOptions ) {
|
|
// Default to "init"
|
|
return methods.init.apply( this, arguments );
|
|
} else {
|
|
$.error( 'Method ' + method + ' does not exist on jQuery.offices' );
|
|
}
|
|
};
|
|
|
|
//helpers
|
|
function renderOrders(){
|
|
var rows = $("tbody > tr",table);
|
|
for(var i=0;i<rows.length-1;i++){
|
|
var th_order = $('.additional-office-order',rows[i]);
|
|
th_order.text(i+1);
|
|
}
|
|
}
|
|
|
|
function addAdditionalOffice(office){
|
|
var slug = convertToSlug(office.address_1+office.address_2+office.city+office.state+office.zip_code+office.country);
|
|
|
|
var rows_number = $("tbody > tr",table).length;
|
|
|
|
var row_template = $('<tr>' +
|
|
'<td class="additional-office-order"></td>'+
|
|
'<td><input type="text" class="office-address1 text autocompleteoff" value="" style="width:150px;"/></td>'+
|
|
'<td><input type="text" class="office-address2 text autocompleteoff" value="" style="width:150px;"/></td>'+
|
|
'<td><input type="text" class="office-city text autocompleteoff" value="" style="width:150px;"/></td>'+
|
|
'<td><input type="text" class="office-state text autocompleteoff" value="" style="width:150px;"/></td>'+
|
|
'<td><input type="text" class="office-zip-code text autocompleteoff" value="" style="width:50px;"/></td>'+
|
|
'<td><div class="office-country" style="display:inline-block;max-width:200px;"></div></td>'+
|
|
'<td><a href="#" class="remove-additional-office">x Remove</a></td>'+
|
|
'</tr>');
|
|
|
|
var directives = {
|
|
'td.additional-office-order':function(arg){ return rows_number;},
|
|
'input.office-address1@value':'address_1',
|
|
'input.office-address1@id':function(arg){
|
|
return 'office-address1_'+slug;
|
|
},
|
|
'input.office-address1@name':function(arg){
|
|
return 'office-address1_'+slug;
|
|
},
|
|
'input.office-address2@value':'address_2',
|
|
'input.office-address2@id':function(arg){
|
|
return 'office-address2_'+slug;
|
|
},
|
|
'input.office-address2@name':function(arg){
|
|
return 'office-address2_'+slug;
|
|
},
|
|
'input.office-city@value':'city',
|
|
'input.office-city@id':function(arg){
|
|
return 'office-city_'+slug;
|
|
},
|
|
'input.office-city@name':function(arg){
|
|
return 'office-city_'+slug;
|
|
},
|
|
'input.office-state@value':'state',
|
|
'input.office-state@id':function(arg){
|
|
return 'office-state_'+slug;
|
|
},
|
|
'input.office-state@name':function(arg){
|
|
return 'office-state_'+slug;
|
|
},
|
|
'input.office-zip-code@value':'zip_code',
|
|
'input.office-zip-code@id':function(arg){
|
|
return 'office-zip-code_'+slug;
|
|
},
|
|
'input.office-zip-code@name':function(arg){
|
|
return 'office-zip-code_'+slug;
|
|
},
|
|
'.office-country':function(arg){
|
|
var select_name = 'office_country_'+slug;
|
|
var select = $('#add-office-country',form).clone();
|
|
select.removeClass()
|
|
.attr('id',select_name)
|
|
.attr('name',select_name)
|
|
.attr('style','')
|
|
.addClass('convert-to-chosen')
|
|
.addClass('office-country-select')
|
|
.addClass('countries-ddl');
|
|
var option_val = arg.context.country;
|
|
select.find("option[value="+option_val+"]").attr("selected","selected");
|
|
return select[0].outerHTML;
|
|
}
|
|
};
|
|
var html = row_template.render(office, directives);
|
|
$(".add-additional-office",table).before(html);
|
|
|
|
$('.convert-to-chosen', table).chosen({disable_search_threshold: 3});
|
|
|
|
$('.convert-to-chosen', table).rules('add',{required:true});
|
|
|
|
$('.convert-to-chosen', table).removeClass('convert-to-chosen');
|
|
|
|
$('#office-address1_'+slug , table).rules('add',{
|
|
ValidPlainText:true,
|
|
maxlength: 255,
|
|
validate_duplicate_field:[table,'.office-address1']
|
|
});
|
|
|
|
$('#office-address2_'+slug, table).rules('add',{
|
|
ValidPlainText:true,
|
|
maxlength: 255,
|
|
validate_duplicate_field:[table,'.office-address2']
|
|
});
|
|
|
|
$('#office-city_'+slug, table).rules('add',{
|
|
required:true,
|
|
ValidPlainText:true,
|
|
maxlength: 125
|
|
});
|
|
|
|
$('#office-state_'+slug, table).rules('add',{
|
|
ValidPlainText:true,
|
|
maxlength: 125});
|
|
|
|
$('#office-zip-code_'+slug, table).rules('add',{
|
|
ValidPlainText:true,
|
|
maxlength: 25});
|
|
}
|
|
// End of closure.
|
|
}( jQuery ));
|