Cookie-Layer: Cookie-Layer

Design

HTML
View
Context
Assets
Info
Notes


        
        <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-|***74da78***|" type="checkbox" name="technical" checked="checked" disabled="disabled" /><label class="checkbox__label" for="checkbox-|***74da78***|">Technisch notwendige Cookies</label></div><button class="cookie-layer__option-hint" aria-describedby="tooltip-4f092e"><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-4f092e" 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-|***6ac114***|" type="checkbox" name="analytics" /><label class="checkbox__label" for="checkbox-|***6ac114***|">Analytische Cookies</label></div><button class="cookie-layer__option-hint" aria-describedby="tooltip-6e4c31"><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-6e4c31" 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-|***32bc0e***|" type="checkbox" name="marketing" /><label class="checkbox__label" for="checkbox-|***32bc0e***|">Marketing Cookies</label></div><button class="cookie-layer__option-hint" aria-describedby="tooltip-aaeddb"><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-aaeddb" 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>


        //- 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)


        
            
            {
  "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."
    }
  ]
}

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--default
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.