wip: Provide an attribution component #473

map/client/components/KAttribution.vue

@@ -14,80 +14,80 @@
           color: 'primary'
         }
       }"
-      :tooltip="$t('KAttribution.ATTRIBUTION')"
     />
     <q-popup-proxy
-      id="attributionsPopup"
+      id="attributions-popup"
       transition-show="scale"
       transition-hide="scale"
       anchor="bottom left"
       self="bottom right"
     >
       <div
-        id="attributionsBanner" class="bg-white text-primary text-center q-pa-xs"
+        id="attributions-banner" 
+        class="bg-white text-primary text-center q-pa-xs"
       >
-        <div id="attributionsContent" v-html="sanitizedAttributionsContent" />
+        <div 
+          id="attributions-content" 
+          v-html="sanitizedAttributions" 
+        />
       </div>
     </q-popup-proxy>
   </div>
 </template>
 
 <script setup>
-import { computed } from 'vue'
+import _ from 'lodash'
+import { ref, computed, watch } from 'vue'
 import { Document } from '../../../core/client/document.js'
 import { KShape } from '../../../core/client/components/media'
+import { useCurrentActivity } from '../composables'
 
-const attributionsHtmlContent = `
-  <div>
-    <a href="https://leafletjs.com" target="_blank">Leaflet</a> 
-    | OpenMapTiles © <a href="https://openmaptiles.com" target="_blank">OpenMapTiles</a> 
-    & OpenStreetMap © <a href="https://www.openstreetmap.org" target="_blank">OpenStreetMap</a> contributors
-  </div>
-`
-// Computed
-const sanitizedAttributionsContent = computed(() => {
-  return Document.sanitizeHtml(attributionsHtmlContent)
-})
-</script>
-<!--<script setup>
-import { ref, computed, watch } from 'vue'
-import { Document } from '../../../core/client/document.js'
+// Data
+const { CurrentActivity } = useCurrentActivity({ selection: false, probe: false })
+const attributions = ref({})
 
-// Props
-const props = defineProps({
-  url: {
-    type: String,
-    default: null
-  }
+// Computed
+const sanitizedAttributions = computed(() => {
+  let content = ''
+  _.forEach(attributions.value, (attribution, layer) => {
+    content += `${attribution}<br>`
+  })
+  return Document.sanitizeHtml(content)
 })
 
-// Data
-const staticAttributionsHtmlContent = `
-  <div>
-    <a href="https://leafletjs.com" target="_blank">Leaflet</a> 
-    | OpenMapTiles © <a href="https://openmaptiles.com" target="_blank">OpenMapTiles</a> 
-    & OpenStreetMap © <a href="https://www.openstreetmap.org" target="_blank">OpenStreetMap</a> contributors
-  </div>
-`
-const attributionsHtmlContent = ref(staticAttributionsHtmlContent)
-
 // Watch
-watch(() => props.url, async (newUrl) => {
-  if (newUrl) {
-    const response = await Document.fetchUrl(newUrl)
-    if (response?.ok) {
-      attributionsHtmlContent.value = await response.text()
-    }
-  } else {
-    attributionsHtmlContent.value = staticAttributionsHtmlContent
+watch(CurrentActivity, (newActivity, oldActivity) => {
+  if (oldActivity) {
+    // remove listeners
+    oldActivity.value.$engineEvents.off('layer-shown', onShowLayer)
+    oldActivity.value.$engineEvents.off('layer-hidden', onHideLayer)
+  }
+  if (newActivity) {
+    // setup attribution
+    newActivity.getLayers().forEach((layer) => {
+      if (newActivity.isLayerVisible(layer.name)) {
+        onShowLayer(layer)
+      }
+    })
+    // install listeners
+    newActivity.$engineEvents.on('layer-shown', onShowLayer)
+    newActivity.$engineEvents.on('layer-hidden', onHideLayer)
   }
 }, { immediate: true })
 
-// Computed
-const sanitizedAttributionsContent = computed(() => {
-  return Document.sanitizeHtml(attributionsHtmlContent.value)
-})
-</script>-->
+// Functions
+function onShowLayer (layer, engine) {
+  if (layer.attribution) { 
+    _.set(attributions.value, _.kebabCase(layer.name), layer.attribution)
+  }
+  console.log(attributions.value)
+}
+function onHideLayer (layer) {
+  if (layer.attribution) {
+    _.unset(attributions.value, _.kebabCase(layer.name))
+  }
+}
+</script>
 
 <style>
 #attributionsPopup {

map/client/components/legend/KLegend.vue

@@ -108,40 +108,6 @@ const zoom = ref()
 // Computed
 const layersBySublegend = computed(() => getLayersBySublegend(layers.value, sublegends.value))
 
-// Functions
-function onShowLayer (layer, engine) {
-  const layerLegend = layer.legend
-  // Check whether the layer has a legend
-  if (!layerLegend) return
-  // Check wehther the legend is already registered for that layer
-  if (_.find(layers.value, { name: layer.name })) {
-    logger.warn(`[KDK] Legend for ${layer.name} already resgistered`)
-    return
-  }
-  logger.debug(`[KDK] Register '${layer.name}' legend`)
-  layers.value.push(layer)
-}
-function onHideLayer (layer) {
-  if (!layer.legend) return
-  logger.debug(`[KDK] Unregister '${layer.name}' legend`)
-  _.remove(layers.value, { name: layer.name })
-}
-function onZoomChanged () {
-  zoom.value = CurrentActivity.value.getCenter().zoomLevel
-}
-function getHelperIcon (helper) {
-  return _.get(helper, 'icon', undefined)
-}
-function getHelperTooltip (helper) {
-  return _.get(helper, 'tooltip', '')
-}
-function getHelperUrl (helper) {
-  return _.get(helper, 'url', null)
-}
-function getHelperDialog (helper) {
-  return _.get(helper, 'dialog', null)
-}
-
 // Watch
 watch([() => props.sublegends, () => props.sublegendsFromCatalog], async () => {
   // Retrieve the legends from catalog if required
@@ -189,4 +155,38 @@ watch(CurrentActivity, (newActivity, oldActivity) => {
     newActivity.$engineEvents.on('zoomend', onZoomChanged)
   }
 }, { immediate: true })
+
+// Functions
+function onShowLayer (layer, engine) {
+  const layerLegend = layer.legend
+  // Check whether the layer has a legend
+  if (!layerLegend) return
+  // Check wehther the legend is already registered for that layer
+  if (_.find(layers.value, { name: layer.name })) {
+    logger.warn(`[KDK] Legend for ${layer.name} already resgistered`)
+    return
+  }
+  logger.debug(`[KDK] Register '${layer.name}' legend`)
+  layers.value.push(layer)
+}
+function onHideLayer (layer) {
+  if (!layer.legend) return
+  logger.debug(`[KDK] Unregister '${layer.name}' legend`)
+  _.remove(layers.value, { name: layer.name })
+}
+function onZoomChanged () {
+  zoom.value = CurrentActivity.value.getCenter().zoomLevel
+}
+function getHelperIcon (helper) {
+  return _.get(helper, 'icon', undefined)
+}
+function getHelperTooltip (helper) {
+  return _.get(helper, 'tooltip', '')
+}
+function getHelperUrl (helper) {
+  return _.get(helper, 'url', null)
+}
+function getHelperDialog (helper) {
+  return _.get(helper, 'dialog', null)
+}
 </script>

map/client/i18n/map_en.json

@@ -697,8 +697,5 @@
   },
   "KDirectionField": {
     "COMPASS": "Compass"
-  },
-  "KAttribution": {
-    "ATTRIBUTION": "Attribution"
   }
 }

map/client/i18n/map_fr.json

@@ -703,8 +703,5 @@
   },
   "KDirectionField": {
     "COMPASS": "Boussole"
-  },
-  "KAttribution": {
-    "ATTRIBUTION": "Attribution"
   }
 }