hkk Frontend 2017

Cookie-Message 

<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-b421" href="http://www.example.com">Mehr Informationen
</a>
            <button class="button button--white-blue" id="button-82b5" 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.