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

Adds leaflet-active-area plugin to better handle padding and zoom. #693.

This commit is contained in:
mateuswetah 2023-01-20 18:44:55 -03:00
parent e7dc428c23
commit fcd187a652
5 changed files with 49 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
package-lock.json generated
View File

@ -4325,6 +4325,11 @@
"resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.9.3.tgz", "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.9.3.tgz",
"integrity": "sha512-iB2cR9vAkDOu5l3HAay2obcUHZ7xwUBBjph8+PGtmW/2lYhbLizWtG7nTeYht36WfOslixQF9D/uSIzhZgGMfQ==" "integrity": "sha512-iB2cR9vAkDOu5l3HAay2obcUHZ7xwUBBjph8+PGtmW/2lYhbLizWtG7nTeYht36WfOslixQF9D/uSIzhZgGMfQ=="
}, },
"leaflet-active-area": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/leaflet-active-area/-/leaflet-active-area-1.2.1.tgz",
"integrity": "sha512-lZdkGt7VzaYCrarYaWnJ4BI2CrzrfivX35GLUc9l4w8y9ru88LLqcQzWZMw7bPzSzHO7do301z77mSfIvhWjFg=="
},
"levn": { "levn": {
"version": "0.4.1", "version": "0.4.1",
"resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz", "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",

1
package.json
View File

@ -18,6 +18,7 @@
"css-vars-ponyfill": "^2.4.8", "css-vars-ponyfill": "^2.4.8",
"floating-vue": "^1.0.0-beta.18", "floating-vue": "^1.0.0-beta.18",
"leaflet": "^1.9.3", "leaflet": "^1.9.3",
"leaflet-active-area": "^1.2.1",
"masonry-layout": "^4.2.2", "masonry-layout": "^4.2.2",
"moment": "^2.29.4", "moment": "^2.29.4",
"node-sass": "^7.0.3", "node-sass": "^7.0.3",

8
src/views/admin/components/lists/items-list.vue
View File

@ -1519,6 +1519,7 @@
:zoom="5" :zoom="5"
:center="[-14.4086569, -51.31668]" :center="[-14.4086569, -51.31668]"
:zoom-animation="true" :zoom-animation="true"
@ready="onMapReady()"
@click="clearSelectedMarkers()" @click="clearSelectedMarkers()"
:options="{ :options="{
name: 'tainacan-admin-view-mode-map', name: 'tainacan-admin-view-mode-map',
@ -1810,6 +1811,7 @@ import { Icon, latLng } from 'leaflet';
import iconUrl from 'leaflet/dist/images/marker-icon.png'; import iconUrl from 'leaflet/dist/images/marker-icon.png';
import iconRetinaUrl from 'leaflet/dist/images/marker-icon-2x.png'; import iconRetinaUrl from 'leaflet/dist/images/marker-icon-2x.png';
import shadowUrl from 'leaflet/dist/images/marker-shadow.png'; import shadowUrl from 'leaflet/dist/images/marker-shadow.png';
import * as LeafletActiveArea from 'leaflet-active-area';
delete Icon.Default.prototype._getIconUrl; delete Icon.Default.prototype._getIconUrl;
Icon.Default.mergeOptions({ Icon.Default.mergeOptions({
@ -1979,7 +1981,7 @@ export default {
) { ) {
for ( let i = 0; i < aMetadatum['metadata_type_options']['children_objects'].length; i++ ) for ( let i = 0; i < aMetadatum['metadata_type_options']['children_objects'].length; i++ )
if ( aMetadatum['metadata_type_options']['children_objects'][i]['metadata_type'] == 'Tainacan\\Metadata_Types\\GeoCoordinate' ) { if ( aMetadatum['metadata_type_options']['children_objects'][i]['metadata_type'] == 'Tainacan\\Metadata_Types\\GeoCoordinate' ) {
let childMetadatum = aMetadatum['metadata_type_options']['children_objects'][i]; let childMetadatum = JSON.parse(JSON.stringify(aMetadatum['metadata_type_options']['children_objects'][i]));
childMetadatum.name = childMetadatum.name + ' (' + aMetadatum.name + ')'; childMetadatum.name = childMetadatum.name + ' (' + aMetadatum.name + ')';
geocoordinateMetadata.push(childMetadatum); geocoordinateMetadata.push(childMetadatum);
} }
@ -2407,6 +2409,10 @@ export default {
let maxCharacter = (window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth) <= 480 ? 100 : 210; let maxCharacter = (window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth) <= 480 ? 100 : 210;
return description.length > maxCharacter ? description.substring(0, maxCharacter - 3) + '...' : description; return description.length > maxCharacter ? description.substring(0, maxCharacter - 3) + '...' : description;
}, },
onMapReady() {
if ( LeafletActiveArea && this.$refs['tainacan-admin-view-mode-map'] && this.$refs['tainacan-admin-view-mode-map'].mapObject )
this.$refs['tainacan-admin-view-mode-map'].mapObject.setActiveArea('leaflet-active-area');
},
clearSelectedMarkers() { clearSelectedMarkers() {
this.mapSelectedItemId = false; this.mapSelectedItemId = false;
this.selectedMarkerIndexes = []; this.selectedMarkerIndexes = [];

20
src/views/admin/scss/_view-mode-map.scss
View File

@ -4,11 +4,29 @@
display: flex; display: flex;
height: 60vh; height: 60vh;
&.has-selected-item {
#tainacan-admin-view-mode-map,
#tainacan-view-mode-map {
/deep/ .leaflet-active-area {
left: 310px;
}
}
}
#tainacan-admin-view-mode-map, #tainacan-admin-view-mode-map,
#tainacan-view-mode-map { #tainacan-view-mode-map {
border: none; border: none;
border-left: 1px solid var(--tainacan-input-border-color); border-left: 1px solid var(--tainacan-input-border-color);
/deep/ .leaflet-active-area {
position: absolute;
top: 56px;
left: 10px;
right: 42px;
height: calc(60vh - 76px)
}
/deep/ .leaflet-marker-pane { /deep/ .leaflet-marker-pane {
filter: hue-rotate(-22deg); filter: hue-rotate(-22deg);
} }
@ -58,7 +76,7 @@
.tainacan-records-container--map { .tainacan-records-container--map {
height: auto; height: auto;
max-height: calc(60vh - 72px); max-height: calc(60vh - 54px);
overflow-y: auto; overflow-y: auto;
overflow-x: hidden; overflow-x: hidden;
width: 286px; width: 286px;

26
src/views/gutenberg-blocks/blocks/faceted-search/theme-search/components/view-mode-map.vue
View File

@ -6,7 +6,9 @@
<slot /> <slot />
<!-- MAP VIEW MODE --> <!-- MAP VIEW MODE -->
<div class="tainacan-leaflet-map-container"> <div
class="tainacan-leaflet-map-container"
:class="{ 'has-selected-item': mapSelectedItemId }">
<ul class="tainacan-map-cards-container"> <ul class="tainacan-map-cards-container">
<li <li
role="listitem" role="listitem"
@ -83,6 +85,7 @@
:center="[-14.4086569, -51.31668]" :center="[-14.4086569, -51.31668]"
:zoom-animation="true" :zoom-animation="true"
@click="clearSelectedMarkers()" @click="clearSelectedMarkers()"
@ready="onMapReady()"
:options="{ :options="{
name: 'tainacan-view-mode-map', name: 'tainacan-view-mode-map',
zoomControl: false zoomControl: false
@ -307,6 +310,7 @@ import { Icon, latLng } from 'leaflet';
import iconUrl from 'leaflet/dist/images/marker-icon.png'; import iconUrl from 'leaflet/dist/images/marker-icon.png';
import iconRetinaUrl from 'leaflet/dist/images/marker-icon-2x.png'; import iconRetinaUrl from 'leaflet/dist/images/marker-icon-2x.png';
import shadowUrl from 'leaflet/dist/images/marker-shadow.png'; import shadowUrl from 'leaflet/dist/images/marker-shadow.png';
import * as LeafletActiveArea from 'leaflet-active-area';
delete Icon.Default.prototype._getIconUrl; delete Icon.Default.prototype._getIconUrl;
Icon.Default.mergeOptions({ Icon.Default.mergeOptions({
@ -420,7 +424,7 @@ export default {
) { ) {
for ( let i = 0; i < aMetadatum['metadata_type_options']['children_objects'].length; i++ ) for ( let i = 0; i < aMetadatum['metadata_type_options']['children_objects'].length; i++ )
if ( aMetadatum['metadata_type_options']['children_objects'][i]['metadata_type'] == 'Tainacan\\Metadata_Types\\GeoCoordinate' ) { if ( aMetadatum['metadata_type_options']['children_objects'][i]['metadata_type'] == 'Tainacan\\Metadata_Types\\GeoCoordinate' ) {
let childMetadatum = aMetadatum['metadata_type_options']['children_objects'][i]; let childMetadatum = JSON.parse(JSON.stringify(aMetadatum['metadata_type_options']['children_objects'][i]));
childMetadatum.name = childMetadatum.name + ' (' + aMetadatum.name + ')'; childMetadatum.name = childMetadatum.name + ' (' + aMetadatum.name + ')';
geocoordinateMetadata.push(childMetadatum); geocoordinateMetadata.push(childMetadatum);
} }
@ -434,9 +438,9 @@ export default {
setTimeout(() => { setTimeout(() => {
if ( this.itemsLocations.length && this.$refs['tainacan-view-mode-map'] && this.$refs['tainacan-view-mode-map'].mapObject ) { if ( this.itemsLocations.length && this.$refs['tainacan-view-mode-map'] && this.$refs['tainacan-view-mode-map'].mapObject ) {
if (this.itemsLocations.length == 1) if (this.itemsLocations.length == 1)
this.$refs['tainacan-view-mode-map'].mapObject.panInsideBounds(this.itemsLocations.map((anItemLocation) => anItemLocation.location), { animate: true, maxZoom: 16, paddingTopLeft: [48, 48], paddingTopRight: [48, 48] }); this.$refs['tainacan-view-mode-map'].mapObject.panInsideBounds(this.itemsLocations.map((anItemLocation) => anItemLocation.location), { animate: true, maxZoom: 16 });
else else
this.$refs['tainacan-view-mode-map'].mapObject.flyToBounds(this.itemsLocations.map((anItemLocation) => anItemLocation.location), { animate: true, maxZoom: 16, paddingTopLeft: [48, 48], paddingTopRight: [48, 48] }); this.$refs['tainacan-view-mode-map'].mapObject.flyToBounds(this.itemsLocations.map((anItemLocation) => anItemLocation.location), { animate: true, maxZoom: 16 });
} }
}, 500) }, 500)
}, },
@ -452,6 +456,10 @@ export default {
} }
}, },
methods: { methods: {
onMapReady() {
if ( LeafletActiveArea && this.$refs['tainacan-view-mode-map'] && this.$refs['tainacan-view-mode-map'].mapObject )
this.$refs['tainacan-view-mode-map'].mapObject.setActiveArea('leaflet-active-area');
},
getItemImageHeight(imageWidth, imageHeight) { getItemImageHeight(imageWidth, imageHeight) {
let itemWidth = 120; let itemWidth = 120;
return (imageHeight*itemWidth)/imageWidth; return (imageHeight*itemWidth)/imageWidth;
@ -467,9 +475,9 @@ export default {
this.selectedMarkerIndexes = []; this.selectedMarkerIndexes = [];
if ( this.itemsLocations.length && this.$refs['tainacan-view-mode-map'] && this.$refs['tainacan-view-mode-map'].mapObject ) { if ( this.itemsLocations.length && this.$refs['tainacan-view-mode-map'] && this.$refs['tainacan-view-mode-map'].mapObject ) {
if (this.itemsLocations.length == 1) if (this.itemsLocations.length == 1)
this.$refs['tainacan-view-mode-map'].mapObject.panInsideBounds(this.itemsLocations.map((anItemLocation) => anItemLocation.location), { animate: true, maxZoom: 16, paddingTopLeft: [48, 48], paddingTopRight: [48, 48] }); this.$refs['tainacan-view-mode-map'].mapObject.panInsideBounds(this.itemsLocations.map((anItemLocation) => anItemLocation.location), { animate: true, maxZoom: 16 });
else else
this.$refs['tainacan-view-mode-map'].mapObject.flyToBounds(this.itemsLocations.map((anItemLocation) => anItemLocation.location), { animate: true, maxZoom: 16, paddingTopLeft: [48, 48], paddingTopRight: [48, 48] }); this.$refs['tainacan-view-mode-map'].mapObject.flyToBounds(this.itemsLocations.map((anItemLocation) => anItemLocation.location), { animate: true, maxZoom: 16 });
} }
}, },
showItemByLocation(index) { showItemByLocation(index) {
@ -477,7 +485,7 @@ export default {
this.selectedMarkerIndexes = []; this.selectedMarkerIndexes = [];
this.selectedMarkerIndexes.push(index); this.selectedMarkerIndexes.push(index);
if ( this.itemsLocations.length && this.$refs['tainacan-view-mode-map'] && this.$refs['tainacan-view-mode-map'].mapObject ) if ( this.itemsLocations.length && this.$refs['tainacan-view-mode-map'] && this.$refs['tainacan-view-mode-map'].mapObject )
this.$refs['tainacan-view-mode-map'].mapObject.panInsideBounds( [ this.itemsLocations[index].location ], { animate: true, maxZoom: 16, paddingTopLeft: [48, 286], paddingTopRight: [48, 48] }); this.$refs['tainacan-view-mode-map'].mapObject.panInsideBounds( [ this.itemsLocations[index].location ], { animate: true, maxZoom: 16 });
}, },
showLocationsByItem(item) { showLocationsByItem(item) {
this.mapSelectedItemId = item.id; this.mapSelectedItemId = item.id;
@ -492,9 +500,9 @@ export default {
if ( selectedLocationsByItem.length) { if ( selectedLocationsByItem.length) {
if ( this.itemsLocations.length && this.$refs['tainacan-view-mode-map'] && this.$refs['tainacan-view-mode-map'].mapObject ) { if ( this.itemsLocations.length && this.$refs['tainacan-view-mode-map'] && this.$refs['tainacan-view-mode-map'].mapObject ) {
if (selectedLocationsByItem.length > 1) if (selectedLocationsByItem.length > 1)
this.$refs['tainacan-view-mode-map'].mapObject.flyToBounds( selectedLocationsByItem.map((anItemLocation) => anItemLocation.location), { animate: true, maxZoom: 16, paddingTopLeft: [48, 286], paddingTopRight: [48, 48] }); this.$refs['tainacan-view-mode-map'].mapObject.flyToBounds( selectedLocationsByItem.map((anItemLocation) => anItemLocation.location), { animate: true, maxZoom: 16 });
else else
this.$refs['tainacan-view-mode-map'].mapObject.panInsideBounds( selectedLocationsByItem.map((anItemLocation) => anItemLocation.location), { animate: true, maxZoom: 16, paddingTopLeft: [48, 286], paddingTopRight: [48, 48] }); this.$refs['tainacan-view-mode-map'].mapObject.panInsideBounds( selectedLocationsByItem.map((anItemLocation) => anItemLocation.location), { animate: true, maxZoom: 16 });
} }
} else { } else {
this.$buefy.snackbar.open({ this.$buefy.snackbar.open({