giacomo/GestioneSpiaggia.it
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Inserimento nuova gestione cookie policy

Browse Source
This commit is contained in:
Giacomo G
2022-02-11 12:59:21 +01:00
parent c61b4c812a
commit 067516d58b
41 changed files with 8917 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/front/cookie/cookie.as.js
+208 -33
View File
@@ -1,8 +1,9 @@
// Parametri di configurazione
const cookiePolicyUrl = "https://www.gestionespiaggia.it/it/cookiepolicy";
const cookiePolicyUrl = "https://www.adriaticasistemi.it/it/cookiepolicy";
const cookieApiUrl = "https://cookie.adriaticasistemi.it/consensi";
const cookieApiH = "d4c1b34181a4b565e9878ff5d579940ad0f308adc73fbfa02addc1f36fd5412a";
const cookieExpiresDays = 90;
const cookieExpiresDays = 120;
const cookieBsVersione = 5;
const cookieAcceptText = "Accetto tutti";
const cookieDeclineText = "Rifiuto";
@@ -20,12 +21,104 @@ const cookiePolicyText = `Utilizziamo cookie, anche di terze parti, per consenti
href="${cookiePolicyUrl}"
target="_blank">cookie policy</a>.`;
// Blocchi html e css
const cookieBlockStyle = `<style>
// Blocchi html e css Bootstrap 5
const cookieBlockStyle = `<style data-bs-v="5">
/** COOKIE POLICY STYLE **/
#cookie_block {
#cookie_banner {
background-color: ${cookiePolicyMainColor};
color: ${cookiePolicyMainColorContrast};
bottom: 0;
height: auto;
padding: 16px 16px 12px;
position: fixed;
width: 100%;
z-index: 1000;
font-size: 0.9em;
}
#cookie_banner a {
color: ${cookiePolicyMainColorContrast};
}
#cookie_banner a.cookie_link{
text-decoration: underline !important;
}
#cookie_banner a.btn {
border: 1px solid ${cookiePolicyMainColorContrast};
border-radius: 0;
text-decoration: none;
}
#cookie_banner a.btn:hover {
background-color: ${cookiePolicyMainColorContrast};
color: ${cookiePolicyMainColor};
text-decoration: none;
}
#cookie_main_btn {
display: block;
position: fixed;
bottom: 20px;
right: 10px;
padding: 10px;
background: #FFFFFF;
border-radius: 50%;
box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%);
cursor:pointer;
}
#cookie_main_btn:hover{
box-shadow: 0 4px 8px 0 rgb(0 0 0 / 50%);
}
#cookie_main_btn img{
width: 42px;
height: 42px;
}
#close_btn{
padding-right: 4px;
margin-bottom: 4px;
color: #9D9D9D;
cursor: pointer;
}
#close_btn:hover{
color: #FFFFFF;
}
</style>`;
const cookieBlockHtml = `
<div id="cookie_block" data-bs-v="5">
<div id="cookie_main_btn">
<img src="./cookie/cookies-icon.svg" />
</div>
<div id="cookie_banner">
<div class="row">
<div class="col-12 col-md-9 text-justify mt-1">
${cookiePolicyText}
</div>
<div class="col-12 col-md-3 mb-2">
<i id="close_btn" class="fa fa-times pull-right"></i>
<div class="clearfix"></div>
<div class="d-grid gap-2">
<a data-cookie="all" href="#" class="btn btn-outline-light btn-sm cookie_btn"><i class="fa fa-check fa-fw"></i> ${cookieAcceptText}</a>
<a data-cookie="tecnici" href="#" class="btn btn-outline-light btn-sm cookie_btn"><i class="fa fa-times fa-fw"></i> ${cookieDeclineText}</a>
</div>
</div>
</div>
</div>
</div>`;
// Blocchi Html per Bootstrap 4
const cookieBlockStyle_Bs4 = `<style data-bs-v="4">
/** COOKIE POLICY STYLE **/
#cookie_banner {
background-color: ${cookiePolicyMainColor};
color: ${cookiePolicyMainColorContrast};
bottom: 0;
@@ -37,46 +130,95 @@ const cookieBlockStyle = `<style>
font-size: 12px;
}
#cookie_block a {
#cookie_banner a {
color: ${cookiePolicyMainColorContrast};
}
#cookie_block a.cookie_link{
#cookie_banner a.cookie_link{
text-decoration: underline !important;
}
#cookie_block a.btn {
#cookie_banner a.btn {
border: 1px solid ${cookiePolicyMainColorContrast};
border-radius: 0;
text-decoration: none;
}
#cookie_block a.btn:hover {
#cookie_banner a.btn:hover {
background-color: ${cookiePolicyMainColorContrast};
color: ${cookiePolicyMainColor};
text-decoration: none;
}
#cookie_main_btn {
display: block;
position: fixed;
bottom: 20px;
right: 10px;
padding: 10px;
background: #FFFFFF;
border-radius: 50%;
box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%);
cursor:pointer;
}
#cookie_main_btn:hover{
box-shadow: 0 4px 8px 0 rgb(0 0 0 / 50%);
}
#cookie_main_btn img{
width: 42px;
height: 42px;
}
#close_btn{
padding-right: 8px;
color: #9D9D9D;
cursor: pointer;
}
#close_btn:hover{
color: #FFFFFF;
}
</style>`;
const cookieBlockHtml = `<div id="cookie_block">
<div class="row">
<div class="col-xs-12 col-md-9 text-justify">
${cookiePolicyText}
</div>
<div class="col-xs-12 col-md-3">
<a data-cookie="all" href="#" class="btn pull-right btn-sm mt-2 cookie_btn"><i class="fa fa-check fa-fw"></i> ${cookieAcceptText}</a>
<a data-cookie="tecnici" href="#" class="btn pull-right btn-sm mt-2 cookie_btn"><i class="fa fa-times fa-fw"></i> ${cookieDeclineText}</a>
const cookieBlockHtml_Bs4 = `
<div id="cookie_block" data-bs-v="4">
<div id="cookie_main_btn">
<img src="./cookie/cookies-icon.svg" />
</div>
<div id="cookie_banner">
<div class="row">
<div class="col-xs-12 col-md-9 text-justify">
${cookiePolicyText}
</div>
<div class="col-xs-12 col-md-3">
<i id="close_btn" class="fa fa-times pull-right"></i>
<div class="clearfix"></div>
<a data-cookie="all" href="#" class="btn pull-right btn-sm mt-2 cookie_btn"><i class="fa fa-check fa-fw"></i> ${cookieAcceptText}</a>
<a data-cookie="tecnici" href="#" class="btn pull-right btn-sm mt-2 cookie_btn"><i class="fa fa-times fa-fw"></i> ${cookieDeclineText}</a>
</div>
</div>
</div>
</div>`;
// Terze Parti Html Block
const cookieAnalyticsGTagBlock = `
<script class="gtag_block" async src="https://www.googletagmanager.com/gtag/js?id=UA-15275419-1"></script>
<script class="gtag_block">
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-15275419-1');
</script>`;
// Funzioni per la gestione dei cookie
function createCookie(name, value, days) {
if (days) {
var date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
var expires = "; expires=" + date.toGMTString();
}
else var expires = "";
} else var expires = "";
document.cookie = name + "=" + value + expires + "; path=/";
}
@@ -96,28 +238,54 @@ function eraseCookie(name) {
createCookie(name, "", -1);
}
function removeCookieTerzeParti() {
$('.gtag_block').remove();
}
function addCookieTerzeParti() {
$(document.head).append(cookieAnalyticsGTagBlock);
}
function closeBanner(slide = true){
const cookieBanner = $('#cookie_banner');
const cookieMainBtn = $('#cookie_main_btn');
slide ? cookieBanner.slideUp() : cookieBanner.hide();
slide ? cookieMainBtn.slideDown() : cookieMainBtn.show();
}
function showBanner(slide = true){
const cookieBanner = $('#cookie_banner');
const cookieMainBtn = $('#cookie_main_btn');
slide ? cookieBanner.slideDown() : cookieBanner.show();
slide ? cookieMainBtn.slideUp() : cookieMainBtn.hide();
}
function initCookiePlugin(){
const cookieStyle = cookieBsVersione === 4 ? cookieBlockStyle_Bs4 : cookieBlockStyle;
const cookieHtml = cookieBsVersione === 4 ? cookieBlockHtml_Bs4 : cookieBlockHtml;
$(document.head).append(cookieStyle);
$(document.body).append(cookieHtml);
}
// Controller
$(document).ready(function () {
$(document.head).append(cookieBlockStyle);
$(document.body).append(cookieBlockHtml);
const cookieBlock = $('#cookie_block');
initCookiePlugin();
// const cookiePolicyInfo = readCookie('cookiePolicyInfo');
const cookiePolicyInfo = JSON.parse(readCookie('cookiePolicyInfo'));
const displayCookiePolicy = readCookie('displayCookiePolicy');
if(displayCookiePolicy){
cookieBlock.hide();
}else{
cookieBlock.show();
}
displayCookiePolicy ? closeBanner(false) : showBanner(false);
}).delegate('.cookie_btn','click',(link) => {
// Gestione Cookie Terze Parti
(cookiePolicyInfo && cookiePolicyInfo.CheckCookieTerzeParti) ? addCookieTerzeParti() : undefined;
}).delegate('.cookie_btn', 'click', (link) => {
link.preventDefault();
const element = $(link.target);
if(element.attr('disabled')) return;
if (element.attr('disabled')) return;
const icon = element.children('i');
@@ -135,17 +303,20 @@ $(document).ready(function () {
})
};
const iconName = CheckCookieTerzeParti ? 'fa-check':'fa-times';
const iconName = CheckCookieTerzeParti ? 'fa-check' : 'fa-times';
icon.removeClass(iconName).addClass('fa-circle-o-notch fa-spin');
$('.cookie_btn').attr('disabled', true);
if(cookieApiH) callSettings.headers = {Authorization: cookieApiH};
if (cookieApiH) callSettings.headers = {Authorization: cookieApiH};
$.ajax(callSettings).done((res) => {
createCookie('displayCookiePolicy', res.Identificativo, cookieExpiresDays);
createCookie('cookiePolicyInfo', JSON.stringify(res), cookieExpiresDays);
$('#cookie_block').slideUp();
// Inserisce i blocchi autorizzati con i cookie di terze parti
res.CheckCookieTerzeParti ? addCookieTerzeParti() : removeCookieTerzeParti();
closeBanner();
}).fail(() => {
eraseCookie('displayCookiePolicy');
eraseCookie('cookiePolicyInfo');
@@ -153,4 +324,8 @@ $(document).ready(function () {
$('.cookie_btn').removeAttr('disabled');
icon.removeClass('fa-circle-o-notch fa-spin').addClass(iconName);
});
}).delegate('#cookie_main_btn', 'click', () => {
showBanner();
}).delegate('#close_btn', 'click', () => {
closeBanner();
});