diff --git a/.gitignore b/.gitignore index a97f7fb..a4fcdeb 100644 --- a/.gitignore +++ b/.gitignore @@ -9,5 +9,10 @@ phpstan.neon testbench.yaml vendor node_modules -public +public/* storage + +# Do not ignore the public directory or the generated files +!/public/cookies-consent.js +!/public/cookies-consent.css +!/public/cookie.png \ No newline at end of file diff --git a/how-to-upgrade-to-v2.md b/how-to-upgrade-to-v2.md index dc5b9e6..9bee8b6 100644 --- a/how-to-upgrade-to-v2.md +++ b/how-to-upgrade-to-v2.md @@ -40,7 +40,16 @@ not 100% backward compatible with the v1 configuration file. So, in order to update to the new configuration file, you should save your current configuration file (e.g. `config/cookies-consent.php`) to a safe place. -### Step 1: Update the Plugin +### Step 1: Backup any changes made to the styles file + +The v.1 of the plugin had a styles file that was published to `public/vendor/cookies_consent/css/style.css`. If you have +made any changes to this file, you should back it up before updating the plugin. + +The v2 of the plugin has a new styles file, which is published to +`public/vendor/cookies_consent/css/cookies-consent.css`. You should transfer any changes you made to the old styles file +to the new one. + +### Step 2: Update the Plugin First, update the plugin to the latest version. You can do this by running the following command: @@ -48,7 +57,7 @@ First, update the plugin to the latest version. You can do this by running the f composer update scify/laravel-cookies-consent ``` -### Step 2: Update the Configuration file +### Step 3: Update the Configuration file 1. Publish the new configuration file by running the following command: @@ -58,7 +67,8 @@ php artisan vendor:publish --tag=cookies-consent-config --force **CAUTION**: The `--force` flag is necessary in order to overwrite the existing configuration file. -2. Go over the "Explanation of the configuration file" in the [README.md](README.md) file, in order to understand the new structure +2. Go over the "Explanation of the configuration file" in the [README.md](README.md) file, in order to understand the + new structure of the configuration file. 3. Compare the new configuration file (`config/cookies-consent.php`) with your old configuration file. You should copy @@ -73,3 +83,11 @@ php artisan vendor:publish --tag=cookies-consent-config --force 6. Make sure that the `cookies` array in the new configuration file contains the necessary information about each cookie (e.g. name, description, duration, etc.). + +### Step 4: Update the styles file (if necessary) + +If you have made any changes to the styles file in the v1 version of the plugin, you should transfer these changes to +the new styles file. + +Old styles file: `public/vendor/cookies_consent/css/style.css` +New styles file: `public/vendor/cookies_consent/css/cookies-consent.css` diff --git a/package-lock.json b/package-lock.json index 380bb15..95fc46a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "laravel-cookies-consent", - "version": "2.0.0", + "version": "2.0.1", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "laravel-cookies-consent", - "version": "2.0.0", + "version": "2.0.1", "license": "ISC", "devDependencies": { "sass": "^1.79.4", diff --git a/package.json b/package.json index 45e9fe3..bfc297e 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "laravel-cookies-consent", - "version": "2.0.0", + "version": "2.0.1", "description": "

\"logo\"

", "main": "index.js", "directories": { diff --git a/public/cookie.png b/public/cookie.png new file mode 100644 index 0000000..7ea291c Binary files /dev/null and b/public/cookie.png differ diff --git a/public/cookies-consent.css b/public/cookies-consent.css new file mode 100644 index 0000000..64c5377 --- /dev/null +++ b/public/cookies-consent.css @@ -0,0 +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:1px solid #ccc;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%}}.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 transparent;padding:.375rem .75rem;font-size:1rem;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}.cookies-consent-banner .btn-light{color:#212529;background-color:#f8f9fa;border-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}.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}.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)}.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}.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}.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}.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{display:inline-block;font-size:100%;font-weight:400;text-align:center;white-space:nowrap;vertical-align:middle;-webkit-user-select:none;user-select:none;border:1px solid #222222;padding:.375rem .75rem;line-height:1.5;border-radius:.25rem;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 .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:1000;width:600px;display:none}.cookies-consent-banner.banner .cookie-actions button#accept-all-cookies,.cookies-consent-banner.banner .cookie-actions button#accept-selected-cookies{border-bottom:1px solid #ccc}@media (max-width: 575.98px){.cookies-consent-banner.banner{width:calc(100% - 20px);left:10px;right: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:1000;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%} diff --git a/public/cookies-consent.js b/public/cookies-consent.js new file mode 100644 index 0000000..e61753c --- /dev/null +++ b/public/cookies-consent.js @@ -0,0 +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