From b951dfb77d17b40d4d96a06c36ddcf5aeb5f8019 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=A9r=C3=A9my=20Munsch?= Date: Sat, 1 May 2021 14:16:41 +0200 Subject: [PATCH] Upgrade cookie notice --- config/gmap.php | 5 - config/google.php | 6 + resources/js/front/ldcweb-cn.js | 78 ++++++----- resources/js/pages/main-menu.js | 42 +++--- resources/sass/_variables.scss | 2 + resources/sass/front/modules/_ldcweb-cn.scss | 94 +++++++------ .../views/front/brand/traceability.blade.php | 2 +- resources/views/front/ocb/poultry.blade.php | 2 +- resources/views/front/webldc-cn.blade.php | 132 +++++++++--------- resources/views/layouts/app-footer.blade.php | 2 +- resources/views/layouts/app.blade.php | 2 +- 11 files changed, 198 insertions(+), 169 deletions(-) delete mode 100644 config/gmap.php create mode 100644 config/google.php diff --git a/config/gmap.php b/config/gmap.php deleted file mode 100644 index e0ae80db..00000000 --- a/config/gmap.php +++ /dev/null @@ -1,5 +0,0 @@ - env('GOOGLE_MAP_API_KEY') -]; diff --git a/config/google.php b/config/google.php new file mode 100644 index 00000000..d0739639 --- /dev/null +++ b/config/google.php @@ -0,0 +1,6 @@ + env('GOOGLE_MAP_API_KEY'), + 'analyticsKey' => env('ANALYTICS_GOOGLE_ID') +]; diff --git a/resources/js/front/ldcweb-cn.js b/resources/js/front/ldcweb-cn.js index acccfb81..c810764d 100644 --- a/resources/js/front/ldcweb-cn.js +++ b/resources/js/front/ldcweb-cn.js @@ -13,11 +13,12 @@ export class LdcwebCn { this.modalCloseBtn = document.getElementById('close-link'); this.acceptAllBtnBanner = document.getElementById('ldcweb-cn-accept-banner'); this.acceptAllBtn = document.getElementById('ldcweb-cn-accept'); + this.denyAllBtnBanner = document.getElementById('ldcweb-cn-deny-banner'); this.denyAllBtn = document.getElementById('ldcweb-cn-deny'); this.personalizeBtn = document.getElementsByClassName('ldcweb-cn-personalize'); this.changeBtn = document.getElementsByClassName('ldcweb-cn-change'); this.cookiesList = document.getElementById('ldcweb-cn-list'); - this.cookieLink = document.getElementById('cookieNotice') + this.cookieLink = document.getElementsByClassName('ldcweb-cn-cookie-link'); this.template = document.getElementById('template').cloneNode(true); document.getElementById('template').remove(); @@ -72,40 +73,40 @@ export class LdcwebCn { for (let denyLabel of this.cookieContainer.querySelectorAll('.deny > label')) { denyLabel.classList.remove('active'); } - this.updateAllCookiesButtonsActiveStatus() + this.updateAllCookiesButtonsActiveStatus(); this.cookieContainer.classList.remove('open-modal'); this.cookieContainer.classList.remove('open-banner'); }.bind(this); this.acceptAllBtnBanner.addEventListener('click', accept); this.acceptAllBtn.addEventListener('click', accept); - this.denyAllBtn.addEventListener( - 'click', - function (e) { - e.preventDefault(); - for (const [key, value] of Object.entries(this.config)) { - this.removeCookie(key, value); - } - for (let acceptLabel of this.cookieContainer.querySelectorAll('.accept > label')) { - acceptLabel.classList.remove('active'); - } - for (let denyLabel of this.cookieContainer.querySelectorAll('.deny > label')) { - denyLabel.classList.add('active'); - } - this.updateAllCookiesButtonsActiveStatus() - this.cookieContainer.classList.remove('open-modal'); - this.cookieContainer.classList.remove('open-banner'); - }.bind(this) - ); + let deny = function (e) { + e.preventDefault(); + for (const [key, value] of Object.entries(this.config)) { + this.removeCookie(key, value); + } + for (let acceptLabel of this.cookieContainer.querySelectorAll('.accept > label')) { + acceptLabel.classList.remove('active'); + } + for (let denyLabel of this.cookieContainer.querySelectorAll('.deny > label')) { + denyLabel.classList.add('active'); + } + this.updateAllCookiesButtonsActiveStatus(); + this.cookieContainer.classList.remove('open-modal'); + this.cookieContainer.classList.remove('open-banner'); + }.bind(this); + this.denyAllBtnBanner.addEventListener('click', deny); + this.denyAllBtn.addEventListener('click', deny); - this.cookieLink.addEventListener( - 'click', - function (e) { - e.preventDefault(); - this.setCookieList(); - this.updateAllCookiesButtonsActiveStatus() - }.bind(this) - ); + for (let item of this.cookieLink) { + item.addEventListener( + 'click', + function (e) { + e.preventDefault(); + this.openModal(); + }.bind(this) + ); + } for (let item of this.personalizeBtn) { this.addEvent( @@ -125,10 +126,14 @@ export class LdcwebCn { let test = elm.split('='); if (test[1] === 'true') { this.config[test[0]].script(); + } else { + if (this.config[test[0]].fallback !== undefined) { + this.config[test[0]].fallback(); + } } }); - this.updateAllCookiesButtonsActiveStatus() + this.updateAllCookiesButtonsActiveStatus(); } setCookieList() { @@ -148,7 +153,7 @@ export class LdcwebCn { name.textContent = value.name; description.textContent = value.description; - link.textContent = "En savoir plus"; + link.textContent = "Politique de confidentialité"; link.setAttribute("href", value.link); acceptInput.id = key + '1'; acceptInput.name = key; @@ -163,13 +168,13 @@ export class LdcwebCn { acceptLabel.classList.add('active'); denyLabel.classList.remove('active'); this.updateAllCookiesButtonsActiveStatus(); - this.addCookie(key, value) + this.addCookie(key, value); }.bind(this)); denyInput.addEventListener('click', function (e) { acceptLabel.classList.remove('active'); denyLabel.classList.add('active'); this.updateAllCookiesButtonsActiveStatus(); - this.removeCookie(key, value) + this.removeCookie(key, value); }.bind(this)); this.cookiesList.append(cookie); @@ -295,10 +300,15 @@ export class LdcwebCn { } saveLDCWebCookie(content) { - document.cookie = "ldcwebcn-init=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;"; + // document.cookie = "ldcwebcn-init=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;"; let date = new Date(); let newDate = new Date(date.setMonth(date.getMonth() + 13)); - document.cookie = "ldcwebcn-init=" + content + "; expires=" + newDate.toUTCString() + ";"; + document.cookie = "ldcwebcn-init=" + content + "; expires=" + newDate.toUTCString() + "; path=/;"; + } + + openModal() { + this.setCookieList(); + this.updateAllCookiesButtonsActiveStatus(); } } diff --git a/resources/js/pages/main-menu.js b/resources/js/pages/main-menu.js index d85fbdc5..cf407182 100644 --- a/resources/js/pages/main-menu.js +++ b/resources/js/pages/main-menu.js @@ -1,24 +1,26 @@ -let header = document.querySelector('#app > header'); -let links = document.querySelectorAll('#app > header > nav > ul > li > a'); -let inputs = document.querySelectorAll('#app > header input[type="checkbox"]'); +(function () { + let header = document.querySelector('#app > header'); + let links = document.querySelectorAll('#app > header > nav > ul > li > a'); + let inputs = document.querySelectorAll('#app > header input[type="checkbox"]'); -document.body.addEventListener('click', function (e) { - if (!__Gaul.isDescendant(header, e.target)) { - for (let checkbox of inputs) { - checkbox.checked = false; + document.body.addEventListener('click', function (e) { + if (!__Gaul.isDescendant(header, e.target)) { + for (let checkbox of inputs) { + checkbox.checked = false; + } } - } -}, false); + }, false); -header.addEventListener('click', function (e) { - let headerStatus = document.getElementById('menu-checkbox'); - if (headerStatus.checked === true) { - for (let checkbox of inputs) { - checkbox.checked = false; + header.addEventListener('click', function (e) { + let headerStatus = document.getElementById('menu-checkbox'); + if (headerStatus.checked === true) { + for (let checkbox of inputs) { + checkbox.checked = false; + } + } else { + for (let checkbox of inputs) { + checkbox.checked = true; + } } - } else { - for (let checkbox of inputs) { - checkbox.checked = true; - } - } -}); + }); +})(); diff --git a/resources/sass/_variables.scss b/resources/sass/_variables.scss index 116cd803..ae09cf48 100644 --- a/resources/sass/_variables.scss +++ b/resources/sass/_variables.scss @@ -55,6 +55,8 @@ $color10: #999595; $color11: #ab9d8e; $color12: #ffc400; $orange: #ffb400; +$primary-color: $primary; +$secondary-color: $secondary; $vegetal: #a2e48b; $vegetalBodyBG: #8dd175; diff --git a/resources/sass/front/modules/_ldcweb-cn.scss b/resources/sass/front/modules/_ldcweb-cn.scss index 5047dc42..e9804dd7 100644 --- a/resources/sass/front/modules/_ldcweb-cn.scss +++ b/resources/sass/front/modules/_ldcweb-cn.scss @@ -2,16 +2,17 @@ /* - Choix des FONTS */ /* - Changement des couleurs et des polices */ - /* PARTIE A RENSEIGNER */ -// $primary: #006633; -// $secondary: #e30613; -// $background-color: #f5ecde; -$background-color: $color1; +// $primary-color #d4021d; +// $secondary-color #707070; +// $background-color #ffffff; $title-font: "Veneer", Arial, Helvetica, sans-serif; $title-size: 4rem; $text-font: "CreamyScriptRegular", Arial, Helvetica, sans-serif; $text-size: 2rem; +$accept-color: #33aa33; +$deny-color: #aa3333; +$background-color: $color1; /* PARTIE A RENSEIGNER FACULTATIF */ /* FENETRE D'ACCUEIL */ @@ -25,12 +26,12 @@ $ck-w1-color-title: #000000; /* Text settings */ $ck-w1-font-family-txt: $text-font; $ck-w1-font-size-txt: $text-size; -$ck-w1-color-txt: $primary; -$ck-w1-color-href-hover: $secondary; +$ck-w1-color-txt: $primary-color; +$ck-w1-color-href-hover: $secondary-color; /* Button settings */ -$ck-w1-color-btn: $primary; -$ck-w1-color-btn-hover: $secondary; +$ck-w1-color-btn: $primary-color; +$ck-w1-color-btn-hover: $secondary-color; $ck-w1-font-family-btn-txt: $text-font; $ck-w1-font-size-btn-txt: $text-size; $ck-w1-color-btn-txt: #ffffff; @@ -41,7 +42,7 @@ $ck-w1-color-btn-border-hover: transparent; /* FENETRE DE PERSONNALISATION */ $ck-bg-color-modal-wrapper: #ffffff; /* Title settings */ -$ck-w2-bgcolor-title: $primary; +$ck-w2-bgcolor-title: $primary-color; $ck-w2-font-family-title: $title-font; $ck-w2-font-size-title: $title-size; $ck-w2-color-title: #ffffff; @@ -54,9 +55,9 @@ $ck-w2-color-href-hover: #000000; /* Accept/Deny btn settings */ $ck-color-accept: #808080; -$ck-color-accept-hover: $primary; +$ck-color-accept-hover: $accept-color; $ck-color-deny: #808080; -$ck-color-deny-hover: $secondary; +$ck-color-deny-hover: $deny-color; $ck-color-txt: #ffffff; $ck-color-txt-hover: #ffffff; @@ -65,7 +66,6 @@ $ck-bgcolor-list: #e4e4e4; $ck-font-family-list: $text-font; $ck-font-size-list: $text-size; $ck-color-list: #000000; - /* FIN DU PARAMETRAGE */ /* MOBILE FIRST */ @@ -87,17 +87,16 @@ $ck-color-list: #000000; top: 0; bottom: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); - z-index: 6000; + z-index: 99999999999; opacity: 1; + line-height: initial; } #ldcweb-cn p, #ldcweb-cn a{ font-family: $ck-w1-font-family-txt; font-size: $ck-w1-font-size-txt; - line-height: 1.2; color: $ck-w1-color-txt; - line-height: 1.3; } #ldcweb-cn a{ text-decoration: underline; @@ -128,7 +127,6 @@ $ck-color-list: #000000; #ldcweb-cn .banner-title p{ font-family: $ck-w1-font-family-title; font-size: $ck-w1-font-size-title; - line-height: 1.2; font-weight: bold; color: $ck-w1-color-title; text-align: center; @@ -139,20 +137,19 @@ $ck-color-list: #000000; display: flex; flex-direction: column; } -#ldcweb-cn .btns .btn:first-child {margin-bottom: 2vw;} #ldcweb-cn .btns .btn { - flex: 1; + display: block; + /* flex: 1; */ padding: 1em; text-align: center; min-width: 12em; + width: 100%; background-color: $ck-w1-color-btn; text-decoration: none; font-family: $ck-w1-font-family-btn-txt; font-size: $ck-w1-font-size-btn-txt; - line-height: 1.2; color: $ck-w1-color-btn-txt; - /* font-weight: bold; */ transition: all .5s; } #ldcweb-cn .btns .btn:hover { @@ -178,6 +175,7 @@ $ck-color-list: #000000; #ldcweb-cn-modal .modal-wrapper{ position: relative; background-color: $ck-bg-color-modal-wrapper; + max-height: 100vh; } #ldcweb-cn-modal .modal-wrapper > div:not(:first-of-type){width: 100%;} #ldcweb-cn-modal .modal-btn-close{ @@ -198,7 +196,6 @@ $ck-color-list: #000000; font-family: Arial, Helvetica, sans-serif; font-size: medium; - line-height: .85; font-weight: bold; color: $ck-w2-color-title; background-color: $ck-w2-bgcolor-title; @@ -229,20 +226,18 @@ $ck-color-list: #000000; font-size: $ck-w2-font-size-txt; color: $ck-w2-color-txt; text-align: center; - line-height: 1.2; } #ldcweb-cn-modal .modal-title > div a:hover, #ldcweb-cn-modal .modal-all a:hover {color: $ck-w2-color-href-hover;} /* TITLE */ -#ldcweb-cn-modal .modal-wrapper .modal-title{padding: 4vw 4vw 0;} +#ldcweb-cn-modal .modal-wrapper .modal-title{padding: 4vw;} #ldcweb-cn-modal .modal-title .title{ font-family: $ck-w2-font-family-title; font-size: $ck-w2-font-size-title; font-weight: bold; color: $ck-w2-color-title; text-align: center; - line-height: 1.2; } #ldcweb-cn-modal .modal-title .title::after, #ldcweb-cn-modal .modal-title > div::after{ @@ -315,15 +310,15 @@ $ck-color-list: #000000; font-family: $ck-font-family-list; font-size: $ck-font-size-list; color: $ck-color-list; - line-height: 1.2; } -#ldcweb-cn-modal .modal-details li a:hover{color:$secondary;} +#ldcweb-cn-modal .modal-details li a:hover{color:$secondary-color;} #ldcweb-cn-modal .modal-details .ldcweb-cn-infos{ display: flex; flex-direction: column; + flex: 1; } #ldcweb-cn-modal .modal-details .ldcweb-cn-infos span:first-of-type{ - font-size: calc(#{$ck-font-size-list} * 1.25); + font-size: calc($ck-font-size-list * 1.25); font-weight: bold; } #ldcweb-cn-modal .modal-details .ldcweb-cn-infos a{width: fit-content;} @@ -390,7 +385,10 @@ $ck-color-list: #000000; padding-bottom: 4vw; } #ldcweb-cn .btns {flex-direction: row;} - #ldcweb-cn .btns .btn:first-child {margin: 0 2vw 0 0;} + #ldcweb-cn .btns > div:first-child, + #ldcweb-cn .btns > div:last-child + {margin-top: 0;} + #ldcweb-cn .btns > div:not(:last-child) {margin: 0 2vw 0 0;} /* MODAL */ #ldcweb-cn-modal .modal-wrapper{width: 90vw;} @@ -430,14 +428,26 @@ $ck-color-list: #000000; @media only screen and (min-width:1024px) { #ldcweb-cn .ldcweb-cn-banner{ flex-direction: row; + align-items: flex-start; justify-content: space-between; padding: 2vw 3vw; } - #ldcweb-cn .ldcweb-cn-banner div:not(:last-child){margin: 0 0 2vw 0;} + #ldcweb-cn .ldcweb-cn-banner div:not(:last-child){margin: 0 0 .5em 0;} #ldcweb-cn .ldcweb-cn-banner > div:not(:last-child){margin: 0 4vw 0 0;} + #ldcweb-cn .ldcweb-cn-banner .banner-img{ + height: 100%; + display: flex; + align-items: center; + } + #ldcweb-cn .banner-img img{height: fit-content;} + #ldcweb-cn .banner-txt{text-align: start;} - #ldcweb-cn .btns {flex-direction: column;} - #ldcweb-cn .btns .btn:first-child {margin: 0 0 1vw;} + #ldcweb-cn .btns { + height: 100%; + flex-direction: column; + justify-content: center; + } + #ldcweb-cn .btns > div:first-child .btn{margin: 0;} /* MODAL */ #ldcweb-cn-modal .modal-wrapper{width: 80vw;} #ldcweb-cn-modal .modal-btn-close{ @@ -445,7 +455,7 @@ $ck-color-list: #000000; height: 3vw; } /* TITLE */ - #ldcweb-cn-modal .modal-wrapper .modal-title{padding: 2vw 2vw 0;} + #ldcweb-cn-modal .modal-wrapper .modal-title{padding: 2vw;} #ldcweb-cn-modal .modal-title .title::after, #ldcweb-cn-modal .modal-title > div::after{margin: 2vw auto;} /* ALL */ @@ -492,9 +502,7 @@ $ck-color-list: #000000; /* * * */ /* ***************** */ @media only screen and (min-width: 1440px) { - #ldcweb-cn .banner-img{flex: 1;} #ldcweb-cn .col{flex: 4;} - #ldcweb-cn .btns {flex: 1;} /* MODAL */ #ldcweb-cn-modal .modal-wrapper{width: 60vw;} #ldcweb-cn-modal .modal-btn-close{ @@ -528,9 +536,9 @@ $ck-color-list: #000000; /* * *** */ /* ************ */ @media only screen and (min-width: 1920px) { - #ldcweb-cn p{font-size: calc(#{$ck-w1-font-size-txt} * 1.25);} - #ldcweb-cn .banner-title p{font-size: calc(#{$ck-w1-font-size-title} * 1.25);} - #ldcweb-cn .btns .btn {font-size: calc(#{$ck-w1-font-size-btn-txt} * 1.25);} + #ldcweb-cn p{font-size: calc($ck-w1-font-size-txt * 1.25);} + #ldcweb-cn .banner-title p{font-size: calc($ck-w1-font-size-title * 1.25);} + #ldcweb-cn .btns .btn {font-size: calc($ck-w1-font-size-btn-txt * 1.25);} /* MODAL */ #ldcweb-cn-modal .modal-wrapper{width: 50vw;} @@ -542,10 +550,10 @@ $ck-color-list: #000000; #ldcweb-cn-modal .modal-title > div a, #ldcweb-cn-modal .modal-all p, #ldcweb-cn-modal .modal-all a - {font-size: calc(#{$ck-w2-font-size-txt} * 1.25);} + {font-size: calc($ck-w2-font-size-txt * 1.25);} /* TITLE */ - #ldcweb-cn-modal .modal-wrapper .modal-title{padding: 1vw 1vw 0;} - #ldcweb-cn-modal .modal-title .title{font-size: calc(#{$ck-w2-font-size-title} * 1.25);} + #ldcweb-cn-modal .modal-wrapper .modal-title{padding: 1vw;} + #ldcweb-cn-modal .modal-title .title{font-size: calc($ck-w2-font-size-title * 1.25);} #ldcweb-cn-modal .modal-title .title::after, #ldcweb-cn-modal .modal-title > div::after{margin: 1vw auto;} /* ALL */ @@ -563,8 +571,8 @@ $ck-color-list: #000000; #ldcweb-cn-modal .modal-details li span, #ldcweb-cn-modal .modal-details li a, #ldcweb-cn-modal .modal-details li label - {font-size: calc(#{$ck-font-size-list} * 1.25);} - #ldcweb-cn-modal .modal-details .ldcweb-cn-infos span:first-of-type{font-size: calc(#{$ck-font-size-list} * 1.5);} + {font-size: calc($ck-font-size-list * 1.25);} + #ldcweb-cn-modal .modal-details .ldcweb-cn-infos span:first-of-type{font-size: calc($ck-font-size-list * 1.5);} #ldcweb-cn-modal .modal-details .ldcweb-cn-buttons{ flex-direction: row; align-items: center; diff --git a/resources/views/front/brand/traceability.blade.php b/resources/views/front/brand/traceability.blade.php index 13b1cd44..6f600dce 100644 --- a/resources/views/front/brand/traceability.blade.php +++ b/resources/views/front/brand/traceability.blade.php @@ -49,6 +49,6 @@ @endpush @push('scripts') - + @endpush diff --git a/resources/views/front/ocb/poultry.blade.php b/resources/views/front/ocb/poultry.blade.php index 7a417624..e1f88521 100644 --- a/resources/views/front/ocb/poultry.blade.php +++ b/resources/views/front/ocb/poultry.blade.php @@ -56,6 +56,6 @@ @endpush @push('scripts') - + @endpush diff --git a/resources/views/front/webldc-cn.blade.php b/resources/views/front/webldc-cn.blade.php index 1068715a..222de9a8 100644 --- a/resources/views/front/webldc-cn.blade.php +++ b/resources/views/front/webldc-cn.blade.php @@ -1,81 +1,87 @@
- - + +
- {{__('OK, TOUT ACCEPTER') }} - {{__('Personnaliser') }} +
+ OK, TOUT ACCEPTER +
+
+ TOUT REFUSER +
+
+ Personnaliser +
-
X
-
-

{{__('Panneau de gestion des cookies') }}

-

{{__('En autorisant ces services tiers, vous acceptez le dépôt et la lecture de cookies et l\'utilisation de technologies de suivi nécessaires à leur bon fonctionnement.') }}

- -
-
-

{{__('Préférence pour tous les services') }}

-
-
{{__('Autoriser tous les cookies') }}
-
{{__('Interdire tous les cookies') }}
+
X
+
+

{{__('Panneau de gestion des cookies') }}

+

Les fonctionnalités de ce site s’appuient sur des services proposés par des tiers. +
Si vous acceptez, ces tiers déposeront des cookies qui vous permettront de visualiser sur le site du contenu hébergé par ces tiers. +
Via ces cookies, ces tiers collecteront et utiliseront vos données de navigation pour des finalités qui leur sont propres, conformément à leur politique de confidentialité (lien ci-dessous). Cette page vous permet de donner ou de retirer votre consentement, soit globalement soit service par service. +

+
-
-
-
    -
-
-
-
- - - -
-
-
- - -
-
- - -
+
+

{{__('Préférence pour tous les services') }}

+
+
{{__('Autoriser tous les cookies') }}
+
{{__('Interdire tous les cookies') }}
+
+
+
+
    +
+
+
+
+ + + +
+
+
+ + +
+
+ + +
+
-
- @push('scripts')