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

Uses intersection observer to trigger geocordinate map resizing instead of event from parent components.

This commit is contained in:
mateuswetah 2024-08-05 18:11:56 -03:00
parent 41ac71cdaf
commit b11bd90bba
1 changed files with 13 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/views/admin/components/metadata-types/geocoordinate/TainacanGeoCoordinate.vue
View File

@ -124,6 +124,7 @@
latitude: -14.4086569, latitude: -14.4086569,
longitude: -51.31668, longitude: -51.31668,
selected: [], selected: [],
mapIntersectionObserver: null
} }
}, },
computed: { computed: {
@ -193,24 +194,25 @@
} }
}, },
created() { created() {
if (this.value && this.value != "") if ( this.value && this.value != "" )
this.selected = Array.isArray(this.value) ? (this.value.length == 1 && this.value[0] == "" ? [] : this.value) : [this.value]; this.selected = Array.isArray(this.value) ? (this.value.length == 1 && this.value[0] == "" ? [] : this.value) : [this.value];
// Listens to window resize event to update map bounds
// We need to pass mapComponentRef here instead of creating it inside the function
// otherwise the listener would conflict when multiple geo metadata are inserted.
const mapComponentRef = 'map--' + this.itemMetadatumIdentifier;
this.$emitter.on('itemEditionFormResize', () => this.handleWindowResize(mapComponentRef));
}, },
mounted() { mounted() {
nextTick(() => { nextTick(() => {
const mapComponentRef = 'map--' + this.itemMetadatumIdentifier; const mapComponentRef = 'map--' + this.itemMetadatumIdentifier;
this.handleWindowResize(mapComponentRef); this.handleWindowResize(mapComponentRef);
// Intersection Observer to handle map resize
if ( this.$refs[mapComponentRef] && this.$refs[mapComponentRef]['$el'] ) {
this.mapIntersectionObserver = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting)
this.handleWindowResize(mapComponentRef);
});
}, { threshold: 0.1 });
this.mapIntersectionObserver.observe(this.$refs[mapComponentRef]['$el']);
}
}); });
},
beforeUnmount() {
const mapComponentRef = 'map--' + this.itemMetadatumIdentifier;
this.$emitter.off('itemEditionFormResize', () => this.handleWindowResize(mapComponentRef));
}, },
methods: { methods: {
onUpdateFromLatitudeInput: _.debounce( function(value) { onUpdateFromLatitudeInput: _.debounce( function(value) {