feat(attributions): migrate plugin

examples/snowbox/index.js

@@ -7,6 +7,7 @@
 	subscribe,
 	updateState,
 } from '@polar/polar'
+import pluginAttributions from '@polar/polar/plugins/attributions'
 import pluginFooter from '@polar/polar/plugins/footer'
 import pluginFullscreen from '@polar/polar/plugins/fullscreen'
 import pluginGeoLocation from '@polar/polar/plugins/geoLocation'
@@ -19,7 +20,6 @@
 import pluginToast from '@polar/polar/plugins/toast'
 
 import EmptyComponent from './EmptyComponent.vue'
-import MockAttributions from './MockAttributions.ce.vue'
 import MockPointerPosition from './MockPointerPosition.ce.vue'
 import services from './services.js'
 import styleJsonUrl from './style.json?url'
@@ -30,7 +30,7 @@
 const ausgleichsflaechen = '1454'
 const reports = '6059'
 const denkmal = 'denkmaelerWMS'
-const hamburgBorder = '1693'
+const hamburgBorder = '6074'
 
 let colorScheme = 'light'
 // eslint-disable-next-line no-unused-vars
@@ -73,7 +73,7 @@
 	},
 }
 
 // TODO: Re-enable with isSelectable
 /*
 // arbitrary condition for testing
 const isEvenId = (mmlid) => Number(mmlid.slice(-1)) % 2 === 0
@@ -93,7 +93,7 @@
 		colorScheme,
 		startCenter: [573364, 6028874],
 		layers: [
 			// TODO: Add internalization to snowbox
 			{
 				id: basemapId,
 				visibility: true,
@@ -173,14 +173,14 @@
 						stroke: '#FFFFFF',
 						fill: '#333333',
 					},
 					// TODO(dopenguin): Has some HMR issues, needs to be fixed
 					// isSelectable: isReportSelectable,
 				},
 			],
 			clusterClickZoom: true,
 		},
 		// theme: dataportTheme,
 		/*
 			TODO(dopenguin): Surrounding application should be able give information about dark or light mode via update of a state parameter; light mode by default
 		 */
 		locales: [
@@ -293,7 +293,7 @@
 				key: 'coordinate',
 			},
 		],
 		// TODO: Check if this works when addressSearch is implemented
 		addressTarget: {
 			plugin: 'addressSearch',
 			key: 'selectResult',
@@ -311,14 +311,14 @@
 			{
 				plugin: {
 					component: YetAnotherEmptyComponent,
-					id: 'attributions',
+					id: 'other',
 					locales: [],
 				},
 				icon: 'kern-icon--near-me',
 			},
 		],
 		menus: [
 			// TODO: Delete the mock plugins including the components once the correct plugins have been implemented
 			[
 				{
 					plugin: pluginGeoLocation({
@@ -361,7 +361,46 @@
 		leftEntries: [{ id: 'mockPointer', component: MockPointerPosition }],
 		rightEntries: [
 			pluginScale({}),
-			{ id: 'mockAttributions', component: MockAttributions },
+			pluginAttributions({
+				icons: {
+					close: 'kern-icon--keyboard-arrow-up',
+				},
+				listenToChanges: [
+					{
+						key: 'activeBackgroundId',
+						plugin: 'layerChooser',
+					},
+					{
+						key: 'activeMaskIds',
+						plugin: 'layerChooser',
+					},
+					{
+						key: 'zoom',
+					},
+				],
+				layerAttributions: [
+					{
+						id: basemapId,
+						title: 'snowbox.attributions.basemap',
+					},
+					{
+						id: basemapGreyId,
+						title: 'snowbox.attributions.basemapGrey',
+					},
+					{
+						id: reports,
+						title: 'snowbox.attributions.reports',
+					},
+					{
+						id: ausgleichsflaechen,
+						title: 'snowbox.attributions.ausgleichsflaechen',
+					},
+					{
+						id: denkmal,
+						title: `Karte Kulturdenkmale (Denkmalliste): © <a href="https://www.schleswig-holstein.de/DE/landesregierung/ministerien-behoerden/LD/ld_node.html" target="_blank">Landesamt für Denkmalpflege</a> <MONTH> <YEAR>`,
+					},
+				],
+			}),
 		],
 	})
 )

src/core/stores/index.ts

@@ -44,6 +44,14 @@ export const useCoreStore = defineStore('core', () => {
 		 */
 		clientHeight: computed(() => mainStore.clientHeight),
 
+		/**
+		 * The current width of the map.
+		 *
+		 * @alpha
+		 * @readonly
+		 */
+		clientWidth: computed(() => mainStore.clientWidth),
+
 		/**
 		 * Returns the current runtime configuration.
 		 *

src/core/types/main.ts

@@ -1,5 +1,6 @@
 import type { VueElement } from 'vue'
 
+import type { AttributionsPluginOptions } from '@/plugins/attributions'
 import type { FooterPluginOptions } from '@/plugins/footer'
 import type { FullscreenPluginOptions } from '@/plugins/fullscreen'
 import type { GeoLocationPluginOptions } from '@/plugins/geoLocation'
@@ -301,6 +302,9 @@ export interface MapConfiguration extends MasterportalApiConfiguration {
 	// TODO: Generate this section via types/plugin.ts
 	/* eslint-disable perfectionist/sort-interfaces */
 
+	/** Configuration for attributions plugin. */
+	attributions?: AttributionsPluginOptions
+
 	/** Configuration for footer plugin. */
 	footer?: FooterPluginOptions
 

src/core/types/plugin.ts

@@ -1,6 +1,9 @@
 import type { SetupStoreDefinition } from 'pinia'
 import type { Component } from 'vue'
 
+import type { PluginId as AttributionsPluginId } from '@/plugins/attributions'
+import type { resourcesEn as AttributionsResources } from '@/plugins/attributions/locales'
+import type { useAttributionsStore as AttributionsStore } from '@/plugins/attributions/store'
 import type { PluginId as FooterPluginId } from '@/plugins/footer'
 import type { resourcesEn as FooterResources } from '@/plugins/footer/locales'
 import type { useFooterStore as FooterStore } from '@/plugins/footer/store'
@@ -84,6 +87,7 @@ export type PolarPluginStore<
 
 /** @internal */
 export type BundledPluginId =
+	| typeof AttributionsPluginId
 	| typeof FooterPluginId
 	| typeof FullscreenPluginId
 	| typeof GeoLocationPluginId
@@ -106,6 +110,7 @@ type GetPluginStore<
 
 /** @internal */
 export type BundledPluginStores<T extends BundledPluginId> =
+	| GetPluginStore<T, typeof AttributionsPluginId, typeof AttributionsStore>
 	| GetPluginStore<T, typeof FooterPluginId, typeof FooterStore>
 	| GetPluginStore<T, typeof FullscreenPluginId, typeof FullscreenStore>
 	| GetPluginStore<T, typeof GeoLocationPluginId, typeof GeoLocationStore>
@@ -129,6 +134,11 @@ type GetPluginResources<
 
 /** @internal */
 export type BundledPluginLocaleResources<T extends BundledPluginId> =
+	| GetPluginResources<
+			T,
+			typeof AttributionsPluginId,
+			typeof AttributionsResources
+	  >
 	| GetPluginResources<T, typeof FooterPluginId, typeof FooterResources>
 	| GetPluginResources<T, typeof FullscreenPluginId, typeof FullscreenResources>
 	| GetPluginResources<

src/plugins/attributions/components/AttributionContent.ce.vue

@@ -0,0 +1,94 @@
+<template>
+	<PolarCard
+		:style="`width: ${width}; max-width: ${maxWidth}`"
+		:class="
+			renderType === 'footer' && layout === 'nineRegions'
+				? 'polar-plugin-attributions-footer'
+				: ''
+		"
+	>
+		<header v-if="renderType !== 'footer'" class="kern-card__header">
+			<h2 class="kern-title">{{ $t(($) => $.title, { ns: PluginId }) }}</h2>
+		</header>
+		<section ref="sources" class="kern-card__body">
+			<!-- NOTE: The usage of v-html is considered unsafe as it
+        opens a window for XSS attacks. In this case, the information is retrieved
+        from the mapConfiguration. This is fine by configuration. -->
+			<!-- eslint-disable vue/no-v-html -->
+			<p
+				v-for="(text, i) in cardText"
+				:key="i"
+				class="kern-body"
+				v-html="text"
+			/>
+			<!-- eslint-enable vue/no-v-html -->
+		</section>
+	</PolarCard>
+</template>
+
+<script lang="ts" setup>
+import { t } from 'i18next'
+import { storeToRefs } from 'pinia'
+import { computed, nextTick, onMounted, useTemplateRef } from 'vue'
+
+import PolarCard from '@/components/PolarCard.ce.vue'
+import { useCoreStore } from '@/core/stores'
+
+import { useAttributionsStore } from '../store'
+import { PluginId } from '../types'
+
+const coreStore = useCoreStore()
+const attributionsStore = useAttributionsStore()
+
+const { renderType } = storeToRefs(attributionsStore)
+const { layout } = storeToRefs(coreStore)
+
+const sources = useTemplateRef('sources')
+
+const cardText = computed(() =>
+	attributionsStore.mapInfo.map((x) => {
+		// This reactive value needs to recompute on language changes.
+		// eslint-disable-next-line @typescript-eslint/no-unused-expressions
+		coreStore.language
+		return t(($) => $[x], {
+			MONTH: `${new Date().getMonth() + 1}`.padStart(2, '0'),
+			YEAR: new Date().getFullYear().toString(),
+			ns: PluginId,
+		})
+	})
+)
+const maxWidth = computed(() =>
+	renderType.value === 'independent'
+		? coreStore.hasWindowSize && coreStore.hasSmallWidth
+			? coreStore.clientWidth * 0.85
+			: 1080
+		: 'inherit'
+)
+const width = computed(() =>
+	renderType.value === 'independent' ? attributionsStore.windowWidth : 'inherit'
+)
+
+onMounted(() => {
+	// NOTE: sources will always be defined unless someone removes the ref from the section element
+	const links = (sources.value as HTMLElement).getElementsByTagName('a')
+	if (links.length > 0) {
+		void nextTick(() => {
+			;(links[0] as HTMLAnchorElement).focus()
+		})
+	}
+})
+</script>
+
+<style scoped>
+.kern-card {
+	margin: 0 var(--kern-metric-space-small);
+
+	.kern-body {
+		padding: 0;
+	}
+}
+
+.polar-plugin-attributions-footer {
+	margin: var(--kern-metric-space-small);
+}
+</style>

src/plugins/attributions/components/AttributionsWrapper.ce.vue

@@ -0,0 +1,15 @@
+<template>
+	<StandardLayoutAttributions v-if="layout === 'standard'" />
+	<NineLayoutAttributions v-else />
+</template>
+
+<script lang="ts" setup>
+import { storeToRefs } from 'pinia'
+
+import { useCoreStore } from '@/core/stores'
+
+import NineLayoutAttributions from './NineLayoutAttributions.ce.vue'
+import StandardLayoutAttributions from './StandardLayoutAttributions.ce.vue'
+
+const { layout } = storeToRefs(useCoreStore())
+</script>

src/plugins/attributions/components/NineLayoutAttributions.ce.vue

@@ -0,0 +1,65 @@
+<template>
+	<div
+		v-if="renderType === 'independent'"
+		class="polar-plugin-attributions-wrapper"
+	>
+		<template v-if="openLeft">
+			<PolarIconButton
+				:hint="
+					$t(($) => $.button[`${windowIsOpen ? 'close' : 'open'}Title`], {
+						ns: PluginId,
+					})
+				"
+				:icon="mapInfoIcon"
+				tooltip-position="left"
+				@click="toggleMapInfo"
+			/>
+			<AttributionContent v-if="windowIsOpen" />
+		</template>
+		<template v-else>
+			<AttributionContent v-if="windowIsOpen" />
+			<PolarIconButton
+				:hint="
+					$t(($) => $.button[`${windowIsOpen ? 'close' : 'open'}Title`], {
+						ns: PluginId,
+					})
+				"
+				:icon="mapInfoIcon"
+				tooltip-position="right"
+				@click="toggleMapInfo"
+			/>
+		</template>
+	</div>
+	<AttributionContent v-else />
+</template>
+
+<script lang="ts" setup>
+import { storeToRefs } from 'pinia'
+import { computed } from 'vue'
+
+import PolarIconButton from '@/components/PolarIconButton.ce.vue'
+import { useCoreStore } from '@/core/stores'
+
+import { useAttributionsStore } from '../store'
+import { PluginId } from '../types'
+import AttributionContent from './AttributionContent.ce.vue'
+
+const attributionsStore = useAttributionsStore()
+const { mapInfoIcon, renderType, windowIsOpen } = storeToRefs(attributionsStore)
+const openLeft = computed(() =>
+	useCoreStore().configuration.attributions?.layoutTag?.includes('right')
+)
+function toggleMapInfo() {
+	windowIsOpen.value = !windowIsOpen.value
+}
+</script>
+
+<style scoped>
+.polar-plugin-attributions-wrapper {
+	display: flex;
+	flex-direction: row;
+	justify-content: flex-end;
+	align-items: flex-end;
+	padding: 6px;
+}
+</style>