tmdinosaurcenter
/
tainacan
mirror of https://github.com/tainacan/tainacan
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

New updates to geo coordinate input. #692.

This commit is contained in:
mateuswetah 2022-12-20 12:13:48 -03:00
parent 1b6a02b8b3
commit 6739c755eb
3 changed files with 70 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

81
src/views/admin/components/metadata-types/geocoordinate/GeoCoordinate.vue
View File

@ -22,16 +22,18 @@
<b-input
v-if="editingMarkerIndex >= 0"
expanded
type="number"
:placeholder="-14.408656999999"
type="text"
:step="0.000000000001"
@input="onUpdateFromLatitudeInput"
@input.native="onUpdateFromLatitudeInput"
:value="latitude" />
<b-input
v-if="editingMarkerIndex >= 0"
expanded
type="number"
:placeholder="-51.316689999999"
type="text"
:step="0.000000000001"
@input="onUpdateFromLongitudeInput"
@input.native="onUpdateFromLongitudeInput"
:value="longitude" />
<b-button
v-if="editingMarkerIndex >= 0"
@ -62,11 +64,14 @@
@dragend="($event) => onDragMarker($event, index)"
@click="($event) => onMarkerEditingClick($event)" />
<l-marker
v-if="editingMarkerIndex < 0 && shouldAddMore"
v-if="editingLatLng && editingMarkerIndex < 0 && shouldAddMore"
:draggable="true"
:lat-lng="editingLatLng"
@dragend="($event) => onDragEditingMarker($event)"
@click="addLocation(latitude + ',' + longitude)">
<l-tooltip :options="{ offset: [16, 0] }">
{{ $i18n.get('instruction_click_to_add_a_point') }}
</l-tooltip>
<l-icon class-name="tainacan-location-marker-add">
<span class="icon">
<i class="tainacan-icon has-text-secondary tainacan-icon-add"/>
@ -78,7 +83,7 @@
</template>
<script>
import { LMap, LIcon, LTileLayer, LMarker, LControl } from 'vue2-leaflet';
import { LMap, LIcon, LTooltip, LTileLayer, LMarker, LControl } from 'vue2-leaflet';
import 'leaflet/dist/leaflet.css';
import { Icon, latLng } from 'leaflet';
import iconUrl from 'leaflet/dist/images/marker-icon.png';
@ -97,6 +102,7 @@
components: {
LMap,
LIcon,
LTooltip,
LTileLayer,
LMarker,
LControl
@ -124,7 +130,10 @@
},
selectedLatLng() {
if ( this.selected && Array.isArray(this.selected) ) {
return this.selected.map((aSelected) => {
return this.selected.filter((aSelected) => {
const coordinates = aSelected.indexOf(',') && aSelected.split(',').length == 2 ? aSelected.split(',') : [-14.4086569, -51.31668];
return ( !isNaN(Number(coordinates[0])) && !isNaN(Number(coordinates[1])) );
}).map((aSelected) => {
const coordinates = aSelected.indexOf(',') && aSelected.split(',').length == 2 ? aSelected.split(',') : [-14.4086569, -51.31668];
return latLng(Number(coordinates[0]), Number(coordinates[1]));
});
@ -132,7 +141,10 @@
return [];
},
editingLatLng() {
if ( !isNaN(this.latitude) && !isNaN(this.longitude) )
return latLng(Number(this.latitude), Number(this.longitude));
else
return null;
},
maxMultipleValues() {
return (
@ -155,7 +167,7 @@
this.$nextTick(() => {
const mapComponentRef = 'map--' + this.itemMetadatumIdentifier;
if ( this.selectedLatLng.length && this.$refs[mapComponentRef] && this.$refs[mapComponentRef].mapObject )
this.$refs[mapComponentRef].mapObject.panInsideBounds(this.selectedLatLng, { animate: true });
this.$refs[mapComponentRef].mapObject.flyToBounds(this.selectedLatLng, { animate: true });
});
}
},
@ -182,20 +194,51 @@
eventBusItemMetadata.$off('itemEditionFormResize', () => this.handleWindowResize(mapComponentRef));
},
methods: {
onUpdateFromLatitudeInput: _.debounce( function(newLatitude) {
onUpdateFromLatitudeInput: _.debounce( function($event) {
let newLatitude = $event.target.value;
if ( !isNaN(newLatitude) ) {
this.latitude = newLatitude;
if (this.editingMarkerIndex >= 0) {
this.selected.splice(this.editingMarkerIndex, 1, this.latitude + ',' + this.longitude);
this.$emit('input', this.selected);
this.onUpdateFromLatitudeAndLongitude();
} else {
const splitValue = newLatitude.split(',');
if (
splitValue &&
splitValue.length == 2 &&
!isNaN(splitValue[0]) &&
!isNaN(splitValue[1])
) {
this.latitude = splitValue[0];
this.longitude = splitValue[1];
this.onUpdateFromLatitudeAndLongitude();
}
}, 350),
onUpdateFromLongitudeInput: _.debounce( function(newLongitude) {
this.longitude = newLongitude;
if (this.editingMarkerIndex >= 0) {
this.selected.splice(this.editingMarkerIndex, 1, this.latitude + ',' + this.longitude);
this.$emit('input', this.selected);
}
}, 250),
onUpdateFromLongitudeInput: _.debounce( function($event) {
let newLongitude = $event.target.value;
if ( !isNaN(newLongitude) ) {
this.longitude = newLongitude;
this.onUpdateFromLatitudeAndLongitude();
} else {
const splitValue = newLongitude.split(',');
if (
splitValue &&
splitValue.length == 2 &&
!isNaN(splitValue[0]) &&
!isNaN(splitValue[1])
) {
this.latitude = splitValue[0];
this.longitude = splitValue[1];
this.onUpdateFromLatitudeAndLongitude();
}
}
}, 250),
onUpdateFromLatitudeAndLongitude() {
if (this.editingMarkerIndex >= 0) {
this.selected.splice(this.editingMarkerIndex, 1, this.latitude + ',' + this.longitude);
this.$emit('input', this.selected);
}
},
onDragMarker($event, index) {
if ( $event.target && $event.target['_latlng'] ) {
if (this.editingMarkerIndex == index) {
@ -249,7 +292,7 @@
},
onMarkerRemove(index) {
this.editingMarkerIndex = -1;
console.log(this.selectedLatLng[index])
this.latitude = this.selectedLatLng[index].lat;
this.longitude = this.selectedLatLng[index].lng;

3
src/views/admin/components/metadata-types/geocoordinate/class-tainacan-geocoordinate.php
View File

@ -36,6 +36,9 @@ class GeoCoordinate extends Metadata_Type {
* @return bool `true` if the coordinate is valid, `false` if not
*/
private function validateLatLong($lat, $long) {
if ( !is_numeric($lat) || !is_numeric($long) )
return false;
$validataLat = ($lat + 0) >= -90.0 && ($lat + 0) <= 90.0;
$validataLong = ($long + 0) >= -180.0 && ($long + 0) <= 180.0;
return $validataLat & $validataLong;

1
src/views/tainacan-i18n.php
View File

@ -740,6 +740,7 @@ return apply_filters( 'tainacan-i18n', [
/* translators: At the end of this sentence there will be a search query typed by the user wrapped in quotes. */
'instruction_press_enter_to_search_for' => __( 'Press <kbd>ENTER</kbd> to search for', 'tainacan' ),
'instruction_type_geocoordinate' => __( 'Type a geo coordinate in the form of lat,lng', 'tainacan' ),
'instruction_click_to_add_a_point' => __( 'Drag to reposition or click to insert a marker', 'tainacan' ),
// Info. Other feedback to user.
'info_items_tab_all' => __( 'Every item, except by those sent to trash.', 'tainacan' ),