@jarijokinen/consent 0.0.2 → 0.0.3

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,15 +43,13 @@ 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'
     };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jarijokinen/consent",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "description": "A zero-dependency, vanilla JavaScript consent manager with native Consent Mode support.",
   "main": "src/consent.js",
   "repository": {

package/src/consent.js

@@ -10,15 +10,13 @@ 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',
     ...options
@@ -35,26 +33,13 @@ 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 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 +56,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 +69,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');