diff --git a/src/components/cookie-consent/_cookie-consent.hbs b/src/components/cookie-consent/_cookie-consent.hbs index 3a11ef14..7367c0a8 100644 --- a/src/components/cookie-consent/_cookie-consent.hbs +++ b/src/components/cookie-consent/_cookie-consent.hbs @@ -27,9 +27,9 @@ {{/if-equals}} {{#if-equals type "dialog"}} -Cookie preferences +Cookie preferences - --}} {{/if-equals}} diff --git a/src/components/cookie-consent/cookie-consent.js b/src/components/cookie-consent/cookie-consent.js index b3b2e9c3..165851e4 100644 --- a/src/components/cookie-consent/cookie-consent.js +++ b/src/components/cookie-consent/cookie-consent.js @@ -1,64 +1,149 @@ import * as CookieConsentAPI from 'vanilla-cookieconsent' class CookieConsent { - constructor(config = null, element = null) { - if (CookieConsent.instance) { - throw new Error('Use CookieConsent.getInstance() to get the Singleton instance') - } - - // this.config = config - // this.bannerElement = element + constructor(config = null) { this.isInit = false + this.config = config ? { ...config, autoShow: false } : null + this.dialogElement = null - if (config || element) { - this.init(config, element) + if (this.config) { + this.createDialog() + this.init() + } else { + console.error('Cookie consent configuration not provided') } - - CookieConsent.instance = this } - static getInstance() { - if (!CookieConsent.instance) { - CookieConsent.instance = new CookieConsent() + createDialog() { + const { language: { translations: { en } }, categories = {} } = this.config + const { consentModal, preferencesModal } = en + console.log('consentModal', consentModal) + + const cookiesListHtml = ` + + ` + + // Create the dialog dynamically + const preferencesDialogHtml = ` + + ` + + // Append to the body + const dialogContainer = document.querySelector('.js-open-dialog-cookie-consent') + + // Initialise dialog + if (dialogContainer) { + // Dynamically create the dialog HTML + const tempDiv = document.createElement('div') + tempDiv.innerHTML = preferencesDialogHtml + this.dialogElement = tempDiv.firstElementChild + + // Append the dialog directly to the body + document.body.appendChild(this.dialogElement) + + // Initialize the NSW Design System Dialog + this.dialogInstance = new window.NSW.Dialog(this.dialogElement) + this.dialogInstance.init() + } else { + console.warn('Dialog trigger element not found') } - return CookieConsent.instance - } - init(config, element) { - this.config = { - ...config, - autoShow: false, + // Initialise tabs + if (window.NSW && window.NSW.Tabs) { + const tabs = document.querySelector('.js-cookie-consent-tabs') + new window.NSW.Tabs(tabs).init() + } else { + console.warn('NSW Tabs library not found') } - this.bannerElement = element + } - if (element) { + init() { + if (this.dialogElement) { this.initElements() - } - - if (this.config) { this.initAPI() + this.attachEventListeners() + } else { + console.error('Banner element not created') } - - this.attachEventListeners() } initElements() { - if (!this.bannerElement) { + if (!this.dialogElement) { console.error('Banner element not provided') return } - this.cookieInputContainer = this.bannerElement.querySelector('.nsw-cookie-dialog__list') + this.cookieInputContainer = this.dialogElement.querySelector('.nsw-cookie-dialog__list') this.allCookieInputs = this.cookieInputContainer.querySelectorAll('input[type="checkbox"]') - this.acceptSelectionButton = this.bannerElement.querySelector('[data-role="accept-selection"]') - this.acceptAllButton = this.bannerElement.querySelector('[data-role="accept-all"]') - this.rejectAllButton = this.bannerElement.querySelector('[data-role="reject-all"]') + this.acceptSelectionButton = this.dialogElement.querySelector('[data-role="accept-selection"]') + this.acceptAllButton = this.dialogElement.querySelector('[data-role="accept-all"]') + this.rejectAllButton = this.dialogElement.querySelector('[data-role="reject-all"]') } initAPI() { - if (!this.config) { - console.error('Configuration not provided') - return - } CookieConsentAPI.run(this.config).then(() => { this.isInit = true this.loadUserPreferences() @@ -66,7 +151,7 @@ class CookieConsent { } attachEventListeners() { - if (!this.bannerElement) return + if (!this.dialogElement) return if (this.acceptSelectionButton) { this.acceptSelectionButton.addEventListener('click', () => { @@ -99,11 +184,6 @@ class CookieConsent { } sortSelection(criteria) { - if (!this.cookieInputContainer) { - console.error('Container with class "nsw-cookie-dialog__list" not found') - return - } - const checked = [] const unchecked = [] diff --git a/src/components/cookie-consent/json/cookie-consent-4.json b/src/components/cookie-consent/json/cookie-consent-4.json index 2455cf16..e3382015 100644 --- a/src/components/cookie-consent/json/cookie-consent-4.json +++ b/src/components/cookie-consent/json/cookie-consent-4.json @@ -1,5 +1,5 @@ { - "id": "cookie-banner", + "id": "cookie-consent", "title": "Cookies on Digital NSW website", "content": "You control your data. Learn more about the cookies we use, and choose which cookies to allow.", "cookie-information": "", diff --git a/src/global/handlebars/layouts/layout.hbs b/src/global/handlebars/layouts/layout.hbs index e8e18c8f..22e4c0a5 100644 --- a/src/global/handlebars/layouts/layout.hbs +++ b/src/global/handlebars/layouts/layout.hbs @@ -53,10 +53,14 @@ waitForCookieConsent(() => { const config = { categories: { + necessary: { + enabled: true, + readOnly: true, + }, analytics: {}, foo: {}, }, - onConsent: (preferences) => console.log('Accepted:', preferences), + onConsent: (preferences) => console.log('Cookies preferences accepted'), language: { default: 'en', translations: { @@ -73,21 +77,43 @@ acceptAllBtn: 'Accept all', acceptNecessaryBtn: 'Reject all', savePreferencesBtn: 'Accept current selection', - closeIconLabel: 'Close modal', + closeIconLabel: 'Close dialog', sections: [ { - title: 'Foo', + title: 'Necessary', description: 'These cookies collect information about how you use our website. All of the data is anonymized and cannot be used to identify you.', - linkedCategory: 'foo', + linkedCategory: 'necessary', }, { title: 'Performance and Analytics', description: 'These cookies collect information about how you use our website. All of the data is anonymized and cannot be used to identify you.', linkedCategory: 'analytics', }, + { + title: 'Foo', + description: 'These cookies collect information about how you use our website. All of the data is anonymized and cannot be used to identify you.', + linkedCategory: 'foo', + }, ], + tabTitle1: 'Cookie preferences', + tabTitle2: 'What are cookies?', + cookiesInformation: ` +

Cookies are files saved on your phone, tablet or computer when you visit a website.

+

They store information about how you use the website, such as the pages you visit.

+

Cookies are not viruses or computer programs. They are very small so do not take up much space.

+

How we use cookies

+

We use cookies to:

+ +

Also mention if your NSW Government website does or does not collect personal information.

+

For more information on what cookies are, how they work and how to delete them from your computer, you can visit www.allaboutcookies.org.

` + }, }, - }, }, }, }