ViMaSter/hackertours-theme
Watch
0
0
Fork
You've already forked hackertours-theme
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Improve cookiebanner.

Browse source
This commit is contained in:
Fredrik Jonsson 2025-03-29 13:26:39 +01:00
commit e058a3dd5b
4 changed files with 16 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

2
README.md
View file

@ -556,7 +556,7 @@ It it recommended to add a link or button to allow users to change their choice.
```html ```html
<button class="clearcookieconsent">Cookie settings</button> <button class="clearcookieconsent">Cookie settings</button>
<a src="" class="clearcookieconsent">Cookie settings</a> <a href="#" class="clearcookieconsent">Cookie settings</a>
``` ```
When a user clickes the button/link the localStorage item "cookieconsent" is cleared and the cookieconsent dialog is shown again. When a user clickes the button/link the localStorage item "cookieconsent" is cleared and the cookieconsent dialog is shown again.

14
assets/js/cookieconsent.js
View file

@ -8,20 +8,20 @@
const cookieconsent = localStorage.getItem('cookieconsent'); const cookieconsent = localStorage.getItem('cookieconsent');
if (cookiebanner && !cookieconsent) { if (cookiebanner && !cookieconsent) {
cookiebanner.classList.remove('hidden'); cookiebanner.hidden = false;
cookiebanner.classList.add('js-cookieconsent-open'); cookiebanner.dataset.cookieconsentopen = true;
} }
const cookie_buttons = document.querySelectorAll('button[data-consent]'); const cookie_buttons = document.querySelectorAll('button[data-consent]');
cookie_buttons.forEach(function (button) { cookie_buttons.forEach(function (button) {
button.addEventListener('click', function () { button.addEventListener('click', function () {
if (button.getAttribute('data-consent') === 'true') { if (button.dataset.consent === 'true') {
localStorage.setItem('cookieconsent', 'accept'); localStorage.setItem('cookieconsent', 'accept');
} else { } else {
localStorage.setItem('cookieconsent', 'decline'); localStorage.setItem('cookieconsent', 'decline');
} }
cookiebanner.classList.remove('js-cookieconsent-open'); delete cookiebanner.dataset.cookieconsentopen;
cookiebanner.classList.add('hidden'); cookiebanner.hidden = true;
}); });
}); });
@ -31,8 +31,8 @@
e.preventDefault(); e.preventDefault();
if (cookiebanner && cookieconsent) { if (cookiebanner && cookieconsent) {
localStorage.removeItem('cookieconsent'); localStorage.removeItem('cookieconsent');
cookiebanner.classList.remove('hidden'); cookiebanner.hidden = false;
cookiebanner.classList.add('js-cookieconsent-open'); cookiebanner.dataset.cookieconsentopen = true;
} }
}); });
}); });

9
assets/sass/components/cookieconsent/_cookieconsent.scss
View file

@ -8,7 +8,7 @@
position: sticky; position: sticky;
bottom: 0; bottom: 0;
width: 100%; width: 100%;
padding-block-start: .5rem; padding: var(--spacing-xs);
color: var(--color-warning); color: var(--color-warning);
background-color: var(--color-warning-bg); background-color: var(--color-warning-bg);
border-block-start: 4px solid var(--color-warning-border); border-block-start: 4px solid var(--color-warning-border);
@ -16,6 +16,11 @@
transform: translateY(100vh); transform: translateY(100vh);
transition: all 130ms ease-out; transition: all 130ms ease-out;
z-index: 99; z-index: 99;
&__actions {
display: flex;
gap: .5rem;
}
} }
.button { .button {
@ -28,6 +33,6 @@
} }
} }
.js-cookieconsent-open { [data-cookieconsentopen] {
transform: translateY(0); transform: translateY(0);
} }

2
layouts/partials/cookieconsent.html
View file

@ -1,4 +1,4 @@
<div class="cookieconsent layout__cookieconsent hidden"> <div class="cookieconsent layout__cookieconsent" hidden>
<div class="cookieconsent__message"> <div class="cookieconsent__message">
{{ i18n "cookieconsent_message" }} {{ i18n "cookieconsent_message" }}
</div> </div>