hkk Frontend 2017

Button (Opt-Out) 

<button class="button js-button-opt-out" id="button-2f7c" data-google-analytics-property="UA-43049941-1" data-label-active="Tracking: aktiv" data-label-inactive="Tracking: inaktiv"></button>
 
-
  //- Prepare attr object
  attr = attr || {};
  attr.class = classList(attr.class);
  attr.id = id || attr.id || `button-${randomString()}`;

  // Data
  if (property) attr['data-google-analytics-property'] = property;
  if (labels && labels.active) attr['data-label-active'] = labels.active;
  if (labels && labels.inactive) attr['data-label-inactive'] = labels.inactive; 

//- Render atom
button.button.js-button-opt-out&attributes(attr)
 
{
  "property": "UA-43049941-1",
  "labels": {
    "active": "Tracking: aktiv",
    "inactive": "Tracking: inaktiv"
  }
}
  • Content: 
    export default class ButtonOptout {
  constructor($el) {
    this.$el = $el;
    this.gaProperty = this.$el.dataset.googleAnalyticsProperty;
    this.labelActive = this.$el.dataset.labelActive;
    this.labelInactive = this.$el.dataset.labelInactive;
    this.disabledKey = `ga-disable-${this.gaProperty}`;

    this.init();
  }

  init() {
    if (this.isDisabled()) {
      window[this.disabledKey] = true;
      this.showDisabledButton();
    } else {
      this.showEnabledButton();
    }

    this.$el.addEventListener('click', (event) => {
      event.preventDefault();

      if (this.isDisabled()) {
        this.enable();
        this.showEnabledButton();
      } else {
        this.disable();
        this.showDisabledButton();
      }
    });
  }

  showDisabledButton() {
    this.$el.innerText = this.labelInactive;
    this.$el.classList.remove('button--red');
  }

  showEnabledButton() {
    this.$el.innerText = this.labelActive;
    this.$el.classList.add('button--red');
  }

  enable() {
    document.cookie = `${this.disabledKey}=; expires=Thu, 01 Jan 1970 00:00:01 UTC; path=/;`;
    window[this.disabledKey] = undefined;
  }

  disable() {
    document.cookie = `${this.disabledKey}=true; expires=Thu, 31 Dec 2099 23:59:59 UTC; path=/;`;
    window[this.disabledKey] = true;
  }

  isDisabled() {
    return document.cookie.indexOf(`${this.disabledKey}=true`) > -1;
  }
}

// Initialize button with ga opt out
document
  .querySelectorAll('.js-button-opt-out')
  .forEach($el => new ButtonOptout($el));
  • URL: /components/raw/button-optout/button-optout.js
  • Filesystem Path: src/components/atoms/button-optout/button-optout.js
  • Size: 1.5 KB

There are no notes for this item.