highlight features related to media

Author: billingb

src/content/mediabrief.liquid

@@ -5,10 +5,9 @@ pagination:
   alias: media
 permalink: "media/{{ media.n2id | slugify }}_insert.html"
 ---
-<li class="list-row m-auto">
+
 <a href="media/{{ media.n2id | slugify }}" class="grid justify-items-center text-center">
 <img width="250" height="250" src="public/media/{{media.file}}"/>
 <div class="font-semibold">{{media.name}}</div>
 <div class="text-xs">{{media.caption}}</div>
-</a>
-</li>
+</a>

src/js/main.js

@@ -146,9 +146,10 @@ const displayFeatureInfo = async function (id, props) {
     if (types.includes('demo_archive')) {
       const imageLinks = await Promise.all(
         relatedRecordsByType['demo_archive'].map(async (r) => {
+          const lids = links[id].map(l => l.tid)
           const insertHtmlResponse = await fetch(`media/${r.tid}_insert.html`)
           const insertHtml = await insertHtmlResponse.text()
-          return `<li>${insertHtml}</li>`
+          return `<li x-data @mouseenter="$dispatch('hover', '${lids}')" @mouseleave="$dispatch('unhover')" class="list-row m-auto">${insertHtml}</li>`
         })
       )
       relatedHtml += `<ul class="list bg-base-100 rounded-box shadow-md my-3">
@@ -285,7 +286,7 @@ Alpine.effect(() => {
 })
 
 Alpine.effect(() => {
-  const hoverId = Alpine.store('styles').hoverId
+  const hoverChanged = Alpine.store('styles').hoverChanged
   vectorLayer.changed()
 })
 

src/js/styles.js

@@ -194,7 +194,7 @@ const styleFeature = function (feature) {
   }
   if (feature.getId() == Alpine.store('styles').selectedId) {
     return selectedStyles[getGenericType(feature)]
-  } else if (feature.getId() == Alpine.store('styles').hoverId) {
+  } else if (Alpine.store('styles').shouldHover(feature.getId())) {
     return hoverStyles[getGenericType(feature)]
   } else if (!displayed.includes(type)) {
     return new Style({})
@@ -214,21 +214,33 @@ window.Alpine = Alpine
 Alpine.store('styles', {
   data: styles,
   display: Object.keys(styles),
-  hoverId: -1,
+  hoverIds: [],
+  hoverChanged: 0,
   selectedId: -1,
   entries() {
     return Object.keys(this.data)
   },
   count() {
     return Object.keys(this.data).length
   },
-  setHover(id) {
-    if(id != this.hoverId) {
-      this.hoverId = id
+  _setHover(ids) {
+    this.hoverIds = ids
+    this.hoverChanged++
+  },
+  setHover(ids) {
+    if(Array.isArray(ids)) {
+      this._setHover(ids)
+    } else if (!(this.hoverIds.length == 1 && this.hoverIds[0] == ids)) {
+      this._setHover(ids.split(','))
     }
   },
   unsetHover() {
-    this.hoverId = -1
+    if(this.hoverIds.length > 0) {
+      this._setHover([])
+    }
+  },
+  shouldHover(id) {
+    return this.hoverIds.includes(id)
   },
   setSelected(id) {
     if(id != this.selectedId) {