feat(plugins/legend): Integrate Legend plugin functionality in LayerChooser

src/plugins/layerChooser/components/LayerChooser.ce.vue

@@ -1,15 +1,21 @@
 <template>
 	<LayerSelection v-if="displaySelection" />
+	<LayerLegend v-else-if="displayLegend" />
 	<LayerOptions v-else />
 </template>
 
 <script setup lang="ts">
 import { computed } from 'vue'
 import { useLayerChooserStore } from '../store'
 import LayerSelection from './LayerSelection.ce.vue'
+import LayerLegend from './LayerLegend.ce.vue'
 import LayerOptions from './LayerOptions.ce.vue'
 
+const layerChooserStore = useLayerChooserStore()
+const displayLegend = computed(
+	() => layerChooserStore.openedLegendId.length !== 0
+)
 const displaySelection = computed(
-	() => useLayerChooserStore().openedOptionsId.length === 0
+	() => layerChooserStore.openedOptionsId.length === 0 && !displayLegend.value
 )
 </script>

src/plugins/layerChooser/components/LayerInformationCard.ce.vue

@@ -0,0 +1,54 @@
+<template>
+	<PolarCard>
+		<button
+			:id="`polar-layer-chooser-${identifier}-back-button`"
+			class="kern-btn kern-btn--secondary"
+			@click="close"
+		>
+			<span class="kern-icon kern-icon--arrow-back" aria-hidden="true" />
+			<span class="kern-label">
+				{{ $t(($) => $.returnToLayers, { ns: PluginId }) }}
+			</span>
+		</button>
+		<slot />
+	</PolarCard>
+</template>
+<script setup lang="ts">
+import { nextTick, onMounted } from 'vue'
+import { PluginId } from '../types'
+import { useLayerChooserStore } from '../store'
+import PolarCard from '@/components/PolarCard.ce.vue'
+import { useCoreStore } from '@/core/stores/export'
+
+const props = defineProps<{
+	identifier: string
+	idName: string
+}>()
+
+const coreStore = useCoreStore()
+const layerChooserStore = useLayerChooserStore()
+
+onMounted(() => {
+	coreStore.shadowRoot
+		?.getElementById(`polar-layer-chooser-${props.identifier}-back-button`)
+		?.focus()
+})
+
+function close() {
+	const previous = layerChooserStore[props.idName]
+	layerChooserStore[props.idName] = ''
+	void nextTick(() => {
+		coreStore.shadowRoot
+			?.getElementById(
+				`polar-layer-chooser-${props.identifier}-${previous}-button`
+			)
+			?.focus()
+	})
+}
+</script>
+
+<style scoped>
+button {
+	pointer-events: all;
+}
+</style>

src/plugins/layerChooser/components/LayerLegend.ce.vue

@@ -0,0 +1,47 @@
+<template>
+	<LayerInformationCard
+		identifier="legend"
+		id-name="openedLegendId"
+		class="legend-card"
+	>
+		<label class="kern-label" for="polar-layer-chooser-legend-anchor">
+			{{ $t(($) => $.legend.to, { name: legend.name, ns: PluginId }) }}
+		</label>
+		<a
+			id="polar-layer-chooser-legend-anchor"
+			:href="legend.url"
+			:aria-label="$t(($) => $.legend.to, { name: legend.name, ns: PluginId })"
+			target="_blank"
+		>
+			<img
+				:src="legend.url"
+				:alt="$t(($) => $.legend.to, { name: legend.name, ns: PluginId })"
+			/>
+		</a>
+	</LayerInformationCard>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useLayerChooserStore } from '../store'
+import { type LayerLegend, PluginId } from '../types'
+import LayerInformationCard from './LayerInformationCard.ce.vue'
+
+const layerChooserStore = useLayerChooserStore()
+const legend = computed(
+	() =>
+		layerChooserStore.layersWithLegends[
+			layerChooserStore.openedLegendId
+		] as LayerLegend
+)
+</script>
+
+<style scoped>
+.legend-card {
+	overflow-y: scroll;
+
+	a {
+		pointer-events: all;
+	}
+}
+</style>

src/plugins/layerChooser/components/LayerOptions.ce.vue

@@ -1,15 +1,5 @@
 <template>
-	<PolarCard>
-		<button
-			id="polar-layer-chooser-options-back-button"
-			class="kern-btn kern-btn--secondary"
-			@click="closeOptions"
-		>
-			<span class="kern-icon kern-icon--arrow-back" aria-hidden="true" />
-			<span class="kern-label">
-				{{ $t(($) => $.returnToLayers, { ns: PluginId }) }}
-			</span>
-		</button>
+	<LayerInformationCard identifier="options" id-name="openedOptionsId">
 		<PolarInputGroup :legend="$t(($) => $.layerHeader, { ns: PluginId, name })">
 			<div
 				v-for="{ displayName, layerImage, layerName } in options"
@@ -31,15 +21,15 @@
 				/>
 			</div>
 		</PolarInputGroup>
-	</PolarCard>
+	</LayerInformationCard>
 </template>
 
 <script setup lang="ts">
-import { computed, nextTick, onMounted, ref } from 'vue'
+import { computed, ref } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useLayerChooserStore } from '../store'
 import { type LayerOptions, PluginId } from '../types'
-import PolarCard from '@/components/PolarCard.ce.vue'
+import LayerInformationCard from './LayerInformationCard.ce.vue'
 import PolarInput from '@/components/PolarInput.ce.vue'
 import PolarInputGroup from '@/components/PolarInputGroup.ce.vue'
 import { useCoreStore } from '@/core/stores/export'
@@ -69,22 +59,6 @@ const name = computed(
 			({ id }) => id === openedOptionsId.value
 		)?.name || ''
 )
-
-onMounted(() => {
-	coreStore.shadowRoot
-		?.getElementById('polar-layer-chooser-options-back-button')
-		?.focus()
-})
-
-function closeOptions() {
-	const previousOptions = openedOptionsId.value
-	openedOptionsId.value = ''
-	void nextTick(() => {
-		coreStore.shadowRoot
-			?.getElementById(`polar-layer-chooser-options-${previousOptions}-button`)
-			?.focus()
-	})
-}
 </script>
 
 <style scoped>

src/plugins/layerChooser/components/LayerSelection.ce.vue

@@ -4,16 +4,26 @@
 			v-if="backgrounds.length"
 			:legend="$t(($) => $.backgroundTitle, { ns: PluginId })"
 		>
-			<PolarInput
+			<div
 				v-for="{ name, id } in backgrounds"
 				:key="`polar-layer-chooser-background-radio-${id}`"
-				v-model="activeBackgroundId"
-				:id-suffix="`polar-layer-chooser-background`"
-				:label="name"
-				type="radio"
-				:value="id"
-				:disabled="disabledBackgrounds[id]"
-			/>
+				class="polar-layer-chooser-input-wrapper"
+			>
+				<PolarInput
+					v-model="activeBackgroundId"
+					:id-suffix="`polar-layer-chooser-background`"
+					:label="name"
+					type="radio"
+					:value="id"
+					:disabled="disabledBackgrounds[id]"
+				/>
+				<LegendButton
+					v-if="layersWithLegendsIds.includes(id)"
+					:id="id"
+					:disabled="disabledBackgrounds[id]"
+					@click="openedLegendId = id"
+				/>
+			</div>
 		</PolarInputGroup>
 		<template v-if="shownMasks.length">
 			<template
@@ -26,7 +36,7 @@
 					<div
 						v-for="{ name, id } in masks"
 						:key="`polar-layer-chooser-mask-${type}-checkbox-${id}`"
-						class="polar-layer-chooser-checkbox-wrapper"
+						class="polar-layer-chooser-input-wrapper"
 					>
 						<PolarInput
 							v-model="activeMaskIds"
@@ -51,6 +61,12 @@
 								{{ $t(($) => $.layerOptions, { ns: PluginId }) }}
 							</span>
 						</button>
+						<LegendButton
+							v-else-if="layersWithLegendsIds.includes(id)"
+							:id="id"
+							:disabled="disabledMasks[id]"
+							@click="openedLegendId = id"
+						/>
 					</div>
 				</PolarInputGroup>
 			</template>
@@ -59,9 +75,11 @@
 </template>
 
 <script setup lang="ts">
+import { computed } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useLayerChooserStore } from '../store'
 import { PluginId } from '../types'
+import LegendButton from './LegendButton.ce.vue'
 import PolarCard from '@/components/PolarCard.ce.vue'
 import PolarInput from '@/components/PolarInput.ce.vue'
 import PolarInputGroup from '@/components/PolarInputGroup.ce.vue'
@@ -75,9 +93,14 @@ const {
 	disabledMasks,
 	layersWithOptions,
 	masksSeparatedByType,
+	openedLegendId,
 	shownMasks,
 } = storeToRefs(layerChooserStore)
 
+const layersWithLegendsIds = computed(() =>
+	Object.keys(layerChooserStore.layersWithLegends)
+)
+
 function updateOpenedOptions(layerId: string) {
 	layerChooserStore.openedOptionsId = layerId
 }
@@ -88,7 +111,7 @@ function updateOpenedOptions(layerId: string) {
 	overflow-y: inherit !important;
 }
 
-.polar-layer-chooser-checkbox-wrapper {
+.polar-layer-chooser-input-wrapper {
 	display: flex;
 	justify-content: space-between;
 	align-items: center;

src/plugins/layerChooser/components/LegendButton.ce.vue

@@ -0,0 +1,21 @@
+<template>
+	<button
+		:id="`polar-layer-chooser-legend-${id}-button`"
+		class="kern-btn kern-btn--tertiary"
+		:disabled="disabled"
+	>
+		<span class="kern-icon kern-icon--info" aria-hidden="true" />
+		<span class="kern-label kern-sr-only">
+			{{ $t(($) => $.legend.open, { ns: PluginId }) }}
+		</span>
+	</button>
+</template>
+
+<script setup lang="ts">
+import { PluginId } from '../types'
+
+defineProps<{
+	disabled: boolean
+	id: string
+}>()
+</script>

src/plugins/layerChooser/locales.ts

@@ -7,13 +7,19 @@
  */
 /* eslint-enable tsdoc/syntax */
 
+import { PluginId } from './types'
 import type { Locale } from '@/core'
 
 export const resourcesDe = {
 	backgroundTitle: 'Hintergrundkarten',
 	maskTitle: 'Fachdaten',
 	layerHeader: 'Auswahl sichtbarer Ebenen für Layer "{{name}}"',
 	layerOptions: 'Optionen für Kartenmaterial',
+	legend: {
+		title: 'Legende',
+		to: 'Legendenbild zu "{{name}}"',
+		open: `$t(legend.to, {ns: ${PluginId}}) öffnen`,
+	},
 	returnToLayers: 'Zurück',
 } as const
 
@@ -22,6 +28,11 @@ export const resourcesEn = {
 	maskTitle: 'Subject data',
 	layerHeader: 'Visible layer selection for layer "{{name}}"',
 	layerOptions: 'Map data options',
+	legend: {
+		title: 'Legend',
+		to: '"{{name}}" legend image',
+		open: `Open $t(legend.to, {ns: ${PluginId}})`,
+	},
 	returnToLayers: 'Back',
 } as const
 

src/plugins/layerChooser/store.ts

@@ -9,12 +9,13 @@ import { defineStore } from 'pinia'
 import { computed, ref, watch } from 'vue'
 import Layer from 'ol/layer/Layer'
 import { ImageWMS, TileWMS } from 'ol/source'
-import type { LayerOptions } from './types'
+import type { LayerLegend, LayerOptions } from './types'
 import { areLayersActive } from './utils/areLayersActive'
 import {
 	loadCapabilities,
 	prepareLayersWithOptions,
 } from './utils/capabilities'
+import { prepareLegends } from './utils/prepareLegends'
 import { getBackgroundsAndMasks } from './utils/getBackgroundsAndMasks'
 import type { LayerConfiguration } from '@/core'
 import { useCoreStore } from '@/core/stores/export'
@@ -38,6 +39,9 @@ export const useLayerChooserStore = defineStore('plugins/layerChooser', () => {
 	const activeBackgroundId = ref('')
 	const activeMaskIds = ref<string[]>([])
 
+	const layersWithLegends = ref<Record<string, LayerLegend>>({})
+	const openedLegendId = ref('')
+
 	const layersWithOptions = ref<Record<string, LayerOptions[]>>({})
 	const openedOptionsId = ref('')
 
@@ -100,6 +104,9 @@ export const useLayerChooserStore = defineStore('plugins/layerChooser', () => {
 			.map(({ id }) => id)
 		updateActiveAndAvailableLayersByZoom()
 		coreStore.map.on('moveend', updateActiveAndAvailableLayersByZoom)
+
+		layersWithLegends.value = prepareLegends(coreStore.configuration.layers)
+
 		void loadCapabilities(
 			coreStore.configuration.layers,
 			capabilities.value
@@ -227,6 +234,9 @@ export const useLayerChooserStore = defineStore('plugins/layerChooser', () => {
 		/** @internal */
 		disabledMasks,
 
+		/** @internal */
+		layersWithLegends,
+
 		/** @internal */
 		layersWithOptions,
 
@@ -236,6 +246,9 @@ export const useLayerChooserStore = defineStore('plugins/layerChooser', () => {
 		/** @internal */
 		shownMasks,
 
+		/** @internal */
+		openedLegendId,
+
 		/** @internal */
 		openedOptionsId,
 

src/plugins/layerChooser/types.ts

@@ -1,5 +1,10 @@
 export const PluginId = 'layerChooser'
 
+export interface LayerLegend {
+	name: string
+	url: string
+}
+
 export interface LayerOptions {
 	/**
 	 * Name to be displayed in the layer options menu.