GrantsInterface: UI Components

Relevant source files

The following files were used as context for generating this wiki page:

• src/modules/GrantsInterface.ts
• src/styles.scss
• src/modules/ConsentManager.ts
• README.md
• src/index.ts
• src/bundle.ts
• package.json

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.

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 <aside> 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.

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 <table> 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.

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