Creates options for defining the initial latitude and longitude of geocoordinate metadata. #915.
This commit is contained in:
mateuswetah
parent
7f900ccc9e
commit
b3f90ed0ff
|
|
@ -68,13 +68,47 @@
|
|||
@update:model-value="emitValues()" />
|
||||
</b-field>
|
||||
|
||||
<b-field
|
||||
:addons="false"
|
||||
:listen="setError"
|
||||
:type="initialPositionType"
|
||||
:message="initialPositionMessage">
|
||||
<label class="label is-inline">
|
||||
{{ $i18n.getHelperTitle('tainacan-geocoordinate', 'initial_position') }}
|
||||
<span> * </span>
|
||||
<help-button
|
||||
:title="$i18n.getHelperTitle('tainacan-geocoordinate', 'initial_position')"
|
||||
:message="$i18n.getHelperMessage('tainacan-geocoordinate', 'initial_position')" />
|
||||
</label>
|
||||
<b-field grouped>
|
||||
<b-input
|
||||
v-model="initialLatitude"
|
||||
:placeholder="-14.408656999999"
|
||||
name="initialLatitude"
|
||||
expanded
|
||||
type="text"
|
||||
:step="0.000000000001"
|
||||
@update:model-value="emitValues()"
|
||||
@focus="clear()" />
|
||||
<b-input
|
||||
v-model="initialLongitude"
|
||||
:placeholder="-51.316689999999"
|
||||
name="initialLongitude"
|
||||
expanded
|
||||
type="text"
|
||||
:step="0.000000000001"
|
||||
@update:model-value="emitValues()"
|
||||
@focus="clear()" />
|
||||
</b-field>
|
||||
</b-field>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
value: [ String, Object, Array ]
|
||||
value: [ String, Object, Array ],
|
||||
errors: [ String, Object, Array ]
|
||||
},
|
||||
emits: ['update:value'],
|
||||
data() {
|
||||
|
|
@ -84,6 +118,17 @@
|
|||
attribution: String,
|
||||
initialZoom: Number,
|
||||
maximumZoom: Number,
|
||||
initialLatitude: Number,
|
||||
initialLongitude: Number,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
setError(){
|
||||
if ( this.errors && this.errors.initial_position !== '' )
|
||||
this.setErrorsAttributes( 'is-danger', this.errors.initial_position );
|
||||
else
|
||||
this.setErrorsAttributes( '', '' );
|
||||
return true;
|
||||
}
|
||||
},
|
||||
created() {
|
||||
|
|
@ -92,15 +137,27 @@
|
|||
this.attribution = this.value.attribution || '© <a target="_blank" href="http://osm.org/copyright">OpenStreetMap</a> contributors';
|
||||
this.initialZoom = Number(this.value.initial_zoom) || 5;
|
||||
this.maximumZoom = Number(this.value.maximum_zoom) || 12;
|
||||
this.initialLatitude = Number(this.value.initial_latitude) || -14.4086569;
|
||||
this.initialLongitude = Number(this.value.initial_longitude) || -51.31668;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
setErrorsAttributes( type, message ){
|
||||
this.initialPositionType = type;
|
||||
this.initialPositionMessage = message;
|
||||
},
|
||||
clear(){
|
||||
this.initialPositionType = '';
|
||||
this.initialPositionMessage = '';
|
||||
},
|
||||
emitValues(){
|
||||
this.$emit('update:value',{
|
||||
map_provider: this.mapProvider,
|
||||
attribution: this.attribution,
|
||||
initial_zoom: this.initialZoom,
|
||||
maximum_zoom: this.maximumZoom,
|
||||
initial_latitude: this.initialLatitude,
|
||||
initial_longitude: this.initialLongitude,
|
||||
})
|
||||
},
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
style="height: 320px; width:100%;"
|
||||
:zoom="initialZoom"
|
||||
:max-zoom="maxZoom"
|
||||
:center="[-14.4086569, -51.31668]"
|
||||
:center="[initialLatitude, initialLongitude]"
|
||||
:zoom-animation="true"
|
||||
:options="{
|
||||
name: 'map--' + itemMetadatumIdentifier,
|
||||
|
|
@ -137,6 +137,12 @@
|
|||
maxZoom() {
|
||||
return this.itemMetadatum && this.itemMetadatum.metadatum.metadata_type_options && this.itemMetadatum.metadatum.metadata_type_options.maximum_zoom ? this.itemMetadatum.metadatum.metadata_type_options.maximum_zoom : 12;
|
||||
},
|
||||
initialLatitude() {
|
||||
return this.itemMetadatum && this.itemMetadatum.metadatum.metadata_type_options && this.itemMetadatum.metadatum.metadata_type_options.initial_latitude ? Number(this.itemMetadatum.metadatum.metadata_type_options.initial_latitude) : -14.4086569;
|
||||
},
|
||||
initialLongitude() {
|
||||
return this.itemMetadatum && this.itemMetadatum.metadatum.metadata_type_options && this.itemMetadatum.metadatum.metadata_type_options.initial_longitude ? Number(this.itemMetadatum.metadatum.metadata_type_options.initial_longitude) : -51.31668;
|
||||
},
|
||||
attribution() {
|
||||
return this.itemMetadatum && this.itemMetadatum.metadatum.metadata_type_options && this.itemMetadatum.metadatum.metadata_type_options.attribution ? this.itemMetadatum.metadatum.metadata_type_options.attribution : '© <a target="_blank" href="http://osm.org/copyright">OpenStreetMap</a> contributors';
|
||||
},
|
||||
|
|
@ -146,10 +152,10 @@
|
|||
selectedLatLng() {
|
||||
if ( this.selected && Array.isArray(this.selected) ) {
|
||||
return this.selected.filter((aSelected) => {
|
||||
const coordinates = aSelected.indexOf(',') && aSelected.split(',').length == 2 ? aSelected.split(',') : [-14.4086569, -51.31668];
|
||||
const coordinates = aSelected.indexOf(',') && aSelected.split(',').length == 2 ? aSelected.split(',') : [this.initialLatitude, this.initialLongitude];
|
||||
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];
|
||||
const coordinates = aSelected.indexOf(',') && aSelected.split(',').length == 2 ? aSelected.split(',') : [this.initialLatitude, this.initialLongitude];
|
||||
return latLng(Number(coordinates[0]), Number(coordinates[1]));
|
||||
});
|
||||
}
|
||||
|
|
@ -202,6 +208,11 @@
|
|||
const mapComponentRef = 'map--' + this.itemMetadatumIdentifier;
|
||||
this.handleWindowResize(mapComponentRef);
|
||||
|
||||
if ( !this.selected || this.selected.length === 0 ) {
|
||||
this.latitude = this.initialLatitude;
|
||||
this.longitude = this.initialLongitude;
|
||||
}
|
||||
|
||||
// Intersection Observer to handle map resize
|
||||
if ( this.$refs[mapComponentRef] && this.$refs[mapComponentRef]['$el'] ) {
|
||||
this.mapIntersectionObserver = new IntersectionObserver((entries) => {
|
||||
|
|
|
|||
|
|
@ -27,6 +27,8 @@ class GeoCoordinate extends Metadata_Type {
|
|||
'attribution' => '© <a target="_blank" href="http://osm.org/copyright">OpenStreetMap</a> contributors',
|
||||
'initial_zoom' => 5,
|
||||
'maximum_zoom' => 12,
|
||||
'initial_latitude' => -14.4086569,
|
||||
'initial_longitude' => -51.31668
|
||||
]);
|
||||
$this->set_preview_template('
|
||||
<div>
|
||||
|
|
@ -57,6 +59,10 @@ class GeoCoordinate extends Metadata_Type {
|
|||
'maximum_zoom' => [
|
||||
'title' => __( 'Maximum zoom', 'tainacan' ),
|
||||
'description' => __( 'Maximum zoom level of the map.', 'tainacan' ),
|
||||
],
|
||||
'initial_position' => [
|
||||
'title' => __( 'Initial center position', 'tainacan' ),
|
||||
'description' => __( 'Define latitude and longitude for the initial center of the map input.', 'tainacan' ),
|
||||
]
|
||||
];
|
||||
}
|
||||
|
|
@ -195,4 +201,21 @@ class GeoCoordinate extends Metadata_Type {
|
|||
public function get_options_as_html() {
|
||||
return "";
|
||||
}
|
||||
|
||||
/**
|
||||
* @param \Tainacan\Entities\Metadatum $metadatum
|
||||
* @return array|bool true if is validate or array if has error
|
||||
*/
|
||||
public function validate_options(\Tainacan\Entities\Metadatum $metadatum) {
|
||||
if ( !in_array($metadatum->get_status(), apply_filters('tainacan-status-require-validation', ['publish','future','private'])) )
|
||||
return true;
|
||||
|
||||
if ( !$this->validateLatLong( $this->get_option('initial_latitude'), $this->get_option('initial_longitude') ) ) {
|
||||
return [
|
||||
'initial_position' => sprintf(__('The value (%s) is not a valid geo coordinate', 'tainacan'), ('' . $this->get_option('initial_latitude') . ',' . $this->get_option('initial_longitude')) )
|
||||
];
|
||||
}
|
||||
|
||||
return true;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue