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",
"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": {
"version": "0.4.1",
"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",
"floating-vue": "^1.0.0-beta.18",
"leaflet": "^1.9.3",
"leaflet-active-area": "^1.2.1",
"masonry-layout": "^4.2.2",
"moment": "^2.29.4",
"node-sass": "^7.0.3",

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

@ -1519,6 +1519,7 @@
:zoom="5"
:center="[-14.4086569, -51.31668]"
:zoom-animation="true"
@ready="onMapReady()"
@click="clearSelectedMarkers()"
:options="{
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 iconRetinaUrl from 'leaflet/dist/images/marker-icon-2x.png';
import shadowUrl from 'leaflet/dist/images/marker-shadow.png';
import * as LeafletActiveArea from 'leaflet-active-area';
delete Icon.Default.prototype._getIconUrl;
Icon.Default.mergeOptions({
@ -1979,7 +1981,7 @@ export default {
) {
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' ) {
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 + ')';
geocoordinateMetadata.push(childMetadatum);
}
@ -2407,6 +2409,10 @@ export default {
let maxCharacter = (window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth) <= 480 ? 100 : 210;
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() {
this.mapSelectedItemId = false;
this.selectedMarkerIndexes = [];

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

@ -4,11 +4,29 @@
display: flex;
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-view-mode-map {
border: none;
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 {
filter: hue-rotate(-22deg);
}
@ -58,7 +76,7 @@
.tainacan-records-container--map {
height: auto;
max-height: calc(60vh - 72px);
max-height: calc(60vh - 54px);
overflow-y: auto;
overflow-x: hidden;
width: 286px;

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

@ -6,7 +6,9 @@
<slot />
<!-- 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">
<li
role="listitem"
@ -83,6 +85,7 @@
:center="[-14.4086569, -51.31668]"
:zoom-animation="true"
@click="clearSelectedMarkers()"
@ready="onMapReady()"
:options="{
name: 'tainacan-view-mode-map',
zoomControl: false
@ -307,6 +310,7 @@ import { Icon, latLng } from 'leaflet';
import iconUrl from 'leaflet/dist/images/marker-icon.png';
import iconRetinaUrl from 'leaflet/dist/images/marker-icon-2x.png';
import shadowUrl from 'leaflet/dist/images/marker-shadow.png';
import * as LeafletActiveArea from 'leaflet-active-area';
delete Icon.Default.prototype._getIconUrl;
Icon.Default.mergeOptions({
@ -420,7 +424,7 @@ export default {
) {
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' ) {
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 + ')';
geocoordinateMetadata.push(childMetadatum);
}
@ -434,9 +438,9 @@ export default {
setTimeout(() => {
if ( this.itemsLocations.length && this.$refs['tainacan-view-mode-map'] && this.$refs['tainacan-view-mode-map'].mapObject ) {
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
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)
},
@ -452,6 +456,10 @@ export default {
}
},
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) {
let itemWidth = 120;
return (imageHeight*itemWidth)/imageWidth;
@ -467,9 +475,9 @@ export default {
this.selectedMarkerIndexes = [];
if ( this.itemsLocations.length && this.$refs['tainacan-view-mode-map'] && this.$refs['tainacan-view-mode-map'].mapObject ) {
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
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) {
@ -477,7 +485,7 @@ export default {
this.selectedMarkerIndexes = [];
this.selectedMarkerIndexes.push(index);
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) {
this.mapSelectedItemId = item.id;
@ -492,9 +500,9 @@ export default {
if ( selectedLocationsByItem.length) {
if ( this.itemsLocations.length && this.$refs['tainacan-view-mode-map'] && this.$refs['tainacan-view-mode-map'].mapObject ) {
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
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 {
this.$buefy.snackbar.open({