bachir/ouatterrir-app
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

concernement on map hover effect, better mappopup

Browse Source
This commit is contained in:
Bachir Soussi Chiadmi
2023-05-24 19:56:55 +02:00
parent 19da070e31
commit 453e07ec31
5 changed files with 157 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
src/components/ConcernementMapPopup.vue
View File

@@ -57,8 +57,35 @@ export default {
methods: {
onMousemove(e){
// console.log(`popup move type: ${this.infos.type}`);
this.dom.style.left = `${e.clientX + 5}px`;
this.dom.style.top = `${e.clientY - this.dom.clientHeight - 5}px`;
let v = "top";
let h = "right";
if (e.clientX + this.dom.clientWidth > document.body.clientWidth) {
h = "left";
} else {
h = "right";
}
if (e.clientY - this.dom.clientHeight < 0) {
v = "bottom";
} else {
v = "top";
}
this.dom.setAttribute("pos", `${v}-${h}`);
switch (h) {
case "right":
this.dom.style.left = `${e.clientX}px`;
break;
case "left":
this.dom.style.left = `${e.clientX - this.dom.clientWidth}px`;
break;
}
switch (v) {
case "top":
this.dom.style.top = `${e.clientY - this.dom.clientHeight}px`;
break;
case "bottom":
this.dom.style.top = `${e.clientY}px`;
break;
}
}
},
components: {
@@ -69,18 +96,21 @@ export default {
<template>
<div id="map-popup" ref="map-popup">
<section v-if="infos.type === 'concernement'" class="concernement-map-popup">
<h1>{{ concernement.title }}</h1>
</section>
<section v-if="infos.type === 'entite'" class="entite-map-popup">
<h1>{{ entite.entite.title }}</h1>
</section>
<section v-if="infos.type === 'besoin'" class="besoin-map-popup">
<h1>Besoin</h1>
</section>
<section v-if="infos.type === 'reponse'" class="reponse-map-popup">
<h1>Réponse</h1>
</section>
<div class="popup-content-wrapper">
<section v-if="infos.type === 'concernement'" class="concernement-map-popup">
<h1>{{ concernement.title }}</h1>
</section>
<section v-if="infos.type === 'entite'" class="entite-map-popup">
<h1>{{ entite.entite.title }}</h1>
</section>
<section v-if="infos.type === 'besoin'" class="besoin-map-popup">
<h1>Besoin</h1>
</section>
<section v-if="infos.type === 'reponse'" class="reponse-map-popup">
<h1>Réponse</h1>
</section>
</div>
</div>
</template>