Skip to content

Commit

Permalink
Cookies functionality & design
Browse files Browse the repository at this point in the history
  • Loading branch information
@PavlosIsaris
PavlosIsaris committed Jul 30, 2024
1 parent 8c04be3 commit 004d102
Show file tree
Hide file tree
Showing 7 changed files with 157 additions and 104 deletions.
115 changes: 79 additions & 36 deletions resources/js/cookies-consent.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,18 @@
import '../scss/cookies-consent.scss';

document.addEventListener('DOMContentLoaded', function () {

// Add event listeners to all accordion buttons to toggle the accordion content
document.querySelectorAll('.accordion-button').forEach(button => {
button.addEventListener('click', function () {
const target = document.querySelector(button.dataset.target);
if (target) {
target.classList.toggle('show');
button.classList.toggle('collapsed');
}
});
});

const acceptAllButton = document.getElementById('accept-all-cookies');
const acceptSelectedButton = document.getElementById('accept-selected-cookies');
const rejectOptionalButton = document.getElementById('reject-optional-cookies');
Expand All @@ -9,38 +21,60 @@ document.addEventListener('DOMContentLoaded', function () {
const showFloatingButton = cookieBanner.dataset.showFloatingButton === 'true';
const useSeparatePage = cookieBanner.dataset.useSeparatePage === 'true';

// Check if preferences are stored
if (getCookie('cookieConsent') && !window.location.href.includes('/cookie-policy')) {
cookieBanner.style.display = 'none';
if (showFloatingButton) {
cookieButton.style.display = 'block';
setSliders();

function onCookiesPage() {
return window.location.href.includes('/cookie-policy');
}

function setSliders() {
// Retrieve and set sliders based on cookieConsent cookie
const cookieConsent = getCookie('cookieConsent');
if (cookieConsent) {
const consentSettings = JSON.parse(cookieConsent);
for (const category in consentSettings) {
const categoryCheckbox = document.getElementById(category);
if (categoryCheckbox) {
categoryCheckbox.checked = consentSettings[category];
}
}
}
} else {
cookieBanner.style.display = 'block';
if (showFloatingButton) {
cookieButton.style.display = 'none';
// Check if preferences are stored
if (cookieConsent && !onCookiesPage()) {
cookieBanner.style.display = 'none';
if (showFloatingButton) {
cookieButton.style.display = 'block';
}
} else {
cookieBanner.style.display = 'block';
if (showFloatingButton) {
cookieButton.style.display = 'none';
}
}
}

acceptAllButton.addEventListener('click', function () {
handleCookieConsent({
necessary: true,
analytics: true,
const consent = {};
document.querySelectorAll('.cookie-category').forEach(checkbox => {
consent[checkbox.id] = true;
});
handleCookieConsent(consent);
});

acceptSelectedButton.addEventListener('click', function () {
handleCookieConsent({
necessary: true,
analytics: document.getElementById('statistics') ? document.getElementById('statistics').checked : false,
const consent = {};
document.querySelectorAll('.cookie-category').forEach(checkbox => {
consent[checkbox.id] = checkbox.checked;
});
handleCookieConsent(consent);
});

rejectOptionalButton.addEventListener('click', function () {
handleCookieConsent({
necessary: true,
analytics: false,
const consent = {};
document.querySelectorAll('.cookie-category').forEach(checkbox => {
consent[checkbox.id] = checkbox.id === 'strictly_necessary';
});
handleCookieConsent(consent);
});

function handleCookieConsent(consent) {
Expand All @@ -55,10 +89,28 @@ document.addEventListener('DOMContentLoaded', function () {
.then(data => {
if (data.success) {
setCookie('cookieConsent', JSON.stringify(consent), 30);
cookieBanner.style.display = 'none';
if (showFloatingButton) {
cookieButton.style.display = 'block';
setSliders();
if (!onCookiesPage()) {
cookieBanner.style.display = 'none';
if (showFloatingButton) {
cookieButton.style.display = 'block';
}
}
// create and show a success floating message
const message = document.createElement('div');
message.classList.add('cookie-success-message');
message.innerText = data.message;
// show the message with an animation, and after 4 seconds hide it, with another animation
document.body.appendChild(message);
setTimeout(() => {
message.classList.add('show');
}, 100);
setTimeout(() => {
message.classList.remove('show');
setTimeout(() => {
message.remove();
}, 1000);
}, 4000);
}
});
}
Expand All @@ -77,19 +129,10 @@ document.addEventListener('DOMContentLoaded', function () {
}
};

if (!useSeparatePage || window.location.href.includes('/cookie-policy')) {
document.querySelectorAll('.accordion-button').forEach(button => {
button.addEventListener('click', () => {
const target = document.querySelector(button.dataset.target);
target.classList.toggle('show');
});
});
}

// Clear cookieConsent when navigating to the cookie policy page
const cookiePolicyLink = document.getElementById('cookie-policy-link');
if (cookiePolicyLink) {
cookiePolicyLink.addEventListener('click', function() {
cookiePolicyLink.addEventListener('click', function () {
eraseCookie('cookieConsent');
});
}
Expand All @@ -99,19 +142,19 @@ document.addEventListener('DOMContentLoaded', function () {
let expires = "";
if (days) {
const date = new Date();
date.setTime(date.getTime() + (days*24*60*60*1000));
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
expires = "; expires=" + date.toUTCString();
}
document.cookie = name + "=" + (value || "") + expires + "; path=/";
document.cookie = name + "=" + (value || "") + expires + "; path=/";
}

function getCookie(name) {
const nameEQ = name + "=";
const ca = document.cookie.split(';');
for(let i=0;i < ca.length;i++) {
for (let i = 0; i < ca.length; i++) {
let c = ca[i];
while (c.charAt(0) === ' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length,c.length);
while (c.charAt(0) === ' ') c = c.substring(1, c.length);
if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length);
}
return null;
}
Expand Down
80 changes: 55 additions & 25 deletions resources/scss/cookies-consent.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,12 +7,37 @@
font-weight: 400;
line-height: 1.6;
min-height: 100vh;

a {
font-size: inherit;
}
}

.cookies-policy-body.banner {
min-height: auto;
}

.cookie-success-message {
position: fixed;
bottom: 1rem;
right: 1rem;
z-index: 1050;
padding: 0.75rem 1.25rem;
margin-bottom: 1rem;
border: 1px solid #c3e6cb;
border-radius: 0.25rem;
background-color: #d4edda; /* Success background color */
color: #155724; /* Success text color */
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
transition: opacity 0.15s linear;
}

.cookie-success-message.show {
opacity: 1;
transform: translateY(0);
transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
}

.cookies-consent-banner {

button, input, optgroup, select, textarea {
Expand All @@ -32,12 +57,9 @@
justify-content: center;
}

/* Define the col-6 class */
.col-6 {
width: 50%;
padding-right: 15px;
padding-left: 15px;
box-sizing: border-box;
.g-0 {
--bs-gutter-x: 0;
--bs-gutter-y: 0;
}

/* Define the col class */
Expand All @@ -48,12 +70,15 @@
box-sizing: border-box;
}

.g-0 {
--bs-gutter-x: 0;
--bs-gutter-y: 0;
/* Define the col-6 class */
.col-6 {
width: 50%;
padding-right: 15px;
padding-left: 15px;
box-sizing: border-box;
}

@media (min-width: 576px) {
@media (max-width: 576px) {
.col-sm-12 {
flex: 0 0 auto;
width: 100%;
Expand Down Expand Up @@ -139,17 +164,26 @@
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.125);
}

.accordion-collapse {
display: none;

&.show {
display: block;
}
}

.accordion-button::after {
flex-shrink: 0;
width: 1.25rem;
height: 1.25rem;
margin-left: auto;
content: "";
background: no-repeat center/50% url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23052c65'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
transform: rotate(0deg);
transition: transform 0.2s ease-in-out;
}

.accordion-button:not(.collapsed)::after {
.accordion-button.collapsed::after {
transform: rotate(90deg);
}

Expand Down Expand Up @@ -446,10 +480,6 @@
}
}

}

.cookies-consent-banner {

#cookie-consent-title {
font-size: large;
}
Expand Down Expand Up @@ -480,17 +510,17 @@
z-index: 1000;
width: 550px;
display: none;
}

.cookies-consent-banner .cookie-actions {
button#accept-all-cookies, button#accept-selected-cookies {
/*Query for non-mobile */
@media (min-width: 576px) {
border-right: 0;
}
/* Query for mobile */
@media (max-width: 575.98px) {
border-bottom: 0;
.cookie-actions {
button#accept-all-cookies, button#accept-selected-cookies {
/*Query for non-mobile */
@media (min-width: 576px) {
border-right: 0;
}
/* Query for mobile */
@media (max-width: 575.98px) {
border-bottom: 0;
}
}
}
}
11 changes: 6 additions & 5 deletions resources/views/components/_cookie-categories.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,18 +2,20 @@
$alwaysOpen = $alwaysOpen ?? false;
$cookieCategories = config('cookies_consent.cookies');
@endphp

<meta name="csrf-token" content="{{ csrf_token() }}">
<div class="accordion" id="cookieAccordion">
@foreach($cookieCategories as $category => $cookies)
<div class="accordion-item cookies-consent-category-item">
<h5 class="accordion-header h5" id="heading-{{ $category }}">
<button class="accordion-button" type="button" data-toggle="collapse"
<button class="accordion-button {{ $alwaysOpen || $category === 'strictly_necessary' ? 'collapsed' : '' }}"
type="button" data-toggle="collapse"
data-target="#collapse-{{ $category }}" aria-expanded="{{ $alwaysOpen ? 'true' : 'false' }}"
aria-controls="collapse-{{ $category }}">
{{ ucfirst(str_replace('_', ' ', $category)) }}
</button>
</h5>
<div id="collapse-{{ $category }}" class="accordion-collapse collapse {{ $alwaysOpen ? 'show' : '' }}"
<div id="collapse-{{ $category }}"
class="accordion-collapse {{ $alwaysOpen || $category === 'strictly_necessary' ? 'show' : '' }}"
aria-labelledby="heading-{{ $category }}"
data-parent="#cookieAccordion">
<div class="accordion-body">
Expand Down Expand Up @@ -42,9 +44,8 @@
</dd>
@if($cookie['policy_external_link'])
<dd>
<strong>Policy link: </strong>
<a href="{{ $cookie['policy_external_link'] }}"
target="_blank">{{ $cookie['policy_external_link'] }}</a>
target="_blank">Policy link</a>
</dd>
@endif
</dl>
Expand Down
8 changes: 5 additions & 3 deletions resources/views/components/laravel-cookies-consent.blade.php
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
<section class="cookies-consent-banner banner cookies-policy-body" id="cookies-consent-banner" role="dialog" aria-labelledby="cookie-consent-title"
<section class="cookies-consent-banner banner cookies-policy-body" id="cookies-consent-banner" role="dialog"
aria-labelledby="cookie-consent-title"
aria-describedby="cookie-consent-description"
data-ajax-url="{{ url('/cookie-consent') }}"
data-ajax-url="{{ url('/cookie-consent/save') }}"
data-show-floating-button="{{ config('cookie-consent.display_floating_button') }}"
data-use-separate-page="{{ config('cookie-consent.use_separate_page') }}" style="display: none;">
<h5 id="cookie-consent-title" class="h5 m-0 pt-0 pb-2">
Expand All @@ -9,7 +10,8 @@
We use cookies to optimize our website and our service. You can choose which categories you consent to.</p>

@if(config('cookies_consent.use_separate_page'))
<p class="small">For more detailed information about cookies, please visit our <a href="{{ url('/cookie-policy') }}">cookie policy page</a>.</p>
<p class="small">For more detailed information about cookies, please visit our <a
href="{{ url('/cookie-policy') }}">cookie policy page</a>.</p>
@else
@include('cookies_consent::components._cookie-categories')
@endif
Expand Down
6 changes: 3 additions & 3 deletions resources/views/cookie-policy.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
<body class="cookies-policy-body cookies-consent-banner">
<div class="container">
<div class="row">
<div class="col-6">
<div class="col-6 col-sm-12">
<h1>Cookie Policy</h1>
<p>This is the cookie policy page. Here you can read about the Cookies that are used in the application and
select which cookies to allow.</p>
Expand Down Expand Up @@ -65,7 +65,7 @@
</div>
</div>
<div class="row">
<div class="col-6">
<div class="col-6 col-sm-12">
<h2>Cookies used in this application</h2>
<p>
The following cookies are used in this application. Please select which cookies you would like to allow.
Expand All @@ -77,7 +77,7 @@
<section class="cookies-consent-banner" id="cookies-consent-banner" role="dialog"
aria-labelledby="cookie-consent-title"
aria-describedby="cookie-consent-description"
data-ajax-url="{{ url('/cookie-consent') }}"
data-ajax-url="{{ url('/cookie-consent/save') }}"
data-show-floating-button="false"
data-use-separate-page="true">
@include('cookies_consent::components._cookie-categories', ['alwaysOpen' => true])
Expand Down
Loading

0 comments on commit 004d102

Please sign in to comment.