minsky-kit/js/components/VCookieConsent.js

Kit of components for MINSKY web agency

// imports
import Component from './Component';
import * as CookieConsent from 'vanilla-cookieconsent';
import '@orestbida/iframemanager';
import _merge from 'lodash/merge';

// private statics

// class definition
export default class VCookieConsent extends Component {
  // constructor
  constructor(args = {}, objectName = 'VCookieConsent') {
    args.debug = args.debug || true;

    // super
    super(args, objectName);
    this._args = args;
    this.manager = CookieConsent;
    this._im = iframemanager();
    this._$triggers = document.querySelectorAll(args.trigger);

    if (this._$triggers.length) {
      this._$triggers.forEach(($ck) => {
        $ck.addEventListener('click', (e) => {
          e.preventDefault();
          this.manager.showPreferences();
        });
      });
    }
  }

  setConfig(config) {
    this._args.config = _merge(this._args.config, config);
  }

  init() {
    this.manager.run(
      _merge(this._args.config, {
        onConsent: ({ cookie }) => {
          cookie.categories.forEach((cat) => {
            window.dataLayer.push({
              event: `cookieConsent-${cat}`,
              cookieType: cat,
            });
          });

          this.dispatch('onConsent', { cookie });
        },
        onChange: ({ cookie, changedCategories }) => {
          changedCategories.forEach((cCat) => {
            if (cookie.categories.indexOf(cCat) > -1) {
              window.dataLayer.push({
                event: `cookieConsent-${cCat}`,
                cookieType: cCat,
              });
            } else {
              // we need to remove consent (but how?)
            }
          });

          this.dispatch('onChange', { cookie, changedCategories });
        },
        categories: {
          social: {
            services: {
              youtube: {
                label: 'Youtube Embed',
                onAccept: () => this._im.acceptService('youtube'),
                onReject: () => this._im.rejectService('youtube'),
              },
            },
          },
        },
      })
    );

    this._im.run({
      currLang: 'en',
      onChange: ({ changedServices, eventSource }) => {
        if (eventSource.type === 'click') {
          const servicesToAccept = [...this.manager.getUserPreferences().acceptedServices.analytics, ...changedServices];

          this.manager.acceptService(servicesToAccept, 'social');
        }
      },
      services: {
        youtube: {
          embedUrl: '{data-id}',
          languages: {
            en: {
              notice: Drupal.t('cookies.declined-consent.text'),
              loadBtn: Drupal.t('cookies.declined-consent.once'), // Load only current iframe
              loadAllBtn: Drupal.t('cookies.declined-consent.always'), // Load all iframes configured with this service + set cookie
            },
          },
        },
      },
    });
  }

  // methods

  destroy() {
    super.destroy();
  }

  // getters & setters
}

// Utils

// Event handlers