app: open popup on joblist hover

verdie-g · Jul 3, 2018 · b997a07 · b997a07
1 parent 9f03a0c
commit b997a07
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 1 deletion.
diff --git a/src/components/JobList.vue b/src/components/JobList.vue
@@ -4,7 +4,10 @@
         :key="job.objectID"
         class="columns is-marginless job">
 
-      <div class="column" @click="selectJob(job)">
+      <div class="column"
+        @click="selectJob(job)"
+        @mouseover="onJobOver(job)"
+        @mouseleave="onJobLeave(job)">
         <div class="columns">
           <div class="job-picture column is-narrow">
             <img v-bind:src="job.company_logo_url" />
@@ -79,6 +82,12 @@ export default {
     selectJob(job) {
       this.$root.$emit('select-job', job);
     },
+    onJobOver(job) {
+      this.$root.$emit('over-job', job);
+    },
+    onJobLeave(job) {
+      this.$root.$emit('leave-job', job);
+    },
     wttjUrl(job) {
       return job.websites_urls.filter(j => j.website_reference === 'wttj_fr')[0].url;
     },

diff --git a/src/components/WKMap.vue b/src/components/WKMap.vue
@@ -9,6 +9,7 @@
             v-if="result._geoloc !== null"
             :key="result.objectID"
             :lat-lng="{ lat: result._geoloc.lat, lng: result._geoloc.lng }"
+            @click="openPopup(result)"
             @mouseover="openPopup(result)"
             @mouseleave="closePopup()" />
         </template>
@@ -70,6 +71,7 @@ export default {
     openPopup(job) {
       const latLng = L.latLng(job._geoloc.lat, job._geoloc.lng);
       const map = this.$refs.map.mapObject;
+
       this.popup
         .setLatLng(latLng)
         .setContent(`<div class="job-popup"></div><h3 class="is-size-6">${job.company_name}</h3><h4 class="is-size-7">${job.name}</h4></div>`)
@@ -100,12 +102,16 @@ export default {
   },
   created() {
     this.$root.$on('select-job', this.zoomOnJob);
+    this.$root.$on('over-job', job => this.openPopup(job));
+    this.$root.$on('leave-job', this.closePopup);
   },
   mounted() {
     this.onMoveEnd();
   },
   beforeDestroy() {
     this.$root.$off('select-job', this.zoomOnJob);
+    this.$root.$off('over-job', this.zoomOnJob);
+    this.$root.$off('leave-job', this.zoomOnJob);
   },
 };
 </script>