cookie consent javascript create and delete global js variable "settings"

[mediaessenz]

Bug Report

Description

The cookie consent javascript create and delete the global js variable "settings".

Since this is a very generic name that is also used, for example, by matomo's opt-out javascript, this can lead to very confusing problems.

Steps to Reproduce

1. Activate cookie banner
2. Add the matomo opt-out script descripted here: https://developer.matomo.org/guides/tracking-optout
3. Realize that the Opt-Out-Div could not be found, since the settings.divId used by matomo will be deleted by cookie content js coming with this package

Versions

BT 12 and 13

Solution

Use a different variable name than "settings":

var cookieConsentSettings = document.querySelectorAll('[data-cookieconsent-setting]');
        for (var i = 0; i < cookieConsentSettings.length; ++i) {
            var setting = cookieConsentSettings[i].dataset.cookieconsentSetting;
            var value = cookieConsentSettings[i].dataset.cookieconsentValue;
            if (parseInt(value, 10) == value) {
                value = parseInt(value, 10);
            }
            if (cookieConsentSupportedOptions.indexOf(setting) != -1) {
                cookieConsentFunctions.updateCookieConsentOptions(
                    cookieConsentOptions,
                    setting,
                    value
                );
                if (setting === 'content.href') {
                    cookieConsentFunctions.updateCookieConsentOptions(
                        cookieConsentOptions,
                        'showLink',
                        value !== ''
                    );
                }
            }
            cookieConsentSettings[i].parentNode.removeChild(cookieConsentSettings[i]);
        }

or better, do not use a variable at all:

document.querySelectorAll('[data-cookieconsent-setting]').forEach(function (settingDiv) {
  var setting = settingDiv.dataset.cookieconsentSetting;
  var value = settingDiv.dataset.cookieconsentValue;
  if (parseInt(value, 10) == value) {
    value = parseInt(value, 10);
  }
  if (cookieConsentSupportedOptions.indexOf(setting) != -1) {
    cookieConsentFunctions.updateCookieConsentOptions(
      cookieConsentOptions,
      setting,
      value
    );
    if (setting === 'content.href') {
      cookieConsentFunctions.updateCookieConsentOptions(
        cookieConsentOptions,
        'showLink',
        value !== ''
      );
    }
  }
  settingDiv.parentNode.removeChild(settingDiv);
});

[mediaessenz]

BTW: The bootstrap.cookieconsent.js uses the deprecated javascript method initEvent.
See https://developer.mozilla.org/en-US/docs/Web/API/Event/initEvent

A possible replacement could look like this:

// Events
cookieConsentOptions.onPopupOpen = function () {
    const eventOpen = new Event('bk2k.cookie.popupopen', { bubbles: true, cancelable: true });
    window.dispatchEvent(eventOpen);
    const type = this.options.type;
    if (type === "info" || type === "opt-out") {
        const event = new Event('bk2k.cookie.enable', { bubbles: true, cancelable: true });
        window.dispatchEvent(event);
    }
};
cookieConsentOptions.onPopupClose = function() {
    const event = new Event('bk2k.cookie.popupclose', { bubbles: true, cancelable: true });
    window.dispatchEvent(event);
};
cookieConsentOptions.onInitialise = function () {
    let eventName = 'bk2k.cookie.disable';
    if (this.hasConsented()) {
        let eventName = 'bk2k.cookie.enable';
    }
    const event = new Event(eventName, { bubbles: true, cancelable: true });
    window.dispatchEvent(event);
};
cookieConsentOptions.onStatusChange = function () {
    const type = this.options.type;
    const didConsent = this.hasConsented();
    if (didConsent && type === 'opt-in') {
        const event = new Event('bk2k.cookie.enable', { bubbles: true, cancelable: true });
        window.dispatchEvent(event);
    }
    if (!didConsent && (type === 'opt-in' || type === 'opt-out')) {
        const event = new Event('bk2k.cookie.disable', { bubbles: true, cancelable: true });
        window.dispatchEvent(event);
    }
};
cookieConsentOptions.onRevokeChoice = function () {
    const event = new Event('bk2k.cookie.revoke', { bubbles: true, cancelable: true });
    window.dispatchEvent(event);
};

[benjaminkott]

@mediaessenz thx a lot for your detailed explanation, i also stumbled over it while on the a11y Code Sprint. I´ve checked all assignments and adopted your suggestions. <3