From 2e5b69f469e0475388afb5aeef238d28d1f3b1c4 Mon Sep 17 00:00:00 2001 From: Paul Isaris Date: Mon, 3 Feb 2025 11:42:36 +0200 Subject: [PATCH] refactoring --- README.md | 1 + public/cookies-consent.css | 2 +- public/cookies-consent.js | 2 +- resources/js/cookies-consent.js | 112 +++++++++++++++--- resources/scss/cookies-consent.scss | 2 +- .../components/_cookie-categories.blade.php | 2 +- .../laravel-cookies-consent.blade.php | 27 ++--- resources/views/cookie-policy.blade.php | 19 ++- 8 files changed, 123 insertions(+), 44 deletions(-) diff --git a/README.md b/README.md index d88d651..c599ad2 100644 --- a/README.md +++ b/README.md @@ -466,6 +466,7 @@ Also, don't forget to update the `CHANGELOG.md` file with the new version name, ## Credits - [SciFY Dev Team](https://github.com/scify) +- Cookie icons created by Freepik - Flaticon ## License diff --git a/public/cookies-consent.css b/public/cookies-consent.css index e4a9284..5e7d040 100644 --- a/public/cookies-consent.css +++ b/public/cookies-consent.css @@ -1 +1 @@ -.cookies-policy-body{min-height:100vh}.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{color:#222;font-family:Roboto,sans-serif;font-size:16px;font-weight:400;line-height:1.6;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 a{font-size:inherit}.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:0 15px;box-sizing:border-box}.cookies-consent-banner .col-6{width:50%;padding:0 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.btn-light{color:#212529;background-color:#f8f9fa}.cookies-consent-banner .btn.btn-light:hover{background-color:#dae0e5;border-color:#dae0e5}.cookies-consent-banner .w-100{width:100%!important}.cookies-consent-banner .accordion{--bs-accordion-border-color: $border-color;background-color:#fff;border:1px solid #ddd;border-radius:4px;margin-bottom:20px}.cookies-consent-banner .accordion .accordion-item{background-color:#fff;border:1px solid #dee2e6;color:#212529;border-bottom:1px solid #ddd;max-height:650px;overflow-y:auto}@media (max-width: 1920px){.cookies-consent-banner .accordion .accordion-item{max-height:450px}}@media (max-width: 1366px){.cookies-consent-banner .accordion .accordion-item{max-height:350px}}@media (max-width: 991.98px){.cookies-consent-banner .accordion .accordion-item{max-height:300px}}@media (max-width: 575.98px){.cookies-consent-banner .accordion .accordion-item{max-height:250px}}.cookies-consent-banner .accordion .accordion-header{margin-bottom:0;padding:10px 15px;cursor:pointer;font-weight:700;background-color:#f7f7f7}@media (max-width: 575.98px){.cookies-consent-banner .accordion .accordion-header{padding:2px}}.cookies-consent-banner .accordion .accordion-button{position:relative;display:flex;align-items:center;width:100%;padding:.5rem 1rem;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}@media (max-width: 575.98px){.cookies-consent-banner .accordion .accordion-button{padding:.3rem .75rem}}.cookies-consent-banner .accordion .accordion-button:not(.collapsed){color:#0d6efd;background-color:#dee2e6;box-shadow:inset 0 -1px #00000020}.cookies-consent-banner .accordion .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 .accordion-button.collapsed:after{transform:rotate(90deg)}.cookies-consent-banner .accordion .accordion-collapse{display:none;border-top:1px solid #dee2e6}.cookies-consent-banner .accordion .accordion-collapse.show{display:block}.cookies-consent-banner .accordion .accordion-body{padding:.5rem}@media (max-width: 575.98px){.cookies-consent-banner .accordion .accordion-body{padding:0}}.cookies-consent-banner .form-check{position:relative;display:block;padding-left:1.25rem}.cookies-consent-banner .form-check .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 .form-check-input[type=checkbox]{border-radius:1em}.cookies-consent-banner .form-check .form-check-input:checked{background-color:#0d6efd;border-color:#0d6efd}.cookies-consent-banner .form-check .form-check-input:focus{border-color:#0d6efd;outline:0;box-shadow:0 0 0 .25rem #0d6efd40}.cookies-consent-banner .form-check .form-check-input:disabled{filter:none;opacity:.5;pointer-events:none}.cookies-consent-banner .form-check .form-check-input:disabled~.form-check-label{cursor:default;opacity:.5}.cookies-consent-banner .form-switch{padding-left:2.5rem;display:flex;align-items:center}.cookies-consent-banner .form-switch .form-check-input{width:2em;height:18px;margin-right:10px;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: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 .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 .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:0}@media (max-width: 575.98px){.cookies-consent-banner dl{margin-bottom:0}}.cookies-consent-banner dl dt{font-weight:700}.cookies-consent-banner dl dd{margin-bottom:.25rem;margin-left:0}@media (max-width: 575.98px){.cookies-consent-banner dl dd:last-child{margin-bottom:0}}.cookies-consent-banner code{font-size:87.5%;color:#d63384;word-wrap:break-word}.cookies-consent-banner .cookie-actions{margin-top:10px;width:100%;text-align:center}.cookies-consent-banner .cookie-actions .row{margin:0}.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}.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}@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% - 145px)}.cookies-consent-banner.banner .cookie-actions button#accept-all-cookies,.cookies-consent-banner.banner .cookie-actions button#accept-selected-cookies{border-bottom:0}}.cookies-consent-banner .policy-link{font-size:small;text-decoration:underline}#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:45px;width:45px}#scify-cookie-consent-floating-button img{width:100%;height:100%} +.cookies-policy-body{min-height:100vh}.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{color:#222;font-family:Roboto,sans-serif;font-size:16px;font-weight:400;line-height:1.6;padding:20px;background-color:#fff;border:1px solid #ddd;border-radius:4px;box-shadow:0 2px 4px #0000001a;max-width:800px;margin:0}.cookies-consent-banner a{font-size:inherit}.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:0 15px;box-sizing:border-box}.cookies-consent-banner .col-6{width:50%;padding:0 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.btn-light{color:#212529;background-color:#f8f9fa}.cookies-consent-banner .btn.btn-light:hover{background-color:#dae0e5;border-color:#dae0e5}.cookies-consent-banner .w-100{width:100%!important}.cookies-consent-banner .accordion{--bs-accordion-border-color: $border-color;background-color:#fff;border:1px solid #ddd;border-radius:4px;margin-bottom:20px}.cookies-consent-banner .accordion .accordion-item{background-color:#fff;border:1px solid #dee2e6;color:#212529;border-bottom:1px solid #ddd;max-height:650px;overflow-y:auto}@media (max-width: 1920px){.cookies-consent-banner .accordion .accordion-item{max-height:450px}}@media (max-width: 1366px){.cookies-consent-banner .accordion .accordion-item{max-height:350px}}@media (max-width: 991.98px){.cookies-consent-banner .accordion .accordion-item{max-height:300px}}@media (max-width: 575.98px){.cookies-consent-banner .accordion .accordion-item{max-height:250px}}.cookies-consent-banner .accordion .accordion-header{margin-bottom:0;padding:10px 15px;cursor:pointer;font-weight:700;background-color:#f7f7f7}@media (max-width: 575.98px){.cookies-consent-banner .accordion .accordion-header{padding:2px}}.cookies-consent-banner .accordion .accordion-button{position:relative;display:flex;align-items:center;width:100%;padding:.5rem 1rem;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}@media (max-width: 575.98px){.cookies-consent-banner .accordion .accordion-button{padding:.3rem .75rem}}.cookies-consent-banner .accordion .accordion-button:not(.collapsed){color:#0d6efd;background-color:#dee2e6;box-shadow:inset 0 -1px #00000020}.cookies-consent-banner .accordion .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 .accordion-button.collapsed:after{transform:rotate(90deg)}.cookies-consent-banner .accordion .accordion-collapse{display:none;border-top:1px solid #dee2e6}.cookies-consent-banner .accordion .accordion-collapse.show{display:block}.cookies-consent-banner .accordion .accordion-body{padding:.5rem}@media (max-width: 575.98px){.cookies-consent-banner .accordion .accordion-body{padding:0}}.cookies-consent-banner .form-check{position:relative;display:block;padding-left:1.25rem}.cookies-consent-banner .form-check .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 .form-check-input[type=checkbox]{border-radius:1em}.cookies-consent-banner .form-check .form-check-input:checked{background-color:#0d6efd;border-color:#0d6efd}.cookies-consent-banner .form-check .form-check-input:focus{border-color:#0d6efd;outline:0;box-shadow:0 0 0 .25rem #0d6efd40}.cookies-consent-banner .form-check .form-check-input:disabled{filter:none;opacity:.5;pointer-events:none}.cookies-consent-banner .form-check .form-check-input:disabled~.form-check-label{cursor:default;opacity:.5}.cookies-consent-banner .form-switch{padding-left:2.5rem;display:flex;align-items:center}.cookies-consent-banner .form-switch .form-check-input{width:2em;height:18px;margin-right:10px;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: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 .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 .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:0}@media (max-width: 575.98px){.cookies-consent-banner dl{margin-bottom:0}}.cookies-consent-banner dl dt{font-weight:700}.cookies-consent-banner dl dd{margin-bottom:.25rem;margin-left:0}@media (max-width: 575.98px){.cookies-consent-banner dl dd:last-child{margin-bottom:0}}.cookies-consent-banner code{font-size:87.5%;color:#d63384;word-wrap:break-word}.cookies-consent-banner .cookie-actions{margin-top:10px;width:100%;text-align:center}.cookies-consent-banner .cookie-actions .row{margin:0}.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}.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}@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% - 145px)}.cookies-consent-banner.banner .cookie-actions button#accept-all-cookies,.cookies-consent-banner.banner .cookie-actions button#accept-selected-cookies{border-bottom:0}}.cookies-consent-banner .policy-link{font-size:small;text-decoration:underline}#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:45px;width:45px}#scify-cookie-consent-floating-button img{width:100%;height:100%} diff --git a/public/cookies-consent.js b/public/cookies-consent.js index 3cd2b9b..80c4dd2 100644 --- a/public/cookies-consent.js +++ b/public/cookies-consent.js @@ -1 +1 @@ -document.addEventListener("DOMContentLoaded",function(){document.addEventListener("DOMContentLoaded",function(){document.querySelectorAll(".accordion-button").forEach(e=>{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"),n=document.getElementById("cookies-consent-banner"),i=document.getElementById("scify-cookie-consent-floating-button"),l=n.dataset.showFloatingButton==="true"||n.dataset.showFloatingButton==="1",p=n.dataset.hideFloatingButtonOnMobile==="true"||n.dataset.hideFloatingButtonOnMobile==="1",y=n.dataset.cookiePrefix;let a=B(y+"cookies_consent");h(),d();function f(){return window.location.href.includes("/cookie-policy")}function h(){f()?n.style.display="block":a?(n.style.display="none",l&&i&&(p&&window.innerWidth<768?i.style.display="none":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])}}}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(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){E(y+"cookies_consent",JSON.stringify(e),30),d(),f()||(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 g=document.getElementById("cookie-policy-link");g&&g.addEventListener("click",function(){S("cookieConsent")});function E(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 B(e){const t=e+"=",o=document.cookie.split(";");for(let s=0;s{e.removeEventListener("click",a)}),document.querySelectorAll(".accordion-button").forEach(e=>{e.addEventListener("click",a)})}function a(e){e.stopPropagation();const t=e.currentTarget;f(t)}function f(e){const t=document.querySelector(e.dataset.target);document.querySelectorAll(".accordion-collapse").forEach(o=>{o!==t&&o.classList.remove("show")}),t.classList.contains("show")?(t.classList.remove("show"),e.classList.add("collapsed")):(t.classList.add("show"),e.classList.remove("collapsed"))}function g(){const e=document.getElementById("cookies-consent-banner"),t=document.getElementById("scify-cookie-consent-floating-button"),o=e.dataset.showFloatingButton==="true"||e.dataset.showFloatingButton==="1",n=e.dataset.hideFloatingButtonOnMobile==="true"||e.dataset.hideFloatingButtonOnMobile==="1",i=e.dataset.cookiePrefix;let s=C(i+"cookies_consent");k(e,t,o,n,s),d(s),y({"accept-all-cookies":h,"accept-selected-cookies":p,"reject-optional-cookies":B})}function y(e){for(const[t,o]of Object.entries(e)){const n=document.getElementById(t);n&&n.addEventListener("click",o)}}function k(e,t,o,n,i){r()?e.style.display="block":m(e,t,o,n,i)}function m(e,t,o,n,i){i?(e.style.display="none",o&&t&&(t.style.display=n&&window.innerWidth<768?"none":"block")):e.style.display="block"}function d(e){if(e){const t=JSON.parse(e);for(const o in t){const n=document.getElementById(o);n&&(n.checked=t[o])}}}function h(){l(c(!0))}function p(){l(c())}function B(){l(c(!1,"strictly_necessary"))}function c(e=!1,t=null){const o={};return document.querySelectorAll(".cookie-category").forEach(n=>{o[n.id]=e||n.id===t||n.checked}),o}function l(e){const t=document.getElementById("cookies-consent-banner"),o=document.getElementById("scify-cookie-consent-floating-button"),n=t.dataset.showFloatingButton==="true"||t.dataset.showFloatingButton==="1",i=t.dataset.cookiePrefix;fetch(t.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(s=>s.json()).then(s=>{s.success&&(E(i+"cookies_consent",JSON.stringify(e),30),d(JSON.stringify(e)),r()||(t.style.display="none",n&&(o.style.display="block")),b(s.message))})}function b(e){const t=document.createElement("div");t.classList.add("cookie-success-message"),t.innerText=e,document.body.appendChild(t),setTimeout(()=>{t.classList.add("show")},100),setTimeout(()=>{t.classList.remove("show"),setTimeout(()=>{t.remove()},1e3)},4e3)}function w(){const e=document.getElementById("cookie-policy-link");e&&e.addEventListener("click",function(){L("cookieConsent")})}function r(){return window.location.href.includes("/cookie-policy")}function E(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 C(e){const t=e+"=",o=document.cookie.split(";");for(const n of o){let i=n.trim();if(i.startsWith(t))return i.substring(t.length,i.length)}return null}function L(e){document.cookie=e+"=; Max-Age=-99999999;"}window.toggleCookieBanner=function(){const e=document.getElementById("cookies-consent-banner"),t=document.getElementById("scify-cookie-consent-floating-button"),o=e.dataset.showFloatingButton==="true"||e.dataset.showFloatingButton==="1";e.style.display==="none"||e.style.display===""?(e.style.display="block",o&&(t.style.display="none")):(e.style.display="none",o&&(t.style.display="block"))}; diff --git a/resources/js/cookies-consent.js b/resources/js/cookies-consent.js index 25cd642..8b952b9 100644 --- a/resources/js/cookies-consent.js +++ b/resources/js/cookies-consent.js @@ -6,32 +6,91 @@ document.addEventListener('DOMContentLoaded', function () { initializeCookiePolicyLink(); }); +/** + * Initializes the accordion buttons by attaching event listeners to them. + * + * @function initializeAccordionButtons + * @returns {void} + * + * @description + * This function initializes the accordion buttons by attaching event listeners to them. + */ function initializeAccordionButtons() { + + // Remove existing event listeners to avoid duplication document.querySelectorAll('.accordion-button').forEach(button => { - button.addEventListener('click', function () { - toggleAccordion(button); - }); + button.removeEventListener('click', handleAccordionClick); + }); + + // Attach new event listeners + document.querySelectorAll('.accordion-button').forEach(button => { + button.addEventListener('click', handleAccordionClick); }); } +/** + * Handles the click event on an accordion button. + * + * @function handleAccordionClick + * @param event {Event} The click event + * @returns {void} + * + * @description + * This function handles the click event on an accordion button. + */ +function handleAccordionClick(event) { + event.stopPropagation(); // Stop event propagation + const button = event.currentTarget; + toggleAccordion(button); +} + +/** + * Toggles the accordion item associated with the clicked button. + * + * @param button {Element} The clicked button + * @returns {void} + * + * @description + * This function toggles the accordion item associated with the clicked button. + * If the accordion item is already open, it closes it. If it is closed, it opens it. + * It also closes all other accordion items except the clicked one. + */ function toggleAccordion(button) { const target = document.querySelector(button.dataset.target); - // Close all accordion items + // Close all accordion items except the clicked one document.querySelectorAll('.accordion-collapse').forEach(collapse => { - collapse.classList.remove('show'); - }); - document.querySelectorAll('.accordion-button').forEach(btn => { - btn.classList.add('collapsed'); + if (collapse !== target) { + collapse.classList.remove('show'); + } }); - // Open the clicked accordion item - if (target) { - target.classList.toggle('show'); - button.classList.toggle('collapsed'); + // Toggle the clicked accordion item + if (target.classList.contains('show')) { + // If the accordion is already open, close it + target.classList.remove('show'); + button.classList.add('collapsed'); + } else { + // If the accordion is closed, open it + target.classList.add('show'); + button.classList.remove('collapsed'); } } +/** + * Initializes the cookie banner by setting up the necessary event listeners and cookie handling. + * + * @function initializeCookieBanner + * @returns {void} + * + * @description + * This function initializes the cookie banner by setting up the necessary event listeners and cookie handling. + * It also sets the initial state of the banner based on the user's cookie consent. + * If the user has already accepted the cookies, the banner is hidden. + * If the user has not accepted the cookies, the banner is displayed + * and the floating button is shown if the configuration allows it. + * The cookie settings are stored as a JSON object with the category names as keys and their consent status as values. + */ function initializeCookieBanner() { const cookieBanner = document.getElementById('cookies-consent-banner'); const cookieButton = document.getElementById('scify-cookie-consent-floating-button'); @@ -78,6 +137,16 @@ function toggleBannerDisplay(cookieBanner, cookieButton, showFloatingButton, hid } } +/** + * Sets the sliders based on the user's cookie consent. + * @param cookieConsent {string} The user's cookie consent as a JSON string + * + * @function setSliders + * @returns {void} + * @description + * This function sets the sliders based on the user's cookie consent. + * If the user has already accepted the cookies, the sliders are set according to the consent settings. + */ function setSliders(cookieConsent) { if (cookieConsent) { const consentSettings = JSON.parse(cookieConsent); @@ -110,6 +179,17 @@ function getConsentSettings(acceptAll = false, requiredCategory = null) { return consent; } +/** + * Handles the user's cookie consent by sending an AJAX request to the server. + * @param consent {Object} The user's cookie consent settings + * @returns {void} + * @description + * This function handles the user's cookie consent by sending an AJAX request to the server. + * The consent settings are stored as a JSON object with the category names as keys and their consent status as values. + * The consent settings are then stored in a cookie with a specified prefix. + * If the consent is successfully stored, the cookie banner is hidden and a success message is displayed + * to inform the user about the successful storage of their consent. + */ function handleCookieConsent(consent) { const cookieBanner = document.getElementById('cookies-consent-banner'); const cookieButton = document.getElementById('scify-cookie-consent-floating-button'); @@ -181,10 +261,10 @@ function setCookie(name, value, days) { function getCookie(name) { const nameEQ = name + "="; const ca = document.cookie.split(';'); - for (let i = 0; i < ca.length; i++) { - let c = ca[i].trim(); - if (c.startsWith(nameEQ)) { - return c.substring(nameEQ.length, c.length); + for (const c of ca) { + let cookie = c.trim(); + if (cookie.startsWith(nameEQ)) { + return cookie.substring(nameEQ.length, cookie.length); } } return null; diff --git a/resources/scss/cookies-consent.scss b/resources/scss/cookies-consent.scss index 4def797..ca5a992 100644 --- a/resources/scss/cookies-consent.scss +++ b/resources/scss/cookies-consent.scss @@ -44,7 +44,7 @@ border-radius: 4px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); max-width: 800px; - margin: 20px auto; + margin: 0; a { font-size: inherit; diff --git a/resources/views/components/_cookie-categories.blade.php b/resources/views/components/_cookie-categories.blade.php index 9892c19..808e5b7 100644 --- a/resources/views/components/_cookie-categories.blade.php +++ b/resources/views/components/_cookie-categories.blade.php @@ -56,4 +56,4 @@ class="accordion-collapse {{ $alwaysOpen || $category === 'strictly_necessary' ? @endforeach - \ No newline at end of file + diff --git a/resources/views/components/laravel-cookies-consent.blade.php b/resources/views/components/laravel-cookies-consent.blade.php index 2286161..a9ceeb4 100644 --- a/resources/views/components/laravel-cookies-consent.blade.php +++ b/resources/views/components/laravel-cookies-consent.blade.php @@ -1,11 +1,11 @@ - + @if(config('cookies_consent.display_floating_button')) - + @endif -{{--Manage Cookies--}} - \ No newline at end of file + diff --git a/resources/views/cookie-policy.blade.php b/resources/views/cookie-policy.blade.php index 83872b9..3377e41 100644 --- a/resources/views/cookie-policy.blade.php +++ b/resources/views/cookie-policy.blade.php @@ -1,4 +1,3 @@ - @@ -52,13 +51,13 @@
-
- +
- \ No newline at end of file +