New updates to geo coordinate input. #692.
This commit is contained in:
parent
1b6a02b8b3
commit
6739c755eb
|
@ -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() {
|
||||
return latLng(Number(this.latitude), Number(this.longitude));
|
||||
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) {
|
||||
this.latitude = newLatitude;
|
||||
if (this.editingMarkerIndex >= 0) {
|
||||
this.selected.splice(this.editingMarkerIndex, 1, this.latitude + ',' + this.longitude);
|
||||
this.$emit('input', this.selected);
|
||||
}
|
||||
}, 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);
|
||||
onUpdateFromLatitudeInput: _.debounce( function($event) {
|
||||
let newLatitude = $event.target.value;
|
||||
if ( !isNaN(newLatitude) ) {
|
||||
this.latitude = newLatitude;
|
||||
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();
|
||||
}
|
||||
}
|
||||
}, 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;
|
||||
|
||||
|
|
|
@ -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;
|
||||
|
@ -46,7 +49,7 @@ class GeoCoordinate extends Metadata_Type {
|
|||
$value = is_array($value) ? $value : [$value];
|
||||
foreach ($value as $coordinate) {
|
||||
$arr_coordinate = explode(",", $coordinate);
|
||||
if( count($arr_coordinate) != 2 || !$this->validateLatLong($arr_coordinate[0], $arr_coordinate[1])) {
|
||||
if ( count($arr_coordinate) != 2 || !$this->validateLatLong($arr_coordinate[0], $arr_coordinate[1])) {
|
||||
$this->add_error( sprintf(__('The value (%s) is not a valid geo coordinate', 'tainacan'), $coordinate ) );
|
||||
return false;
|
||||
}
|
||||
|
|
|
@ -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' ),
|
||||
|
|
Loading…
Reference in New Issue