Creates options for defining the initial latitude and longitude of geocoordinate metadata. #915.
This commit is contained in:
parent
7493761379
commit
2c99cae3af
|
@ -68,13 +68,47 @@
|
||||||
@update:model-value="emitValues()" />
|
@update:model-value="emitValues()" />
|
||||||
</b-field>
|
</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>
|
</section>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
props: {
|
props: {
|
||||||
value: [ String, Object, Array ]
|
value: [ String, Object, Array ],
|
||||||
|
errors: [ String, Object, Array ]
|
||||||
},
|
},
|
||||||
emits: ['update:value'],
|
emits: ['update:value'],
|
||||||
data() {
|
data() {
|
||||||
|
@ -84,6 +118,17 @@
|
||||||
attribution: String,
|
attribution: String,
|
||||||
initialZoom: Number,
|
initialZoom: Number,
|
||||||
maximumZoom: 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() {
|
created() {
|
||||||
|
@ -92,15 +137,27 @@
|
||||||
this.attribution = this.value.attribution || '© <a target="_blank" href="http://osm.org/copyright">OpenStreetMap</a> contributors';
|
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.initialZoom = Number(this.value.initial_zoom) || 5;
|
||||||
this.maximumZoom = Number(this.value.maximum_zoom) || 12;
|
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: {
|
methods: {
|
||||||
|
setErrorsAttributes( type, message ){
|
||||||
|
this.initialPositionType = type;
|
||||||
|
this.initialPositionMessage = message;
|
||||||
|
},
|
||||||
|
clear(){
|
||||||
|
this.initialPositionType = '';
|
||||||
|
this.initialPositionMessage = '';
|
||||||
|
},
|
||||||
emitValues(){
|
emitValues(){
|
||||||
this.$emit('update:value',{
|
this.$emit('update:value',{
|
||||||
map_provider: this.mapProvider,
|
map_provider: this.mapProvider,
|
||||||
attribution: this.attribution,
|
attribution: this.attribution,
|
||||||
initial_zoom: this.initialZoom,
|
initial_zoom: this.initialZoom,
|
||||||
maximum_zoom: this.maximumZoom,
|
maximum_zoom: this.maximumZoom,
|
||||||
|
initial_latitude: this.initialLatitude,
|
||||||
|
initial_longitude: this.initialLongitude,
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
|
|
|
@ -8,7 +8,7 @@
|
||||||
style="height: 320px; width:100%;"
|
style="height: 320px; width:100%;"
|
||||||
:zoom="initialZoom"
|
:zoom="initialZoom"
|
||||||
:max-zoom="maxZoom"
|
:max-zoom="maxZoom"
|
||||||
:center="[-14.4086569, -51.31668]"
|
:center="[initialLatitude, initialLongitude]"
|
||||||
:zoom-animation="true"
|
:zoom-animation="true"
|
||||||
:options="{
|
:options="{
|
||||||
name: 'map--' + itemMetadatumIdentifier,
|
name: 'map--' + itemMetadatumIdentifier,
|
||||||
|
@ -137,6 +137,12 @@
|
||||||
maxZoom() {
|
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;
|
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() {
|
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';
|
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() {
|
selectedLatLng() {
|
||||||
if ( this.selected && Array.isArray(this.selected) ) {
|
if ( this.selected && Array.isArray(this.selected) ) {
|
||||||
return this.selected.filter((aSelected) => {
|
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])) );
|
return ( !isNaN(Number(coordinates[0])) && !isNaN(Number(coordinates[1])) );
|
||||||
}).map((aSelected) => {
|
}).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]));
|
return latLng(Number(coordinates[0]), Number(coordinates[1]));
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
@ -202,6 +208,11 @@
|
||||||
const mapComponentRef = 'map--' + this.itemMetadatumIdentifier;
|
const mapComponentRef = 'map--' + this.itemMetadatumIdentifier;
|
||||||
this.handleWindowResize(mapComponentRef);
|
this.handleWindowResize(mapComponentRef);
|
||||||
|
|
||||||
|
if ( !this.selected || this.selected.length === 0 ) {
|
||||||
|
this.latitude = this.initialLatitude;
|
||||||
|
this.longitude = this.initialLongitude;
|
||||||
|
}
|
||||||
|
|
||||||
// Intersection Observer to handle map resize
|
// Intersection Observer to handle map resize
|
||||||
if ( this.$refs[mapComponentRef] && this.$refs[mapComponentRef]['$el'] ) {
|
if ( this.$refs[mapComponentRef] && this.$refs[mapComponentRef]['$el'] ) {
|
||||||
this.mapIntersectionObserver = new IntersectionObserver((entries) => {
|
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',
|
'attribution' => '© <a target="_blank" href="http://osm.org/copyright">OpenStreetMap</a> contributors',
|
||||||
'initial_zoom' => 5,
|
'initial_zoom' => 5,
|
||||||
'maximum_zoom' => 12,
|
'maximum_zoom' => 12,
|
||||||
|
'initial_latitude' => -14.4086569,
|
||||||
|
'initial_longitude' => -51.31668
|
||||||
]);
|
]);
|
||||||
$this->set_preview_template('
|
$this->set_preview_template('
|
||||||
<div>
|
<div>
|
||||||
|
@ -57,6 +59,10 @@ class GeoCoordinate extends Metadata_Type {
|
||||||
'maximum_zoom' => [
|
'maximum_zoom' => [
|
||||||
'title' => __( 'Maximum zoom', 'tainacan' ),
|
'title' => __( 'Maximum zoom', 'tainacan' ),
|
||||||
'description' => __( 'Maximum zoom level of the map.', '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() {
|
public function get_options_as_html() {
|
||||||
return "";
|
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