Cookie-Layer

Design

HTML
View
Context
Assets
Info
Notes


        
        
            <!-- Cookie-Layer -->
<form class="cookie-layer" action="#api-url">
    <div class="cookie-layer__inner">
        <p class="cookie-layer__text">Wir verwenden Cookies, um Ihnen die Inhalte und Funktionen der Website bestmöglich anzubieten. Darüber hinaus verwenden wir Cookies zur Analyse. Weiter Informationen erhalten Sie in unseren <a href="#">Datenschutzhinweisen</a>.</p>
        <div class="cookie-layer__options">
            <div class="cookie-layer__option">
                <div class="checkbox checkbox--default"><input class="checkbox__input" id="checkbox-|***1a114b***|" type="checkbox" name="technical" checked="checked" disabled="disabled" /><label class="checkbox__label" for="checkbox-|***1a114b***|">Technisch notwendige Cookies</label></div><button class="cookie-layer__option-hint" aria-describedby="tooltip-dd5267"><svg class="icon icon--info cookie-layer__option-hint__icon" viewBox="0 0 200 200" role="presentation">
                        <use xlink:href="#icon-info"></use>
                    </svg></button>
                <div class="cookie-layer__tooltip" id="tooltip-dd5267" role="tooltip">Etiam porta sem malesuada magna mollis euismod. Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Aenean lacinia bibendum nulla sed consectetur. Donec ullamcorper nulla non metus auctor fringilla. Donec sed odio dui. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.<div class="cookie-layer__tooltip__arrow" data-popper-arrow="data-popper-arrow"></div>
                </div>
            </div>
            <div class="cookie-layer__option">
                <div class="checkbox checkbox--default"><input class="checkbox__input" id="checkbox-|***c84d8e***|" type="checkbox" name="analytics" /><label class="checkbox__label" for="checkbox-|***c84d8e***|">Analytische Cookies</label></div><button class="cookie-layer__option-hint" aria-describedby="tooltip-292433"><svg class="icon icon--info cookie-layer__option-hint__icon" viewBox="0 0 200 200" role="presentation">
                        <use xlink:href="#icon-info"></use>
                    </svg></button>
                <div class="cookie-layer__tooltip" id="tooltip-292433" role="tooltip">Etiam porta sem malesuada magna mollis euismod. Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Aenean lacinia bibendum nulla sed consectetur. Donec ullamcorper nulla non metus auctor fringilla. Donec sed odio dui. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.<div class="cookie-layer__tooltip__arrow" data-popper-arrow="data-popper-arrow"></div>
                </div>
            </div>
            <div class="cookie-layer__option">
                <div class="checkbox checkbox--default"><input class="checkbox__input" id="checkbox-|***dc8c33***|" type="checkbox" name="marketing" /><label class="checkbox__label" for="checkbox-|***dc8c33***|">Marketing Cookies</label></div><button class="cookie-layer__option-hint" aria-describedby="tooltip-d93d8f"><svg class="icon icon--info cookie-layer__option-hint__icon" viewBox="0 0 200 200" role="presentation">
                        <use xlink:href="#icon-info"></use>
                    </svg></button>
                <div class="cookie-layer__tooltip" id="tooltip-d93d8f" role="tooltip">Etiam porta sem malesuada magna mollis euismod. Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Aenean lacinia bibendum nulla sed consectetur. Donec ullamcorper nulla non metus auctor fringilla. Donec sed odio dui. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.<div class="cookie-layer__tooltip__arrow" data-popper-arrow="data-popper-arrow"></div>
                </div>
            </div>
            <div class="cookie-layer__options__save"><button class="button button--primary cookie-layer__save-button" type="submit"><span class="button__inner"><span class="button__text">Speichern &amp; Schließen</span></span></button></div>
        </div>
        <div class="cookie-layer__buttons"><button class="button button--primary cookie-layer__save-button" type="submit"><span class="button__inner"><span class="button__text">Akzeptieren</span></span></button><button class="button button--secondary cookie-layer__toggle-button" type="button"><span class="button__inner"><span class="button__text">Konfigurieren</span></span></button></div>
    </div>
</form>


        
            <!-- Cookie-Layer mit Switch -->
<form class="cookie-layer" action="#api-url">
    <div class="cookie-layer__inner">
        <div class="cookie-layer__headline">
            <h2 class="headline headline--module-3">Einstellungen</h2>
        </div>
        <p class="cookie-layer__text">Ohne Ihre Zustimmung setzen wir keine Cookies auf unserer Website ein. Ausschließlich nach Ihrer Zustimmung verarbeiten wir anonyme Daten, aus denen pseudonymisierte Nutzungsprofile erstellt und ausgewertet werden. Dazu nutzen wir die Webanalysedienst-Software Matomo. Hier können Sie den Cookie aktivieren oder deaktivieren. Sie können Ihre Einstellungen jederzeit ändern. <a href="#">Zur Datenschutzerklärung</a>.</p>
        <div class="cookie-layer__options">
            <div class="cookie-layer__options__switch"><label class="switch"><input class="switch__checkbox" id="checkbox-|***06de19***|" type="checkbox" name="switch-name" /><span class="switch__slider"></span></label><span class="cookie-layer__options__switch__label">Optionale Cookies</span></div>
            <div class="cookie-layer__options__save"><button class="button button--primary cookie-layer__save-button" type="submit"><span class="button__inner"><span class="button__text">Speichern &amp; Schließen</span></span></button></div>
        </div>
        <div class="cookie-layer__buttons"><button class="button button--primary cookie-layer__save-button" type="submit"><span class="button__inner"><span class="button__text">Akzeptieren</span></span></button><button class="button button--secondary cookie-layer__toggle-button" type="button"><span class="button__inner"><span class="button__text">Konfigurieren</span></span></button></div>
    </div>
</form>


        //- Render cookie layer
form.cookie-layer(
  action=action
)&attributes(attr)
  .cookie-layer__inner
    //- Headline
    if headline
      .cookie-layer__headline
        +include('@headline', headline)

    //- Text
    p.cookie-layer__text !{render(text, true)}

    .cookie-layer__options
      //- Switch
      if toggleSwitch
        .cookie-layer__options__switch
          +include('@switch', toggleSwitch)
          span.cookie-layer__options__switch__label !{render(toggleSwitch.label, true)}

      //- Options
      if options
        for option in options
          .cookie-layer__option
            +include('@checkbox', option)
            if option.hint
              - tooltipId = `tooltip-${randomString()}`;
              button.cookie-layer__option-hint(aria-describedby=tooltipId)
                +include('@icon', { icon: 'info', attr: { class: 'cookie-layer__option-hint__icon' } })
              .cookie-layer__tooltip(id=tooltipId, role='tooltip')
                | !{render(option.hint, true)}
                .cookie-layer__tooltip__arrow(data-popper-arrow=true)
      .cookie-layer__options__save
        +include('@button', _.merge(buttonSaveSettings, {
          attr: {
            type: 'submit',
            class: 'cookie-layer__save-button'
          },
        }), false)

    //- Buttons
    .cookie-layer__buttons
      +include('@button', _.merge(buttonSave, {
        attr: {
          type: 'submit',
          class: 'cookie-layer__save-button'
        },
      }), false)

      +include('@button', _.merge(buttonSettings, {
        attr: {
          type: 'button',
          class: 'cookie-layer__toggle-button'
        },
      }), false)


        
        
            /* Cookie-Layer */
{
  "action": "#api-url",
  "text": "Wir verwenden Cookies, um Ihnen die Inhalte und Funktionen der Website bestmöglich anzubieten. Darüber hinaus verwenden wir Cookies zur Analyse. Weiter Informationen erhalten Sie in unseren <a href=\"#\">Datenschutzhinweisen</a>.",
  "buttonSave": {
    "style": "primary",
    "text": "Akzeptieren"
  },
  "buttonSettings": {
    "style": "secondary",
    "outline": true,
    "text": "Konfigurieren"
  },
  "buttonSaveSettings": {
    "style": "primary",
    "text": "Speichern & Schließen"
  },
  "options": [
    {
      "name": "technical",
      "label": "Technisch notwendige Cookies",
      "hint": "Etiam porta sem malesuada magna mollis euismod. Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Aenean lacinia bibendum nulla sed consectetur. Donec ullamcorper nulla non metus auctor fringilla. Donec sed odio dui. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.",
      "checked": true,
      "disabled": true
    },
    {
      "name": "analytics",
      "label": "Analytische Cookies",
      "hint": "Etiam porta sem malesuada magna mollis euismod. Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Aenean lacinia bibendum nulla sed consectetur. Donec ullamcorper nulla non metus auctor fringilla. Donec sed odio dui. Morbi leo risus, porta ac consectetur ac, vestibulum at eros."
    },
    {
      "name": "marketing",
      "label": "Marketing Cookies",
      "hint": "Etiam porta sem malesuada magna mollis euismod. Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Aenean lacinia bibendum nulla sed consectetur. Donec ullamcorper nulla non metus auctor fringilla. Donec sed odio dui. Morbi leo risus, porta ac consectetur ac, vestibulum at eros."
    }
  ]
}


        
            /* Cookie-Layer mit Switch */
{
  "action": "#api-url",
  "text": "Ohne Ihre Zustimmung setzen wir keine Cookies auf unserer Website ein. Ausschließlich nach Ihrer Zustimmung verarbeiten wir anonyme Daten, aus denen pseudonymisierte Nutzungsprofile erstellt und ausgewertet werden. Dazu nutzen wir die Webanalysedienst-Software Matomo. Hier können Sie den Cookie aktivieren oder deaktivieren. Sie können Ihre Einstellungen jederzeit ändern. <a href=\"#\">Zur Datenschutzerklärung</a>.",
  "buttonSave": {
    "style": "primary",
    "text": "Akzeptieren"
  },
  "buttonSettings": {
    "style": "secondary",
    "outline": true,
    "text": "Konfigurieren"
  },
  "buttonSaveSettings": {
    "style": "primary",
    "text": "Speichern & Schließen"
  },
  "headline": {
    "text": "Einstellungen",
    "level": 2,
    "size": "module-3"
  },
  "toggleSwitch": {
    "label": "Optionale Cookies"
  }
}

File:

Content:


                                import { createPopper } from '@popperjs/core';

function showTooltip(tooltip, popper) {
  tooltip.setAttribute('data-show', '');
  popper.forceUpdate();
}

function hideTooltip(tooltip) {
  tooltip.removeAttribute('data-show');
}

function setCookie(name, value, days = 7, path = '/') {
  window.console.log('set cookie', name, value);
  const expires = new Date(Date.now() + days * 864e5).toUTCString();
  document.cookie = `${name} = ${encodeURIComponent(value)}; expires=${expires}; path=${path}`;
}

function getCookie(name) {
  return document.cookie.split('; ').reduce((r, v) => {
    const parts = v.split('=');
    return parts[0] === name ? decodeURIComponent(parts[1]) : r;
  }, '');
}

function deleteCookie(name, path) {
  window.console.log('delete cookie', name);
  setCookie(name, '', -1, path);
}

const showEvents = ['mouseenter', 'focus'];
const hideEvents = ['mouseleave', 'blur'];

const cookieLayer = document.querySelector('.cookie-layer');

const showCookieLayer = () => {
  cookieLayer.classList.add('cookie-layer--visible');
};

const hideCookieLayer = () => {
  cookieLayer.classList.remove('cookie-layer--visible');
};

const saveCookiePreferences = () => {
  setCookie('cookies-consent', 'done', 30);
  cookieLayer.querySelectorAll('input[type=checkbox]').forEach((checkbox) => {
    const name = checkbox.getAttribute('name');
    if (checkbox.checked) {
      setCookie(`cookie-consent--${name}`, 'ok');
    } else {
      deleteCookie(`cookie-consent--${name}`);
    }
  });

  const action = cookieLayer.getAttribute('action');
  if (action) {
    const formData = new FormData(cookieLayer);
    const xhr = new XMLHttpRequest();
    xhr.open('POST', action, true);
    xhr.send(formData);
  }
};

if (cookieLayer) {
  cookieLayer.addEventListener('submit', (event) => {
    event.preventDefault();
    saveCookiePreferences();
    hideCookieLayer();
    return false;
  });

  if (getCookie('cookies-consent') !== 'done') {
    showCookieLayer();
  }
}

document.querySelectorAll('.cookie-layer__option-hint').forEach((button) => {
  const tooltipId = button.getAttribute('aria-describedby');
  const tooltip = document.querySelector(`#${tooltipId}`);
  const arrow = tooltip.querySelector('[data-popper-arrow');

  const popper = createPopper(button, tooltip, {
    strategy: 'fixed',
    placement: 'top',
    modifiers: [
      {
        name: 'preventOverflow',
        options: {
          padding: 10,
        },
      },
      {
        name: 'flip',
        options: {
          fallbackPlacements: ['bottom'],
        },
      },
      {
        name: 'offset',
        options: {
          offset: [0, 35],
        },
      },
      {
        name: 'arrow',
        options: {
          element: arrow,
          padding: 25,
        },
      },
    ],
  });

  showEvents.forEach((event) => {
    button.addEventListener(event, () => { showTooltip(tooltip, popper); });
  });

  hideEvents.forEach((event) => {
    button.addEventListener(event, () => { hideTooltip(tooltip, popper); });
  });
});

const cookieLayerOptions = document.querySelector('.cookie-layer__options');
if (cookieLayerOptions) {
  const toggleCookieSettings = () => {
    cookieLayerOptions.classList.toggle('cookie-layer__options--expanded');
    document.querySelector('.cookie-layer__buttons').classList.toggle('cookie-layer__buttons--hidden');
  };
  document.querySelector('.cookie-layer__toggle-button').addEventListener('click', toggleCookieSettings);
}

URL: /components/raw/cookie-layer/cookie-layer.js
Filesystem Path: src/components/organisms/cookie-layer/cookie-layer.js
Size: 3.5 KB

Content:


                                .cookie-layer {
  background-color: rgba(#000, 0.5);
  bottom: 0;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: z('cookie-layer');
}

.cookie-layer__inner {
  align-items: center;
  background-color: #fff;
  bottom: 0;
  color: $color-dark;
  padding: 1.5rem;
  position: absolute;
  text-align: left;
  width: 100%;

  @include mq($from: m) {
    bottom: auto;
    left: 50%;
    padding: 3.5rem;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 65%;
  }
}

.cookie-layer__headline {
  margin-bottom: 1rem;
}

.cookie-layer__text {
  margin-bottom: 1rem;

  a {
    border-bottom: 1px solid currentColor;
    color: $color-dark;
  }

  @include mq($until: m) {
    font-size: $font-size-small;
    line-height: $line-height-small;
  }
}

.cookie-layer__options {
  display: none;
}

.cookie-layer__options--expanded {
  display: block;
}

.cookie-layer__option {
  margin-bottom: 1rem;
}

.cookie-layer__options__save {
  padding-top: 1rem;
}

.cookie-layer__option-hint {
  color: $color-green;
  cursor: help;
  display: inline-block;
  font-size: 2rem;
  height: 2.5rem;
  line-height: 2.1rem;
  margin-left: 0.5rem;
  text-align: center;
  vertical-align: middle;
  width: 2.5rem;
}

.cookie-layer__tooltip {
  background: $color-green;
  border-radius: 0;
  color: #fff;
  display: none;
  font-size: 1.5rem;
  line-height: calc(2 / 1.5);
  max-width: 50rem;
  padding: 2rem;
  z-index: z('tooltip');

  &[data-show] {
    display: block;
  }
}

.cookie-layer__tooltip__arrow,
.cookie-layer__tooltip__arrow::before {
  height: 4.5rem;
  position: absolute;
  width: 4.5rem;
  z-index: -1;
}

.cookie-layer__tooltip__arrow::before {
  background: $color-green;
  content: '';
  transform: rotate(45deg);
}

.cookie-layer__tooltip[data-popper-placement^='top'] > .cookie-layer__tooltip__arrow {
  bottom: -2.3rem;
}

.cookie-layer__tooltip[data-popper-placement^='bottom'] > .cookie-layer__tooltip__arrow {
  top: -2.3rem;
}

.cookie-layer__tooltip[data-popper-placement^='left'] > .cookie-layer__tooltip__arrow {
  right: -2.3rem;
}

.cookie-layer__tooltip[data-popper-placement^='right'] > .cookie-layer__tooltip__arrow {
  left: -2.3rem;
}

.cookie-layer__buttons {
  margin-top: 2rem;
}

.cookie-layer__buttons .button:not(:first-child) {
  margin: 2rem 0 0;

  @include mq($from: m) {
    margin: 0 0 0 2rem;
  }
}

.cookie-layer__buttons--hidden {
  display: none;
}

.cookie-layer__options__switch {
  padding: 2rem 0;
}

.cookie-layer__options__switch__label {
  font-weight: bold;
  margin-left: 1rem;
}

URL: /components/raw/cookie-layer/cookie-layer.scss
Filesystem Path: src/components/organisms/cookie-layer/cookie-layer.scss
Size: 2.6 KB

Handle: @cookie-layer
Variants (2): Cookie-Layer , Cookie-Layer mit Switch
Preview:
- With layout
- Component only
Filesystem Path: src/components/organisms/cookie-layer/cookie-layer.pug
References (5): @headline, @switch, @checkbox, @icon, @button

There are no notes for this item.