PB-2337: compact overflowing map attributions

packages/mapviewer/src/modules/i18n/locales/de.json

@@ -27,6 +27,9 @@
     "appcache_update_available": "Neue Version der Offline Funktion verfügbar. Wollen Sie sie laden?",
     "approx_abbr": "ca.",
     "are": "ARE",
+    "attribution_overflow_hide_sources": "Weitere Quellenangaben ausblenden",
+    "attribution_overflow_show_source": "Eine weitere Quellenangabe anzeigen",
+    "attribution_overflow_show_sources": "{count} weitere Quellenangaben anzeigen",
     "are_service_link_href": "http://www.are.admin.ch/index.html?lang=de",
     "are_service_link_label": "www.are.admin.ch",
     "area": "Fläche",

packages/mapviewer/src/modules/i18n/locales/en.json

@@ -27,6 +27,9 @@
     "appcache_update_available": "A new version of offline function is available. Load it?",
     "approx_abbr": "approx.",
     "are": "ARE",
+    "attribution_overflow_hide_sources": "Hide additional attribution sources",
+    "attribution_overflow_show_source": "Show 1 more attribution source",
+    "attribution_overflow_show_sources": "Show {count} more attribution sources",
     "are_service_link_href": "http://www.are.admin.ch/index.html?lang=en",
     "are_service_link_label": "www.are.admin.ch",
     "area": "Area",

packages/mapviewer/src/modules/i18n/locales/fr.json

@@ -27,6 +27,9 @@
     "appcache_update_available": "Une mise à jour du site est disponible. Voulez-vous l'utiliser?",
     "approx_abbr": "env.",
     "are": "ARE",
+    "attribution_overflow_hide_sources": "Masquer les autres sources d'attribution",
+    "attribution_overflow_show_source": "Afficher une autre source d'attribution",
+    "attribution_overflow_show_sources": "Afficher {count} autres sources d'attribution",
     "are_service_link_href": "http://www.are.admin.ch/index.html?lang=fr",
     "are_service_link_label": "www.are.admin.ch",
     "area": "Aire",

packages/mapviewer/src/modules/i18n/locales/it.json

@@ -27,6 +27,9 @@
     "appcache_update_available": "È a disposizione un aggiornamento del sito. Desiderate utilizzarlo?",
     "approx_abbr": "ca.",
     "are": "ARE",
+    "attribution_overflow_hide_sources": "Nascondi altre fonti di attribuzione",
+    "attribution_overflow_show_source": "Mostra un'altra fonte di attribuzione",
+    "attribution_overflow_show_sources": "Mostra altre {count} fonti di attribuzione",
     "are_service_link_href": "http://www.are.admin.ch/index.html?lang=it",
     "are_service_link_label": "www.are.admin.ch",
     "area": "Zona",

packages/mapviewer/src/modules/i18n/locales/rm.json

@@ -27,6 +27,9 @@
     "appcache_update_available": "Ina nova versiun stat a disposiziun offline. La vulais Vus chargiar giu?",
     "approx_abbr": "ca.",
     "are": "ARE",
+    "attribution_overflow_hide_sources": "Zuppentar ulteriuras funtaunas d'attribuziun",
+    "attribution_overflow_show_source": "Mussar ina ulteriura funtauna d'attribuziun",
+    "attribution_overflow_show_sources": "Mussar {count} ulteriuras funtaunas d'attribuziun",
     "are_service_link_href": "http://www.are.admin.ch/index.html?lang=de",
     "are_service_link_label": "www.are.admin.ch",
     "area": "Surfatscha",

packages/mapviewer/src/modules/map/components/footer/MapFooterAttributionItem.vue

@@ -1,5 +1,5 @@
 <script setup>
-const { sourceId, sourceName, sourceUrl, hasDataDisclaimer, isLast } = defineProps({
+const { sourceId, sourceName, sourceUrl, hasDataDisclaimer, isLast, isTruncated } = defineProps({
     sourceId: {
         type: String,
         required: true,
@@ -20,6 +20,10 @@ const { sourceId, sourceName, sourceUrl, hasDataDisclaimer, isLast } = definePro
         type: Boolean,
         default: false,
     },
+    isTruncated: {
+        type: Boolean,
+        default: false,
+    },
 })
 </script>
 
@@ -29,9 +33,15 @@ const { sourceId, sourceName, sourceUrl, hasDataDisclaimer, isLast } = definePro
         :id="`source-${sourceId}`"
         :href="sourceUrl"
         :target="sourceUrl ? '_blank' : null"
+        :rel="sourceUrl ? 'noopener noreferrer' : null"
         class="map-footer-attribution-source clear-no-ios-long-press"
-        :class="{ 'text-primary': hasDataDisclaimer, 'is-link': sourceUrl || hasDataDisclaimer }"
+        :class="{
+            'text-primary': hasDataDisclaimer,
+            'is-link': sourceUrl || hasDataDisclaimer,
+            'is-truncated': isTruncated,
+        }"
         :data-cy="`layer-copyright-${sourceName}`"
+        :title="sourceName"
     >
         {{ `${sourceName}${isLast ? '' : ','}` }}
     </component>
@@ -44,6 +54,15 @@ const { sourceId, sourceName, sourceUrl, hasDataDisclaimer, isLast } = definePro
     margin-left: 2px;
     color: $black;
 
+    &.is-truncated {
+        display: inline-block;
+        max-width: min(16rem, 28vw);
+        overflow: hidden;
+        text-overflow: ellipsis;
+        vertical-align: bottom;
+        white-space: nowrap;
+    }
+
     &.is-link {
         text-decoration: none;
         &:hover {

packages/mapviewer/src/modules/map/components/footer/MapFooterAttributionList.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useStore } from 'vuex'
 
@@ -8,6 +8,7 @@ import ThirdPartyDisclaimer from '@/utils/components/ThirdPartyDisclaimer.vue'
 
 const store = useStore()
 const { t } = useI18n()
+const isExpanded = ref(false)
 
 const visibleLayers = computed(() => store.getters.visibleLayers)
 const currentBackgroundLayer = computed(() => store.getters.currentBackgroundLayer)
@@ -19,15 +20,16 @@ const layers = computed(() => {
         layersWithAttributions.push(currentBackgroundLayer.value)
     }
     layersWithAttributions.push(
-        ...visibleLayers.value.filter((layer) => layer.attributions.length > 0)
+        ...visibleLayers.value.filter((layer) => (layer.attributions ?? []).length > 0)
     )
     return layersWithAttributions
 })
 
 const sources = computed(() => {
     return layers.value
-        .map((layer) => {
-            return layer.attributions.map((attribution) => {
+        .flatMap((layer) => {
+            const isLocalFile = store.getters.isLocalFile(layer)
+            return (layer.attributions ?? []).map((attribution) => {
                 return {
                     id: attribution.name.replace(/[._]/g, '-'),
                     name: attribution.name,
@@ -37,26 +39,62 @@ const sources = computed(() => {
                         layer.isExternal,
                         layer.baseUrl
                     ),
-                    isLocalFile: store.getters.isLocalFile(layer),
+                    isLocalFile,
+                    isTruncated: isLocalFile,
                 }
             })
         })
-        .flat()
         .filter((attribution, index, array) => {
             const firstIndex = array.findIndex((item) => item.name === attribution.name)
             return index === firstIndex
         })
 })
+
+const VISIBLE_SOURCE_COUNT = 4
+const primarySources = computed(() => sources.value.filter((source) => !source.isLocalFile))
+const localSources = computed(() => sources.value.filter((source) => source.isLocalFile))
+const visibleLocalSourceCount = computed(() =>
+    Math.max(VISIBLE_SOURCE_COUNT - primarySources.value.length, 0)
+)
+const inlineSources = computed(() => [
+    ...primarySources.value,
+    ...localSources.value.slice(0, visibleLocalSourceCount.value),
+])
+const expandedSources = computed(() => localSources.value.slice(visibleLocalSourceCount.value))
+const hiddenSourceCount = computed(() => expandedSources.value.length)
+const isCompact = computed(() => hiddenSourceCount.value > 0)
+const toggleButtonText = computed(() => (isExpanded.value ? '-' : `+${hiddenSourceCount.value}`))
+
+const expandButtonLabel = computed(() => {
+    if (isExpanded.value) {
+        return t('attribution_overflow_hide_sources')
+    }
+    return t(
+        hiddenSourceCount.value === 1
+            ? 'attribution_overflow_show_source'
+            : 'attribution_overflow_show_sources',
+        { count: hiddenSourceCount.value }
+    )
+})
+
+function closeExpanded() {
+    isExpanded.value = false
+}
+
+function toggleExpanded() {
+    isExpanded.value = !isExpanded.value
+}
 </script>
 
 <template>
     <div
-        class="map-footer-attribution"
+        v-click-outside="closeExpanded"
+        class="map-footer-attribution d-inline-flex align-items-center flex-wrap"
         data-cy="layers-copyrights"
     >
         <span v-if="sources.length > 0">{{ t('copyright_data') }}</span>
         <div
-            v-for="(source, index) in sources"
+            v-for="(source, index) in inlineSources"
             :key="source.name"
             class="d-inline-flex"
         >
@@ -67,22 +105,70 @@ const sources = computed(() => {
                 :is-local-file="source.isLocalFile"
             >
                 <MapFooterAttributionItem
-                    :source-id="source.id"
+                    :source-id="`${source.id}-${index}`"
                     :source-name="source.name"
                     :source-url="source.url"
                     :has-data-disclaimer="true"
-                    :is-last="index === sources.length - 1"
+                    :is-last="!isCompact && index === inlineSources.length - 1"
+                    :is-truncated="source.isTruncated"
                 />
             </ThirdPartyDisclaimer>
             <MapFooterAttributionItem
                 v-else
-                :source-id="source.id"
+                :source-id="`${source.id}-${index}`"
                 :source-name="source.name"
                 :source-url="source.url"
                 :has-data-disclaimer="false"
-                :is-last="index === sources.length - 1"
+                :is-last="!isCompact && index === inlineSources.length - 1"
+                :is-truncated="source.isTruncated"
             />
         </div>
+        <button
+            v-if="isCompact"
+            type="button"
+            class="map-footer-attribution-toggle btn btn-light btn-sm ms-1 border px-1 py-0"
+            data-cy="attribution-expand-toggle"
+            :title="expandButtonLabel"
+            @click="toggleExpanded"
+        >
+            {{ toggleButtonText }}
+        </button>
+        <div
+            v-if="isCompact && isExpanded"
+            class="map-footer-attribution-expanded-list position-absolute d-flex flex-column end-0 gap-1 overflow-y-auto rounded border bg-white p-2 text-start text-wrap shadow-sm"
+            data-cy="attribution-expanded-list"
+        >
+            <div
+                v-for="(source, index) in expandedSources"
+                :key="source.name"
+                class="d-flex lh-base"
+            >
+                <ThirdPartyDisclaimer
+                    v-if="source.hasDataDisclaimer"
+                    :source-name="source.name"
+                    :complete-disclaimer-on-click="!source.url"
+                    :is-local-file="source.isLocalFile"
+                >
+                    <MapFooterAttributionItem
+                        :source-id="`${source.id}-expanded-${index}`"
+                        :source-name="source.name"
+                        :source-url="source.url"
+                        :has-data-disclaimer="true"
+                        :is-last="true"
+                        :is-truncated="source.isTruncated"
+                    />
+                </ThirdPartyDisclaimer>
+                <MapFooterAttributionItem
+                    v-else
+                    :source-id="`${source.id}-expanded-${index}`"
+                    :source-name="source.name"
+                    :source-url="source.url"
+                    :has-data-disclaimer="false"
+                    :is-last="true"
+                    :is-truncated="source.isTruncated"
+                />
+            </div>
+        </div>
     </div>
 </template>
 
@@ -96,5 +182,18 @@ const sources = computed(() => {
     text-align: center;
     position: relative;
     pointer-events: all;
+    max-width: calc(100vw - 0.5rem);
+}
+
+.map-footer-attribution-toggle {
+    font-size: inherit;
+    line-height: 1.2;
+}
+
+.map-footer-attribution-expanded-list {
+    bottom: calc(100% + 0.25rem);
+    z-index: $zindex-desktop-footer-infobox;
+    max-width: min(24rem, calc(100vw - 1rem));
+    max-height: 30vh;
 }
 </style>