From 080dc44888a2358ff75047b9f8eb6143e1770f71 Mon Sep 17 00:00:00 2001 From: Brian Miyaji Date: Thu, 9 Jan 2014 23:28:36 +1100 Subject: [PATCH] Add Google Maps selector to venue --- admin/hooks/admin-enqueue-scripts.php | 2 + admin/terms/venue.php | 22 +- assets/css/admin.css | 18 +- assets/js/admin.js | 128 ++++++----- assets/js/locationpicker.jquery.js | 296 ++++++++++++++++++++++++++ readme.txt | 2 +- 6 files changed, 410 insertions(+), 58 deletions(-) create mode 100755 assets/js/locationpicker.jquery.js diff --git a/admin/hooks/admin-enqueue-scripts.php b/admin/hooks/admin-enqueue-scripts.php index 3c25aef9..8ef2f0db 100644 --- a/admin/hooks/admin-enqueue-scripts.php +++ b/admin/hooks/admin-enqueue-scripts.php @@ -4,6 +4,8 @@ function sportspress_admin_enqueue_scripts() { wp_enqueue_style( 'sportspress-admin'); wp_enqueue_script( 'jquery' ); + wp_enqueue_script( 'google-maps', 'http://maps.googleapis.com/maps/api/js?sensor=false&libraries=places' ); + wp_enqueue_script( 'jquery-locationpicker', SPORTSPRESS_PLUGIN_URL .'/assets/js/locationpicker.jquery.js', array( 'jquery' ), '0.1.6', true ); wp_enqueue_script( 'sportspress-admin', SPORTSPRESS_PLUGIN_URL .'/assets/js/admin.js', array( 'jquery' ), time(), true ); } add_action( 'admin_enqueue_scripts', 'sportspress_admin_enqueue_scripts' ); diff --git a/admin/terms/venue.php b/admin/terms/venue.php index 65fad099..5eb5ea11 100644 --- a/admin/terms/venue.php +++ b/admin/terms/venue.php @@ -24,7 +24,20 @@ function sportspress_venue_edit_form_fields( $term ) { - + +

+ + + + + + + + + + + + +
- + + + +

+ 0) { + radius *= 1; + options = $.extend({ + strokeColor: "#0000FF", + strokeOpacity: 0.35, + strokeWeight: 2, + fillColor: "#0000FF", + fillOpacity: 0.20 + }, options); + options.map = gmapContext.map; + options.radius = radius; + options.center = center; + gmapContext.circle = new google.maps.Circle(options); + return gmapContext.circle; + } + return null; + }, + /** + * + * @param gMapContext + * @param location + * @param callback + */ + setPosition: function(gMapContext, location, callback) { + gMapContext.location = location; + gMapContext.marker.setPosition(location); + gMapContext.map.panTo(location); + this.drawCircle(gMapContext, location, gMapContext.radius, {}); + if (gMapContext.settings.enableReverseGeocode) { + gMapContext.geodecoder.geocode({latLng: gMapContext.location}, function(results, status){ + if (status == google.maps.GeocoderStatus.OK && results.length > 0){ + gMapContext.locationName = results[0].formatted_address; + } + if (callback) { + callback.call(this, gMapContext); + } + }); + } else { + if (callback) { + callback.call(this, gmapContext); + } + } + + }, + locationFromLatLng: function(lnlg) { + return {latitude: lnlg.lat(), longitude: lnlg.lng()} + } + } + + function isPluginApplied(domObj) { + return getContextForElement(domObj) != undefined; + } + + function getContextForElement(domObj) { + return $(domObj).data("locationpicker"); + } + + function updateInputValues(inputBinding, gmapContext){ + if (!inputBinding) return; + var currentLocation = GmUtility.locationFromLatLng(gmapContext.location); + if (inputBinding.latitudeInput) { + inputBinding.latitudeInput.val(currentLocation.latitude); + } + if (inputBinding.longitudeInput) { + inputBinding.longitudeInput.val(currentLocation.longitude); + } + if (inputBinding.radiusInput) { + inputBinding.radiusInput.val(gmapContext.radius); + } + if (inputBinding.locationNameInput) { + inputBinding.locationNameInput.val(gmapContext.locationName); + } + } + + function setupInputListenersInput(inputBinding, gmapContext) { + if (inputBinding) { + if (inputBinding.radiusInput){ + inputBinding.radiusInput.on("change", function() { + gmapContext.radius = $(this).val(); + GmUtility.setPosition(gmapContext, gmapContext.location, function(context){ + context.settings.onchanged(GmUtility.locationFromLatLng(context.location), context.radius, false); + }); + }); + } + if (inputBinding.locationNameInput && gmapContext.settings.enableAutocomplete) { + gmapContext.autocomplete = new google.maps.places.Autocomplete(inputBinding.locationNameInput.get(0)); + google.maps.event.addListener(gmapContext.autocomplete, 'place_changed', function() { + var place = gmapContext.autocomplete.getPlace(); + if (!place.geometry) { + gmapContext.onlocationnotfound(); + return; + } + GmUtility.setPosition(gmapContext, place.geometry.location, function(context) { + updateInputValues(inputBinding, context); + context.settings.onchanged(GmUtility.locationFromLatLng(context.location), context.radius, false); + }); + }); + } + if (inputBinding.latitudeInput) { + inputBinding.latitudeInput.on("change", function() { + GmUtility.setPosition(gmapContext, new google.maps.LatLng($(this).val(), gmapContext.location.lng()), function(context){ + context.settings.onchanged(GmUtility.locationFromLatLng(context.location), context.radius, false); + }); + }); + } + if (inputBinding.longitudeInput) { + inputBinding.longitudeInput.on("change", function() { + GmUtility.setPosition(gmapContext, new google.maps.LatLng(gmapContext.location.lat(), $(this).val()), function(context){ + context.settings.onchanged(GmUtility.locationFromLatLng(context.location), context.radius, false); + }); + }); + } + } + } + + /** + * Initialization: + * $("#myMap").locationpicker(options); + * @param options + * @param params + * @returns {*} + */ + $.fn.locationpicker = function( options, params ) { + if (typeof options == 'string') { // Command provided + var _targetDomElement = this.get(0); + // Plug-in is not applied - nothing to do. + if (!isPluginApplied(_targetDomElement)) return; + var gmapContext = getContextForElement(_targetDomElement); + switch (options) { + case "location": + if (params == undefined) { // Getter + var location = GmUtility.locationFromLatLng(gmapContext.location); + location.radius = gmapContext.radius; + location.name = gmapContext.locationName; + return location; + } else { // Setter + if (params.radius) { + gmapContext.radius = params.radius; + } + GmUtility.setPosition(gmapContext, new google.maps.LatLng(params.latitude, params.longitude), function(gmapContext) { + updateInputValues(gmapContext.settings.inputBinding, gmapContext); + }); + } + break; + case "subscribe": + /** + * Provides interface for subscribing for GoogleMap events. + * See Google API documentation for details. + * Parameters: + * - event: string, name of the event + * - callback: function, callback function to be invoked + */ + if (options == undefined) { // Getter is not available + return null; + } else { + var event = params.event; + var callback = params.callback; + if (!event || ! callback) { + console.error("LocationPicker: Invalid arguments for method \"subscribe\"") + return null; + } + google.maps.event.addListener(gmapContext.map, event, callback); + } + + break; + } + return null; + } + return this.each(function() { + var $target = $(this); + // If plug-in hasn't been applied before - initialize, otherwise - skip + if (isPluginApplied(this)) return; + // Plug-in initialization is required + // Defaults + var settings = $.extend({}, $.fn.locationpicker.defaults, options ); + // Initialize + var gmapContext = new GMapContext(this, { + zoom: settings.zoom, + center: new google.maps.LatLng(settings.location.latitude, settings.location.longitude), + mapTypeId: google.maps.MapTypeId.ROADMAP, + mapTypeControl: false, + disableDoubleClickZoom: false, + scrollwheel: settings.scrollwheel, + streetViewControl: false, + radius: settings.radius, + locationName: settings.locationName, + settings: settings + }); + $target.data("locationpicker", gmapContext); + // Subscribe GMap events + google.maps.event.addListener(gmapContext.marker, "dragend", function(event) { + GmUtility.setPosition(gmapContext, gmapContext.marker.position, function(context){ + var currentLocation = GmUtility.locationFromLatLng(gmapContext.location); + context.settings.onchanged(currentLocation, context.radius, true); + updateInputValues(gmapContext.settings.inputBinding, gmapContext); + }); + }); + GmUtility.setPosition(gmapContext, new google.maps.LatLng(settings.location.latitude, settings.location.longitude), function(context){ + updateInputValues(settings.inputBinding, gmapContext); + context.settings.oninitialized($target); + }); + // Set up input bindings if needed + setupInputListenersInput(settings.inputBinding, gmapContext); + }); + }; + $.fn.locationpicker.defaults = { + location: {latitude: 40.7324319, longitude: -73.82480799999996}, + locationName: "", + radius: 500, + zoom: 15, + scrollwheel: true, + inputBinding: { + latitudeInput: null, + longitudeInput: null, + radiusInput: null, + locationNameInput: null + }, + enableAutocomplete: false, + enableReverseGeocode: true, + onchanged: function(currentLocation, radius, isMarkerDropped) {}, + onlocationnotfound: function(locationName) {}, + oninitialized: function (component) {} + + } + +}( jQuery )); diff --git a/readme.txt b/readme.txt index e347ef39..71d867a1 100644 --- a/readme.txt +++ b/readme.txt @@ -2,7 +2,7 @@ Contributors: themeboy Tags: sports, sports journalism, teams, team management, fixtures, results, standings, league tables, leagues, reporting, themeboy, wordpress sports, configurable Requires at least: 3.5 -Tested up to: 3.6 +Tested up to: 3.8 Stable tag: 0.1.3 License: GPLv3 License URI: http://www.gnu.org/licenses/gpl-3.0.html