jqueryui
4 years ago
select2
6 years ago
validation
2 years ago
wp-color-picker-alpha
5 years ago
autocomplete.js
6 years ago
autosave.js
7 years ago
button-group.js
3 years ago
clone.js
2 years ago
color.js
3 years ago
date.js
1 year ago
datetime.js
1 year ago
file-input.js
4 years ago
file-upload.js
2 years ago
file.js
3 years ago
icon.js
2 years ago
image-advanced.js
4 years ago
image-select.js
6 years ago
image-upload.js
4 years ago
input-list.js
1 year ago
map-frontend.js
4 years ago
map.js
2 years ago
media.js
3 years ago
modal.js
1 year ago
oembed.js
2 years ago
osm-frontend.js
5 years ago
osm.js
2 years ago
post.js
1 year ago
range.js
4 years ago
script.js
3 years ago
select-advanced.js
2 years ago
select-tree.js
5 years ago
select.js
3 years ago
slider.js
6 years ago
taxonomy.js
1 year ago
time.js
1 year ago
user.js
1 year ago
video.js
6 years ago
wysiwyg.js
2 years ago
osm.js
288 lines
| 1 | ( function ( $, L, rwmb, i18n ) { |
| 2 | 'use strict'; |
| 3 | |
| 4 | // Use function construction to store map & DOM elements separately for each instance |
| 5 | var OsmField = function ( $container ) { |
| 6 | this.$container = $container; |
| 7 | }; |
| 8 | |
| 9 | // Use prototype for better performance |
| 10 | OsmField.prototype = { |
| 11 | // Initialize everything |
| 12 | init: function () { |
| 13 | this.initDomElements(); |
| 14 | this.initMapElements(); |
| 15 | |
| 16 | this.initMarkerPosition(); |
| 17 | this.addListeners(); |
| 18 | this.autocomplete(); |
| 19 | |
| 20 | // Make sure the map is displayed fully. |
| 21 | var map = this.map; |
| 22 | setTimeout( function () { |
| 23 | map.invalidateSize(); |
| 24 | }, 200 ); |
| 25 | }, |
| 26 | |
| 27 | // Initialize DOM elements |
| 28 | initDomElements: function () { |
| 29 | this.$canvas = this.$container.find( '.rwmb-osm-canvas' ); |
| 30 | this.canvas = this.$canvas[ 0 ]; |
| 31 | this.$coordinate = this.$container.find( '.rwmb-osm' ); |
| 32 | this.addressField = this.$container.data( 'address-field' ); |
| 33 | }, |
| 34 | |
| 35 | setCenter: function ( location ) { |
| 36 | this.map.panTo( location ); |
| 37 | if ( this.marker ) { |
| 38 | this.marker.setLatLng( location ); |
| 39 | return; |
| 40 | } |
| 41 | |
| 42 | this.marker = L.marker( location, { |
| 43 | draggable: true |
| 44 | } ).addTo( this.map ); |
| 45 | }, |
| 46 | |
| 47 | initMapElements: function () { |
| 48 | this.map = L.map( this.canvas, { zoom: 14 } ); |
| 49 | L.tileLayer( 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { |
| 50 | attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors' |
| 51 | } ).addTo( this.map ); |
| 52 | |
| 53 | // If there is a saved location, don't set the default location. |
| 54 | if ( this.$coordinate.val() ) { |
| 55 | return; |
| 56 | } |
| 57 | |
| 58 | // Load default location if it's set. |
| 59 | const defaultLoc = this.$canvas.data( 'default-loc' ); |
| 60 | if ( defaultLoc ) { |
| 61 | return this.setCenter( defaultLoc.split( ',' ) ); |
| 62 | } |
| 63 | |
| 64 | // Set default location to Dublin as a start. |
| 65 | const dublin = [ 53.346881, -6.258860 ]; |
| 66 | this.setCenter( dublin ); |
| 67 | |
| 68 | // Try to load current user location. Note that Geolocation API works only on HTTPS. |
| 69 | if ( location.protocol.includes( 'https' ) && navigator.geolocation ) { |
| 70 | this.map.locate( { setView: true } ).on( 'locationfound', e => this.setCenter( e.latlng ) ); |
| 71 | } |
| 72 | }, |
| 73 | |
| 74 | initMarkerPosition: function () { |
| 75 | const coordinate = this.$coordinate.val(); |
| 76 | |
| 77 | if ( coordinate ) { |
| 78 | const location = coordinate.split( ',' ); |
| 79 | this.setCenter( location ); |
| 80 | |
| 81 | const zoom = location.length > 2 ? parseInt( location[ 2 ], 10 ) : 14; |
| 82 | this.map.setZoom( zoom ); |
| 83 | } else if ( this.addressField ) { |
| 84 | this.geocodeAddress( false ); |
| 85 | } |
| 86 | }, |
| 87 | |
| 88 | // Add event listeners for 'click' & 'drag' |
| 89 | addListeners: function () { |
| 90 | var that = this; |
| 91 | |
| 92 | /* |
| 93 | * Auto change the map when there's change in address fields. |
| 94 | * Works only for multiple address fields as single address field has autocomplete functionality. |
| 95 | */ |
| 96 | if ( this.addressField.split( ',' ).length > 1 ) { |
| 97 | var geocodeAddress = that.geocodeAddress.bind( that ); |
| 98 | var addressFields = this.addressField.split( ',' ).forEach( function ( part ) { |
| 99 | var $field = that.findAddressField( part ); |
| 100 | if ( null !== $field ) { |
| 101 | $field.on( 'change', geocodeAddress ); |
| 102 | } |
| 103 | } ); |
| 104 | } |
| 105 | |
| 106 | this.map.on( 'click', function ( event ) { |
| 107 | that.marker.setLatLng( event.latlng ); |
| 108 | that.updateCoordinate( event.latlng ); |
| 109 | } ); |
| 110 | |
| 111 | this.map.on( 'zoom', function () { |
| 112 | that.updateCoordinate( that.marker.getLatLng() ); |
| 113 | } ); |
| 114 | |
| 115 | this.marker.on( 'drag', function () { |
| 116 | that.updateCoordinate( that.marker.getLatLng() ); |
| 117 | } ); |
| 118 | |
| 119 | // Custom event to refresh maps when in hidden divs. |
| 120 | var refresh = that.refresh.bind( this ); |
| 121 | $( window ).on( 'rwmb_map_refresh', refresh ); |
| 122 | |
| 123 | // Refresh on meta box hide and show |
| 124 | rwmb.$document.on( 'postbox-toggled', refresh ); |
| 125 | // Refresh on sorting meta boxes |
| 126 | $( '.meta-box-sortables' ).on( 'sortstop', refresh ); |
| 127 | }, |
| 128 | |
| 129 | refresh: function () { |
| 130 | if ( !this.map ) { |
| 131 | return; |
| 132 | } |
| 133 | this.map.invalidateSize(); |
| 134 | this.map.panTo( this.map.getCenter() ); |
| 135 | }, |
| 136 | |
| 137 | // Autocomplete address |
| 138 | autocomplete: function () { |
| 139 | var that = this, |
| 140 | $address = this.getAddressField(); |
| 141 | |
| 142 | if ( null === $address ) { |
| 143 | return; |
| 144 | } |
| 145 | |
| 146 | $address.autocomplete( { |
| 147 | source: function ( request, response ) { |
| 148 | $.get( 'https://nominatim.openstreetmap.org/search', { |
| 149 | format: 'json', |
| 150 | q: request.term, |
| 151 | countrycodes: that.$canvas.data( 'region' ), |
| 152 | "accept-language": that.$canvas.data( 'language' ), |
| 153 | addressdetails: 1 |
| 154 | }, function ( results ) { |
| 155 | if ( !results.length ) { |
| 156 | response( [ { |
| 157 | value: '', |
| 158 | label: i18n.no_results_string |
| 159 | } ] ); |
| 160 | return; |
| 161 | } |
| 162 | response( results.map( function ( item ) { |
| 163 | return { |
| 164 | address: item.address, |
| 165 | label: item.display_name, |
| 166 | value: item.display_name, |
| 167 | latitude: item.lat, |
| 168 | longitude: item.lon |
| 169 | }; |
| 170 | } ) ); |
| 171 | }, 'json' ); |
| 172 | }, |
| 173 | select: function ( event, ui ) { |
| 174 | const latLng = L.latLng( ui.item.latitude, ui.item.longitude ); |
| 175 | |
| 176 | that.setCenter( latLng ); |
| 177 | that.updateCoordinate( latLng ); |
| 178 | |
| 179 | $address.trigger( 'selected_address', [ ui.item ] ); |
| 180 | } |
| 181 | } ); |
| 182 | }, |
| 183 | |
| 184 | // Update coordinate to input field |
| 185 | updateCoordinate: function ( latLng ) { |
| 186 | var zoom = this.map.getZoom(); |
| 187 | this.$coordinate.val( latLng.lat + ',' + latLng.lng + ',' + zoom ).trigger( 'change' ); |
| 188 | }, |
| 189 | |
| 190 | // Find coordinates by address |
| 191 | geocodeAddress: function ( notify ) { |
| 192 | var address = this.getAddress(), |
| 193 | that = this; |
| 194 | if ( !address ) { |
| 195 | return; |
| 196 | } |
| 197 | |
| 198 | if ( false !== notify ) { |
| 199 | notify = true; |
| 200 | } |
| 201 | $.get( 'https://nominatim.openstreetmap.org/search', { |
| 202 | format: 'json', |
| 203 | q: address, |
| 204 | limit: 1, |
| 205 | countrycodes: that.$canvas.data( 'region' ), |
| 206 | "accept-language": that.$canvas.data( 'language' ) |
| 207 | }, function ( result ) { |
| 208 | if ( result.length !== 1 ) { |
| 209 | if ( notify ) { |
| 210 | alert( i18n.no_results_string ); |
| 211 | } |
| 212 | return; |
| 213 | } |
| 214 | var latLng = L.latLng( result[ 0 ].lat, result[ 0 ].lon ); |
| 215 | that.setCenter( latLng ); |
| 216 | that.updateCoordinate( latLng ); |
| 217 | }, 'json' ); |
| 218 | }, |
| 219 | |
| 220 | // Get the address field. |
| 221 | getAddressField: function () { |
| 222 | // No address field or more than 1 address fields, ignore |
| 223 | if ( !this.addressField || this.addressField.split( ',' ).length > 1 ) { |
| 224 | return null; |
| 225 | } |
| 226 | return this.findAddressField( this.addressField ); |
| 227 | }, |
| 228 | |
| 229 | // Get the address value for geocoding. |
| 230 | getAddress: function () { |
| 231 | var that = this; |
| 232 | |
| 233 | return this.addressField.split( ',' ) |
| 234 | .map( function ( part ) { |
| 235 | part = that.findAddressField( part ); |
| 236 | return null === part ? '' : part.val(); |
| 237 | } ) |
| 238 | .join( ',' ).replace( /\n/g, ',' ).replace( /,,/g, ',' ); |
| 239 | }, |
| 240 | |
| 241 | // Find address field based on its name attribute. Auto search inside groups when needed. |
| 242 | findAddressField: function ( fieldName ) { |
| 243 | // Not in a group. |
| 244 | var $address = $( 'input[name="' + fieldName + '"]' ); |
| 245 | if ( $address.length ) { |
| 246 | return $address; |
| 247 | } |
| 248 | |
| 249 | // If map and address is inside a cloneable group. |
| 250 | $address = this.$container.closest( '.rwmb-group-clone' ).find( 'input[name*="[' + fieldName + ']"]' ); |
| 251 | if ( $address.length ) { |
| 252 | return $address; |
| 253 | } |
| 254 | |
| 255 | // If map and address is inside a non-cloneable group. |
| 256 | $address = this.$container.closest( '.rwmb-group-wrapper' ).find( 'input[name*="[' + fieldName + ']"]' ); |
| 257 | if ( $address.length ) { |
| 258 | return $address; |
| 259 | } |
| 260 | |
| 261 | return null; |
| 262 | } |
| 263 | }; |
| 264 | |
| 265 | function createController() { |
| 266 | var $this = $( this ), |
| 267 | controller = $this.data( 'osmController' ); |
| 268 | if ( controller ) { |
| 269 | return; |
| 270 | } |
| 271 | |
| 272 | controller = new OsmField( $this ); |
| 273 | controller.init(); |
| 274 | $this.data( 'osmController', controller ); |
| 275 | } |
| 276 | |
| 277 | function init( e ) { |
| 278 | $( e.target ).find( '.rwmb-osm-field' ).each( createController ); |
| 279 | } |
| 280 | |
| 281 | function restart() { |
| 282 | $( '.rwmb-osm-field' ).each( createController ); |
| 283 | } |
| 284 | |
| 285 | rwmb.$document |
| 286 | .on( 'mb_ready', init ) |
| 287 | .on( 'clone', '.rwmb-input', restart ); |
| 288 | } )( jQuery, L, rwmb, RWMB_Osm ); |