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

Loads metadata settings from metadatum edition form #692.

This commit is contained in:
mateuswetah 2023-01-20 12:24:03 -03:00
parent f0929ad628
commit d358e79186
4 changed files with 83 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
src/views/admin/components/metadata-types/geocoordinate/FormGeoCoordinate.vue
View File

@ -2,11 +2,11 @@
<section>
<b-field :addons="false" >
<label class="label is-inline">
{{ $i18n.getHelperTitle('tainacan-text', 'mapProvider') }}
{{ $i18n.getHelperTitle('tainacan-geocoordinate', 'map_provider') }}
<span>&nbsp;*&nbsp;</span>
<help-button
:title="'Titulo do helper'"
:message="'message do helper'" />
:title="$i18n.getHelperTitle('tainacan-geocoordinate', 'map_provider')"
:message="$i18n.getHelperMessage('tainacan-geocoordinate', 'map_provider')" />
</label>
<b-input
name="mapProvider"
@ -16,10 +16,10 @@
<b-field :addons="false" >
<label class="label is-inline">
{{ $i18n.getHelperTitle('tainacan-text', 'extraTileLayer') }}
{{ $i18n.getHelperTitle('tainacan-geocoordinate', 'extra_tile_layers') }}
<help-button
:title="'Titulo do helper'"
:message="'message do helper'" />
:title="$i18n.getHelperTitle('tainacan-geocoordinate', 'extra_tile_layers')"
:message="$i18n.getHelperMessage('tainacan-geocoordinate', 'extra_tile_layers')" />
</label>
<b-input
name="extraTileLayer"
@ -30,15 +30,15 @@
<b-field
:addons="false" >
<label class="label is-inline">
{{ $i18n.getHelperTitle('tainacan-text', 'atrribution') }}
{{ $i18n.getHelperTitle('tainacan-geocoordinate', 'attribution') }}
<span>&nbsp;*&nbsp;</span>
<help-button
:title="'Titulo do helper'"
:message="'message do helper'" />
:title="$i18n.getHelperTitle('tainacan-geocoordinate', 'attribution')"
:message="$i18n.getHelperMessage('tainacan-geocoordinate', 'attribution')" />
</label>
<b-input
name="atrribution"
v-model="atrribution"
name="attribution"
v-model="attribution"
@input="emitValues()" />
</b-field>
@ -46,11 +46,11 @@
<b-field
:addons="false" >
<label class="label is-inline">
{{ $i18n.getHelperTitle('tainacan-text', 'initialZoom') }}
{{ $i18n.getHelperTitle('tainacan-geocoordinate', 'initial_zoom') }}
<span>&nbsp;*&nbsp;</span>
<help-button
:title="'Titulo do helper'"
:message="'message do helper'" />
:title="$i18n.getHelperTitle('tainacan-geocoordinate', 'initial_zoom')"
:message="$i18n.getHelperMessage('tainacan-geocoordinate', 'initial_zoom')" />
</label>
<b-input
name="initialZoom"
@ -63,11 +63,11 @@
<b-field
:addons="false" >
<label class="label is-inline">
{{ $i18n.getHelperTitle('tainacan-text', 'maximumZoom') }}
{{ $i18n.getHelperTitle('tainacan-geocoordinate', 'maximum_zoom') }}
<span>&nbsp;*&nbsp;</span>
<help-button
:title="'Titulo do helper'"
:message="'message do helper'" />
:title="$i18n.getHelperTitle('tainacan-geocoordinate', 'maximum_zoom')"
:message="$i18n.getHelperMessage('tainacan-geocoordinate', 'maximum_zoom')" />
</label>
<b-input
name="maximumZoom"
@ -89,7 +89,7 @@
return {
mapProvider: String,
extraTileLayer: [],
atrribution: String,
attribution: String,
initialZoom: Number,
maximumZoom: Number,
}
@ -97,8 +97,8 @@
created() {
if (this.value) {
this.mapProvider = this.value.map_provider || 'http://?';
this.extraTileLayer = this.value.extra_tile_layer || [];
this.atrribution = this.value.atrribution || '';
this.extraTileLayer = this.value.extra_tile_layers || [];
this.attribution = this.value.attribution || '';
this.initialZoom = this.value.initial_zoom || 5;
this.maximumZoom = this.value.maximum_zoom || 12;
}
@ -107,8 +107,8 @@
emitValues(){
this.$emit('input',{
map_provider: this.mapProvider,
extra_tile_layer: this.extraTileLayer,
atrribution: this.atrribution,
extra_tile_layers: this.extraTileLayer,
attribution: this.attribution,
initial_zoom: this.initialZoom,
maximum_zoom: this.maximumZoom,
})

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

@ -6,16 +6,18 @@
:id="'map--' + itemMetadatumIdentifier"
:ref="'map--' + itemMetadatumIdentifier"
style="height: 320px; width:100%;"
:zoom="5"
:zoom="initialZoom"
:max-zoom="maxZoom"
:center="[-14.4086569, -51.31668]"
:zoom-animation="true"
@click="onMapClick"
:options="{
name: 'map--' + itemMetadatumIdentifier,
trackResize: false // We handle this manually in the component
trackResize: false, // We handle this manually in the component
worldCopyJump: true
}">
<l-tile-layer
:url="url"
:url="mapProvider"
:attribution="attribution" />
<l-control position="topright">
<div class="geocoordinate-input-panel">
@ -120,11 +122,24 @@
latitude: -14.4086569,
longitude: -51.31668,
selected: [],
url: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
attribution: '&copy; <a target="_blank" href="http://osm.org/copyright">OpenStreetMap</a> contributors',
}
},
computed: {
mapProvider() {
return this.itemMetadatum && this.itemMetadatum.metadatum.metadata_type_options && this.itemMetadatum.metadatum.metadata_type_options.map_provider ? this.itemMetadatum.metadatum.metadata_type_options.map_provider : 'https://tile.openstreetmap.org/{z}/{x}/{y}.png';
},
initialZoom() {
return this.itemMetadatum && this.itemMetadatum.metadatum.metadata_type_options && this.itemMetadatum.metadatum.metadata_type_options.initial_zoom ? this.itemMetadatum.metadatum.metadata_type_options.initial_zoom : 5;
},
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;
},
attribution() {
return this.itemMetadatum && this.itemMetadatum.metadatum.metadata_type_options && this.itemMetadatum.metadatum.metadata_type_options.attribution ? this.itemMetadatum.metadatum.metadata_type_options.attribution : '&copy; <a target="_blank" href="http://osm.org/copyright">OpenStreetMap</a> contributors';
},
extraTileLayers() {
return this.itemMetadatum && this.itemMetadatum.metadatum.metadata_type_options && this.itemMetadatum.metadatum.metadata_type_options.extra_tile_layers ? this.itemMetadatum.metadatum.metadata_type_options.extra_tile_layers : [];
},
itemMetadatumIdentifier() {
return 'tainacan-item-metadatum_id-' + this.itemMetadatum.metadatum.id + (this.itemMetadatum.parent_meta_id ? ('_parent_meta_id-' + this.itemMetadatum.parent_meta_id) : '');
},
@ -163,16 +178,19 @@
}
},
watch: {
selectedLatLng() {
this.$nextTick(() => {
const mapComponentRef = 'map--' + this.itemMetadatumIdentifier;
if ( this.selectedLatLng.length && this.$refs[mapComponentRef] && this.$refs[mapComponentRef].mapObject ) {
if (this.selectedLatLng.length == 1)
this.$refs[mapComponentRef].mapObject.panInsideBounds(this.selectedLatLng, { animate: true });
else
this.$refs[mapComponentRef].mapObject.flyToBounds(this.selectedLatLng, { animate: true });
}
});
selectedLatLng: {
handler() {
this.$nextTick(() => {
const mapComponentRef = 'map--' + this.itemMetadatumIdentifier;
if ( this.selectedLatLng.length && this.$refs[mapComponentRef] && this.$refs[mapComponentRef].mapObject ) {
if (this.selectedLatLng.length == 1)
this.$refs[mapComponentRef].mapObject.panInsideBounds(this.selectedLatLng, { animate: true, maxZoom: this.maxZoom });
else
this.$refs[mapComponentRef].mapObject.flyToBounds(this.selectedLatLng, { animate: true, maxZoom: this.maxZoom });
}
});
},
immediate: true
}
},
created() {
@ -288,10 +306,9 @@
const existingSelectedIndex = this.selected.indexOf(this.latitude + ',' + this.longitude);
this.editingMarkerIndex = existingSelectedIndex;
const mapComponentRef = 'map--' + this.itemMetadatumIdentifier;
if ( this.$refs[mapComponentRef] && this.$refs[mapComponentRef].mapObject )
this.$refs[mapComponentRef].mapObject.panInsideBounds([ this.selectedLatLng[existingSelectedIndex] ], { animate: true });
this.$refs[mapComponentRef].mapObject.panInsideBounds([ this.selectedLatLng[existingSelectedIndex] ], { animate: true, maxZoom: this.maxZoom });
}
},
onMarkerRemove(index) {

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

@ -23,8 +23,8 @@ class GeoCoordinate extends Metadata_Type {
$this->set_description( __('Represents a geographical location that is determined by latitude and longitude coordinates.', 'tainacan') );
$this->set_default_options([
'map_provider' => 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
'extra_tile_layer' => [],
'atrribution' => '&copy; <a target="_blank" href="http://osm.org/copyright">OpenStreetMap</a> contributors',
'extra_tile_layers' => [],
'attribution' => '&copy; <a target="_blank" href="http://osm.org/copyright">OpenStreetMap</a> contributors',
'initial_zoom' => 5,
'maximum_zoom' => 12,
]);
@ -42,11 +42,11 @@ class GeoCoordinate extends Metadata_Type {
*/
public function get_form_labels(){
return [
'map_tile_provider' => [
'map_provider' => [
'title' => __( 'Tile provides', 'tainacan' ),
'description' => __( 'Link to the service used as source for displaying tile layers on the map', 'tainacan' ),
],
'extra_map_tile_layer' => [
'extra_tile_layers' => [
'title' => __( 'Extra tile layer', 'tainacan' ),
'description' => __( 'The extra layer of blocks to be displayed on the map', 'tainacan' ),
],
@ -141,7 +141,20 @@ class GeoCoordinate extends Metadata_Type {
wp_enqueue_style( 'tainacan-geocoordinate-item-metadatum', $TAINACAN_BASE_URL . '/assets/css/tainacan-gutenberg-block-geocoordinate-item-metadatum.css', array(), TAINACAN_VERSION);
return '<span id="tainacan-geocoordinatemetadatum--' . $item_metadatum_id . '" data-module="geocoordinate-item-metadatum">
$options = $this->get_options();
$options_as_strings = '';
foreach ( $options as $option_key => $option ) {
if ( is_array($option) )
$options_as_strings .= 'data-' . $option_key . '="' . json_encode($option) . '" ';
else if ( $option_key == 'attribution' )
$options_as_strings .= 'data-' . $option_key . '="' . htmlentities($option) . '" ';
else if ( $option_key == 'map_provider' )
$options_as_strings .= 'data-' . $option_key . '="' . esc_url($option) . '" ';
else
$options_as_strings .= 'data-' . $option_key . '="' . $option . '" ';
};
return '<span id="tainacan-geocoordinatemetadatum--' . $item_metadatum_id . '" data-module="geocoordinate-item-metadatum" ' . $options_as_strings . '>
' . $return . '
</span>';
}

11
src/views/gutenberg-blocks/blocks/geocoordinate-item-metadatum/theme.js
View File

@ -39,8 +39,15 @@ export default (element) => {
var tainacanMap = TainacanLeaflet.map(element.id).setView([-14.4086569, -51.31668], 5);
TainacanLeaflet.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
const map_provider = element.hasAttribute('data-map_provider') ? element.getAttribute('data-map_provider') : 'https://tile.openstreetmap.org/{z}/{x}/{y}.png';
const attribution = element.hasAttribute('data-attribution') ? element.getAttribute('data-attribution') : '&copy; <a target="_blank" href="http://osm.org/copyright">OpenStreetMap</a> contributors';
const initial_zoom = element.hasAttribute('data-initial_zoom') ? element.getAttribute('data-initial_zoom') : 5;
const maximum_zoom = element.hasAttribute('data-maximum_zoom') ? element.getAttribute('data-maximum_zoom') : 12;
TainacanLeaflet.tileLayer(map_provider, {
attribution: attribution,
zoom: initial_zoom,
maxZoom: maximum_zoom
})
.addTo(tainacanMap);