Merge pull request #2 from MetamorfosiLab/feature/migrate-to-arrays

Feature: move code logic from Object to Arrays, update docs

docs/config/cookies-options.md

@@ -48,3 +48,14 @@ Only applicable to a cookie associated with Google Analytics. Determines whether
 - **Type:** `string`
 
 Only applicable to a cookie associated with Google Analytics. Google Analytics code for the global site tag (gtag.js).
+
+## cookies
+
+- **Type:** `Array<Omit<Cookie, 'title' | 'description' | 'cookies'>> | undefined`
+- **Default:** `undefined`
+
+Define a list of cookies that will be accepted or rejected when the user accepts or rejects the parent cookie. The cookies in this list will not be displayed in the settings window.
+
+This is useful for cookies that are not necessary for the operation of the website but that are used to collect data. For example, cookies from Google Analytics, Facebook Pixel, etc.
+
+It is only allowed to define one level of cookies. That is, it is not possible to define cookies that have cookies associated with them.

docs/config/shared-options.md

@@ -86,7 +86,7 @@ Parameters that define the message content.
 
 ## cookies
 
-- **Type:** [`Cookies`](../types/cookies-type.md)
+- **Type:** [`Cookie[]`](../types/cookies-type.md)
 - **Reference:** [Cookies Options](./cookies-options.md)
 - **Example:**
 

docs/types/cookies-type.md

@@ -2,10 +2,6 @@
 
 Define a type to represent custom cookies in the cookies settings window.
 
-## Type
-
-<<< ../../src/types/index.ts#CookiesInterface
-
 ## `Cookie` Interface
 
 <<< ../../src/types/cookie.types.ts

src/examples/main.ts

@@ -25,8 +25,8 @@ const cookiesConsent = new CookiesConsent({
   // #endregion content
 
   // #region cookies
-  cookies: {
-    essential_cookie: {
+  cookies: [
+    {
       name: 'essential_cookie',
       title: 'Essential Cookies',
       description: `
@@ -35,13 +35,7 @@ const cookiesConsent = new CookiesConsent({
       </p>
       `,
     },
-    // cc_ga: {
-    //   name: 'cc_ga',
-    //   title: 'Google Analytics',
-    //   description: '<p>GA Cookies 🍪.</p>',
-    //   code: 'G-XXXXXXXXXX',
-    // },
-    analytics: {
+    {
       name: 'analytics',
       title: 'Analytics',
       description: '<p>Analytics Cookies 🍪.</p>',
@@ -56,7 +50,7 @@ const cookiesConsent = new CookiesConsent({
         },
       ],
     },
-  },
+  ],
   // #endregion cookies
 })
 // #endregion callbacks

src/index.ts

@@ -59,9 +59,13 @@ export class CookiesConsent {
     return 'cookies' in cookie
   }
 
+  #searchCookie(name: string) {
+    return this.params.cookies?.find(cookie => cookie.name === name)
+  }
+
   checkParameters() {
     this.params = this.params || {}
-    this.params.cookies = this.params.cookies || {}
+    this.params.cookies = this.params.cookies || []
 
     for (const cookie in this.params.cookies) {
       if (!this.#isCookiesGroup(this.params.cookies[cookie])) {
@@ -212,12 +216,12 @@ export class CookiesConsent {
 
     this.createSettingsHeader(divCookieSettings)
 
-    for (const cookie in this.params.cookies) {
-      const cookieElement = this.createCookieElement(cookie)
+    this.params.cookies?.forEach((cookie) => {
+      const cookieElement = this.createCookieElement(cookie.name)
 
       if (cookieElement)
         divCookieSettings.appendChild(cookieElement)
-    }
+    })
 
     this.createSettingsButtons(divCookieSettings)
 
@@ -254,11 +258,13 @@ export class CookiesConsent {
     return divCookie
   }
 
-  createCookieTitle(cookie: string, elem_id: string) {
-    if (this.params.cookies?.[cookie]?.title) {
-      const divTitle = this.createElement('div', 'cc-window-settings-cookie-title', this.params.cookies[cookie].title)
+  createCookieTitle(cookieName: string, elem_id: string) {
+    const cookie = this.#searchCookie(cookieName)
 
-      if (this.params.cookies[cookie]?.description && this.params.hideDescription) {
+    if (cookie) {
+      const divTitle = this.createElement('div', 'cc-window-settings-cookie-title', cookie.title)
+
+      if (cookie.description && this.params.hideDescription) {
         divTitle.innerHTML += ` <div id="cc-window-icon-dropdown-id-${elem_id}">&#10095;</div>`
         divTitle.classList.add('cc-window-settings-cookie-title-dropdown')
 
@@ -271,29 +277,36 @@ export class CookiesConsent {
     }
   }
 
-  createCookieDescription(cookie: string, elem_id: string) {
-    if (this.params.cookies?.[cookie]?.description) {
+  createCookieDescription(cookieName: string, elem_id: string) {
+    const cookie = this.#searchCookie(cookieName)
+
+    if (cookie?.description) {
       const divDescription = document.createElement('div')
       divDescription.id = `cc-window-desc-id-${elem_id}`
       divDescription.className = 'cc-window-settings-cookie-desc'
 
-      if (this.params.cookies[cookie]?.title && this.params.hideDescription)
+      if (cookie?.title && this.params.hideDescription)
         divDescription.style.display = 'none'
 
-      divDescription.innerHTML = this.params.cookies[cookie].description ?? ''
+      divDescription.innerHTML = cookie.description ?? ''
       return divDescription
     }
   }
 
-  createCookieStatus(cookie: string) {
+  createCookieStatus(cookieName: string) {
+    const cookie = this.#searchCookie(cookieName)
+
+    if (!cookie)
+      return
+
     let checked = ''
-    if (this.#answered && this.params.cookies?.[cookie]?.name)
-      checked = this.#cookies_status[this.params.cookies[cookie].name] ? ' checked="checked"' : ''
+    if (this.#answered)
+      checked = this.#cookies_status[cookie.name] ? ' checked="checked"' : ''
     else
-      checked = this.params.cookies?.[cookie].checked ? ' checked="checked"' : ''
+      checked = cookie.checked ? ' checked="checked"' : ''
 
-    const disabled = this.params.cookies?.[cookie].disabled && checked !== '' ? ' disabled="disabled"' : ''
-    const name = this.params.cookies?.[cookie].name ?? ''
+    const disabled = cookie.disabled && checked !== '' ? ' disabled="disabled"' : ''
+    const name = cookie.name ?? ''
 
     const divStatus = document.createElement('div')
     divStatus.className = 'cc-window-settings-cookie-value'
@@ -526,10 +539,11 @@ export class CookiesConsent {
     const invokeAnalyticsCallback = (cookieType: AnalyticsType) => {
       const status = Boolean(this.#cookies_status?.[cookieType].status === true)
       const manageFunction = cookieType === 'cc_ga' ? manageGoogleAnalytics : manageGoogleTagManager
+      const cookie = this.#searchCookie(cookieType)
 
-      if (this.params.cookies?.[cookieType]) {
+      if (cookie) {
         try {
-          manageFunction({ lifecycle: type, cookie: this.params.cookies[cookieType], status, path: this.params.path })
+          manageFunction({ lifecycle: type, cookie, status, path: this.params.path })
         }
         catch (err) {
           console.error(`ERROR: cc-${cookieType}.js script not loaded`)

src/types/cookie.types.ts

@@ -41,5 +41,10 @@ export interface Cookie {
    */
   code?: string
 
-  cookies?: Array<Omit<Cookie, 'title' | 'description'>>
+  /**
+   * Define this property if the cookie is a parent of other cookies.
+   * So when the parent cookie is accepted, all its children will be accepted too.
+   * If the parent cookie is rejected, all its children will be rejected too.
+   */
+  cookies?: Array<Omit<Cookie, 'title' | 'description' | 'cookies'>>
 }

src/types/index.ts

@@ -9,19 +9,6 @@ export type CookiesConsentStatusType = 'accept' | 'reject' | 'selection'
 export type LifecycleType = 'first-load' | 'load' | 'accept' | 'reject'
 export type AnalyticsType = 'cc_ga' | 'cc_gtm'
 
-// #region CookiesInterface
-/**
- * Define a type to represent custom cookies in the cookies settings window.
- */
-export interface Cookies {
-  /**
-   * Custom cookies can be added using their respective names as keys.
-   * The values are instances of the `Cookie` type.
-   */
-  [cookieName: string]: Cookie
-}
-// #endregion CookiesInterface
-
 // #region CookiesStatusInterface
 /**
  * Define a type to represent the status of custom cookies.
@@ -31,7 +18,7 @@ export interface CookiesStatus {
    * Status of each custom cookie, identified by their respective names.
    * The values are boolean flags indicating whether the cookie is accepted or rejected.
    */
-  [key: keyof Cookies]: {
+  [key: string]: {
     status: boolean
     parent?: Cookie
   } & Cookie
@@ -61,7 +48,7 @@ export interface CookiesConsentParams {
 
   content: Content
 
-  cookies?: Cookies
+  cookies?: Cookie[]
 
   callback?: Callback
 }