Skip to content

Commit

Permalink
Bugfix required field + Save zoom level + Set default zoom level and …
Browse files Browse the repository at this point in the history 
…map center #21 #22
  • Loading branch information
@niektenhoopen
niektenhoopen committed Aug 13, 2023
1 parent 1075c02 commit 15c4df3
Show file tree
Hide file tree
Showing 5 changed files with 113 additions and 29 deletions.
65 changes: 43 additions & 22 deletions src/assetbundles/entrycoordinatesfield/dist/js/EntryCoordinates.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,36 +57,32 @@
class CoordinatesField {
options = {
originalLocation: null,
suffix: null
suffix: null,
zoomLevel: null,
defaultZoomLevel: null,
}

map = null;
marker = null;

searchInput = null;
coordsInput = null;
zoomInput = null;
mapElement = null;

constructor (name, options) {
this.options = options;

if (this.options.zoomLevel === '' || this.options.zoomLevel === null) {
this.options.zoomLevel = options.defaultZoomLevel;
}

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.zoomInput = document.querySelector('.location-zoom-' + this.options.suffix);

this.deleteButton.addEventListener('click', function () {
deleteMarker(this.marker, coordsInput, addressInput, searchInput);
});
this.mapElement = document.querySelector('.fields-map-' + this.options.suffix);
}

// Deletes all markers in the array by removing references to them.
Expand All @@ -101,6 +97,7 @@ class CoordinatesField {
draggable: true,
});
this.marker = marker;

}

let coordsInput = this.coordsInput;
Expand Down Expand Up @@ -132,15 +129,20 @@ class CoordinatesField {
});
}

deleteMarker(marker, coordsInput, addressInput, searchInput) {
if (marker) {
marker.setMap(null);
marker = null;
deleteMarker = () => {
if (this.marker) {
this.marker.setMap(null);
this.marker = null;
}

coordsInput.value = '';
searchInput.value = '';
addressInput.value = '';
this.coordsInput.value = '';
this.searchInput.value = '';
this.addressInput.value = '';
this.zoomInput.value = '';
}

setZoomLevel = (zoomLevel) => {
this.zoomInput.value = zoomLevel.toString();
}

transformLatLngToString(latLng) {
Expand All @@ -159,15 +161,23 @@ class CoordinatesField {
return this.transformLocationToLatLng(location);
}

if (this.options.defaultCenterCoordinates !== null && this.options.defaultCenterCoordinates !== '') {
return this.transformLocationToLatLng(this.options.defaultCenterCoordinates);

}
return this.transformLocationToLatLng("52.3793773,4.8981");
}

initThisMap() {
let placeMarker = this.placeMarker;
let deleteMarker = this.deleteMarker;
let setZoomLevel = this.setZoomLevel;

let zoomLevel = this.options.zoomLevel;

// Create map instance
const map = new google.maps.Map(this.mapElement, {
zoom: 13,
zoom: parseInt(zoomLevel),
center: this.getCenter(this.options.originalLocation)
});

Expand Down Expand Up @@ -195,6 +205,10 @@ class CoordinatesField {
placeMarker(event.latLng);
});

map.addListener('zoom_changed', function() {
setZoomLevel(map.getZoom());
});

// // Set marker for original location
if (this.options.originalLocation) {
placeMarker(this.transformLocationToLatLng(this.options.originalLocation));
Expand All @@ -211,6 +225,13 @@ class CoordinatesField {
}
});
}

this.deleteButton = document.querySelector('.location-delete-' + this.options.suffix);

this.deleteButton.addEventListener('click', function () {
deleteMarker();
});

}
}

Expand Down
33 changes: 29 additions & 4 deletions src/fields/EntryCoordinates.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,9 @@ class EntryCoordinates extends Field
*/
public $googleApiKey = null;

public $defaultCenterCoordinates = null;
public $defaultZoomLevel = null;

// Static Methods
// =========================================================================

Expand Down Expand Up @@ -81,6 +84,16 @@ public function rules(): array
['googleApiKey', 'string'],
['googleApiKey', 'default', 'value' => ''],
]);

$rules = array_merge($rules, [
['defaultCenterCoordinates', 'string'],
['defaultCenterCoordinates', 'default', 'value' => "52.3793773,4.8981"],
]);

$rules = array_merge($rules, [
['defaultZoomLevel', 'number', 'min' => 1, 'max' => 20],
['defaultZoomLevel', 'default', 'value' => 13],
]);
return $rules;
}

Expand Down Expand Up @@ -128,13 +141,23 @@ public function normalizeValue(mixed $value, ?\craft\base\ElementInterface $elem
}

if ($value === null) {
$value = [];
return null;
}

$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;
$zoomLevel = array_key_exists('zoomLevel', $value) ? $value['zoomLevel'] : null;

if ($coordinates === null || $coordinates === '') {
return null;
}

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,
'coordinates' => $coordinates,
'searchQuery' => $searchQuery,
'address' => $address,
'zoomLevel' => $zoomLevel,
]);
}

Expand Down Expand Up @@ -377,6 +400,8 @@ public function getInputHtml(mixed $value, ?\craft\base\ElementInterface $elemen
'namespacedId' => $namespacedId,

'googleApiKey' => Craft::parseEnv($this->googleApiKey),
'defaultCenterCoordinates' => $this->defaultCenterCoordinates,
'defaultZoomLevel' => $this->defaultZoomLevel,
]
);
}
Expand Down
2 changes: 2 additions & 0 deletions src/models/EntryCoordinatesModel.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,8 @@ class EntryCoordinatesModel extends BaseModel
public ?string $address = null;
public ?string $latitude = null;
public ?string $longitude = null;
public ?string $zoomLevel = null;


public function __construct($attributes = [], array $config = [])
{
Expand Down
24 changes: 21 additions & 3 deletions src/templates/_components/fields/EntryCoordinates_input.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,15 @@
{% import "_includes/forms" as forms %}
{% set suffix = random() %}

{% if value is empty %}
{% set value = {
searchQuery: "",
coordinates: "",
address: "",
zoomLevel: "",
} %}
{% endif %}

<div style="display: flex; align-items: center; margin-bottom: 10px;">
<label style="margin-right: 10px;">Search:</label>
{{ forms.text({
Expand Down Expand Up @@ -58,11 +67,20 @@
name: name ~ '[address]',
value: value.address
}) }}
<input type="button" value="Delete Marker" class="location-delete-{{ suffix }} btn" style="margin-left: 10px;">
</div>

{{ tag('input', {
type: 'hidden',
id: name,
class: 'location-zoom-' ~ suffix,
name: name ~ '[zoomLevel]',
value: value.zoomLevel

}) }}

<input type="button" value="Delete Marker" class="location-delete-{{ suffix }} btn" style="margin-left: 10px;">
</div>

{% js %}
EntryCoordinates.setApiKey('{{ googleApiKey }}');
EntryCoordinates.addField('{{ name }}', { suffix: '{{ suffix }}', originalLocation: '{{ value.coordinates }}', apiKey: '{{ googleApiKey }}'});
EntryCoordinates.addField('{{ name }}', { suffix: '{{ suffix }}', originalLocation: '{{ value.coordinates }}', zoomLevel: '{{ value.zoomLevel }}', defaultCenterCoordinates: '{{ defaultCenterCoordinates }}', defaultZoomLevel: '{{ defaultZoomLevel ?? 1 }}', apiKey: '{{ googleApiKey }}'});
{% endjs %}
18 changes: 18 additions & 0 deletions src/templates/_components/fields/EntryCoordinates_settings.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,3 +25,21 @@
value: field['googleApiKey'],
suggestEnvVars: true})
}}

{{ forms.autosuggestField({
label: 'Default Zoom Level',
instructions: 'Default zoom level for the map. Enter a number between 1 and 20.',
id: 'defaultZoomLevel',
name: 'defaultZoomLevel',
value: field['defaultZoomLevel'],
suggestEnvVars: true})
}}

{{ forms.autosuggestField({
label: 'Default Center Coordinates',
instructions: 'Default center coordinates for the map. Default is Amsterdam.',
id: 'defaultCenterCoordinates',
name: 'defaultCenterCoordinates',
value: field['defaultCenterCoordinates'],
suggestEnvVars: true})
}}

0 comments on commit 15c4df3

Please sign in to comment.