/**
* The default Geo Mashup location editor AJAX interface.
*
* @package GeoMashup
* @subpackage Client
*/
/*global jQuery */
/*global google */
/*global GeoMashupLocationEditor */
var GeoMashupLocationEditor;
/**
* Manage the location editing interface with jQuery.
*
* The interface was not initially implemented with jQuery,
* it's being migrated.
*
* Variables holding a jQuery object are named with a $.
*
* @uses edit-form.php
*/
jQuery( function( $ ) {
var
// Private variables
geo_mashup_url_path = $( '#geo_mashup_url_path' ).val(),
ajax_url = $( '#geo_mashup_ajax_url' ).val(),
object_id = $( '#geo_mashup_object_id' ).val(),
have_unsaved_changes = false,
red_icon,
green_icon,
selected_marker,
map,
kml,
// jQuery elements
$busy_icon,
$inline_help_link = $('#geo-mashup-inline-help-link'),
$add_button = $( '#geo_mashup_add_location' ),
$update_button = $( '#geo_mashup_update_location' ),
$delete_button = $( '#geo_mashup_delete_location' ),
$changed_input = $( '#geo_mashup_changed' ),
$location_name_input = $( '#geo_mashup_location_name' ),
$location_input = $( '#geo_mashup_location' ),
$location_id_input = $( '#geo_mashup_location_id' ),
$geoname_input = $( '#geo_mashup_geoname' ),
$address_input = $( '#geo_mashup_address' ),
$postal_code_input = $( '#geo_mashup_postal_code' ),
$country_code_input = $( '#geo_mashup_country_code' ),
$admin_code_input = $( '#geo_mashup_admin_code' ),
$admin_name_input = $( '#geo_mashup_admin_name' ),
$sub_admin_code_input = $( '#geo_mashup_sub_admin_code' ),
$sub_admin_name_input = $( '#geo_mashup_sub_admin_name' ),
$kml_url_input = $( '#geo_mashup_kml_url' ),
$locality_name_input = $( '#geo_mashup_locality_name' ),
$display = $( '#geo_mashup_display' ),
$info_display = $display.find( '.geo-mashup-info' ),
$address_display = $display.find( '.geo-mashup-address' ),
$coordinate_display = $display.find( '.geo-mashup-coordinates' ),
$saved_name_ui = $( '#geo_mashup_saved_name_ui' ),
$date_ui = $( '#geo_mashup_date_ui' ),
$ajax_message = $( '#geo_mashup_ajax_message' ),
/**
* An object prototype for managing data associated with a location.
*/
GeoAddress = function (init_data) {
this.id = null;
this.title = '';
this.geoname = '';
this.country_code = '';
this.admin_code = '';
this.admin_name = '';
this.sub_admin_code = '';
this.sub_admin_name = '';
this.postal_code = '';
this.locality_name = '';
this.address = '';
this.definedValue = function( val, alt ) {
if ( typeof val === 'undefined' ) {
return alt;
} else {
return val;
}
}
this.subValue = function(obj, keys, default_value) {
var key;
if (typeof default_value !== 'string') {
default_value = '';
}
if (typeof obj !== 'object') {
return default_value;
}
if (typeof keys !== 'object') {
return default_value;
}
if (typeof keys.length !== 'number') {
return default_value;
}
key = keys.shift();
if (typeof obj[key] === 'undefined') {
return default_value;
}
if (keys.length === 0) {
return obj[key];
}
return this.subValue(obj[key], keys, default_value);
};
this.set = function (data) {
if (typeof data === 'string') {
if (isNaN(data)) {
this.title = data;
} else {
this.id = data;
}
} else if (typeof data === 'number') {
this.id = data;
} else if (typeof data === 'object') {
if (typeof data.location_id === 'string') {
this.id = data.location_id;
this.title = data.name;
this.address = data.address;
} else if (typeof data.name === 'string') {
this.id = '';
this.title = data.name;
this.geoname = data.name;
this.country_code = this.definedValue( data.countryCode, '' );
this.admin_code = this.definedValue( data.adminCode1, '' );
this.admin_name = this.definedValue( data.adminName1, '' );
this.sub_admin_code = this.definedValue( data.adminCode2, '' );
this.sub_admin_name = this.definedValue( data.adminName2, '' );
} else if (typeof data.address === 'string') {
this.title = data.address;
this.address = data.address;
this.country_code = this.subValue(data, ['AddressDetails','Country','CountryNameCode']);
this.admin_code = this.subValue(data, ['AddressDetails','Country','AdministrativeArea','AdministrativeAreaName']);
this.sub_admin_name = this.subValue(data, ['AddressDetails','Country','AdministrativeArea','SubAdministrativeArea','SubAdministrativeAreaName']);
if (this.sub_admin_name) {
this.locality_name = this.subValue(data, ['AddressDetails','Country','AdministrativeArea','SubAdministrativeArea','Locality','LocalityName']);
this.postal_code = this.subValue(data, ['AddressDetails','Country','AdministrativeArea','SubAdministrativeArea','Locality','PostalCode','PostalCodeNumber']);
} else if (this.admin_code) {
this.locality_name = this.subValue(data, ['AddressDetails','Country','AdministrativeArea','Locality','LocalityName']);
this.postal_code = this.subValue(data, ['AddressDetails','Country','AdministrativeArea','Locality','PostalCode','PostalCodeNumber']);
}
// Difficult to distinguish admin code from a name - but try
if ( this.admin_code.length > 20 || this.admin_code.indexOf(' ') >= 0 ) {
this.admin_name = this.admin_code;
this.admin_code = '';
}
}
}
};
if (init_data) {
this.set(init_data);
}
},
/**
* An object to manage the saved location select box.
*/
saved_selector = function() {
var $select = $( '#geo_mashup_select' ),
select = $select.get( 0 ),
selected_latlng = null,
selected_location = null,
/**
* Parse out a new selected location.
*/
updateSelection = function() {
var option, saved_location;
if (select.selectedIndex > 0) {
option = select.options[select.selectedIndex];
saved_location = option.value.split( '|' );
if ( saved_location.length > 2 ) {
selected_location = {
location_id: saved_location[0],
name: option.text,
address: saved_location[3]
};
selected_latlng = new google.maps.LatLng( saved_location[1], saved_location[2] );
$location_name_input.val( option.text );
}
}
};
$select.change( function() {
selected_location = selected_latlng = null;
updateSelection();
addSelectedMarker( selected_latlng, selected_location );
} );
return {
/**
* Get the selected ID, if any.
*
* @return string The selected ID, or null if none selected.
*/
getSelectedID: function() {
if ( selected_location ) {
return selected_location.location_id;
} else {
return null;
}
},
/**
* Get the selected latitude and longitude, if any.
*
* @return GLatLng The selected latitude and longitude, or null if none selected.
*/
getSelectedLatLng: function() {
return selected_latlng;
},
/**
* Get the selected location, if any.
*
* @return string The selected ID, or null if none selected.
*/
getSelectedLocation: function() {
return selected_location;
},
/**
* Reset the state to no location selected.
*/
selectNone: function() {
select.selectedIndex = 0;
},
/**
* Select an item by ID.
*
* @param string id The location id of the item to select.
* @return bool Whether an item was selected.
*/
selectByID: function( id ) {
var i;
if ( ! select.options || ! select.options.length ) {
return false;
}
for( i = 1; i < select.options.length; i += 1 ) {
if ( i !== select.selectedIndex && select.options[i].value.indexOf( id + '|') === 0 ) {
select.selectedIndex = i;
updateSelection();
return true;
}
}
this.selectNone();
return false;
},
/**
* Select an item by name.
*
* @param string text The name of the item to select.
* @return bool Whether an item was selected.
*/
selectByText: function( text ) {
var i;
if ( ! select.options || ! select.options.length ) {
return false;
}
for( i = 1; i < select.options.length; i += 1 ) {
if ( i !== select.selectedIndex && select.options[i].text == text ) {
select.selectedIndex = i;
updateSelection();
return true;
}
}
this.selectNone();
return false;
}
};
}(),
/**
* Initialize the interface when the document and Maps API
* are ready.
*/
init = function() {
var latlng_array, latlng, container;
red_icon = new google.maps.Icon();
red_icon.image = geo_mashup_url_path + '/images/mm_20_red.png';
red_icon.shadow = geo_mashup_url_path + '/images/mm_20_shadow.png';
red_icon.iconSize = new google.maps.Size(12, 20);
red_icon.shadowSize = new google.maps.Size(22, 20);
red_icon.iconAnchor = new google.maps.Point(6, 20);
red_icon.infoWindowAnchor = new google.maps.Point(5, 1);
green_icon = new google.maps.Icon(red_icon);
green_icon.image = geo_mashup_url_path + '/images/mm_20_green.png';
container = $( '#geo_mashup_map' ).get( 0 );
map = new google.maps.Map2( container, {draggableCursor:'pointer'} );
map.setCenter(new google.maps.LatLng(0,0),1);
map.setUIToDefault();
// Create the loading spinner icon and show it
$busy_icon = $( '' +
'
