-
@@ -66,16 +86,17 @@ const DialogTabList = ({ config, preferences }) => {
* Render cookie tab list.
*/
const renderTabList = () => {
- const cookies = config.get('cookies', true) || [];
- const cookiesWithState = cookies.map(cookieType => ({
+ const cookies = cookieInformation || [];
+
+ const cookiesWithState = cookies.map((cookieType) => ({
...cookieType,
- accepted: preferences.get(cookieType.id)
- ? preferences.get(cookieType.id).accepted
+ accepted: Preferences().get(cookieType.id)
+ ? Preferences().get(cookieType.id).accepted
: undefined,
}));
return `
-
- ${cookiesWithState.map(renderTab).join('')}
+
+ ${cookiesWithState.map(renderTab).join("")}
`;
};
@@ -89,8 +110,8 @@ const DialogTabList = ({ config, preferences }) => {
* Simple method to get values from cookie checkboxes.
*/
const getValues = () => {
- const inputs = [...tabList.querySelectorAll('input')];
- return inputs.map(input => ({
+ const inputs = [...tabList.querySelectorAll("input")];
+ return inputs.map((input) => ({
id: input.value,
accepted: input.checked,
}));
@@ -100,9 +121,10 @@ const DialogTabList = ({ config, preferences }) => {
* Handle tab selection.
*/
const selectTab = ({ tabs, panels, targetTab }) => {
- const controls = targetTab ? targetTab.getAttribute('aria-controls') : '';
- tabs.forEach(tab => tab.setAttribute('aria-selected', tab === targetTab));
- panels.forEach(panel => panel.setAttribute('aria-hidden', controls !== panel.id));
+ const controls = targetTab ? targetTab.getAttribute("aria-controls") : "";
+ tabs.forEach((tab) => tab.setAttribute("aria-selected", tab === targetTab));
+ panels.forEach((panel) =>
+ panel.setAttribute("aria-hidden", controls !== panel.id));
};
/**
@@ -111,10 +133,10 @@ const DialogTabList = ({ config, preferences }) => {
const attachTabClickListeners = () => {
const tabs = [...tabList.querySelectorAll('[role="tab"]')];
const panels = [...tabList.querySelectorAll('[role="tabpanel"]')];
- tabs.forEach(tab => {
- tab.addEventListener('click', e => {
+ tabs.forEach((tab) => {
+ tab.addEventListener("click", (e) => {
e.preventDefault();
- const targetTab = tab.getAttribute('aria-selected') === 'true' ? null : tab;
+ const targetTab = tab.getAttribute("aria-selected") === "true" ? null : tab;
selectTab({ tabs, panels, targetTab });
});
});
@@ -128,7 +150,6 @@ const DialogTabList = ({ config, preferences }) => {
element: tabList,
getValues,
};
-
};
export default DialogTabList;
diff --git a/src/dialog.mjs b/src/dialog.mjs
index eb61901..9192fb6 100644
--- a/src/dialog.mjs
+++ b/src/dialog.mjs
@@ -1,87 +1,199 @@
-import { htmlToElement, preventingDefault } from '@grrr/utils';
-import EventDispatcher from './event-dispatcher.mjs';
-import DialogTabList from './dialog-tablist.mjs';
+/* eslint class-methods-use-this:[
+ "error",
+ {
+ "exceptMethods":
+ [
+ "getConfig",
+ "initEventDispatcher",
+ "getPreferences",
+ "initDomToggler"
+ ]
+ }
+] */
+
+import { htmlToElement, preventingDefault } from "@grrr/utils";
+import EventDispatcher from "./event-dispatcher";
+import DialogTabList from "./dialog-tablist";
+import DomToggler from "./dom-toggler";
+
+import Config from "./config";
+import Preferences from "./preferences";
/**
* Dialog which is shown to update cookie preferences.
*/
-const Dialog = ({ config, preferences }) => {
+export default class Dialog extends HTMLElement {
+ constructor() {
+ // Always call super first in constructor
+ super();
+ // sets and returns 'this.shadowRoot'
+ this.attachShadow({ mode: "open" });
+ // get data
+ this.data = this.getData();
+ // get config
+ this.config = this.getConfig();
+ // initialize event dispatcher
+ this.events = this.initEventDispatcher();
+ // initialize teblist
+ this.tabList = this.initTabList();
+ // get cookies
+ this.cookies = this.data.cookies;
+ // generate dialog element
+ this.dialogElement = this.generateDialogElement();
+ // append dialog to shadowRoot
+ this.shadowRoot.append(this.dialogElement);
+ // get preferences
+ this.preferences = this.getPreferences();
+ // initialize domtoggler
+ this.domToggler = this.initDomToggler();
+ // initialize show and hide
+ this.show = this.show();
+ this.hide = this.hide();
+ // get all preferences
+ this.preferences.getAll();
+
+ this.domToggler.toggle(this.preferences);
- const tabList = DialogTabList({ config, preferences });
- const events = EventDispatcher();
+ // if cookie prefs already selected dispatch update event and hide
+ if (this.preferences.hasPreferences()) {
+ this.events.dispatch("update", this.preferences.getAll());
+ }
- const TYPE = config.get('type');
- const PREFIX = config.get('prefix');
- const DIALOG_TEMPLATE = config.get('dialogTemplate');
+ // add submit event
+ this.events.add("submit", this.updatePreference.bind(this));
+ }
- // Only allow the `acceptAllButton` when no preferences have been stored.
- const ACCEPT_ALL_BUTTON = config.get('acceptAllButton') && !preferences.hasPreferences();
+ getData() {
+ // fallback content from config
+ const fallbackContent = {
+ title: Config().get("labels.title"),
+ description: Config().get("labels.description"),
+ saveButtonText: Config().get("labels.aria.button"),
+ defaultbuttonLabel: Config().get("labels.button.default"),
+ acceptAllButton: Config().get("acceptAllButton") && !Preferences().hasPreferences(),
+ };
+ // custom content from data-attributes
+ const customContent = {
+ title: this.getAttribute("data-title"),
+ description: this.getAttribute("data-description"),
+ saveButtonText: this.getAttribute("data-saveButtonText"),
+ };
+ // parse cookies to json
+ const cookies = JSON.parse(this.getAttribute("data-cookies"));
- /**
- * Render dialog element.
- */
- const renderDialog = () => {
- if (DIALOG_TEMPLATE) {
- const templateVars = { PREFIX, config };
- return DIALOG_TEMPLATE(templateVars);
- }
+ return {
+ title: customContent.title === null ? fallbackContent.title : customContent.title,
+ description: customContent.description === null
+ ? fallbackContent.description : customContent.description,
+ saveButtonText: customContent.saveButtonText === null
+ ? fallbackContent.saveButtonText : customContent.saveButtonText,
+ defaultbuttonLabel: fallbackContent.defaultbuttonLabel,
+ acceptAllButton: fallbackContent.acceptAllButton,
+ cookies,
+ };
+ }
+
+ getConfig() {
+ return {
+ type: Config().get("type"),
+ prefix: Config().get("prefix"),
+ dialogTemplate: Config().get("dialogTemplate"),
+ };
+ }
+
+ initEventDispatcher() {
+ return EventDispatcher();
+ }
+
+ initTabList() {
+ return DialogTabList(this.data.cookies);
+ }
+
+ generateDialogElement() {
- return `
- `;
+
+ const dialogElement = htmlToElement(template);
+
+ dialogElement.insertAdjacentHTML('afterbegin', `
+ `);
+
+ const formElement = dialogElement.lastElementChild;
+
+ formElement.addEventListener("submit", preventingDefault(this.submitHandler.bind(this)));
+
+ dialogElement.insertBefore(this.tabList.element, formElement);
+
+ return dialogElement;
+
+ }
+
+ submitHandler(e) {
+ e.preventDefault();
+ // Get values based on the rules defined in `composeValues`.
+ const values = this.composeValues(this.tabList.getValues());
+
+ if (!values) {
+ return;
+ }
+
+ // Dispatch values and hide the dialog.
+ this.events.dispatch("submit", values);
+ // toggleDialogVisibility(this.firstElementChild).hide();
+ this.hide();
+ }
+
+ composeValues(values) {
+
+ /**
+ * Compose values based on input type, the `acceptAllButton` configuration,
+ * any stored preferences and the state of the input options.
+ *
+ * When an option is checked, the form will just submit. When nothing is checked,
+ * it depends on the type and the `acceptAllButton` config setting.
+ *
+ * - Radio + option checked: success
+ * - Radio + nothing checked + has `acceptAllButton`: select first + success
+ * - Radio + nothing checked + no `acceptAllButton`: fail
+ *
+ * - Checkbox + option(s) checked: success
+ * - Checkbox + nothing checked + has `acceptAllButton`: select all + success
+ * - Checkbox + nothing checked + no `acceptAllButton`: success
+ */
// Radio when no option is selected.
- if (TYPE === 'radio' && !values.find(v => v.accepted)) {
+ if (this.config.type === "radio" && !values.find((v) => v.accepted)) {
// If the `acceptAllButton` option is configured, select the first option and
// let the form submit as if the user had selected it.
- if (ACCEPT_ALL_BUTTON) {
+ if (this.data.acceptAllButton) {
values[0].accepted = true;
return values;
}
@@ -91,11 +203,12 @@ const Dialog = ({ config, preferences }) => {
// Checkbox with `acceptAllButton` and no user-choosable option is checked.
// We compare amount of required options against checked options.
- const requiredCount = config.get('cookies').filter(c => c.required).length;
- const checkedCount = values.filter(v => v.accepted).length;
+
+ const requiredCount = this.data.cookies.filter((c) => c.required).length;
+ const checkedCount = values.filter((v) => v.accepted).length;
const userOptionsChecked = checkedCount >= requiredCount;
- if (ACCEPT_ALL_BUTTON && TYPE === 'checkbox' && !userOptionsChecked) {
- return values.map(value => ({
+ if (this.data.acceptAllButton && this.config.type === "checkbox" && !userOptionsChecked) {
+ return values.map((value) => ({
...value,
accepted: true,
}));
@@ -105,59 +218,58 @@ const Dialog = ({ config, preferences }) => {
// - Radio when an option has been selected.
// - Checkbox with or without checked option, except the `acceptAllButton` case above.
return values;
+ }
- };
+ getPreferences() {
+ const preferences = Preferences(Config().get("prefix"));
- /**
- * Handle form submits.
- */
- const submitHandler = e => {
- e.preventDefault();
+ return preferences;
+ }
- // Get values based on the rules defined in `composeValues`.
- const values = composeValues(tabList.getValues());
- if (!values) {
- return;
- }
+ updatePreference(selectedCookies) {
+ this.preferences.store(selectedCookies);
+ this.events.dispatch("update", this.preferences.getAll());
+ this.domToggler.toggle(this.preferences);
+ }
- // Dispatch values and hide the dialog.
- events.dispatch('submit', values);
- hide();
- };
-
- /**
- * Update button label.
- */
- const updateButtonLabel = label => {
- button.textContent = label;
- };
-
- return {
- init() {
- // Initialize tab list and append it to the form.
- tabList.init();
- form.insertBefore(tabList.element, form.firstElementChild);
-
- // Attach submit listener to the form.
- form.addEventListener('submit', preventingDefault(submitHandler));
-
- // Update initial button label if `acceptAllButton` is set to true,
- // and no cookie preferences have been stored. Also listen for changes
- // in the form, and revert the button back to normal when an option has
- // been selected.
- if (ACCEPT_ALL_BUTTON) {
- updateButtonLabel(config.get('labels.button.acceptAll'));
- form.addEventListener('change', e => {
- updateButtonLabel(config.get('labels.button.default'));
- });
- }
- },
- on: events.add,
- show,
- hide,
- element: dialog,
- };
+ initDomToggler() {
+ return DomToggler(Config());
+ }
+
+ show() {
+ return () => this.shadowRoot.querySelector('.cookie-consent').setAttribute("aria-hidden", "false");
+ }
+
+ hide() {
+ return () => this.shadowRoot.querySelector('.cookie-consent').setAttribute("aria-hidden", "true");
+ }
-};
+ on(type, payload) {
+ return this.events.add(type, payload);
+ }
-export default Dialog;
+ static get observedAttributes() {
+ return ["data-cookies"];
+ }
+
+ attributeChangedCallback(attrName, oldValue, newValue) {
+ // Set this.cookies to the updated value
+ this.cookies = JSON.parse(newValue);
+ // Transform NodeList to array
+ const arrayfiedTabList = Array.from(this.tabList.element.children);
+ // Filter out all li elements
+ const tabListChildren = arrayfiedTabList.filter(item => item.nodeName === "LI");
+ // Loop through arrayfiedTabListChildren
+ tabListChildren.forEach(input => {
+ // Find all input elements
+ const inputElement = input.firstElementChild.firstElementChild.firstElementChild;
+ // Loop through updated cookies
+ this.cookies.forEach(cookie => {
+ // set the checked state to the updated cookie state
+ if (inputElement.value === cookie.id && cookie.checked) {
+ inputElement.checked = true;
+ }
+ });
+ });
+ }
+}
diff --git a/src/preferences.mjs b/src/preferences.mjs
index 04aec4c..0f5a176 100644
--- a/src/preferences.mjs
+++ b/src/preferences.mjs
@@ -1,20 +1,19 @@
-import { parseJson } from '@grrr/utils';
-import Storage from './storage.mjs';
+import { parseJson } from "@grrr/utils";
+import Storage from "./storage";
-const KEY_SUFFIX = 'preferences';
+const KEY_SUFFIX = "preferences";
/**
* Normalize cookie preferences and set/get from Storage.
*/
-const Preferences = prefix => {
-
+const Preferences = (prefix) => {
const KEY = `${prefix}-${KEY_SUFFIX}`;
const storage = Storage();
const getAll = () => parseJson(storage.get(KEY)) || [];
- const get = id => getAll().find(type => type.id === id);
- const getState = id => get(id) && get(id).accepted;
+ const get = (id) => getAll().find((type) => type.id === id);
+ const getState = (id) => get(id) && get(id).accepted;
const hasPreferences = () => storage.has(KEY) && getAll().length;
const store = (cookies = []) => storage.set(KEY, JSON.stringify(cookies));
@@ -25,7 +24,6 @@ const Preferences = prefix => {
hasPreferences,
store,
};
-
};
export default Preferences;
diff --git a/src/storage.mjs b/src/storage.mjs
index 5e066dd..ebb0d6a 100644
--- a/src/storage.mjs
+++ b/src/storage.mjs
@@ -1,30 +1,30 @@
-import { supportsLocalStorage } from './utils.mjs';
+import { supportsLocalStorage } from "./utils";
/**
* Store items in LocalStorage.
*/
const Storage = () => {
-
- const storageModule = supportsLocalStorage() ? window.localStorage : {
- attributes: {},
- setItem(key, val) {
- this.attributes[key] = val;
- },
- getItem(key) {
- return this.attributes[key];
- },
- };
+ const storageModule = supportsLocalStorage()
+ ? window.localStorage
+ : {
+ attributes: {},
+ setItem(key, val) {
+ this.attributes[key] = val;
+ },
+ getItem(key) {
+ return this.attributes[key];
+ },
+ };
const get = (key, value) => storageModule.getItem(key, value);
const set = (key, value) => storageModule.setItem(key, value);
- const has = key => storageModule.getItem(key) !== null;
+ const has = (key) => storageModule.getItem(key) !== null;
return {
get,
set,
has,
};
-
};
export default Storage;
diff --git a/src/toggle-dialog-visibility.mjs b/src/toggle-dialog-visibility.mjs
new file mode 100644
index 0000000..3b548d7
--- /dev/null
+++ b/src/toggle-dialog-visibility.mjs
@@ -0,0 +1,10 @@
+const toggleDialogVisibility = (dialogElement) => {
+ return {
+ show: () => {
+ dialogElement.setAttribute("aria-hidden", "false");
+ },
+ hide: () => dialogElement.setAttribute("aria-hidden", "true"),
+ };
+};
+
+export default toggleDialogVisibility;
diff --git a/test/config.test.js b/test/config.test.js
index 586f814..47e3f4a 100644
--- a/test/config.test.js
+++ b/test/config.test.js
@@ -1,13 +1,13 @@
-import Config from '../src/config';
+import Config from "../src/config";
-describe('Config', () => {
- test('append-falsy', () => {
+describe("Config", () => {
+ test("append-falsy", () => {
const config = Config({ append: false });
- expect(config.get('append')).toBeFalsy();
+ expect(config.get("append")).toBeFalsy();
});
- test('append-truthy', () => {
+ test("append-truthy", () => {
const config = Config({});
- expect(config.get('append')).toBeTruthy();
+ expect(config.get("append")).toBeTruthy();
});
});
diff --git a/test/cookie-consent.test.js b/test/cookie-consent.test.js
deleted file mode 100644
index 84df3fc..0000000
--- a/test/cookie-consent.test.js
+++ /dev/null
@@ -1,20 +0,0 @@
-import CookieConsent from "../src/cookie-consent";
-
-describe("CookieConsent", () => {
- const FOO = { id: "foo", accepted: true };
- const BAR = { id: "bar", accepted: false };
- const COOKIES = [FOO, BAR];
-
- const cookieConsent = CookieConsent({
- cookies: COOKIES,
- });
-
- test("updatePreference", () => {
- const input = [
- { id: "foo", accepted: false },
- { id: "bar", accepted: true },
- ];
- cookieConsent.updatePreference(input);
- expect(cookieConsent.getPreferences("foo")).toEqual(input);
- });
-});