BurdaMagazinOrg · Nicozilla · May 19, 2020 · May 19, 2020 · May 19, 2020 · May 20, 2020
diff --git a/infinite_amp.libraries.yml b/infinite_amp.libraries.yml
@@ -20,6 +20,17 @@ amp.amp-carousel:
   js:
     https://cdn.ampproject.org/v0/amp-carousel-0.1.js: { type: external, minified: true, attributes: { custom-element: "amp-carousel", async: true } }
 
+amp.amp-consent:
+  remote: https://cdn.ampproject.org
+  header: true
+  version: 0.1
+  license:
+    name: apache
+    url: https://github.com/ampproject/amphtml/blob/master/LICENSE
+    gpl-compatible: false
+  js:
+    https://cdn.ampproject.org/v0/amp-consent-0.1.js: { type: external, minified: true, attributes: { custom-element: "amp-consent", async: true } }
+
 amp.nexxtv-player:
   remote: https://cdn.ampproject.org
   header: true

diff --git a/infinite_amp.theme b/infinite_amp.theme
@@ -442,6 +442,7 @@ function infinite_amp_form_system_theme_settings_alter(&$form, &$form_state) {
 function infinite_amp_preprocess_html(&$variables) {
   $variables['#attached']['library'][] = 'infinite_amp/amp.ad';
   $variables['#attached']['library'][] = 'infinite_amp/amp.amp-carousel';
+  $variables['#attached']['library'][] = 'infinite_amp/amp.amp-consent';
   $variables['#attached']['library'][] = 'infinite_amp/amp.list';
   $variables['#attached']['library'][] = 'infinite_amp/amp.mustache';
   $variables['#attached']['library'][] = 'infinite_amp/amp.social-share';

diff --git a/sass/_components.base.scss b/sass/_components.base.scss
@@ -1,14 +1,15 @@
-@import "components/type";
-@import "components/regions";
-@import "components/ads";
-@import "components/authors";
-@import "components/contents";
-@import "components/medias";
-@import "components/socials";
-@import "components/products";
-@import "components/teasers";
-@import "components/look";
-@import "components/affiliatelinks";
-@import "components/footer";
+@import 'components/type';
+@import 'components/regions';
+@import 'components/ads';
+@import 'components/authors';
+@import 'components/contents';
+@import 'components/medias';
+@import 'components/socials';
+@import 'components/products';
+@import 'components/teasers';
+@import 'components/look';
+@import 'components/affiliatelinks';
+@import 'components/footer';
+@import 'components/consent';
 
-@import "pages/common";
+@import 'pages/common';
diff --git a/sass/components/_ads.scss b/sass/components/_ads.scss
@@ -19,3 +19,7 @@
     max-height: 20px;
   }
 }
+
+.region-marketing [data-block-on-consent] {
+  background-color: $color-gray-6;
+}
diff --git a/sass/components/_consent.scss b/sass/components/_consent.scss
@@ -0,0 +1,179 @@
+.consent {
+  align-items: center;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  height: 100vh;
+  justify-items: center;
+}
+
+#consent__prompt-btn {
+  align-items: center;
+  background-color: rgb(72, 72, 74);
+  border-radius: 50px;
+  border: none;
+  bottom: $grid-unit-2;
+  cursor: pointer;
+  display: flex;
+  height: 40px;
+  justify-content: center;
+  outline: none;
+  position: fixed;
+  right: $grid-unit-2;
+  width: 40px;
+  z-index: 2147483639;
+
+  path {
+    fill: $color-white;
+  }
+}
+
+.consent__content {
+  padding: 1.5rem;
+  background-color: $color-white;
+
+  p {
+    margin-bottom: $grid-unit-2;
+
+    a {
+      text-decoration: underline;
+    }
+  }
+
+  .consent__title {
+    @include text-helper($font-headline, $grid-unit-2);
+    margin-bottom: $grid-unit-2;
+    letter-spacing: 0;
+  }
+
+  .consent__button-wrapper {
+    display: flex;
+  }
+
+  button {
+    @include button();
+    @include button--lg();
+    border-radius: 3px;
+    flex: 1;
+    text-transform: none;
+    padding: 0;
+
+    a {
+      display: block;
+      padding-left: $grid-unit-1;
+      padding-right: $grid-unit-1;
+
+
+      &:hover {
+        color: inherit;
+      }
+    }
+  }
+
+  .consent__button--accept {
+    background-color: rgb(72, 72, 74);
+    border: none;
+    color: #fff;
+    outline: none;
+  }
+
+  .consent__button--reject {
+    background-color: $color-white;
+    border: 1px solid rgb(72, 72, 74);
+    color: rgb(72, 72, 74);
+    fill: rgb(72, 72, 74);
+    margin-left: 4%;
+  }
+}
+
+@mixin placeholder($bg-size: contain, $bg-pos: bottom) {
+  align-items: center;
+  border: 1px solid rgb(204, 214, 221);
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  justify-content: center;
+  left: 0;
+  position: absolute;
+  top: 0;
+  width: 100%;
+
+  &:before {
+    content: ' ';
+    background-position-y: $bg-pos;
+    background-repeat: no-repeat;
+    background-size: $bg-size;
+    height: 50px;
+    width: 50px;
+  }
+
+  button {
+    @include button();
+    @include button--md();
+    @include button--white();
+    margin-top: $grid-unit-2;
+  }
+}
+
+.item-media__wrapper {
+  position: relative;
+
+  .item-media__consent {
+    display: none;
+  }
+
+  .amp-notbuilt + .item-media__consent {
+    @include placeholder();
+  }
+
+  /* native ampshared.css issue */
+  amp-instagram {
+    background-color: transparent;
+  }
+
+  amp-instagram.amp-notbuilt + .item-media__consent {
+    &:before {
+      background-image: url(/themes/contrib/infinite/images/static/instagram.png);
+    }
+  }
+
+  amp-youtube.amp-notbuilt + .item-media__consent {
+    background-color: $color-dark-1;
+    border: none;
+
+    &:before {
+      background-image: url(/themes/contrib/infinite/images/static/youtube.png);
+      width: 150px;
+    }
+  }
+
+  amp-pinterest.amp-notbuilt + .item-media__consent {
+    &:before {
+      background-image: url(/themes/contrib/infinite/images/static/pinterest.png);
+    }
+  }
+
+  amp-twitter.amp-notbuilt + .item-media__consent {
+    &:before {
+      background-image: url(/themes/contrib/infinite/images/static/twitter.png);
+    }
+  }
+
+  amp-nexxtv-player.amp-notbuilt + .item-media__consent {
+    background-color: $color-dark-1;
+    border: none;
+
+    &:before {
+      align-items: center;
+      background-image: url(/themes/contrib/infinite/images/static/play_icon.png);
+      background-position-x: center;
+      background-position-y: center;
+      background-size: 12px;
+      border-radius: 50%;
+      border: 1px solid $color-white;
+      color: white;
+      content: ' ';
+      display: flex;
+      justify-content: center;
+    }
+  }
+}
diff --git a/templates/ad-entity-context.html.twig b/templates/ad-entity-context.html.twig
@@ -1,3 +1,3 @@
-<amp-analytics type="{{ context_id }}" id="{{ context_id }}">
+<amp-analytics type="{{ context_id }}" id="{{ context_id }}" data-block-on-consent="_till_accepted">
 <script type="application/json" data-ad-entity-context="{{ context_id }}">{{ plugin.JsonEncode(context)|raw }}</script>
 </amp-analytics>
diff --git a/templates/ads/amp-ad.html.twig b/templates/ads/amp-ad.html.twig
@@ -0,0 +1,14 @@
+{#
+/**
+ * @file
+ * Template for an amp-ad.
+ *
+ * Available variables:
+ * - type: The ad network.
+ * - attributes: The HTML attributes for the amp-ad.
+ *
+ * @see template_preprocess_amp_ad()
+ */
+#}
+<amp-ad data-block-on-consent="_till_accepted" {{ attributes }} type="{{ type }}">
+</amp-ad>
diff --git a/templates/ads/dfp-amp--dfp-for-amp-flying-carpet.html.twig b/templates/ads/dfp-amp--dfp-for-amp-flying-carpet.html.twig
@@ -7,7 +7,7 @@
     {% set rtc_config_value = rtc_config|json_encode(constant('JSON_HEX_TAG') b-or constant('JSON_HEX_APOS') b-or constant('JSON_HEX_QUOT') b-or constant('JSON_UNESCAPED_UNICODE')) %}
 {% endif %}
 
-<amp-fx-flying-carpet height="300px">
+<amp-fx-flying-carpet height="300px" data-block-on-consent="_till_accepted">
   <amp-ad{{attributes}} json='{{ json|json_encode(constant('JSON_HEX_TAG') b-or constant('JSON_HEX_APOS') b-or constant('JSON_HEX_QUOT') b-or constant('JSON_UNESCAPED_UNICODE'))|raw }}'
         {% if rtc_config %}
             rtc-config='{{ rtc_config_value|raw }}'

diff --git a/templates/ads/dfp-amp--dfp-for-amp-sticky.html.twig b/templates/ads/dfp-amp--dfp-for-amp-sticky.html.twig
@@ -6,7 +6,7 @@
   {% set rtc_config_value = rtc_config|json_encode(constant('JSON_HEX_TAG') b-or constant('JSON_HEX_APOS') b-or constant('JSON_HEX_QUOT') b-or constant('JSON_UNESCAPED_UNICODE')) %}
 {% endif %}
 
-<amp-sticky-ad layout="nodisplay">
+<amp-sticky-ad layout="nodisplay" data-block-on-consent="_till_accepted">
   <amp-ad{{ attributes }}
     json='{{ json|json_encode(constant('JSON_HEX_TAG') b-or constant('JSON_HEX_APOS') b-or constant('JSON_HEX_QUOT') b-or constant('JSON_UNESCAPED_UNICODE'))|raw }}'
     {% if rtc_config %}

diff --git a/templates/ads/dfp-amp.html.twig b/templates/ads/dfp-amp.html.twig
@@ -10,6 +10,7 @@
         {% if rtc_config %}
             rtc-config='{{ rtc_config_value|raw }}'
         {% endif %}
+        data-block-on-consent="_till_accepted"
 >
     <div placeholder></div>
     <div fallback></div>

diff --git a/templates/amp-analytics--googleanalytics.html.twig b/templates/amp-analytics--googleanalytics.html.twig
@@ -14,6 +14,7 @@
 <!-- Google Tag Manager -->
 <amp-analytics
   config="https://www.googletagmanager.com/amp.json?id={{ gtmID }}&gtm_auth={{ gtmAuth }}&gtm_preview={{ gtmPreview }}&gtm_cookies_win=x&gtm.url=SOURCE_URL"
+  data-block-on-consent
   data-credentials="include">
   <script type="application/json">
     {
@@ -34,7 +35,7 @@
 </amp-analytics>
 
 <!-- Google Analytics -->
-<amp-analytics type="googleanalytics">
+<amp-analytics type="googleanalytics" data-block-on-consent>
   <script type="application/json">
     {
       "vars": {

diff --git a/templates/consent/consent.html.twig b/templates/consent/consent.html.twig
@@ -0,0 +1,32 @@
+{% set url = url('<current>')|render|render~"?amp" %}
+
+<amp-consent layout="nodisplay" id="consent-element">
+  <script type="application/json">
+    {
+      "consentInstanceId": "my-consent",
+      "consentRequired": true,
+      "promptUI": "consent-ui"
+    }
+  </script>
+  <div id="consent-ui" class="consent">
+    <div class="consent__content">
+      <div class="consent__title">Verwalten Sie Ihre Privatsphäre</div>
+      <p>Wir tauschen Daten mit Drittanbietern aus, die uns helfen, unser Webangebot zu verbessern, zu finanzieren sowie personalisierter Inhalte darzustellen. Hierfür werden von uns und unseren Partnern Technologien wie Cookies verwendet. Um bestimmte Dienste verwenden zu dürfen, benötigen wir Ihre Einwilligung. Indem Sie „Akzeptieren” Klicken, stimmen Sie (jederzeit widerruflich) dieser Datenverarbeitung zu. Weitere Informationen finden Sie in unserer <a href="/datenschutz" target="_self">Datenschutzerklärung</a>.</p>
+      <div id="consent-ui-1" class="consent__button-wrapper">
+        <button class="consent__button--accept" on="tap:consent-element.accept" role="button">Alles akzeptieren</button>
+        <button class="consent__button--reject" on="tap:consent-element.reject" role="button">Alles ablehnen</button>
+      </div>
+
+      <div id="consent-ui-2" class="consent__button-wrapper" hidden>
+        <button class="consent__button--accept" on="tap:consent-element.accept" role="button"><a href="{{ url }}">Alles akzeptieren</a></button>
+        <button class="consent__button--reject" on="tap:consent-element.reject" role="button"><a href="{{ url }}">Alles ablehnen</a></button>
+      </div>
+    </div>
+  </div>
+</amp-consent>
+
+<button id="consent__prompt-btn" on="tap:consent-element.prompt(),consent-ui-2.show,consent-ui-1.hide">
+  <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 100 100">
+      <path class="c5wrmg" fill="#ffffff" d="M68.884 25.318c-6.503-3.34-12.126-4.757-18.867-4.757-6.706 0-13.074 1.586-18.866 4.757-.813.439-1.83.135-2.303-.674-.44-.81-.136-1.856.677-2.295 6.3-3.407 13.21-5.162 20.492-5.162 7.215 0 13.515 1.586 20.425 5.129.847.438 1.152 1.45.711 2.26-.304.607-.88.945-1.49.945-.27 0-.542-.068-.779-.203zm-47.895 16.87c-.341 0-.683-.098-.99-.293-.786-.521-.956-1.53-.41-2.28 3.38-4.556 7.684-8.137 12.806-10.644 10.724-5.273 24.452-5.306 35.21-.032 5.122 2.506 9.425 6.055 12.806 10.58.546.715.376 1.757-.41 2.278-.785.52-1.844.358-2.39-.39-3.074-4.102-6.967-7.325-11.577-9.571-9.802-4.785-22.335-4.785-32.102.033-4.644 2.278-8.537 5.533-11.611 9.635-.273.456-.785.684-1.332.684zm22.028 38.541c-.449 0-.897-.162-1.208-.487-3.002-2.823-4.624-4.64-6.936-8.566-2.38-3.991-3.623-8.858-3.623-14.082 0-9.637 8.765-17.49 19.531-17.49 10.767 0 19.532 7.853 19.532 17.49 0 .908-.76 1.622-1.726 1.622s-1.725-.714-1.725-1.622c0-7.853-7.212-14.245-16.08-14.245-8.87 0-16.081 6.392-16.081 14.245 0 4.672 1.104 8.988 3.209 12.492 2.208 3.732 3.727 5.322 6.384 7.853.655.649.655 1.654 0 2.303-.38.325-.828.487-1.277.487zm23.652-5.208c-4.185 0-7.878-1-10.903-2.967-5.24-3.368-8.37-8.836-8.37-14.637 0-.934.774-1.667 1.758-1.667.985 0 1.759.733 1.759 1.667 0 4.701 2.532 9.135 6.823 11.87 2.497 1.6 5.416 2.366 8.933 2.366.844 0 2.25-.1 3.658-.333.95-.167 1.864.433 2.04 1.367.175.9-.458 1.767-1.442 1.934-2.005.366-3.764.4-4.256.4zm-6.157 7.291c-.137 0-.308-.032-.445-.065-5.44-1.45-8.999-3.393-12.728-6.917-4.79-4.579-7.425-10.672-7.425-17.194 0-5.336 4.722-9.684 10.538-9.684 5.817 0 10.539 4.348 10.539 9.684 0 3.524 3.182 6.39 7.117 6.39 3.934 0 7.116-2.866 7.116-6.39 0-12.418-11.12-22.497-24.806-22.497-9.717 0-18.613 5.204-22.616 13.274-1.335 2.668-2.019 5.797-2.019 9.223 0 2.57.24 6.62 2.293 11.89.342.857-.103 1.812-.993 2.109-.89.329-1.882-.132-2.19-.956-1.676-4.314-2.497-8.596-2.497-13.043 0-3.953.787-7.543 2.326-10.672 4.551-9.19 14.645-15.151 25.696-15.151 15.568 0 28.228 11.56 28.228 25.79 0 5.336-4.722 9.684-10.538 9.684-5.817 0-10.539-4.348-10.539-9.684 0-3.524-3.182-6.39-7.117-6.39-3.934 0-7.116 2.866-7.116 6.39 0 5.632 2.258 10.903 6.398 14.855 3.25 3.096 6.364 4.809 11.188 6.094.924.23 1.437 1.152 1.198 2.009-.171.757-.89 1.251-1.608 1.251z"></path>
+  </svg>
+</button>
diff --git a/templates/media/amp-instagram.html.twig b/templates/media/amp-instagram.html.twig
@@ -0,0 +1,22 @@
+{#
+/**
+ * @file
+ * Template for amp-instagram.
+ *
+ * Available variables:
+ * - attributes: The HTML attributes for amp-instagram:
+ *   - layout: The layout of Instagram element.
+ *   - height: The height of Instagram element.
+ *   - width: The width of Instagram element.
+ *   - data-shortcode: The Instagram data-shortcode.
+ *
+ * @see template_preprocess_amp_instagram()
+ */
+#}
+<div class="item-media__wrapper">
+  <amp-instagram{{ attributes }} data-block-on-consent>
+  </amp-instagram>
+  <div class="item-media__consent">
+    <button on="tap:consent-element.prompt(),consent-ui-2.show,consent-ui-1.hide">Inhalt laden</button>
+  </div>
+</div>
diff --git a/templates/media/amp-pinterest-embed.html.twig b/templates/media/amp-pinterest-embed.html.twig
@@ -0,0 +1,23 @@
+{#
+/**
+ * @file
+ * Template for amp-pinterest-embed.
+ *
+ * Available variables:
+ * - attributes: The HTML attributes for amp-pinterest-embed:
+ *   - layout: The layout of Pinterest element.
+ *   - height: The height of Pinterest element.
+ *   - width: The width of Pinterest element.
+ *   - data-do: The type of Pinterest embed.
+ *   - data-url: The URL of the Pinterest resource.
+ *
+ * @see template_preprocess_amp_pinterest_embed()
+ */
+#}
+<div class="item-media__wrapper">
+  <amp-pinterest{{ attributes }} data-block-on-consent>
+  </amp-pinterest>
+  <div class="item-media__consent">
+    <button on="tap:consent-element.prompt(),consent-ui-2.show,consent-ui-1.hide">Inhalt laden</button>
+  </div>
+</div>