<section class="cookie-message">
    <div class="cookie-message__inner">
        <p class="cookie-message__text">Wir verwenden Cookies, um die angebotenen Funktionen für Sie zu verbessern und auf Sie zugeschnittene Inhalte bieten zu können. Indem Sie mit der Navigation auf unserer Website fortfahren, erklären Sie sich mit der Verwendung von Cookies einverstanden.</p>
        <div class="cookie-message__actions">
            <a class="button button--white-blue button--outline" id="button-17b9" href="http://www.example.com">Mehr Informationen
</a>
            <button class="button button--white-blue" id="button-4d9f" type="button">OK
</button>
        </div>
    </div>
</section>
//- Render cookie message
section.cookie-message
  .cookie-message__inner
    //- Text
    if text
      p.cookie-message__text #{text}
    
    //- Actions
    if link || button
      .cookie-message__actions
        //- Link
        if link
          != include('@button--white-blue-outline', {link: link.href, text: link.title})

        //- Button
        if button
          != include('@button--white-blue', {link: false, text: button})
{
  "text": "Wir verwenden Cookies, um die angebotenen Funktionen für Sie zu verbessern und auf Sie zugeschnittene Inhalte bieten zu können. Indem Sie mit der Navigation auf unserer Website fortfahren, erklären Sie sich mit der Verwendung von Cookies einverstanden.",
  "button": "OK",
  "link": {
    "title": "Mehr Informationen",
    "href": "http://www.example.com"
  }
}
  • Content:
    class CookieMessage {
      constructor($el) {
        this.$el = $el;
        this.$button = this.$el.querySelector('button');
        this.cookieName = 'cookieconsent';
    
        if (!this.isCookieSet()) this.init();
      }
    
      init() {
        // Add cookie message
        this.addMessage();
    
        // Close cookie message
        this.$button.addEventListener('click', () => {
          this.setCookie();
          this.$el.remove();
        }, false);
      }
    
      setCookie() {
        document.cookie = `${this.cookieName}=;expires=${this.getExpireString(365)};path=/`;
      }
    
      isCookieSet() {
        // Attention: `this.cookieName` gets not escaped, so don't use any regex meta characters.
        // See: https://developer.mozilla.org/en-US/docs/Web/API/Document/cookie/Simple_document.cookie_framework
        const regx = new RegExp(`(?:^|;\\s*)${this.cookieName}\\s*\\=`);
    
        return regx.test(document.cookie);
      }
    
      addMessage() {
        this.$el.classList.add('cookie-message--fixed');
      }
    
      getExpireString(days) {
        this.now = new Date();
        this.now.setTime(this.now.getTime() + (days * 24 * 60 * 60 * 1000));
    
        return this.now.toUTCString();
      }
    }
    
    document.querySelectorAll('.cookie-message').forEach(
      $el => new CookieMessage($el),
    );
    
  • URL: /components/raw/cookie-message/cookie-message.js
  • Filesystem Path: src/components/organisms/cookie-message/cookie-message.js
  • Size: 1.2 KB
  • Content:
    .cookie-message {
      background-color: $color-blue;
      border-top: 1px solid darken($color-blue, 5%);
      color: #fff;
      display: none;
      padding: 2rem 0;
      z-index: z('header');
    }
    
    .cookie-message--fixed {
      bottom: 0;
      display: block;
      left: 0;
      position: fixed;
      width: 100%;
    }
    
    .cookie-message__text {
      font-size: 1.2rem;
    }
    
    .cookie-message__inner {
      @include make-container();
    }
    
    @include mq($from: m) {
      .cookie-message__text {
        font-size: 1.4rem;
      }
    }
    
    @include mq($from: xl) {
      .cookie-message__inner {
        display: table;
        width: 100%;
      }
    
      .cookie-message__text,
      .cookie-message__actions {
        display: table-cell;
        vertical-align: top;
      }
    
      .cookie-message__text {
        margin-bottom: 0;
        padding-right: (1rem * 1.5);
        width: 100%;
      }
    
      .cookie-message__actions {
        white-space: nowrap;
      }
    }
    
    @media print {
      .cookie-message {
        display: none;
      }
    }
    
  • URL: /components/raw/cookie-message/cookie-message.scss
  • Filesystem Path: src/components/organisms/cookie-message/cookie-message.scss
  • Size: 894 Bytes

There are no notes for this item.