alpaca
Version:
Alpaca provides the easiest and fastest way to generate interactive forms for the web and mobile devices. It runs simply as HTML5 or more elaborately using Bootstrap, jQuery Mobile or jQuery UI. Alpaca uses Handlebars to process JSON schema and provide
273 lines (240 loc) • 9.77 kB
JavaScript
(function($) {
var Alpaca = $.alpaca;
Alpaca.Fields.AddressField = Alpaca.Fields.ObjectField.extend(
/**
* @lends Alpaca.Fields.AddressField.prototype
*/
{
/**
* @see Alpaca.Fields.ObjectField#getFieldType
*/
getFieldType: function() {
return "address";
},
/**
* @private
* @see Alpaca.Fields.ObjectField#setup
*/
setup: function()
{
this.base();
if (!this.data || !this.data.street) {
this.data = {
street: ['', '']
};
}
this.schema = {
"title": "Home Address",
"type": "object",
"properties": {
"street": {
"title": "Street",
"type": "array",
"items": {
"type": "string",
"maxLength": 30
},
"minItems": 0,
"maxItems": 3
},
"city": {
"title": "City",
"type": "string"
},
"state": {
"title": "State",
"type": "string",
"enum": ["AL", "AK", "AS", "AZ", "AR", "CA", "CO", "CT", "DE", "DC", "FM", "FL", "GA", "GU", "HI", "ID", "IL", "IN", "IA", "KS", "KY", "LA", "ME", "MH", "MD", "MA", "MI", "MN", "MS", "MO", "MT", "NE", "NV", "NH", "NJ", "NM", "NY", "NC", "ND", "MP", "OH", "OK", "OR", "PW", "PA", "PR", "RI", "SC", "SD", "TN", "TX", "UT", "VT", "VI", "VA", "WA", "WV", "WI", "WY"]
},
"zip": {
"title": "Zip Code",
"type": "string",
"pattern": /^(\d{5}(-\d{4})?)?$/
}
}
};
Alpaca.merge(this.options, {
"fields": {
"zip": {
"maskString": "99999",
"size": 5
},
"state": {
"optionLabels": ["ALABAMA", "ALASKA", "AMERICAN SAMOA", "ARIZONA", "ARKANSAS", "CALIFORNIA", "COLORADO", "CONNECTICUT", "DELAWARE", "DISTRICT OF COLUMBIA", "FEDERATED STATES OF MICRONESIA", "FLORIDA", "GEORGIA", "GUAM", "HAWAII", "IDAHO", "ILLINOIS", "INDIANA", "IOWA", "KANSAS", "KENTUCKY", "LOUISIANA", "MAINE", "MARSHALL ISLANDS", "MARYLAND", "MASSACHUSETTS", "MICHIGAN", "MINNESOTA", "MISSISSIPPI", "MISSOURI", "MONTANA", "NEBRASKA", "NEVADA", "NEW HAMPSHIRE", "NEW JERSEY", "NEW MEXICO", "NEW YORK", "NORTH CAROLINA", "NORTH DAKOTA", "NORTHERN MARIANA ISLANDS", "OHIO", "OKLAHOMA", "OREGON", "PALAU", "PENNSYLVANIA", "PUERTO RICO", "RHODE ISLAND", "SOUTH CAROLINA", "SOUTH DAKOTA", "TENNESSEE", "TEXAS", "UTAH", "VERMONT", "VIRGIN ISLANDS", "VIRGINIA", "WASHINGTON", "WEST VIRGINIA", "WISCONSIN", "WYOMING"]
}
}
});
if (Alpaca.isEmpty(this.options.addressValidation))
{
this.options.addressValidation = true;
}
},
/**
* @see Alpaca.Field#isContainer
*/
isContainer: function()
{
return false;
},
/**
* Returns address in a single line string.
*
* @returns {String} Address as a single line string.
*/
getAddress: function()
{
var value = this.getValue();
if (this.view.type === "view")
{
value = this.data;
}
var address = "";
if (value)
{
if (value.street)
{
$.each(value.street, function(index, value) {
address += value + " ";
});
}
if (value.city)
{
address += value.city + " ";
}
if (value.state)
{
address += value.state + " ";
}
if (value.zip)
{
address += value.zip;
}
}
return address;
},
/**
* @see Alpaca.Field#afterRenderContainer
*/
afterRenderContainer: function(model, callback) {
var self = this;
this.base(model, function() {
var container = self.getContainerEl();
// apply additional css
$(container).addClass("alpaca-addressfield");
if (self.options.addressValidation && !self.isDisplayOnly())
{
$('<div style="clear:both;"></div>').appendTo(container);
var mapButton = $('<div class="alpaca-form-button">Show Google Map</div>').appendTo(container);
if (mapButton.button)
{
mapButton.button({
text: true
});
}
mapButton.click(function() {
if (google && google.maps)
{
var geocoder = new google.maps.Geocoder();
var address = self.getAddress();
if (geocoder)
{
geocoder.geocode({
'address': address
}, function(results, status)
{
if (status === google.maps.GeocoderStatus.OK)
{
var mapCanvasId = self.getId() + "-map-canvas";
if ($('#' + mapCanvasId).length === 0)
{
$("<div id='" + mapCanvasId + "' class='alpaca-field-address-mapcanvas'></div>").appendTo(self.getFieldEl());
}
var map = new google.maps.Map(document.getElementById(self.getId() + "-map-canvas"), {
"zoom": 10,
"center": results[0].geometry.location,
"mapTypeId": google.maps.MapTypeId.ROADMAP
});
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
}
else
{
self.displayMessage("Geocoding failed: " + status);
}
});
}
}
else
{
self.displayMessage("Google Map API is not installed.");
}
}).wrap('<small/>');
if (self.options.showMapOnLoad)
{
mapButton.click();
}
}
callback();
});
},
/**
* @see Alpaca.Fields.ObjectField#getType
*/
getType: function() {
return "any";
}
/* builder_helpers */
,
/**
* @see Alpaca.Fields.ObjectField#getTitle
*/
getTitle: function() {
return "Address";
},
/**
* @see Alpaca.Fields.ObjectField#getDescription
*/
getDescription: function() {
return "Standard US Address with Street, City, State and Zip. Also comes with support for Google map.";
},
/**
* @private
* @see Alpaca.Fields.ObjectField#getSchemaOfOptions
*/
getSchemaOfOptions: function() {
return Alpaca.merge(this.base(), {
"properties": {
"validateAddress": {
"title": "Address Validation",
"description": "Enable address validation if true",
"type": "boolean",
"default": true
},
"showMapOnLoad": {
"title": "Whether to show the map when first loaded",
"type": "boolean"
}
}
});
},
/**
* @private
* @see Alpaca.Fields.ObjectField#getOptionsForOptions
*/
getOptionsForOptions: function() {
return Alpaca.merge(this.base(), {
"fields": {
"validateAddress": {
"helper": "Address validation if checked",
"rightLabel": "Enable Google Map for address validation?",
"type": "checkbox"
}
}
});
}
/* end_builder_helpers */
});
Alpaca.registerFieldClass("address", Alpaca.Fields.AddressField);
})(jQuery);