Relevant source files

The following files were used as context for generating this wiki page: - [src/modules/GrantsInterface.ts](https://github.com/wotschofsky/consent-manager/blob/main/src/modules/GrantsInterface.ts) - [src/styles.scss](https://github.com/wotschofsky/consent-manager/blob/main/src/styles.scss) - [src/modules/ConsentManager.ts](https://github.com/wotschofsky/consent-manager/blob/main/src/modules/ConsentManager.ts) - [README.md](https://github.com/wotschofsky/consent-manager/blob/main/README.md) - [src/index.ts](https://github.com/wotschofsky/consent-manager/blob/main/src/index.ts) - [src/bundle.ts](https://github.com/wotschofsky/consent-manager/blob/main/src/bundle.ts) - [package.json](https://github.com/wotschofsky/consent-manager/blob/main/package.json)

# GrantsInterface: UI Components The `GrantsInterface` module provides ready-to-use UI components for managing user consent. It works in conjunction with the core `ConsentManager` to present a cookie banner and a detailed preferences modal, allowing users to view and control their consent settings. The module is designed to be flexible, offering both automatic UI display for new users and manual control for developers who need more fine-grained integration. This module dynamically generates HTML elements and attaches them to the document's body, handling user interactions and updating the consent state via the `ConsentManager` instance. It is exported for use in modular JavaScript projects and is also attached to the `window` object in bundled versions for direct browser usage. Sources: [README.md:120-124](), [src/modules/GrantsInterface.ts](), [src/index.ts:5](), [src/bundle.ts:7]() ## Architecture The `GrantsInterface` class is instantiated with a `ConsentManager` client object. This tight coupling allows the UI components to directly read configuration and grant states, as well as call methods to update user preferences. Sources: [src/modules/GrantsInterface.ts:42-46]() ### Class Diagram This diagram illustrates the relationship between `GrantsInterface` and `ConsentManager`. `GrantsInterface` holds a reference to a `ConsentManager` instance to manage consent state. ```mermaid classDiagram class ConsentManager { +config: ConsentManagerConfig +grants: GrantsStatus +isCustomized: boolean +setGrant(id, status) +on(event, callback) } class GrantsInterface { -client: ConsentManager -config: GrantsInterfaceConfig +showBanner() +hideBanner() +showModal() +hideModal() +generateConsentTable(autoUpdate) } GrantsInterface "1" -- "1" ConsentManager : uses ``` Sources: [src/modules/GrantsInterface.ts:41-46](), [src/modules/ConsentManager.ts:70-74]() ## Configuration The `GrantsInterface` can be configured during instantiation. If no configuration is provided, it uses a set of default values for UI text and behavior. Sources: [src/modules/GrantsInterface.ts:18-40]() ### `GrantsInterfaceConfig` Options | Option | Type | Description | Default Value - | | `autoShow` | `boolean`| If `true`, the banner is shown automatically if the user has not yet customized their consent. | `true` - | | `languageStrings` | `object` | An object containing strings for the banner and modal UI. Any unspecified strings will fall back to the default. See tables below for details. | `{ banner: { ... }, modal: { ... } }` - | Sources: [src/modules/GrantsInterface.ts:6-20](), [README.md:154-169]() ### `languageStrings.banner` | Key | Type | Default Value | | ---------- | -------- | -------------------------------------------------------------------------- | | `infoText` | `string` | 'This website uses cookies to ensure you get the best experience on our website.' | | `accept` | `string` | 'Accept All' | | `reject` | `string` | 'Only required' | | `options` | `string` | 'More options' | Sources: [src/modules/GrantsInterface.ts:23-28]() ### `languageStrings.modal` | Key | Type | Default Value | | ------- | -------- | ------------------- | | `title` | `string` | 'Consent options' | | `accept`| `string` | 'Accept All' | | `reject`| `string` | 'Only required' | Sources: [src/modules/GrantsInterface.ts:30-34]() ## UI Components The `GrantsInterface` manages two primary UI components: a consent banner and a preferences modal. ### Consent Banner The consent banner is the initial point of interaction for users who have not yet set their preferences. **Behavior:** - It is displayed automatically if `config.autoShow` is `true` and `client.isCustomized` is `false`. - It can be manually controlled with `showBanner()` and `hideBanner()`. - It is automatically hidden when the user makes a choice, which sets `client.isCustomized` to `true` and triggers an `update` event. Sources: [src/modules/GrantsInterface.ts:44-46](), [src/modules/GrantsInterface.ts:111-115]() **DOM Structure:** The banner is an `

` element with the class `.consent-manager--banner-wrapper`. It contains two main sections: 1. `.consent-manager--banner-info`: Displays the `infoText`. 2. `.consent-manager--banner-actions`: Contains three buttons: * `.consent-manager--banner-accept`: Accepts all categories. * `.consent-manager--banner-reject`: Rejects all non-required categories. * `.consent-manager--banner-more`: Opens the preferences modal. Sources: [src/modules/GrantsInterface.ts:56-108](), [src/styles.scss:1-38]() #### Banner Interaction Flow This diagram shows the sequence of events when a user interacts with the banner buttons. ```mermaid sequenceDiagram participant User participant BannerUI as "Banner UI" participant GrantsInterface as "GrantsInterface" participant ConsentManager as "ConsentManager" User->>BannerUI: Click "Accept All" BannerUI->>GrantsInterface: Click event GrantsInterface->>ConsentManager: setGrant('*', true) Note over ConsentManager: Writes cookie, dispatches 'update' event ConsentManager-->>GrantsInterface: 'update' event GrantsInterface->>BannerUI: hideBanner() User->>BannerUI: Click "Only required" BannerUI->>GrantsInterface: Click event GrantsInterface->>ConsentManager: setGrant('*', false) Note over ConsentManager: Writes cookie, dispatches 'update' event ConsentManager-->>GrantsInterface: 'update' event GrantsInterface->>BannerUI: hideBanner() User->>BannerUI: Click "More options" BannerUI->>GrantsInterface: Click event GrantsInterface->>GrantsInterface: showModal() GrantsInterface->>BannerUI: hideBanner() ``` Sources: [src/modules/GrantsInterface.ts:79-102]() ### Preferences Modal The modal allows for granular control over each consent category. **Behavior:** - It is typically shown when the user clicks the "More options" button on the banner. - It can be manually controlled with `showModal()` and `hideModal()`. - It can be closed by clicking the '×' button or the backdrop. Sources: [src/modules/GrantsInterface.ts:98-102](), [src/modules/GrantsInterface.ts:213-217](), [src/modules/GrantsInterface.ts:257-265]() **DOM Structure:** The modal is composed of a backdrop (`.consent-manager--modal-backdrop`) containing a container (`.consent-manager--modal-container`). The container includes: - A header (`.consent-manager--modal-header`) with a title and a close button. - The main content, which is a `` generated by `generateConsentTable(true)`. - A footer (`.consent-manager--modal-actions`) with "Accept All" and "Only required" buttons. Sources: [src/modules/GrantsInterface.ts:204-255](), [src/styles.scss:74-126]() ## `generateConsentTable()` Method This public method is a core utility of the `GrantsInterface`. It dynamically builds and returns an `HTMLTableElement` that lists all consent categories from the `ConsentManager` configuration. Sources: [src/modules/GrantsInterface.ts:123-125](), [README.md:175-181]() ### Logic Flow The following flowchart outlines the process of generating the consent table. ```mermaid flowchart TD A[Start generateConsentTable] --> B{Create

element}; B --> C{Iterate through client.config.categories}; C --> D{For each category}; D --> E{Create element}; E --> F{Get current grant status}; F --> G{Build row HTML with checkbox, label, description}; G --> H{Is category required?}; H -- Yes --> I[Disable checkbox]; H -- No --> J{Add 'change' event listener to checkbox}; J --> K[On change, call client.setGrant(id, checked)]; K --> L{autoUpdate === true?}; L -- Yes --> M[Add client.on('update') listener]; M --> N[Listener updates checkbox if category ID matches]; I --> O[Append to

]; N --> O; L -- No --> O; O --> P{End of loop?}; P -- No --> D; P -- Yes --> Q[Return

element]; ``` Sources: [src/modules/GrantsInterface.ts:123-199]() ### Key Features - **Dynamic Rows**: Creates a table row for each category defined in `ConsentManager.config.categories`. - **State Reflection**: Checkboxes reflect the current state (`client.grants`) and are disabled for `required` categories. - **Interactivity**: For non-required categories, `change` event listeners are added to the checkboxes, which call `client.setGrant()` to update the consent state. - **Auto-Update**: If the `autoUpdate` parameter is `true`, it subscribes to the `ConsentManager`'s `update` event to ensure the checkboxes are synchronized with changes made elsewhere in the application. Sources: [src/modules/GrantsInterface.ts:127-197]()