QMAPS-709 list item hover/click

Qwant · Apr 24, 2019 · 3d3c1f2 · 3d3c1f2
1 parent 775321b
commit 3d3c1f2
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 11 deletions.
diff --git a/src/adapters/scene_category.js b/src/adapters/scene_category.js
@@ -16,15 +16,15 @@ export default class SceneCategory {
 
   addCategoryMarkers(pois) {
     pois.forEach((poi) => {
-          const marker = document.createElement('div')
-
-          marker.className = 'category_marker'
-          this.markers.push(
-              new Marker(marker)
-                  .setLngLat(poi.latLon)
-                  .addTo(this.map)
-          )
-        }
+      const marker = document.createElement('div')
+      poi.marker_id = poi.id.replace("pj:", "marker_")
+      marker.className = 'category_marker'
+      marker.id = poi.marker_id
+      this.markers.push(
+        new Marker(marker)
+         .setLngLat(poi.latLon)
+           .addTo(this.map)
+      )}
     )
   }
 }
diff --git a/src/panel/category_panel.js b/src/panel/category_panel.js
@@ -62,6 +62,19 @@ export class CategoryPanel {
   }
 
   removeCategoryMarkers(){
+    //todo
+  }
+
+  selectPoi(poi){
+    // todo
+    console.log(poi);
+  }
+
+  highlightPoiMarker(poi){
+    document.querySelector("#" + poi.marker_id).classList.add("active")
+  }
 
+  unhighlightPoiMarker(poi){
+    document.querySelector("#" + poi.marker_id).classList.remove("active")
   }
 }
diff --git a/src/scss/includes/panels/categories.scss b/src/scss/includes/panels/categories.scss
@@ -168,7 +168,8 @@
   margin: -7px 0 0 4px;
 }
 
-.category_marker:hover {
+.category_marker:hover,
+.category_marker.active {
   width: 30px;
   height: 37px;
   margin: -10px 0 0 4px;

diff --git a/src/views/category_panel.dot b/src/views/category_panel.dot
@@ -26,7 +26,7 @@
         }
       }}
 
-      <div class="category__panel__item" {{= click(this.selectPoi, this, poi) }}>
+      <div class="category__panel__item" {{= click(this.selectPoi, this, poi) }} {{= mouseover(this.highlightPoiMarker, this, poi) }} {{= mouseout(this.unhighlightPoiMarker, this, poi) }}>
         <div class="category__panel__item_inner">
 
           <div class="category__panel__image" {{? image}}style="background-image:url('{{= image}}')"{{?}}>{{? !image }}TODO: icon{{?}}</div>