From ba08c5f422f6e11b0a022b7552283eebcfbd43c4 Mon Sep 17 00:00:00 2001 From: Paul Isaris Date: Thu, 30 Jan 2025 10:50:05 +0200 Subject: [PATCH] Introducing v3.0.0 with a new JSON-format for the cookies --- CHANGELOG.md | 84 +++++++++++++++++ README.md | 52 ++++++----- config/cookies_consent.php | 21 +++-- package-lock.json | 4 +- package.json | 2 +- public/cookies-consent.css | 2 +- public/cookies-consent.js | 2 +- resources/js/cookies-consent.js | 30 ++++-- resources/scss/cookies-consent.scss | 59 ++++++++---- .../components/_cookie-categories.blade.php | 4 +- .../laravel-cookies-consent.blade.php | 93 ++++++++++--------- resources/views/cookie-policy.blade.php | 1 + src/Http/Controllers/CookiesController.php | 40 +------- 13 files changed, 246 insertions(+), 148 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 9b6518a..6db8eea 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,6 +5,89 @@ All notable changes to `laravel-cookies-consent` will be documented in this file The format is based on [Keep a Changelog](http://keepachangelog.com/) and this project adheres to [Semantic Versioning](http://semver.org/). +## v3.0.0 - Major Release - JSON Cookie Storage & Configuration Changes - 2025-01-30 + +### Breaking Changes + +* JSON Cookie Storage: Cookies are now stored in a JSON object under a single key with the prefix specified in the + configuration file. This change improves the structure and management of cookies. + +* Configuration File Changes: The configuration file format has been updated to reflect the new JSON cookie storage + method. The `cookie_prefix` is now used to store cookies in a JSON object. + +### Migration Guide + +1. Update the configuration file to reflect the new JSON cookie storage method: + +* Ensure the `cookie_prefix` is set in the `config/cookies_consent.php` file. +* Update the `name` field of each cookie in the `cookies` array to reflect the new JSON storage format. + +Example: + +```php +'cookie_prefix' => 'my_app_', +'cookies' => [ + 'strictly_necessary' => [ + [ + 'name' => 'my_app_cookies_consent', + 'description' => 'This cookie is set by the GDPR Cookie Consent plugin and is used to store whether or not user has consented to the use of cookies. It does not store any personal data.', + 'duration' => '2 years', + 'policy_external_link' => null, + ], + // other cookies... + ], + 'targeting' => [ + // cookies... + ], +], +``` + +2. Update Blade Files + +* Update the Blade files to reflect the new JSON cookie storage method. The `cookie` helper function is used to set and + retrieve cookies from the JSON object. + +Example: + +```php +@if(isset($_COOKIE[config('cookies_consent.cookie_prefix') . 'cookies_consent'])) + @php + $cookiesConsent = json_decode($_COOKIE[config('cookies_consent.cookie_prefix') . 'cookies_consent'], true); + @endphp + @if(isset($cookiesConsent['targeting']) && $cookiesConsent['targeting'] && config('app.google_analytics_id')) + + + @endif +@endif +``` + +3. Publish the front-end assets + +* Run the following command to publish the updated assets: +`php artisan vendor:publish --provider="SciFY\LaravelCookiesConsent\LaravelCookiesConsentServiceProvider" --tag=" +cookies-consent-assets" --force` + +4. Test your application + +* Ensure that the cookies consent functionality works as expected with the new JSON storage format. +* Verify that the cookies are correctly set and retrieved in the browser. + ## v2.0.7 - UI Improvements for smaller screens - 2024-01-27 - Improved the UI design for smaller screens (phones & tablets) @@ -65,6 +148,7 @@ php artisan vendor:publish \ --tag="cookies-consent-assets" ``` + ## v1.0.1 - Fixed bug on setting "all" cookies button - 2023-03-16 This release addresses [this issue](https://github.com/scify/laravel-cookies-consent/issues/4), regarding the cookie diff --git a/README.md b/README.md index 640f679..7eaafd5 100644 --- a/README.md +++ b/README.md @@ -224,31 +224,32 @@ For example, An application that wants to load the Google Analytics script only the `targeting` cookie category, might do the following: -```bash -google-analytics.blade.php - +```php -@if(isset($_COOKIE[config('cookies_consent.cookie_prefix') -. 'cookies_consent_targeting']) && config('app.google_analytics_id')) - - - +@if(isset($_COOKIE[config('cookies_consent.cookie_prefix') . 'cookies_consent'])) + @php + $cookiesConsent = json_decode($_COOKIE[config('cookies_consent.cookie_prefix') . 'cookies_consent'], true); + @endphp + @if(isset($cookiesConsent['targeting']) && $cookiesConsent['targeting'] && config('app.google_analytics_id')) + + + @endif @endif ``` @@ -324,7 +325,8 @@ Make sure that the `composer.json` file of the Laravel app has the following ent "symlink": true } } - ] + ], +"minimum-stability": "dev", ``` This will tell composer that the code for the package is of the `"@dev"` version and that it exists in the specified diff --git a/config/cookies_consent.php b/config/cookies_consent.php index fb65785..26ca933 100644 --- a/config/cookies_consent.php +++ b/config/cookies_consent.php @@ -5,11 +5,18 @@ * This prefix will be applied when setting and getting all cookies. * If not set, the cookies will not be prefixed. * If set, a good strategy is to also add a trailing underscore "_", that will be added between the field value, and each cookie. - * For example, if `cookie_prefix` is set to `my_app_`, then the targeting cookie will have a value of `my_app_cookies_consent_targeting`. - * When using this plugin for multiple apps, it is a good strategy to set a prefix that is relevant to the app - * (for example "my_app_", in order for the cookies not to be mingled when running locally. + * For example, if `cookie_prefix` is set to `my_app_`, then the cookies will be stored in a JSON object with the key `my_app_cookies_consent_selection`. + * Example: + * + * { + * "my_app_cookies_consent_selection": { + * "strictly_necessary": true, + * "performance": false, + * "targeting": false + * } + * } */ - 'cookie_prefix' => '', + 'cookie_prefix' => 'my_app_', 'display_floating_button' => true, // Set to false to display the footer link instead 'use_separate_page' => false, // Set to true to use a separate page for cookies explanation /* @@ -18,9 +25,6 @@ |-------------------------------------------------------------------------- | | Choose your preferred cookies to be shown. You can add more cookies as desired. - | If, for example you add another cookie with the name "marketing", then you should also - | publish the translation files and add a "cookie_marketing" key in the translation file, - | since the plugin will try to display the cookie name by this convention. | | Built-in: "strictly_necessary" | @@ -28,7 +32,8 @@ 'cookies' => [ 'strictly_necessary' => [ [ - 'name' => 'cookieConsent', + // you need to change this in order to reflect the cookie_prefix from above + 'name' => 'my_app_cookies_consent', 'description' => 'This cookie is set by the GDPR Cookie Consent plugin and is used to store whether or not user has consented to the use of cookies. It does not store any personal data.', 'duration' => '2 years', 'policy_external_link' => null, diff --git a/package-lock.json b/package-lock.json index e914e32..e66a954 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "laravel-cookies-consent", - "version": "2.0.8", + "version": "3.0.0", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "laravel-cookies-consent", - "version": "2.0.8", + "version": "3.0.0", "license": "ISC", "devDependencies": { "sass": "^1.79.4", diff --git a/package.json b/package.json index 52771cc..c094475 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "laravel-cookies-consent", - "version": "2.0.8", + "version": "3.0.0", "description": "

\"logo\"

", "main": "index.js", "directories": { diff --git a/public/cookies-consent.css b/public/cookies-consent.css index ee9d0e6..0c409fa 100644 --- a/public/cookies-consent.css +++ b/public/cookies-consent.css @@ -1 +1 @@ -.cookies-policy-body{color:#222;font-family:Roboto,sans-serif;font-size:16px;font-weight:400;line-height:1.6;min-height:100vh}.cookies-policy-body a{font-size:inherit}.cookies-policy-body.banner{min-height:auto}.cookie-success-message{position:fixed;bottom:1rem;right:1rem;z-index:1050;padding:.75rem 1.25rem;margin-bottom:1rem;border:1px solid #c3e6cb;border-radius:.25rem;background-color:#d4edda;color:#155724;box-shadow:0 .5rem 1rem #00000026;transition:opacity .15s linear}.cookie-success-message.show{opacity:1;transform:translateY(0);transition:opacity .5s ease-in-out,transform .5s ease-in-out}.cookies-consent-banner{background-color:#f8f9fa;color:#000;padding:20px;border-radius:5px;box-shadow:0 2px 10px #0000001a}.cookies-consent-banner button,.cookies-consent-banner input,.cookies-consent-banner optgroup,.cookies-consent-banner select,.cookies-consent-banner textarea{font-family:inherit;font-size:inherit;line-height:inherit;margin:0}.cookies-consent-banner .row{display:flex;flex-wrap:wrap;margin-right:-.75rem;margin-left:-.75rem;align-items:center;justify-content:center}.cookies-consent-banner .g-0{--bs-gutter-x: 0;--bs-gutter-y: 0}.cookies-consent-banner .col{flex:1;padding-right:15px;padding-left:15px;box-sizing:border-box}.cookies-consent-banner .col-6{width:50%;padding-right:15px;padding-left:15px;box-sizing:border-box}@media (max-width: 576px){.cookies-consent-banner .col-sm-12{flex:0 0 auto;width:100%}}@media (min-width: 992px){.cookies-consent-banner .col-lg-4{flex:0 0 auto;width:33.33333333%;padding:2px 8px}}.cookies-consent-banner .btn{display:inline-block;font-weight:400;line-height:1.5;color:#212529;text-align:center;text-decoration:none;vertical-align:middle;cursor:pointer;-webkit-user-select:none;user-select:none;border:1px solid #212529;padding:.425rem .1rem;font-size:95%;border-radius:.375rem;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;white-space:nowrap}.cookies-consent-banner .btn-light{color:#212529;background-color:#f8f9fa}.cookies-consent-banner .btn-light:hover{color:#212529;background-color:#dae0e5;border-color:#dae0e5}.cookies-consent-banner .w-100{width:100%!important}.cookies-consent-banner .accordion{--bs-accordion-border-color: $border-color}.cookies-consent-banner .accordion-item{background-color:#fff;border:1px solid #dee2e6;color:#212529}.cookies-consent-banner .accordion-header{margin-bottom:0}.cookies-consent-banner .accordion-button{position:relative;display:flex;align-items:center;width:100%;padding:1rem 1.25rem;font-size:1rem;color:#212529;text-align:left;background-color:#dee2e6;border:1px solid transparent;border-top-left-radius:.375rem;border-top-right-radius:.375rem;cursor:pointer;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out}.cookies-consent-banner .accordion-button:not(.collapsed){color:#0d6efd;background-color:#dee2e6;box-shadow:inset 0 -1px #00000020}.cookies-consent-banner .accordion-collapse.show{display:block}.cookies-consent-banner .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(0);transition:transform .2s ease-in-out}.cookies-consent-banner .accordion-button.collapsed:after{transform:rotate(90deg)}.cookies-consent-banner .accordion-collapse{border-top:1px solid #dee2e6}.cookies-consent-banner .accordion-body{padding:1rem 1.25rem}@media (max-width: 575.98px){.cookies-consent-banner .accordion-body{padding:.5rem}}.cookies-consent-banner .form-check{position:relative;display:block;padding-left:1.25rem}.cookies-consent-banner .form-check-input{float:left;margin-left:-1.25rem;width:1rem;height:1rem;border:1px solid #dee2e6;border-radius:.375rem;background-color:#fff;background-repeat:no-repeat;background-position:center;background-size:contain;-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-print-color-adjust:exact;color-adjust:exact;transition:background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out}.cookies-consent-banner .form-check-input[type=checkbox]{border-radius:.25em}.cookies-consent-banner .form-check-input:checked{background-color:#0d6efd;border-color:#0d6efd}.cookies-consent-banner .form-check-input:focus{border-color:#0d6efd;outline:0;box-shadow:0 0 0 .25rem #0d6efd40}.cookies-consent-banner .form-check-input:disabled{filter:none;opacity:.5;pointer-events:none}.cookies-consent-banner .form-check-input:disabled~.form-check-label,.cookies-consent-banner .form-check-input[disabled]~.form-check-label{cursor:default;opacity:.5}.cookies-consent-banner dl,.cookies-consent-banner ol,.cookies-consent-banner ul{margin-bottom:1rem;margin-top:0}.cookies-consent-banner dd{margin-bottom:.5rem;margin-left:0}@media (max-width: 575.98px){.cookies-consent-banner dd:last-child{margin-bottom:0}}.cookies-consent-banner b,.cookies-consent-banner strong{font-weight:bolder}.cookies-consent-banner .form-switch{padding-left:2.5rem}.cookies-consent-banner .form-switch .form-check-input{width:2em;height:18px;background-color:#adb5bd;border-radius:1em;position:relative;transition:background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out}.cookies-consent-banner .form-switch .form-check-input:hover{cursor:pointer}.cookies-consent-banner .form-switch .form-check-input{--bs-form-switch-bg: none;background-image:none}.cookies-consent-banner .form-switch .form-check-input:before{content:"";position:absolute;top:.125em;left:.125em;width:.75em;height:.75em;border-radius:.75em;background-color:#fff;transition:transform .15s ease-in-out}.cookies-consent-banner .form-switch .form-check-input:checked:before{transform:translate(1em)}.cookies-consent-banner .form-switch .form-check-input:checked{background-color:#0d6efd}.cookies-consent-banner .list-group{display:flex;flex-direction:column;padding-left:0;margin-bottom:0}.cookies-consent-banner .list-group-item{position:relative;display:block;padding:.75rem 1.25rem;background-color:#fff;border:1px solid rgba(0,0,0,.125)}@media (max-width: 575.98px){.cookies-consent-banner .list-group-item{padding:.25rem .5rem}}.cookies-consent-banner .mt-3{margin-top:1rem!important}.cookies-consent-banner .h5{font-size:1.25rem}.cookies-consent-banner .small{font-size:90%}.cookies-consent-banner .m-0{margin:0!important}.cookies-consent-banner .pt-0{padding-top:0!important}.cookies-consent-banner .pb-2{padding-bottom:.5rem!important}.cookies-consent-banner dl{margin-top:0;margin-bottom:1rem}@media (max-width: 575.98px){.cookies-consent-banner dl{margin-bottom:0}}.cookies-consent-banner dt{font-weight:700}.cookies-consent-banner code{font-size:87.5%;color:#d63384;word-wrap:break-word}.cookies-consent-banner .accordion{background-color:#fff;border:1px solid #ddd;border-radius:4px;margin-bottom:10px}.cookies-consent-banner .accordion-item{border-bottom:1px solid #ddd}.cookies-consent-banner .accordion-header{margin-top:0;padding:10px 15px;cursor:pointer;font-weight:700;background-color:#f7f7f7}@media (max-width: 575.98px){.cookies-consent-banner .accordion-header{padding:2px}}.cookies-consent-banner .accordion-button{display:flex;justify-content:space-between;align-items:center;width:100%;background:none;border:none;padding:10px;cursor:pointer}.cookies-consent-banner .accordion-button:focus{outline:none}.cookies-consent-banner .accordion-collapse{display:none}.cookies-consent-banner .accordion-collapse.show{display:block;padding:10px 15px}@media (max-width: 575.98px){.cookies-consent-banner .accordion-collapse.show{padding:2px}}.cookies-consent-banner .form-check{display:flex;align-items:center}.cookies-consent-banner .form-check-input{width:20px;height:20px;margin-right:10px}.cookies-consent-banner .form-check-label{margin-bottom:0}.cookies-consent-banner .btn-light{color:#212529;background-color:#f8f9fa;cursor:pointer}.cookies-consent-banner .btn-light:hover{background-color:#e2e6ea}.cookies-consent-banner .cookies-consent-banner{padding:20px;background-color:#fff;border:1px solid #ddd;border-radius:4px;box-shadow:0 2px 4px #0000001a;max-width:800px;margin:20px auto}.cookies-consent-banner .cookie-actions{margin-top:20px}.cookies-consent-banner .cookie-button{position:fixed;bottom:10px;left:10px;background-color:#f8f9fa;border:1px solid #ddd;border-radius:10px;padding:5px;cursor:pointer}.cookies-consent-banner .cookie-button img{width:40px;height:40px}.cookies-consent-banner #cookie-consent-title{font-size:large}@media (max-width: 575.98px){.cookies-consent-banner{width:calc(100% - 20px);left:10px;right:10px}}.cookies-consent-banner .accordion-button{font-size:medium}.cookies-consent-banner.banner{position:fixed;bottom:1.25rem;left:1.25rem;z-index:10000000;width:600px;display:none}@media (max-width: 575.98px){.cookies-consent-banner.banner{width:calc(100% - 20px);left:10px;right:10px;padding:10px}.cookies-consent-banner.banner .cookie-actions button#accept-all-cookies,.cookies-consent-banner.banner .cookie-actions button#accept-selected-cookies{border-bottom:0}}#scify-cookie-consent-floating-button{position:fixed;bottom:1.25rem;left:1.25rem;z-index:10000000;background-color:#f8f9fa;border:1px solid #ddd;border-radius:10px;padding:5px;cursor:pointer;height:50px;width:50px}#scify-cookie-consent-floating-button img{width:100%;height:100%} +.cookies-policy-body{color:#222;font-family:Roboto,sans-serif;font-size:16px;font-weight:400;line-height:1.6;min-height:100vh}.cookies-policy-body a{font-size:inherit}.cookies-policy-body.banner{min-height:auto}.cookie-success-message{position:fixed;bottom:1rem;right:1rem;z-index:1050;padding:.75rem 1.25rem;margin-bottom:1rem;border:1px solid #c3e6cb;border-radius:.25rem;background-color:#d4edda;color:#155724;box-shadow:0 .5rem 1rem #00000026;transition:opacity .15s linear}.cookie-success-message.show{opacity:1;transform:translateY(0);transition:opacity .5s ease-in-out,transform .5s ease-in-out}.cookies-consent-banner{background-color:#f8f9fa;color:#000;padding:20px;border-radius:5px;box-shadow:0 2px 10px #0000001a}.cookies-consent-banner button,.cookies-consent-banner input,.cookies-consent-banner optgroup,.cookies-consent-banner select,.cookies-consent-banner textarea{font-family:inherit;font-size:inherit;line-height:inherit;margin:0}.cookies-consent-banner .row{display:flex;flex-wrap:wrap;margin-right:-.75rem;margin-left:-.75rem;align-items:center;justify-content:center}.cookies-consent-banner .g-0{--bs-gutter-x: 0;--bs-gutter-y: 0}.cookies-consent-banner .col{flex:1;padding-right:15px;padding-left:15px;box-sizing:border-box}.cookies-consent-banner .col-6{width:50%;padding-right:15px;padding-left:15px;box-sizing:border-box}@media (max-width: 576px){.cookies-consent-banner .col-sm-12{flex:0 0 auto;width:100%}}@media (min-width: 992px){.cookies-consent-banner .col-lg-4{flex:0 0 auto;width:33.33333333%;padding:2px 8px}}.cookies-consent-banner .btn{display:inline-block;font-weight:400;line-height:1.5;color:#212529;text-align:center;text-decoration:none;vertical-align:middle;cursor:pointer;-webkit-user-select:none;user-select:none;border:1px solid #212529;padding:.425rem .1rem;font-size:95%;border-radius:.375rem;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;white-space:nowrap}.cookies-consent-banner .btn-light{color:#212529;background-color:#f8f9fa}.cookies-consent-banner .btn-light:hover{color:#212529;background-color:#dae0e5;border-color:#dae0e5}.cookies-consent-banner .w-100{width:100%!important}.cookies-consent-banner .accordion{--bs-accordion-border-color: $border-color}.cookies-consent-banner .accordion-item{background-color:#fff;border:1px solid #dee2e6;color:#212529;border-bottom:1px solid #ddd;max-height:650px;overflow-y:auto}.cookies-consent-banner .accordion-header{margin-bottom:0}.cookies-consent-banner .accordion-button{position:relative;display:flex;align-items:center;width:100%;padding:1rem 1.25rem;font-size:1rem;color:#212529;text-align:left;background-color:#dee2e6;border:1px solid transparent;border-top-left-radius:.375rem;border-top-right-radius:.375rem;cursor:pointer;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out}.cookies-consent-banner .accordion-button:not(.collapsed){color:#0d6efd;background-color:#dee2e6;box-shadow:inset 0 -1px #00000020}.cookies-consent-banner .accordion-collapse.show{display:block}.cookies-consent-banner .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(0);transition:transform .2s ease-in-out}.cookies-consent-banner .accordion-button.collapsed:after{transform:rotate(90deg)}.cookies-consent-banner .accordion-collapse{border-top:1px solid #dee2e6}.cookies-consent-banner .accordion-body{padding:.5rem}@media (max-width: 575.98px){.cookies-consent-banner .accordion-body{padding:0}}.cookies-consent-banner .form-check{position:relative;display:block;padding-left:1.25rem}.cookies-consent-banner .form-check-input{float:left;margin-left:-1.25rem;width:1rem;height:1rem;border:1px solid #dee2e6;border-radius:.375rem;background-color:#fff;background-repeat:no-repeat;background-position:center;background-size:contain;-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-print-color-adjust:exact;color-adjust:exact;transition:background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out}.cookies-consent-banner .form-check-input[type=checkbox]{border-radius:.25em}.cookies-consent-banner .form-check-input:checked{background-color:#0d6efd;border-color:#0d6efd}.cookies-consent-banner .form-check-input:focus{border-color:#0d6efd;outline:0;box-shadow:0 0 0 .25rem #0d6efd40}.cookies-consent-banner .form-check-input:disabled{filter:none;opacity:.5;pointer-events:none}.cookies-consent-banner .form-check-input:disabled~.form-check-label,.cookies-consent-banner .form-check-input[disabled]~.form-check-label{cursor:default;opacity:.5}.cookies-consent-banner dl,.cookies-consent-banner ol,.cookies-consent-banner ul{margin-bottom:1rem;margin-top:0}.cookies-consent-banner dd{margin-bottom:.25rem;margin-left:0}@media (max-width: 575.98px){.cookies-consent-banner dd:last-child{margin-bottom:0}}.cookies-consent-banner b,.cookies-consent-banner strong{font-weight:bolder}.cookies-consent-banner .form-switch{padding-left:2.5rem}.cookies-consent-banner .form-switch .form-check-input{width:2em;height:18px;background-color:#adb5bd;border-radius:1em;position:relative;transition:background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out}.cookies-consent-banner .form-switch .form-check-input:hover{cursor:pointer}.cookies-consent-banner .form-switch .form-check-input{--bs-form-switch-bg: none;background-image:none}.cookies-consent-banner .form-switch .form-check-input:before{content:"";position:absolute;top:.125em;left:.125em;width:.75em;height:.75em;border-radius:.75em;background-color:#fff;transition:transform .15s ease-in-out}.cookies-consent-banner .form-switch .form-check-input:checked:before{transform:translate(1em)}.cookies-consent-banner .form-switch .form-check-input:checked{background-color:#0d6efd}.cookies-consent-banner .list-group{display:flex;flex-direction:column;padding-left:0;margin-bottom:0}.cookies-consent-banner .list-group-item{position:relative;display:block;padding:.75rem 1.25rem;background-color:#fff;border:1px solid rgba(0,0,0,.125)}@media (max-width: 575.98px){.cookies-consent-banner .list-group-item{padding:.25rem .5rem}}.cookies-consent-banner .mt-3{margin-top:1rem!important}.cookies-consent-banner .h5{font-size:1.25rem}.cookies-consent-banner .small{font-size:90%}.cookies-consent-banner .m-0{margin:0!important}.cookies-consent-banner .pt-0{padding-top:0!important}.cookies-consent-banner .pb-2{padding-bottom:.5rem!important}.cookies-consent-banner dl{margin-top:0;margin-bottom:1rem}@media (max-width: 575.98px){.cookies-consent-banner dl{margin-bottom:0}}.cookies-consent-banner dt{font-weight:700}.cookies-consent-banner code{font-size:87.5%;color:#d63384;word-wrap:break-word}.cookies-consent-banner .accordion{background-color:#fff;border:1px solid #ddd;border-radius:4px;margin-bottom:45px}.cookies-consent-banner .accordion-header{margin-top:0;padding:10px 15px;cursor:pointer;font-weight:700;background-color:#f7f7f7}@media (max-width: 575.98px){.cookies-consent-banner .accordion-header{padding:2px}}.cookies-consent-banner .accordion-button{display:flex;justify-content:space-between;align-items:center;width:100%;background:none;border:none;padding:10px;cursor:pointer}.cookies-consent-banner .accordion-button:focus{outline:none}.cookies-consent-banner .accordion-collapse{display:none}.cookies-consent-banner .accordion-collapse.show{display:block;padding:0}.cookies-consent-banner .form-check{display:flex;align-items:center}.cookies-consent-banner .form-check-input{width:20px;height:20px;margin-right:10px}.cookies-consent-banner .form-check-label{margin-bottom:0}.cookies-consent-banner .btn-light{color:#212529;background-color:#f8f9fa;cursor:pointer}.cookies-consent-banner .btn-light:hover{background-color:#e2e6ea}.cookies-consent-banner .cookies-consent-banner{padding:20px;background-color:#fff;border:1px solid #ddd;border-radius:4px;box-shadow:0 2px 4px #0000001a;max-width:800px;margin:20px auto}.cookies-consent-banner .cookie-actions{margin-top:20px}.cookies-consent-banner .cookie-button{position:fixed;bottom:10px;left:10px;background-color:#f8f9fa;border:1px solid #ddd;border-radius:10px;padding:5px;cursor:pointer}.cookies-consent-banner .cookie-button img{width:40px;height:40px}.cookies-consent-banner #cookie-consent-title{font-size:large}@media (max-width: 575.98px){.cookies-consent-banner{width:calc(100% - 20px);left:10px;right:10px}}.cookies-consent-banner .accordion-button{font-size:medium}.cookies-consent-banner.banner{position:fixed;bottom:1.25rem;left:1.25rem;z-index:10000000;width:600px;display:none;max-height:80%;overflow:hidden}.cookies-consent-banner.banner .cookies-container{max-height:calc(100% - 80px);overflow-y:auto}.cookies-consent-banner.banner .cookie-actions{position:absolute;bottom:0;left:auto;background:#fff;width:calc(100% - 40px);margin-bottom:10px}@media (max-width: 575.98px){.cookies-consent-banner.banner{width:calc(100% - 20px);left:10px;right:10px;padding:10px;max-height:95%}.cookies-consent-banner.banner .cookies-container{max-height:calc(100% - 80px)}.cookies-consent-banner.banner .cookie-actions{position:absolute;bottom:0;left:0;background:#fff}.cookies-consent-banner.banner .cookie-actions button#accept-all-cookies,.cookies-consent-banner.banner .cookie-actions button#accept-selected-cookies{border-bottom:0}}#scify-cookie-consent-floating-button{position:fixed;bottom:1.25rem;left:1.25rem;z-index:10000000;background-color:#f8f9fa;border:1px solid #ddd;border-radius:10px;padding:5px;cursor:pointer;height:50px;width:50px}#scify-cookie-consent-floating-button img{width:100%;height:100%}.policy-link{font-size:small;text-decoration:underline} diff --git a/public/cookies-consent.js b/public/cookies-consent.js index e61753c..eace71d 100644 --- a/public/cookies-consent.js +++ b/public/cookies-consent.js @@ -1 +1 @@ -document.addEventListener("DOMContentLoaded",function(){document.querySelectorAll(".accordion-button").forEach(e=>{e.addEventListener("click",function(){const t=document.querySelector(e.dataset.target);t&&(t.classList.toggle("show"),e.classList.toggle("collapsed"))})});const g=document.getElementById("accept-all-cookies"),u=document.getElementById("accept-selected-cookies"),k=document.getElementById("reject-optional-cookies"),n=document.getElementById("cookies-consent-banner"),i=document.getElementById("scify-cookie-consent-floating-button"),l=n.dataset.showFloatingButton==="true"||n.dataset.showFloatingButton==="1";let a=h("cookieConsent");m(),d();function y(){return window.location.href.includes("/cookie-policy")}function m(){y()?(n.style.display="block",l&&i&&(i.style.display="none")):a?(n.style.display="none",l&&i&&(i.style.display="block")):n.style.display="block"}function d(){if(a){const e=JSON.parse(a);for(const t in e){const o=document.getElementById(t);o&&(o.checked=e[t])}}}g.addEventListener("click",function(){const e={};document.querySelectorAll(".cookie-category").forEach(t=>{e[t.id]=!0}),r(e)}),u&&u.addEventListener("click",function(){const e={};document.querySelectorAll(".cookie-category").forEach(t=>{e[t.id]=t.checked}),r(e)}),k.addEventListener("click",function(){const e={};document.querySelectorAll(".cookie-category").forEach(t=>{e[t.id]=t.id==="strictly_necessary"}),r(e)});function r(e){fetch(n.dataset.ajaxUrl,{method:"POST",headers:{"Content-Type":"application/json","X-CSRF-TOKEN":document.querySelector('meta[name="csrf-token"]').getAttribute("content")},body:JSON.stringify(e)}).then(t=>t.json()).then(t=>{if(t.success){p("cookieConsent",JSON.stringify(e),30),d(),y()||(n.style.display="none",l&&(i.style.display="block"));const o=document.createElement("div");o.classList.add("cookie-success-message"),o.innerText=t.message,document.body.appendChild(o),setTimeout(()=>{o.classList.add("show")},100),setTimeout(()=>{o.classList.remove("show"),setTimeout(()=>{o.remove()},1e3)},4e3),a=JSON.stringify(e),d()}})}window.toggleCookieBanner=function(){n.style.display==="none"||n.style.display===""?(n.style.display="block",l&&(i.style.display="none")):(n.style.display="none",l&&(i.style.display="block"))};const f=document.getElementById("cookie-policy-link");f&&f.addEventListener("click",function(){E("cookieConsent")});function p(e,t,o){let s="";{const c=new Date;c.setTime(c.getTime()+o*24*60*60*1e3),s="; expires="+c.toUTCString()}document.cookie=e+"="+(t||"")+s+"; path=/"}function h(e){const t=e+"=",o=document.cookie.split(";");for(let s=0;s{e.addEventListener("click",function(){const t=document.querySelector(e.dataset.target);document.querySelectorAll(".accordion-collapse").forEach(o=>{o.classList.remove("show")}),document.querySelectorAll(".accordion-button").forEach(o=>{o.classList.add("collapsed")}),t&&(t.classList.toggle("show"),e.classList.toggle("collapsed"))})})});const m=document.getElementById("accept-all-cookies"),u=document.getElementById("accept-selected-cookies"),k=document.getElementById("reject-optional-cookies"),c=document.getElementById("cookies-consent-banner"),s=document.getElementById("scify-cookie-consent-floating-button"),l=c.dataset.showFloatingButton==="true"||c.dataset.showFloatingButton==="1";let a=h("cookieConsent");g(),d();function y(){return window.location.href.includes("/cookie-policy")}function g(){y()?(c.style.display="block",l&&s&&(s.style.display="none")):a?(c.style.display="none",l&&s&&(s.style.display="block")):c.style.display="block"}function d(){if(a){const e=JSON.parse(a);for(const t in e){const o=document.getElementById(t);o&&(o.checked=e[t])}}}m.addEventListener("click",function(){const e={};document.querySelectorAll(".cookie-category").forEach(t=>{e[t.id]=!0}),r(e)}),u&&u.addEventListener("click",function(){const e={};document.querySelectorAll(".cookie-category").forEach(t=>{e[t.id]=t.checked}),r(e)}),k.addEventListener("click",function(){const e={};document.querySelectorAll(".cookie-category").forEach(t=>{e[t.id]=t.id==="strictly_necessary"}),r(e)});function r(e){fetch(c.dataset.ajaxUrl,{method:"POST",headers:{"Content-Type":"application/json","X-CSRF-TOKEN":document.querySelector('meta[name="csrf-token"]').getAttribute("content")},body:JSON.stringify(e)}).then(t=>t.json()).then(t=>{if(t.success){const o=c.dataset.cookiePrefix;p(o+"cookies_consent",JSON.stringify(e),30),d(),y()||(c.style.display="none",l&&(s.style.display="block"));const n=document.createElement("div");n.classList.add("cookie-success-message"),n.innerText=t.message,document.body.appendChild(n),setTimeout(()=>{n.classList.add("show")},100),setTimeout(()=>{n.classList.remove("show"),setTimeout(()=>{n.remove()},1e3)},4e3),a=JSON.stringify(e),d()}})}window.toggleCookieBanner=function(){c.style.display==="none"||c.style.display===""?(c.style.display="block",l&&(s.style.display="none")):(c.style.display="none",l&&(s.style.display="block"))};const f=document.getElementById("cookie-policy-link");f&&f.addEventListener("click",function(){E("cookieConsent")});function p(e,t,o){let n="";{const i=new Date;i.setTime(i.getTime()+o*24*60*60*1e3),n="; expires="+i.toUTCString()}document.cookie=e+"="+(t||"")+n+"; path=/"}function h(e){const t=e+"=",o=document.cookie.split(";");for(let n=0;n { - button.addEventListener('click', function () { - const target = document.querySelector(button.dataset.target); - if (target) { - target.classList.toggle('show'); - button.classList.toggle('collapsed'); - } + document.addEventListener('DOMContentLoaded', function () { + document.querySelectorAll('.accordion-button').forEach(button => { + button.addEventListener('click', function () { + const target = document.querySelector(button.dataset.target); + + // Close all accordion items + document.querySelectorAll('.accordion-collapse').forEach(collapse => { + collapse.classList.remove('show'); + }); + document.querySelectorAll('.accordion-button').forEach(btn => { + btn.classList.add('collapsed'); + }); + + // Open the clicked accordion item + if (target) { + target.classList.toggle('show'); + button.classList.toggle('collapsed'); + } + }); }); }); @@ -94,7 +106,9 @@ document.addEventListener('DOMContentLoaded', function () { }).then(response => response.json()) .then(data => { if (data.success) { - setCookie('cookieConsent', JSON.stringify(consent), 30); + // get the 'cookie_prefix' from config file + const cookiePrefix = cookieBanner.dataset.cookiePrefix; + setCookie(cookiePrefix + 'cookies_consent', JSON.stringify(consent), 30); setSliders(); if (!onCookiesPage()) { cookieBanner.style.display = 'none'; diff --git a/resources/scss/cookies-consent.scss b/resources/scss/cookies-consent.scss index 41ca16a..6f2c726 100644 --- a/resources/scss/cookies-consent.scss +++ b/resources/scss/cookies-consent.scss @@ -136,6 +136,9 @@ background-color: #fff; border: 1px solid $border-color; color: #212529; + border-bottom: 1px solid #ddd; + max-height: 650px; + overflow-y: auto; } .accordion-header { @@ -193,11 +196,11 @@ } .accordion-body { - padding: 1rem 1.25rem; + padding: 0.5rem; // mobile @media (max-width: 575.98px) { - padding: 0.5rem; + padding: 0; } } @@ -257,15 +260,15 @@ } dd { - margin-bottom: .5rem; + margin-bottom: .25rem; margin-left: 0; // mobile @media (max-width: 575.98px) { // last-child - &:last-child { - margin-bottom: 0; - } + &:last-child { + margin-bottom: 0; + } } } @@ -392,11 +395,7 @@ background-color: #fff; border: 1px solid #ddd; border-radius: 4px; - margin-bottom: 10px; - } - - .accordion-item { - border-bottom: 1px solid #ddd; + margin-bottom: 45px; } .accordion-header { @@ -433,12 +432,7 @@ .accordion-collapse.show { display: block; - padding: 10px 15px; - - // mobile - @media (max-width: 575.98px) { - padding: 2px; - } + padding: 0; } /* Form switch styles */ @@ -527,6 +521,22 @@ z-index: 10000000; width: 600px; display: none; + max-height: 80%; + overflow: hidden; // Prevent the entire banner from scrolling + + .cookies-container { + max-height: calc(100% - 80px); + overflow-y: auto; + } + + .cookie-actions { + position: absolute; + bottom: 0; + left: auto; + background: #fff; + width: calc(100% - 40px); + margin-bottom: 10px; + } /* Query for mobile */ @media (max-width: 575.98px) { @@ -534,8 +544,18 @@ left: 10px; right: 10px; padding: 10px; + max-height: 95%; + + .cookies-container { + max-height: calc(100% - 80px); + } .cookie-actions { + position: absolute; + bottom: 0; + left: 0; + background: #fff; + button#accept-all-cookies, button#accept-selected-cookies { border-bottom: 0; // Mobile-specific style } @@ -560,4 +580,9 @@ width: 100%; height: 100%; } +} + +.policy-link { + font-size: small; + text-decoration: underline; } \ No newline at end of file diff --git a/resources/views/components/_cookie-categories.blade.php b/resources/views/components/_cookie-categories.blade.php index e585579..9892c19 100644 --- a/resources/views/components/_cookie-categories.blade.php +++ b/resources/views/components/_cookie-categories.blade.php @@ -44,8 +44,8 @@ class="accordion-collapse {{ $alwaysOpen || $category === 'strictly_necessary' ? @if($cookie['policy_external_link'])
- Policy link + Policy link 🔗
@endif diff --git a/resources/views/components/laravel-cookies-consent.blade.php b/resources/views/components/laravel-cookies-consent.blade.php index 89dc7ed..49eb16e 100644 --- a/resources/views/components/laravel-cookies-consent.blade.php +++ b/resources/views/components/laravel-cookies-consent.blade.php @@ -3,53 +3,56 @@ aria-describedby="cookie-consent-description" data-ajax-url="{{ url('/cookie-consent/save') }}" data-show-floating-button="{{ config('cookies_consent.display_floating_button') }}" + data-cookie-prefix="{{ config('cookies_consent.cookie_prefix') }}" style="display: none;"> - - - @if(config('cookies_consent.use_separate_page')) -

{{ __('cookies_consent::messages.please_visit_1') }} {{ __('cookies_consent::messages.cookie_policy_page') }}.

- @else - @include('cookies_consent::components._cookie-categories') - @endif +
+ + + @if(config('cookies_consent.use_separate_page')) +

{{ __('cookies_consent::messages.please_visit_1') }} {{ __('cookies_consent::messages.cookie_policy_page') }}.

+ @else + @include('cookies_consent::components._cookie-categories') + @endif -
-
-
- @if(config('cookies_consent.use_separate_page')) -
- -
-
- -
- @else -
- -
-
- -
-
- -
- @endif +
+
+
+ @if(config('cookies_consent.use_separate_page')) +
+ +
+
+ +
+ @else +
+ +
+
+ +
+
+ +
+ @endif +
diff --git a/resources/views/cookie-policy.blade.php b/resources/views/cookie-policy.blade.php index 9157201..146b012 100644 --- a/resources/views/cookie-policy.blade.php +++ b/resources/views/cookie-policy.blade.php @@ -56,6 +56,7 @@ aria-labelledby="cookie-consent-title" aria-describedby="cookie-consent-description" data-ajax-url="{{ url('/cookie-consent/save') }}" + data-cookie-prefix="{{ config('cookies_consent.cookie_prefix') }}" data-show-floating-button="false"> @include('cookies_consent::components._cookie-categories', ['alwaysOpen' => true])
diff --git a/src/Http/Controllers/CookiesController.php b/src/Http/Controllers/CookiesController.php index 769aeb2..6a03465 100644 --- a/src/Http/Controllers/CookiesController.php +++ b/src/Http/Controllers/CookiesController.php @@ -22,49 +22,13 @@ class CookiesController extends Controller { * @return JsonResponse the result of the operation */ public function save_cookies_consent_selection(Request $request): JsonResponse { - $this->set_cookies_consent_basic_cookie(); $data = $request->all(); - foreach ($data as $key => $value) { - if (strpos($key, 'cookies_consent_') !== false) { - $this->set_cookie($key); - } else { - $this->delete_cookie($key); - } - } + // store the JSON in a cookie + Cookie::queue($this->get_cookie_prefix() . 'cookies_consent_selection', json_encode($data), (self::$MINUTES_IN_A_DAY * config('cookies_consent.cookie_lifetime'))); return response()->json(['message' => 'Cookies consent selection saved', 'data' => $data, 'success' => true]); } - /** - * Sets the basic cookie, identifying that the user has - * already submitted a certain cookie selection. - * - * @return void - */ - public function set_cookies_consent_basic_cookie() { - $this->set_cookie('cookies_consent_selection'); - } - - /** - * Sets a cookie - * - * @param $cookie_name string the cookie name - * @return void - */ - public function set_cookie(string $cookie_name) { - Cookie::queue($this->get_cookie_prefix() . $cookie_name, true, (self::$MINUTES_IN_A_DAY * config('cookies_consent.cookie_lifetime'))); - } - - /** - * Deletes a cookie - * - * @param $cookie_name string the cookie name - * @return void - */ - public function delete_cookie(string $cookie_name) { - Cookie::queue(Cookie::forget($this->get_cookie_prefix() . $cookie_name)); - } - private function get_cookie_prefix(): string { return config('cookies_consent.cookie_prefix'); }