UHF-5047 map visibility cookie consent

hdbt.theme

@@ -137,7 +137,7 @@ function hdbt_preprocess_media(&$variables) {
   if (empty($variables['media']) || !$variables['media'] instanceof EntityInterface) {
     return;
   }
-  if ($variables['media']->bundle() === 'remote_video') {
+  if ($variables['media']->bundle() === 'remote_video' || $variables['media']->bundle() === 'hel_map') {
     $variables['privacy_policy_url'] = _hdbt_eu_cookie_compliance_get_privacy_policy_url();
     $variables['#attached']['library'][] = 'hdbt/embedded-content-cookie-compliance';
 
@@ -156,6 +156,15 @@ function hdbt_preprocess_media(&$variables) {
   }
 }
 
+/**
+ * Implements hook_preprocess_HOOK().
+ */
+function hdbt_preprocess_media__hel_map(&$variables) {
+  $map_url = $variables['media']->field_media_hel_map->uri;
+  $url_parts = parse_url($map_url);
+  $variables['map_service_url'] = $url_parts['scheme'] . "://" . $url_parts['host'];
+}
+
 /**
  * Helper function to get the settings from configurations.
  *

src/js/embedded-content-cookie-compliance.js

@@ -22,13 +22,18 @@
         iframeElement.title = attributes.title;
 
         const containerElement = document.createElement('div');
-        containerElement.classList.add('responsive-video-container');
         containerElement.appendChild(iframeElement);
-
-        $(`.embedded-content-cookie-compliance.media-${id}`)
-          .empty()
-          .append(containerElement)
-          .removeClass(`media-${id}`);
+        if (attributes.type === 'video') {
+          containerElement.classList.add('responsive-video-container'); 
+          $(`.embedded-content-cookie-compliance.media-${id}`)
+            .empty()
+            .append(containerElement)
+            .removeClass(`media-${id}`);
+        } else if (attributes.type === 'map') {
+          containerElement.classList.add('responsive-map-container');
+          $(`.embedded-content-cookie-compliance.media-${id}`)
+            .replaceWith(containerElement);
+        }
       }
 
       // Only load the embedded content once.

src/scss/06_components/paragraphs/_map.scss

@@ -40,16 +40,19 @@ $-map-aspect-ratio-mobile: 1;
 }
 
 .map {
-  height: 0;
   margin: $spacing 0;
-  padding-bottom: aspect-ratio-padding($-map-aspect-ratio-mobile);
   position: relative;
 
-  @include breakpoint($breakpoint-s) {
-    padding-bottom: aspect-ratio-padding($-map-aspect-ratio-desktop);
+  .responsive-map-container {
+    padding-bottom: aspect-ratio-padding($-map-aspect-ratio-mobile);
+    height: 0;
+    position: relative;
+
+    @include breakpoint($breakpoint-s) {
+      padding-bottom: aspect-ratio-padding($-map-aspect-ratio-desktop);
+    }
   }
 
-  > div,
   iframe {
     background-color: $color-black-10; // Add color to show a "placeholder" while the map is loading
     border: 0;

templates/media/media--hel-map.html.twig

@@ -0,0 +1,59 @@
+{#
+/**
+ * @file
+ * Theme override to present a media item.
+ *
+ * Available variables:
+ * - media: The media item, with limited access to object properties and
+ *   methods. Only method names starting with "get", "has", or "is" and
+ *   a few common methods such as "id", "label", and "bundle" are available.
+ *   For example:
+ *   - entity.getEntityTypeId() will return the entity type ID.
+ *   - entity.hasField('field_example') returns TRUE if the entity includes
+ *     field_example. (This does not indicate the presence of a value in this
+ *     field.)
+ *   Calling other methods, such as entity.delete(), will result in
+ *   an exception.
+ *   See \Drupal\Core\Entity\EntityInterface for a full list of methods.
+ * - name: Name of the media item.
+ * - content: Media content.
+ * - title_prefix: Additional output populated by modules, intended to be
+ *   displayed in front of the main title tag that appears in the template.
+ * - title_suffix: Additional output populated by modules, intended to be
+ *   displayed after the main title tag that appears in the template.
+ * - view_mode: View mode; for example, "teaser" or "full".
+ * - attributes: HTML attributes for the containing element.
+ * - title_attributes: Same as attributes, except applied to the main title
+ *   tag that appears in the template.
+ * - privacy_policy_url: The URL for the privacy policy page.
+ *
+ * @see template_preprocess_media()
+ */
+#}
+{% set media_id = media.id() %}
+{% set media_url = media.field_media_hel_map.value.0.uri %}
+{% set media_attributes = media.field_media_hel_map %}
+{% set link = content.field_media_hel_map.0['#link'] %}
+
+{% include '@hdbt/misc/embedded-content-cookie-compliance.twig' with {
+  media_url: media_url,
+  media_id: media.id,
+  media_service_url: map_service_url,
+  privacy_policy_url: privacy_policy_url,
+} %}
+
+{% set drupal_settings = {
+  '#attached': {
+    'drupalSettings': {
+      'embedded_media_attributes': {
+        (media_id): {
+          'src': media_url,
+          'title': media_attributes.value.0['title'],
+          'type': 'map',
+        }
+      }
+    }
+  }
+} %}
+{{ drupal_settings }}
+{{ link(link['#title'], link['#url'], link['#attributes']|merge({'class': 'map__external-link'})) }}

templates/media/media--remote-video.html.twig

@@ -32,44 +32,13 @@
 #}
 {% set media_url = media.field_media_oembed_video.0.value %}
 {% set media_attributes = content.field_media_oembed_video.0['#attributes'] %}
-<div class="embedded-content-cookie-compliance media-{{ media.id }}">
-  <div class="message">
-    {% include '@hdbt/misc/icon.twig' ignore missing with {icon: 'alert-circle-fill'} %}
-    <h2>{{ 'Content cannot be displayed'|t }}</h2>
-    <p>
-      {% trans %}
-        This content is hosted by {{ video_service_url }}. To see the content, switch over to the external site or modify your cookie settings to allow for preference and statistics cookies.
-      {% endtrans %}
-    </p>
-    <div class="buttons">
 
-      {% set external_link_attributes = {
-        'class': [
-          'hds-button',
-          'hds-button--primary',
-        ]
-      } %}
-
-      {% set external_link_title %}
-         <span class="hds-button__label">{{ 'See content on external site'|t }}</span>
-      {% endset %}
-
-      {{ link(external_link_title, media_url, external_link_attributes) }}
-
-      {% set link_title %}
-        <span class="hds-button__label">{{ 'Change cookie settings'|t }}</span>
-      {% endset %}
-      {% set link_attributes = {
-        'class': [
-          'hds-button',
-          'hds-button--secondary',
-        ],
-      } %}
-      {{ link(link_title, privacy_policy_url, link_attributes) }}
-
-    </div>
-  </div>
-</div>
+{% include '@hdbt/misc/embedded-content-cookie-compliance.twig' with {
+  media_url: media_url,
+  media_id: media.id,
+  media_service_url: video_service_url,
+  privacy_policy_url: privacy_policy_url,
+} %}
 
 {% set drupal_settings = {
   '#attached': {
@@ -80,6 +49,7 @@
           'height': media_attributes.height,
           'width': media_attributes.width,
           'title': iframe_title,
+          'type': 'video',
         }
       }
     }

templates/misc/embedded-content-cookie-compliance.twig

@@ -0,0 +1,38 @@
+<div class="embedded-content-cookie-compliance media-{{ media_id }}">
+  <div class="message">
+    {% include '@hdbt/misc/icon.twig' ignore missing with {icon: 'alert-circle-fill'} %}
+    <h2>{{ 'Content cannot be displayed'|t }}</h2>
+    <p>
+      {% trans %}
+        This content is hosted by {{ media_service_url }}. To see the content, switch over to the external site or modify your cookie settings to allow for preference and statistics cookies.
+      {% endtrans %}
+    </p>
+    <div class="buttons">
+
+      {% set external_link_attributes = {
+        'class': [
+          'hds-button',
+          'hds-button--primary',
+        ]
+      } %}
+
+      {% set external_link_title %}
+         <span class="hds-button__label">{{ 'See content on external site'|t }}</span>
+      {% endset %}
+
+      {{ link(external_link_title, media_url, external_link_attributes) }}
+
+      {% set link_title %}
+        <span class="hds-button__label">{{ 'Change cookie settings'|t }}</span>
+      {% endset %}
+      {% set link_attributes = {
+        'class': [
+          'hds-button',
+          'hds-button--secondary',
+        ],
+      } %}
+      {{ link(link_title, privacy_policy_url, link_attributes) }}
+
+    </div>
+  </div>
+</div>

translations/fi.po

@@ -134,16 +134,15 @@ msgid "The page you are trying to access has restricted access. You need to log
 msgstr "Sivu on nähtävillä vain kirjautuneille käyttäjille. Voit nähdä sivun sisällön jos kirjaudut sisään ja sinulla on riittävän laajat käyttöoikeudet."
 
 msgid ""
-"This content is hosted by @video_service_url. To see the content, "
+"This content is hosted by @media_service_url. To see the content, "
 "switch over to the external site or modify your cookie settings to "
 "allow for preference and statistics cookies."
 msgstr ""
-"Tämä sisältö haetaan osoitteesta @video_service_url. Sen "
+"Tämä sisältö haetaan osoitteesta @media_service_url. Sen "
 "näyttämiseen vaaditaan, että hyväksyt sivuston evästeet. Pääset "
 "näkemään sisällön joko siirtymällä ulkoiselle sivustolle tai "
 "sallimalla evästeasetuksista personointi- ja tilastointievästeet."
 
-
 msgid "This page is available to registered users only. If you have the necessary permissions, you can sign in to see the content."
 msgstr "Sivu näkyy vain kirjautuneille käyttäjille. Jos sinulla on riittävät käyttöoikeudet, näet sisällön kirjautumalla sisään."
 

translations/sv.po

@@ -137,11 +137,11 @@ msgid "The site is currently under maintenance"
 msgstr "Vi uppdaterar sidan som bäst"
 
 msgid ""
-"This content is hosted by @video_service_url. To see the content, "
+"This content is hosted by @media_service_url. To see the content, "
 "switch over to the external site or modify your cookie settings to "
 "allow for preference and statistics cookies."
 msgstr ""
-"Det här innehållet hämtas från @video_service_url. För att visa "
+"Det här innehållet hämtas från @media_service_url. För att visa "
 "innehållet krävs att du godkänner webbplatsens cookies. Du kan se "
 "innehållet antingen genom att gå till en extern webbplats eller "
 "genom att ge ditt samtycke till användningen av cookies för "