twurth.cookiebanner v0.0.6
Cookie Banner Component
This is a project generated with Stencil in combination with tailwindcss for building a standalone Cookie Banner Web Component. This compontent should be reusable for different projects and easily configurable.
Contents
- Used frameworks
- Getting Started
- Using this component
- Configure this component
- Configuration Options
- Listening to action events
- Recommandations
Used frameworks
Getting Started
To start building this cookie banner web component, clone this repo to a new directory:
git clone https://git.rheinenergie.com/rheinenergie-com-relaunch/baellebad/reusable-cookie-banner.git my-cookie-banner-component
cd my-cookie-banner-component
git remote rm origin
and run:
npm install
npm start
To build this component for production, run:
npm run build
To make tailwindcss listen to changes in the layout, run:
npx tailwindcss -i ./src/directives.css -o ./www/build/cookiebanner.css --watch
Using this component
This component will be uploaded into our CDN soon, then it will be available for individual use. The documentation will then be found here.
CDN
Comming soon...
Configure this component
This component can be configured with its attributes and with slots which will be integrated in the component layout.
Attributes
Can be assigned directly within the HTML tag:
<cookie-banner-component font-family-regular="Arial"></cookie-banner-component>
Can be assigned and mutated dynamically with JavaScript:
document.querySelector('cookie-banner-component').fontFamilyRegular = 'Arial'
or
document.querySelector('cookie-banner-component').setAttribute('font-family-regular', 'Arial')
Slots
- Can be assigned within the HTML component:
<cookie-banner-component> <h1 slot="topic">Cookies</h1> </cookie-banner-component>
- Can be assigned dynamically with JavaScript:
or mutated:const slotNode = document.createElement('h1') slotNode.slot = 'topic' slotNode.textContent = 'Cookies' document.querySelector('cookie-banner-component').appendChild(slotNode)
document.querySelector('cookie-banner-component [slot="topic"]').textContent = 'Cookies'
Configuration Options
There are different options for attributes and slots which can be used to configure the component. These options are listed below.
Attributes
Attribute name | Attribute type | Attribute default value |
---|---|---|
img-src | string | 'assets/default.svg' |
topic | string | 'Cookies' |
description | string | 'Entscheiden Sie ob die Cookie Einstellungen übernommen oder abgelehnt werden sollen.' |
font-family-regular | string | '' (Default browser font family) |
font-family-bold | string | '' (Default browser font family) |
color-backdrop | string | 'rgba(0, 0, 0, 0.7)' |
color-bg | string | '#ffffff' |
color-text | string | '#000000' |
color-primary | string | '#000000' |
color-secondary | string | '#000000' |
color-on-primary | string | '#ffffff' |
color-on-secondary | string | '#ffffff' |
actions | string | 'primary, secondary' (A set of custom actions, can be reassigned for custom use) |
show-confirmation | boolean | false |
confirmation-timeout | number | 3000 |
cookie-storageName | string | 'cookiesAccepted' |
cookie-domain | string | 'rheinenergie.com' |
ignore-default-action | boolean | false |
show | boolean | Depending on cookie state (When ignore-default-action = true => Default value: false) |
Slots
Slot name | Slot default value |
---|---|
topic | 'Cookies' |
description | 'Entscheiden Sie ob die Cookie Einstellungen übernommen oder abgelehnt werden sollen.' |
actionType-action-text | '' |
confirmation-topic | 'Bestätigung' |
confirmation-description | 'Ihre Cookie-Einstellungen wurden erfolgreich gespeichert.' |
actionType-confirmation-topic | confirmation-topic |
actionType-confirmation-description | confirmation-description |
Listening to action events
The Cookie Banner is emitting an event when a button is clicked (an action is triggered), this event can be accessed with JavaScript and handled individually. The event emitter will return the triggered event with further details to this event, e.g. the button name which is triggered.
document.querySelector('cookie-banner-component').addEventListener('action', (evt) => {
// The component is accessible with the event target
const component = evt.currentTarget || evt.target;
// Details stored in the custom event details
const eventDetails = evt.detail;
// The original pointer event is given in the event details
const originalEvent = eventDetails.event;
// To check which action is triggered the action type is transferred
// in the event details as a string, e.g. 'primary' or 'secondary'
const triggeredAction = eventDetails.type;
});
Example for custom events to listen to
Custom events can be created with the actions attribute of the component which is a type of string. Separated by a "," there could be multiple actions given.
Directly assigned with HTML:
<cookie-banner-component actions="primary, secondary, tertiary"></cookie-banner-component>
Dynamically assigned with JavaScript:
document.querySelector('cookie-banner-component').actions = 'primary, secondary, tertiary'
or
document.querySelector('cookie-banner-component').setAttribute('actions', 'primary, secondary, tertiary')
With this assignment it can be listened to this custom assigned action types:
document.querySelector('cookie-banner-component').addEventListener('action', (evt) => {
switch (evt.detail.type) {
case 'primary':
break;
case 'secondary':
break;
case 'tertiary':
break;
default:
break;
}
});
Recommandations
Hide component while undefined
When using slots in a web component the html will usually be rendered before the slots are placed in the web component. So the slot content could appear on the page for a small time frame. To avoid this, there is a CSS property which can be used to hide the element as long as it is not defined.
cookie-banner-component
{
display: none;
}
cookie-banner-component:defined
{
display:block;
}
Access component styling from outsite
Add extra styling from without the components shadow dom to customize the component even more. Parts that can be styled externally:
Part to be styled | Description of styled part | Location | Containing |
---|---|---|---|
backdrop | Backdrop of the component | Top level | content |
content | Component content | backdrop | head, main and footer |
head | Component content head | content | logo |
main | Component content main | content | topic and description |
footer | Component content footer | content | action container |
logo | Logo image | head | |
topic | Component topic | main | |
description | Component description | main | |
action-container | Container containing action buttons | footer | action(s) |
action | Every action | action container | |
actionType-action | Specific action | action container | |
confirmation | Component confirmation | backdrop | confirmation-content |
confirmation-content | Confirmation content | confirmation | confirmation-topic, confirmation-description |
confirmation-topic | Confirmation content topic | confirmation-content | |
confirmation-description | Confirmation content description | confirmation-content |
How to access the different parts:
cookie-banner-component::part(backdrop)
{
...
}