Merge pull request #18 from nthmedia/feature/update-js

Update Javascript

CHANGELOG.md

@@ -4,6 +4,12 @@ All notable changes to this project will be documented in this file.
 
 The format is based on [Keep a Changelog](http://keepachangelog.com/) and this project adheres to [Semantic Versioning](http://semver.org/).
 
+## 2.1.0 - 2022-05-03
+### Changed
+- Refactor Javascript to support multiple instances (Issue #16)
+- Update lay-out to also show the actual address in a separate field (Issue #13, thanks @GMConsultant)
+
+
 ## 2.0.0 - 2022-05-02
 ### Changed
 - Craft v4 compatibility
@@ -21,8 +27,8 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
 
 ## 1.2.1 - 2020-01-02
 ### Changed
-- Fix parsing Google API key from environment vars (@jrrdnx)
-- Fix parsing negative coordinates through latitude and longitude helpers (Issue #5, jrrdnx)
+- Fix parsing Google API key from environment vars (thanks @jrrdnx)
+- Fix parsing negative coordinates through latitude and longitude helpers (Issue #5, thanks @jrrdnx)
 
 
 ## 1.2.0 - 2019-12-23

README.md

@@ -19,7 +19,9 @@ To install the plugin, follow these instructions.
 ## Usage in Twig
 
 ```
-{{ entry.fieldName | coordinates }} => 47.11736635136284,12.82762888348384
-{{ entry.fieldName | latitude }} => 47.11736635136284
-{{ entry.fieldName | longitude }} => 12.82762888348384
+{{ entry.fieldName | searchQuery }} => Van Gogh Museum
+{{ entry.fieldName | coordinates }} => 52.3584159,4.8810756
+{{ entry.fieldName | latitude }} => 52.3584159
+{{ entry.fieldName | longitude }} => 4.8810756
+{{ entry.fieldName | address }} => Paulus Potterstraat 7, 1071 CX Amsterdam, Netherlands
 ```

src/assetbundles/entrycoordinatesfield/dist/js/EntryCoordinates.js

@@ -53,3 +53,209 @@
     };
 
 })( jQuery, window, document );
+
+class CoordinatesField {
+    options = {
+        originalLocation: null,
+        suffix: null
+    }
+
+    map = null;
+    marker = null;
+
+    searchInput = null;
+    coordsInput = null;
+    mapElement = null;
+
+    constructor (name, options) {
+        this.options = options;
+
+        this.searchInput = document.querySelector('.location-search-' + this.options.suffix);
+        this.coordsInput = document.querySelector('.location-coords-' + this.options.suffix);
+        this.addressInput = document.querySelector('.location-address-' + this.options.suffix);
+        this.mapElement = document.querySelector('.fields-map-' + this.options.suffix);
+        this.deleteButton = document.querySelector('.location-delete-' + this.options.suffix);
+
+        // let marker = this.marker;
+        let deleteMarker = this.deleteMarker;
+
+        let marker = this.marker;
+        let coordsInput = this.coordsInput;
+        let addressInput = this.addressInput;
+        let searchInput = this.searchInput;
+
+        this.deleteButton.addEventListener('click', function () {
+            deleteMarker(this.marker, coordsInput, addressInput, searchInput);
+        });
+    }
+
+    // Deletes all markers in the array by removing references to them.
+    // Adds a marker to the map and push to the array.
+    placeMarker = (location) => {
+        if (this.marker) {
+            this.marker.setPosition(location);
+        } else {
+            let marker = new google.maps.Marker({
+                position: location,
+                map: this.map,
+                draggable: true,
+            });
+            this.marker = marker;
+        }
+
+        let coordsInput = this.coordsInput;
+        let addressInput = this.addressInput;
+
+        let updateInputFields = this.updateInputFields;
+        let transformLatLngToString = this.transformLatLngToString;
+
+        updateInputFields(this.marker, transformLatLngToString, coordsInput, addressInput);;
+
+        this.marker.addListener('position_changed', function () {
+            updateInputFields(this, transformLatLngToString, coordsInput, addressInput);
+        });
+    }
+
+    updateInputFields(marker, transformLatLngToString, coordsInput, addressInput) {
+        let latLng = marker.getPosition();
+
+        coordsInput.value = transformLatLngToString(latLng)
+
+        // Update Search input with the address for the updated coordinates
+        let geocoder = new google.maps.Geocoder();
+        geocoder.geocode({ 'latLng': latLng }, function (results, status) {
+            if (status === google.maps.GeocoderStatus.OK) {
+                if (results[1]) {
+                    addressInput.value = results[1].formatted_address
+                }
+            }
+        });
+    }
+
+    deleteMarker(marker, coordsInput, addressInput, searchInput) {
+        if (marker) {
+            marker.setMap(null);
+            marker = null;
+        }
+
+        coordsInput.value = '';
+        searchInput.value = '';
+        addressInput.value = '';
+    }
+
+    transformLatLngToString(latLng) {
+        // Used to transform a LatLng object to a String (google.maps.LatLng)
+        return latLng.lat() + ',' + latLng.lng();
+    }
+
+    transformLocationToLatLng(locationString) {
+        let string = locationString.split(',');
+
+        return new google.maps.LatLng(parseFloat(string[0]), parseFloat(string[1]));
+    }
+
+    getCenter(location) {
+        if (location !== '') {
+            return this.transformLocationToLatLng(location);
+        }
+
+        return this.transformLocationToLatLng("52.3793773,4.8981");
+    }
+
+    initThisMap() {
+        let placeMarker = this.placeMarker;
+
+        // Create map instance
+        const map = new google.maps.Map(this.mapElement, {
+            zoom: 13,
+            center: this.getCenter(this.options.originalLocation)
+        });
+
+        this.map = map;
+
+        // Init Google Places autocomplete
+        const autocomplete = new google.maps.places.Autocomplete(this.searchInput);
+
+        // Show Google Places location search
+        autocomplete.addListener('place_changed', () => {
+            let place = autocomplete.getPlace();
+
+            // If the place has a geometry, then present it on a map.
+            if (place.geometry.viewport) {
+                map.fitBounds(place.geometry.viewport);
+            } else {
+                map.setCenter(place.geometry.location);
+            }
+
+            placeMarker(place.geometry.location);
+        });
+
+        // This event listener will call addMarker() when the map is clicked.
+        map.addListener('click', function(event) {
+            placeMarker(event.latLng);
+        });
+
+        // // Set marker for original location
+        if (this.options.originalLocation) {
+            placeMarker(this.transformLocationToLatLng(this.options.originalLocation));
+        }
+        else {
+            this.coordsInput.addEventListener('keyup', function (event) {
+                let inputValue = event.srcElement.value;
+
+                if (inputValue.match(/[0-9],[0-9]/g)) {
+
+                    placeMarker(this.transformLocationToLatLng(inputValue));
+
+                    this.map.setCenter(inputValue);
+                }
+            });
+        }
+    }
+}
+
+class EntryCoordinatesContainer {
+    markers = []
+    map = null;
+    apiKey = null;
+
+    constructor () {
+
+    }
+
+    loadMapsScript = (apiKey) => {
+        if (!window.mapsScriptLoaded) {
+            let script = document.createElement('script');
+            script.src = 'https://maps.googleapis.com/maps/api/js?key=' + apiKey + '&callback=initMap&libraries=places';
+            script.async = true;
+
+            window.initMap = this.initMarkers;
+
+            document.head.appendChild(script);
+
+            window.mapsScriptLoaded = true;
+        }
+    }
+
+    initMarkers = () => {
+        this.markers.forEach((marker) => {
+            marker.initThisMap();
+        });
+    }
+
+    setApiKey = (apiKey) => {
+        this.apiKey = apiKey
+    }
+
+    addField = (name, options) => {
+        if (!this.map) {
+            this.loadMapsScript(this.apiKey ?? options.apiKey)
+        }
+
+        this.markers.push(new CoordinatesField(name, options));
+
+        return true;
+    }
+}
+
+window.EntryCoordinates = new EntryCoordinatesContainer;

src/fields/EntryCoordinates.php

@@ -134,6 +134,7 @@ public function normalizeValue(mixed $value, ?\craft\base\ElementInterface $elem
         return new EntryCoordinatesModel([
             'coordinates' => array_key_exists('coordinates', $value) ? $value['coordinates'] : null,
             'searchQuery' => array_key_exists('searchQuery', $value) ? $value['searchQuery'] : null,
+            'address' => array_key_exists('address', $value) ? $value['address'] : null,
         ]);
     }
 

src/models/EntryCoordinatesModel.php

@@ -10,6 +10,7 @@ class EntryCoordinatesModel extends BaseModel
 
     public ?string $coordinates = null;
     public ?string $searchQuery = null;
+    public ?string $address = null;
     public ?string $latitude = null;
     public ?string $longitude = null;