Merge remote-tracking branch 'origin/feat/41' into feat/41

# Conflicts:
#	components/Map/MapBase.vue
#	components/Map/MapPois.vue
#	components/PoisDetails/Route/RouteMap.vue
#	lib/markerLayerFactory.ts

components/Layout/Header.vue

@@ -7,7 +7,7 @@
       :logo-url="theme && theme.logo_url"
     />
 
-    <div class="tw-flex tw-justify-end">
+    <div class="tw-flex tw-justify-end print:tw-hidden">
       <slot></slot>
       <NavMenu :entries="navMenuEntries" />
     </div>

components/Layout/PoiLayout.vue

@@ -11,7 +11,7 @@
       <div v-if="icon" class="tw-flex tw-justify-center">
         <TeritorioIconBadge :color-fill="colorFill" size="2xl" :picto="icon" />
       </div>
-      <h1>{{ name }}</h1>
+      <h1 class="print:tw-pb-4">{{ name }}</h1>
       <slot name="actions"></slot>
       <slot name="body"></slot>
       <Footer :attributions="settings.attributions">

components/Map/MapBase.vue

@@ -223,7 +223,7 @@ export default defineNuxtComponent({
       features: MapPoi[],
       clusterPropertiesValues: string[],
       clusterPropertiesKeyExpression: maplibregl.ExpressionSpecification,
-      noCluster?: boolean
+      cluster?: boolean
     ) {
       if (this.map.getLayer(POI_LAYER)) {
         this.map.removeLayer(POI_LAYER)
@@ -256,7 +256,7 @@ export default defineNuxtComponent({
 
       this.map.addSource(POI_SOURCE, {
         type: 'geojson',
-        cluster: !noCluster,
+        cluster: cluster,
         clusterRadius: 32,
         clusterProperties: clusterProps,
         clusterMaxZoom: 15,

components/Map/MapPois.vue

@@ -61,9 +61,9 @@ export default defineNuxtComponent({
       type: Boolean,
       default: false,
     },
-    noCluster: {
+    cluster: {
       type: Boolean,
-      default: false,
+      default: true,
     },
   },
   setup() {
@@ -148,7 +148,7 @@ export default defineNuxtComponent({
           ['get', 'color_fill', ['get', 'display']],
           '#000000',
         ],
-        this.noCluster
+        this.cluster
       )
 
       if (this.featureIds) {

components/PoisCard/PoiCardContent.vue

@@ -17,6 +17,12 @@
           "
           class="tw-ml-6 tw-px-3 tw-py-1.5 tw-text-xs tw-text-zinc-800 tw-bg-zinc-100 hover:tw-bg-zinc-200 focus:tw-bg-zinc-200 tw-transition tw-transition-colors tw-rounded-md"
           :to="websiteDetails"
+          :style="
+            'background:' +
+            colorLine +
+            ';color:' +
+            pickTextColorBasedOnBgColor(colorLine, 'white')
+          "
           rel="noopener noreferrer"
           @click.stop="trackingPopupEvent('details')"
         >
@@ -26,6 +32,12 @@
           v-else
           class="tw-ml-6 tw-px-3 tw-py-1.5 tw-text-xs tw-text-zinc-800 tw-bg-zinc-100 hover:tw-bg-zinc-200 focus:tw-bg-zinc-200 tw-transition tw-transition-colors tw-rounded-md"
           :href="websiteDetails"
+          :style="
+            'background:' +
+            colorLine +
+            ';color:' +
+            pickTextColorBasedOnBgColor(colorLine, 'white')
+          "
           rel="noopener noreferrer"
           @click.stop="trackingPopupEvent('details')"
         >
@@ -143,6 +155,7 @@ import Fields from '~/components/PoisCard/Fields.vue'
 import FavoriteIcon from '~/components/UI/FavoriteIcon.vue'
 import TeritorioIcon from '~/components/UI/TeritorioIcon.vue'
 import { ApiPoi, ApiPoiId } from '~/lib/apiPois'
+import { pickTextColorBasedOnBgColor } from '~/lib/colorDefiner'
 import { coordinatesHref } from '~/lib/coordinates'
 import { favoritesStore } from '~/stores/favorite'
 import { mapStore } from '~/stores/map'
@@ -255,6 +268,7 @@ export default defineNuxtComponent({
   },
 
   methods: {
+    pickTextColorBasedOnBgColor,
     onZoomClick() {
       this.trackingPopupEvent('zoom')
       this.$emit('zoom-click', this.poi)

components/PoisCard/PoisDeck.vue

@@ -7,7 +7,7 @@
       :poi="item"
       :position="(index + 1).toString()"
       :class="[
-        'tw-grow-1',
+        'tw-grow-1 poi-deck',
         !isFavorite(item.properties.metadata.id) &&
           'tw-bg-zinc-200 tw-opacity-70',
       ]"

components/PoisDetails/Carousel.vue

@@ -10,7 +10,7 @@
     <v-carousel
       :show-arrows="false"
       :hide-delimiter-background="true"
-      class="mb-14"
+      class="tw-mb-14 print:tw-mb-6"
       :height="smallScreen ? 300 : 500"
     >
       <v-carousel-item v-for="(image, i) in images" :key="i">

components/PoisDetails/FieldsGroup.vue

@@ -6,7 +6,7 @@
           field.group !== undefined &&
           !isListEmpty(field.fields, properties, geom)
         "
-        class="block"
+        class="block print:tw-mb-2"
       >
         <div v-if="field.display_mode === 'standard'">
           <FieldsHeader
@@ -28,6 +28,7 @@
           v-else-if="field.display_mode === 'card'"
           :color-fill="colorFill"
           :icon="field.icon"
+          class="print:tw-hidden"
         >
           <FieldsHeader
             v-if="fieldTranslateK(field.group)"
@@ -153,4 +154,9 @@ export default defineNuxtComponent({
 .block {
   margin-bottom: 3rem;
 }
+@media print {
+  .block {
+    margin-bottom: 0.5rem !important;
+  }
+}
 </style>

components/PoisDetails/PoiDetails.vue

@@ -28,6 +28,7 @@
     </template>
     <template #actions>
       <Share
+        class="print:tw-hidden"
         :title="poi.properties.name"
         :href="
           poi.properties.editorial &&
@@ -68,7 +69,7 @@
               :extra-attributions="settings.attributions"
               :feature-ids="[id]"
               :features="[poi]"
-              class="tw-relative"
+              class="tw-relative poi-map"
               :off-map-attribution="true"
             />
           </template>

components/PoisDetails/Route/RouteMap.vue

@@ -6,7 +6,7 @@
       :feature-ids="[poiId]"
       :fullscreen-control="true"
       :off-map-attribution="true"
-      :no-cluster="noCluster"
+      :cluster="false"
     />
     <div class="detail-wrapper">
       <div v-if="points.length > 0" class="detail-left">
@@ -83,10 +83,6 @@ export default defineNuxtComponent({
       type: Boolean,
       required: true,
     },
-    noCluster: {
-      type: Boolean,
-      required: false,
-    },
   },
 
   data(): {

lib/colorDefiner.ts

@@ -0,0 +1,20 @@
+export function pickTextColorBasedOnBgColor(
+  bgColor: string,
+  lightColor?: string,
+  darkColor?: string
+) {
+  const color = bgColor.charAt(0) === '#' ? bgColor.substring(1, 7) : bgColor
+  const r = parseInt(color.substring(0, 2), 16) // hexToR
+  const g = parseInt(color.substring(2, 4), 16) // hexToG
+  const b = parseInt(color.substring(4, 6), 16) // hexToB
+  const uiColors = [r / 255, g / 255, b / 255]
+  const c = uiColors.map((col) => {
+    if (col <= 0.03928) {
+      return col / 12.92
+    }
+    return Math.pow((col + 0.055) / 1.055, 2.4)
+  })
+  const L = 0.2126 * c[0] + 0.7152 * c[1] + 0.0722 * c[2]
+
+  return L > 0.179 ? darkColor : lightColor
+}

lib/markerLayerFactory.ts

@@ -80,7 +80,7 @@ export function makerHtmlFactory(
   icon: string,
   thumbnail: string | undefined,
   size: string | null = null,
-  waypoint?: number
+  text?: string
 ): ITMarker {
   // Marker
   const el: HTMLElement = document.createElement('div')
@@ -101,7 +101,7 @@ export function makerHtmlFactory(
     picto: icon,
     image: thumbnail,
     size,
-    text: waypoint,
+    text: text,
   }).mount(el)
 
   return marker

pages/poi/[id]/details.vue

@@ -186,3 +186,20 @@ export default defineNuxtComponent({
   @extend .font-light;
 }
 </style>
+
+<style>
+body,
+#__nuxt,
+#__layout {
+  -webkit-print-color-adjust: exact;
+}
+
+img,
+.poi-deck,
+.poi-map,
+#route-map {
+  page-break-before: auto;
+  page-break-after: auto;
+  page-break-inside: avoid;
+}
+</style>

tailwind.config.js

@@ -29,6 +29,9 @@ module.exports = {
       flexBasis: {
         max: 'max-content',
       },
+      screens: {
+        print: { raw: 'print' },
+      },
     },
   },
   plugins: [require('@tailwindcss/forms'), require('@tailwindcss/typography')],