@jarijokinen/consent 0.0.1

package/LICENSE.txt

@@ -0,0 +1,20 @@
+The MIT License (MIT)
+Copyright (c) 2022 Jari Jokinen
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
+of the Software, and to permit persons to whom the Software is furnished to do
+so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,56 @@
+# consent
+
+A zero-dependency, vanilla JavaScript consent manager with native Consent Mode
+support.
+
+## Installation
+
+NPM:
+
+    npm install @jarijokinen/consent
+
+Yarn:
+
+    yarn add @jarijokinen/consent
+
+## Usage
+
+    import { consent } from '@jarijokinen/consent';
+
+    document.addEventListener('DOMContentLoaded', () => {
+      consent();
+    });
+
+## Configuration
+
+    const options = {
+      storages: {
+        analytics_storage: 'Analytics',
+        ad_storage: 'Marketing'
+      },
+      actions: {
+        denyAll: 'Deny All',
+        allowSelected: 'Allow Selected',
+        allowAll: 'Allow All'
+      },
+      dialogMarkup: `
+        <h2>Cookies</h2>
+        <p>
+          We would like to get your permission to use cookies for these purposes:
+        </p>
+        <form>
+          <div class="consent-fields"></div>
+          <div class="consent-buttons"></div>
+        </form>
+      `,
+      dialogClass: 'consent',
+      settingsLinkSelector: '.consent-settings-link'
+    };
+
+    consent(options);
+
+## License
+
+MIT License. Copyright (c) 2022 [Jari Jokinen](https://jarijokinen.com).  See
+[LICENSE](https://github.com/jarijokinen/consent/blob/main/LICENSE.txt)
+for further details.

package/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "@jarijokinen/consent",
+  "version": "0.0.1",
+  "description": "A zero-dependency, vanilla JavaScript consent manager with native Consent Mode support.",
+  "main": "src/consent.js",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/jarijokinen/consent.git"
+  },
+  "author": "Jari Jokinen",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/jarijokinen/consent/issues"
+  },
+  "homepage": "https://github.com/jarijokinen/consent#readme"
+}

package/src/consent.js

@@ -0,0 +1,172 @@
+export const consent = (options) => {
+  const opts = {
+    storages: {
+      analytics_storage: 'Analytics',
+      ad_storage: 'Marketing'
+    },
+    actions: {
+      denyAll: 'Deny All',
+      allowSelected: 'Allow Selected',
+      allowAll: 'Allow All'
+    },
+    dialogMarkup: `
+      <h2>Cookies</h2>
+      <p>
+        We would like to get your permission to use cookies for these purposes:
+      </p>
+      <form>
+        <div class="consent-fields"></div>
+        <div class="consent-buttons"></div>
+      </form>
+    `,
+    dialogClass: 'consent',
+    settingsLinkSelector: '.consent-settings-link',
+    ...options
+  };
+
+  let consentState = {
+    ad_storage: 'denied',
+    analytics_storage: 'denied',
+    functionality_storage: 'denied',
+    personalization_storage: 'denied',
+    security_storage: 'denied'
+  };
+
+  let dialog = document.createElement('div');
+  dialog.classList.add(opts.dialogClass);
+
+  const getCookie = (name) => {
+    const parts = ('; ' + document.cookie).split('; ' + name + '=');
+    return parts.length == 2 ? parts.pop().split(';').shift() : undefined;
+  };
+
+  const setCookie = (name, value) => {
+    let expires = new Date();
+    expires.setTime(expires.getTime() + 356 * 86400000);
+    document.cookie =
+      name + '=' + value + ';expires=' + expires.toUTCString() + ';path=/';
+  };
+
+  const getConsent = (storage) => {
+    return getCookie('consent_' + storage);
+  };
+
+  const updateConsent = () => {
+    Object.keys(opts.storages).forEach((storage) => {
+      const cookieName = 'consent_' + storage;
+      setCookie(cookieName, consentState[storage]);
+    });
+
+    if (typeof gtag === 'function') {
+      gtag('consent', 'update', consentState);
+    }
+  };
+
+  const updateFields = () => {
+    Object.keys(opts.storages).forEach((storage) => {
+      dialog.querySelector('#consent-field-' + storage).checked =
+        consentState[storage] == 'granted' ? true : false;
+    });
+  };
+
+  const loadConsentState = () => {
+    Object.keys(opts.storages).forEach((storage) => {
+      const cookieName = 'consent_' + storage;
+      consentState[storage] = getCookie(cookieName) || undefined;
+      if (consentState[storage] === undefined) {
+        showDialog();
+      }
+    });
+
+    if (typeof gtag === 'function') {
+      gtag('consent', 'update', consentState);
+    }
+  };
+
+  const createDialog = () => {
+    const fields = document.createElement('div');
+    Object.keys(opts.storages).forEach((storage) => {
+      const fieldset = document.createElement('fieldset');
+      const checkbox = document.createElement('input');
+      checkbox.setAttribute('type', 'checkbox');
+      checkbox.setAttribute('name', 'consent-field-' + storage);
+      checkbox.setAttribute('id', 'consent-field-' + storage);
+      if (getConsent(storage) === 'granted') {
+        checkbox.setAttribute('checked', 'checked');
+      }
+      const label = document.createElement('label');
+      label.setAttribute('for', 'consent-field-' + storage);
+      label.innerText = opts.storages[storage];
+      fieldset.appendChild(checkbox);
+      fieldset.appendChild(label);
+      fields.appendChild(fieldset);
+    });
+
+    const buttons = document.createElement('div');
+    Object.keys(opts.actions).forEach((action) => {
+      const button = document.createElement('input');
+      button.setAttribute('type', 'button');
+      button.setAttribute('value', opts.actions[action]);
+
+      switch (action) {
+        case 'denyAll':
+          button.onclick = () => {
+            Object.keys(opts.storages).forEach((storage) => {
+              consentState[storage] = 'denied';
+            });
+            updateConsent();
+            updateFields();
+            hideDialog();
+          };
+          break;
+        case 'allowSelected':
+          button.onclick = () => {
+            Object.keys(opts.storages).forEach((storage) => {
+              consentState[storage] = document.querySelector(
+                '#consent-field-' + storage
+              ).checked
+                ? 'granted'
+                : 'denied';
+            });
+            updateConsent();
+            updateFields();
+            hideDialog();
+          };
+          break;
+        case 'allowAll':
+          button.onclick = () => {
+            Object.keys(opts.storages).forEach((storage) => {
+              consentState[storage] = 'granted';
+            });
+            updateConsent();
+            updateFields();
+            hideDialog();
+          };
+          break;
+      }
+
+      buttons.appendChild(button);
+    });
+
+    dialog.innerHTML = opts.dialogMarkup;
+    dialog.querySelector('.consent-fields').appendChild(fields);
+    dialog.querySelector('.consent-buttons').appendChild(buttons);
+    document.querySelector('body').appendChild(dialog);
+  };
+
+  const showDialog = () => {
+    dialog.style.display = 'block';
+  };
+
+  const hideDialog = () => {
+    dialog.style.display = 'none';
+  };
+
+  document.querySelector(opts.settingsLinkSelector).onclick = (ev) => {
+    ev.preventDefault();
+    showDialog();
+  };
+
+  loadConsentState();
+  createDialog();
+};