@jarijokinen/consent 0.0.2 → 0.0.4

package/README.md

@@ -15,14 +15,23 @@ Yarn:
 
 ## Usage
 
+Initialization:
+
     import { consent } from '@jarijokinen/consent';
 
     document.addEventListener('DOMContentLoaded', () => {
       consent();
     });
 
+Add link that opens the dialog:
+
+    <a href="#" class="consent-settings-link">Cookie Settings</a>
+
 ## Configuration
 
+Customize configuration options by passing some or all of them as a first
+argument to the consent() function.
+
     const options = {
       storages: {
         analytics_storage: 'Analytics',
@@ -34,23 +43,26 @@ Yarn:
         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>
+        <h2 class="consent-title"></h2>
+        <div class="consent-message"></div>
+        <div class="consent-fields"></div>
+        <div class="consent-buttons"></div>
       `,
+      dialogTitle: 'Cookies',
+      dialogMessage: 'We would like to get your permission to use cookies for:',
       dialogClass: 'consent',
-      settingsLinkSelector: '.consent-settings-link'
+      settingsLinkSelector: '.consent-settings-link',
+      countryCookie: 'cf_country',
+      countries: ['AT', 'BE', 'BG', 'HR', 'CY', 'CZ', 'DK', 'EE', 'FI', 'FR', 
+                  'DE', 'GR', 'HU', 'IE', 'IT', 'LV', 'LT', 'LU', 'MT', 'NL',
+                  'PL', 'PT', 'RO', 'SK', 'SI', 'ES', 'SE', 'IS', 'LI', 'NO',
+                  'GB', 'CH', 'MC', 'SM', 'VA', 'JE', 'GG', 'IM']
     };
 
     consent(options);
 
 ## License
 
-MIT License. Copyright (c) 2022 [Jari Jokinen](https://jarijokinen.com).  See
-[LICENSE](https://github.com/jarijokinen/consent/blob/main/LICENSE.txt)
+MIT License. Copyright (c) 2022 - 2025 [Jari Jokinen](https://jarijokinen.com).
+See [LICENSE](https://github.com/jarijokinen/consent/blob/main/LICENSE.txt)
 for further details.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jarijokinen/consent",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "description": "A zero-dependency, vanilla JavaScript consent manager with native Consent Mode support.",
   "main": "src/consent.js",
   "repository": {
@@ -12,5 +12,8 @@
   "bugs": {
     "url": "https://github.com/jarijokinen/consent/issues"
   },
-  "homepage": "https://github.com/jarijokinen/consent#readme"
+  "homepage": "https://github.com/jarijokinen/consent#readme",
+  "publishConfig": {
+    "access": "public"
+  }
 }

package/src/consent.js

@@ -10,17 +10,20 @@ export const consent = (options) => {
       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>
+      <h2 class="consent-title"></h2>
+      <div class="consent-message"></div>
+      <div class="consent-fields"></div>
+      <div class="consent-buttons"></div>
     `,
+    dialogTitle: 'Cookies',
+    dialogMessage: 'We would like to get your permission to use cookies for:',
     dialogClass: 'consent',
     settingsLinkSelector: '.consent-settings-link',
+    countryCookie: 'cf_country',
+    countries: ['AT', 'BE', 'BG', 'HR', 'CY', 'CZ', 'DK', 'EE', 'FI', 'FR', 
+                'DE', 'GR', 'HU', 'IE', 'IT', 'LV', 'LT', 'LU', 'MT', 'NL',
+                'PL', 'PT', 'RO', 'SK', 'SI', 'ES', 'SE', 'IS', 'LI', 'NO',
+                'GB', 'CH', 'MC', 'SM', 'VA', 'JE', 'GG', 'IM'],
     ...options
   };
 
@@ -35,26 +38,26 @@ export const consent = (options) => {
   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 detectCountry = () => {
+    const country = document.cookie.split('; ').find(r => 
+      r.startsWith(opts.countryCookie + '=')
+    )?.split('=')[1];
+    if (country ? opts.countries.includes(country) : true) {
+      return;
+    }
+    Object.keys(opts.storages).forEach((storage) => {
+      consentState[storage] = 'granted';
+    });
+    updateConsent();
   };
 
   const getConsent = (storage) => {
-    return getCookie('consent_' + storage);
+    return localStorage.getItem('consent_' + storage);
   };
 
   const updateConsent = () => {
     Object.keys(opts.storages).forEach((storage) => {
-      const cookieName = 'consent_' + storage;
-      setCookie(cookieName, consentState[storage]);
+      localStorage.setItem('consent_' + storage, consentState[storage]);
     });
 
     if (typeof gtag === 'function') {
@@ -71,9 +74,8 @@ export const consent = (options) => {
 
   const loadConsentState = () => {
     Object.keys(opts.storages).forEach((storage) => {
-      const cookieName = 'consent_' + storage;
-      consentState[storage] = getCookie(cookieName) || undefined;
-      if (consentState[storage] === undefined) {
+      consentState[storage] = getConsent(storage);
+      if (consentState[storage] === null) {
         showDialog();
       }
     });
@@ -85,6 +87,8 @@ export const consent = (options) => {
 
   const createDialog = () => {
     dialog.innerHTML = opts.dialogMarkup;
+    dialog.querySelector('.consent-title').innerText = opts.dialogTitle;
+    dialog.querySelector('.consent-message').innerText = opts.dialogMessage;
 
     Object.keys(opts.storages).forEach((storage) => {
       const fieldset = document.createElement('fieldset');
@@ -164,6 +168,7 @@ export const consent = (options) => {
     showDialog();
   };
 
+  detectCountry();
   loadConsentState();
   createDialog();
 };