Cookie-Layer: Cookie-Layer mit Switch

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);
}