feat: add cookie-notice 6.0.4 + popup contact-form
This commit is contained in:
Nicolas Demangeat
parent
30aad4c124
commit
83062ecec1
8 changed files with 184 additions and 132 deletions
8
package-lock.json
generated
8
package-lock.json
generated
|
|
@ -13,7 +13,7 @@
|
|||
"@fortawesome/free-regular-svg-icons": "^6.5.1",
|
||||
"@fortawesome/free-solid-svg-icons": "^6.5.1",
|
||||
"@fortawesome/vue-fontawesome": "^3.0.5",
|
||||
"@ldc-web/cookie-notice": "^4.0.1",
|
||||
"@ldc-web/cookie-notice": "^6.0.3",
|
||||
"@sipec/vue3-tags-input": "^3.0.4",
|
||||
"@types/bootstrap": "^5.2.7",
|
||||
"@types/leaflet": "^1.9.8",
|
||||
|
|
@ -1069,9 +1069,9 @@
|
|||
"dev": true
|
||||
},
|
||||
"node_modules/@ldc-web/cookie-notice": {
|
||||
"version": "4.0.1",
|
||||
"resolved": "https://lab.s-web.fr/api/v4/projects/50/packages/npm/@ldc-web/cookie-notice/-/@ldc-web/cookie-notice-4.0.1.tgz",
|
||||
"integrity": "sha1-NvTFoKF7Ki/+3PDr9hmqjjTFuZE=",
|
||||
"version": "6.0.3",
|
||||
"resolved": "https://lab.s-web.fr/api/v4/projects/50/packages/npm/@ldc-web/cookie-notice/-/@ldc-web/cookie-notice-6.0.3.tgz",
|
||||
"integrity": "sha1-mW2DD+8ipWkmvKhZ3m9h5wemAHI=",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/@nodelib/fs.scandir": {
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@
|
|||
"@fortawesome/free-regular-svg-icons": "^6.5.1",
|
||||
"@fortawesome/free-solid-svg-icons": "^6.5.1",
|
||||
"@fortawesome/vue-fontawesome": "^3.0.5",
|
||||
"@ldc-web/cookie-notice": "^4.0.1",
|
||||
"@ldc-web/cookie-notice": "^6.0.3",
|
||||
"@sipec/vue3-tags-input": "^3.0.4",
|
||||
"@types/bootstrap": "^5.2.7",
|
||||
"@types/leaflet": "^1.9.8",
|
||||
|
|
|
|||
|
|
@ -1,32 +1,27 @@
|
|||
<?php
|
||||
|
||||
// * Version 4.0.1
|
||||
// * Version 6.0.4
|
||||
// phpcs:disable
|
||||
return [
|
||||
'button_customize_cookies' => 'Personnaliser les cookies',
|
||||
'button_close_cookies' => 'Fermer la fenêtre des cookies',
|
||||
'button_forbid' => 'Interdire',
|
||||
'button_allow' => 'Autoriser',
|
||||
'button_toggle_cookie' => 'Autoriser ou refuser',
|
||||
'button_forbid_all' => 'Tout refuser',
|
||||
'button_allow_all' => 'Tout accepter',
|
||||
'button_forbid_all_title' => 'Refuser tous les cookies et fermer le panneau des cookies',
|
||||
'button_allow_all_title' => 'Accepter tous les cookies et fermer le panneau des cookies',
|
||||
'button_customize' => 'Personnaliser',
|
||||
'button_back' => 'Retour',
|
||||
'button_validate_and_close' => 'Valider et fermer',
|
||||
'button_title_open_new_tab' => 'Ouvrir le lien dans un nouvel onglet',
|
||||
'banner_title' => 'Le site internet :site_name utilise des cookies !',
|
||||
'banner_text' => 'Nous utilisons des cookies pour nous assurer du bon fonctionnement de notre site et à des fins analytiques.
|
||||
Vous pouvez changer d’avis à tout moment en cliquant sur l’icône présente sur chaque page de notre site.
|
||||
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.',
|
||||
'modal_title' => 'Fenêtre de gestion de cookies',
|
||||
'panel_title' => 'Panneau de gestion des cookies',
|
||||
'panel_content' => 'Contenu du panneau des cookies',
|
||||
'panel_subtitle' => 'Le respect de votre vie privée est notre priorité',
|
||||
'panel_details' => '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.',
|
||||
'picture_cookie_title' => 'Image d’un bon gros cookie',
|
||||
'navigation_title' => 'Navigation du panneau des cookies',
|
||||
'custom' => [
|
||||
'frame' => 'Vous devez accepter les cookies pour visionner cette vidéo',
|
||||
'analytics' => [
|
||||
'title' => 'Google Analytics',
|
||||
'description' => 'Les services de mesure d’audience permettent de générer des statistiques de fréquentation utiles à l’amélioration du site.',
|
||||
|
|
@ -46,7 +41,7 @@ return [
|
|||
'title' => 'reCAPTCHA',
|
||||
'description' => 'Les cookies qui sont déposés via le recaptcha sur les formulaires ont pour finalité d’empêcher que ceux-ci ne soient soumis par des robots.',
|
||||
'labelLink' => 'En apprendre plus',
|
||||
'warning' => 'Vous devez accepter les cookies pour envoyer le formulaire',
|
||||
'warning' => 'Vous devez accepter les cookies reCAPTCHA pour envoyer le formulaire',
|
||||
]
|
||||
]
|
||||
];
|
||||
|
|
|
|||
|
|
@ -70,7 +70,7 @@
|
|||
@foreach ($videoModels as $video)
|
||||
<div class="swiper-slide h-auto">
|
||||
<figure>
|
||||
<div class="d-md-flex justify-content-center">
|
||||
<div class="d-md-flex justify-content-center cn-youtube">
|
||||
@include('fo.modules.video-frame', [
|
||||
'type' => 'youtube',
|
||||
'title' => __('Visionner la vidéo'),
|
||||
|
|
|
|||
|
|
@ -68,7 +68,7 @@
|
|||
</div>
|
||||
@endif
|
||||
<div class="col-12">
|
||||
<div class="d-md-flex justify-content-center">
|
||||
<div class="d-md-flex justify-content-center cn-youtube">
|
||||
@include('fo.modules.video-frame', [
|
||||
'type' => 'youtube',
|
||||
'title' => __('Visionner la vidéo'),
|
||||
|
|
|
|||
|
|
@ -52,14 +52,26 @@
|
|||
<div class="badge-logo bg-primary rounded-pill"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="border border-3 border-primary p-3 mb-3 mt-4 mx-3 bg-white fw-bold rounded-4 cn-cookie-activate d-flex flex-column flex-md-row" data-cookie-name="recaptcha">
|
||||
<span class="d-flex flex-column w-md-75 w-100">
|
||||
<strong class="text-underline text-bold text-primary mb-2 fs-5">
|
||||
{{ __('cookie-notice.custom.recaptcha.warning') }}
|
||||
</strong>
|
||||
<br><br>
|
||||
<small class="text-success fw-normal fs-5">
|
||||
{{ __('Acceptez ce cookie pour utiliser les formulaires') }}
|
||||
</small>
|
||||
</span>
|
||||
<button class="btn btn-primary w-25 h-50 fs-5 rounded-4 mt-3 mt-md-0" id="recaptcha-accept">{{ __('AUTORISER') }}</button>
|
||||
</div>
|
||||
<form class="rounded-4 p-md-3 p-xl-5 p-0" id="listen-form" method="POST" action="{{ route('fo.listen.send') }}"
|
||||
enctype="multipart/form-data">
|
||||
enctype="multipart/form-data" inert>
|
||||
@method('POST')
|
||||
@csrf
|
||||
<div class="position-relative row w-100 gx-0 gx-md-4 mx-auto">
|
||||
<div class="col-12 col-md-6 col-xl-4">
|
||||
<div class="row">
|
||||
<fieldset class="col-12 form-floating mb-3" inert="true">
|
||||
<fieldset class="col-12 form-floating mb-3">
|
||||
<input class="form-control bg-transparent" id="contactSociety" name="society" type="text"
|
||||
value="{{ old('society') }}" placeholder="{{ Str::of(__('validation.custom.society'))->ucFirst() }}">
|
||||
<label for="contactSociety">{{ Str::of(__('validation.custom.society'))->ucFirst() }}</label>
|
||||
|
|
@ -67,7 +79,7 @@
|
|||
<div class="invalid-feedback d-block">{{ $message }}</div>
|
||||
@endforeach
|
||||
</fieldset>
|
||||
<fieldset class="col-12 form-floating mb-3" inert="true">
|
||||
<fieldset class="col-12 form-floating mb-3">
|
||||
<input class="form-control bg-transparent" id="contactFirstname" name="first_name" type="text"
|
||||
value="{{ old('first_name') }}"
|
||||
placeholder="{{ Str::of(__('validation.attributes.first_name'))->ucFirst() }}">
|
||||
|
|
@ -76,7 +88,7 @@
|
|||
<div class="invalid-feedback d-block">{{ $message }}</div>
|
||||
@endforeach
|
||||
</fieldset>
|
||||
<fieldset class="col-12 form-floating mb-3" inert="true">
|
||||
<fieldset class="col-12 form-floating mb-3">
|
||||
<input class="form-control bg-transparent" id="contactLastname" name="last_name" type="text"
|
||||
value="{{ old('last_name') }}"
|
||||
placeholder="{{ Str::of(__('validation.attributes.last_name'))->ucFirst() }}" required>
|
||||
|
|
@ -85,7 +97,7 @@
|
|||
<div class="invalid-feedback d-block">{{ $message }}</div>
|
||||
@endforeach
|
||||
</fieldset>
|
||||
<fieldset class="col-12 form-floating mb-3" inert="true">
|
||||
<fieldset class="col-12 form-floating mb-3">
|
||||
<input class="form-control bg-transparent" id="contactEmail" name="email" type="text"
|
||||
value="{{ old('email') }}" required
|
||||
placeholder="{{ Str::of(__('validation.attributes.email'))->ucFirst() }}">
|
||||
|
|
@ -94,7 +106,7 @@
|
|||
<div class="invalid-feedback d-block">{{ $message }}</div>
|
||||
@endforeach
|
||||
</fieldset>
|
||||
<fieldset class="col-12 form-floating mb-3" inert="true">
|
||||
<fieldset class="col-12 form-floating mb-3">
|
||||
<input class="form-control bg-transparent" id="contactPhone" name="phone" type="number"
|
||||
value="{{ old('phone') }}" placeholder="{{ Str::of(__('validation.attributes.phone'))->ucFirst() }}">
|
||||
<label for="contactPhone">{{ Str::of(__('validation.attributes.phone'))->ucFirst() }}</label>
|
||||
|
|
@ -106,7 +118,7 @@
|
|||
</div>
|
||||
<div class="col-12 col-md-6 col-xl-4">
|
||||
<div class="row">
|
||||
<fieldset class="col-12" inert="true">
|
||||
<fieldset class="col-12">
|
||||
<div class="row">
|
||||
<div class="col-6 col-md-12 form-floating mb-3">
|
||||
<input class="form-control bg-transparent" id="contactPostalcode" name="postal_code" type="number"
|
||||
|
|
@ -129,7 +141,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
<fieldset class="col-12 mb-3" inert="true">
|
||||
<fieldset class="col-12 mb-3">
|
||||
<select class="form-control bg-transparent px-2" id="contactCountry" name="country">
|
||||
<option value="null" selected>
|
||||
{{ __('Sélectionner un :entity', ['entity' => __('validation.attributes.country')]) }}
|
||||
|
|
@ -145,7 +157,7 @@
|
|||
<div class="invalid-feedback d-block">{{ $message }}</div>
|
||||
@endforeach
|
||||
</fieldset>
|
||||
<fieldset class="col-12 form-floating mb-3" inert="true">
|
||||
<fieldset class="col-12 form-floating mb-3">
|
||||
<input class="form-control bg-transparent" id="contactAddress" name="address" type="text"
|
||||
value="{{ old('address') }}"
|
||||
placeholder="{{ Str::of(__('validation.attributes.address'))->ucFirst() }}">
|
||||
|
|
@ -158,7 +170,7 @@
|
|||
</div>
|
||||
<fieldset class="col-12 col-xl-4 listen-message rounded-4 p-md-4 d-flex justify-content-center align-items-center p-0">
|
||||
<div class="row">
|
||||
<div class="col-12 form-floating mb-3" inert="true">
|
||||
<div class="col-12 form-floating mb-3">
|
||||
<select class="form-control bg-transparent px-2" id="contactObject" name="object">
|
||||
<option value="null" selected>
|
||||
{{ __('Sélectionner un :entity de mail*', ['entity' => __('validation.custom.object')]) }}
|
||||
|
|
@ -174,7 +186,7 @@
|
|||
<div class="invalid-feedback d-block">{{ $message }}</div>
|
||||
@endforeach
|
||||
</div>
|
||||
<div class="col-12 form-floating mb-3" inert="true">
|
||||
<div class="col-12 form-floating mb-3">
|
||||
<textarea class="form-control bg-transparent" id="contactMessage" name="message" rows="6" placeholder="Leave a comment here"
|
||||
required>{{ old('message') }}</textarea>
|
||||
<label class="ms-2" for="contactMessage">
|
||||
|
|
@ -207,48 +219,18 @@
|
|||
<div class="d-none d-lg-block col-12 col-xl-4 visibility-hidden"></div>
|
||||
<div class="col-12 col-xl-4 py-xl-0 py-4">
|
||||
<div class="row">
|
||||
<fieldset class="col-12 d-flex justify-content-start align-items-start align-items-md-center mb-1 flex-row"
|
||||
inert="true">
|
||||
<input class="form-check-input mt-2 p-2" id="accept_rules" name="accept_rules" type="checkbox"
|
||||
role="button" @if (old('accept_rules')) checked @endif required>
|
||||
<label class="ms-2 mt-1" for="accept_rules" role="button">
|
||||
{!! nl2br(
|
||||
__('J’autorise :appName à traiter mes données personnelles conformément à la :startAPolitique de confidentialité:endA.', [
|
||||
'appName' => config('app.name'),
|
||||
'startA' => '<a href="' . route('fo.confidentiality') . '">',
|
||||
'startA' => '<a href="' . route('fo.confidentiality') . '">',
|
||||
'endA' => '</a>',
|
||||
]),
|
||||
) !!}
|
||||
</label>
|
||||
@foreach ($errors->get('accept_rules') as $message)
|
||||
<div class="invalid-feedback d-block">{{ $message }}</div>
|
||||
@endforeach
|
||||
</fieldset>
|
||||
<fieldset class="col-12 d-flex justify-content-start align-items-start align-items-md-center mb-1 flex-row"
|
||||
inert="true">
|
||||
<input class="form-check-input mt-2 p-2" id="send_data" name="send_data" type="checkbox" role="button"
|
||||
@if (old('send_data')) checked @endif required>
|
||||
<label class="ms-2 mt-1" for="send_data" role="button">
|
||||
{!! nl2br(
|
||||
__('J\'ai lu et j\'accepte la politique de confidentialité de ce site: :startA Voir nos mentions légales et CGU:endA.', [
|
||||
'startA' => '<a href="' . route('fo.legals') . '">',
|
||||
'endA' => '</a>',
|
||||
]),
|
||||
) !!}
|
||||
</label>
|
||||
@foreach ($errors->get('send_data') as $message)
|
||||
<div class="invalid-feedback d-block">{{ $message }}</div>
|
||||
@endforeach
|
||||
<fieldset class="col-12 d-flex justify-content-start align-items-start align-items-md-center mb-1 flex-row">
|
||||
<p>
|
||||
{{ __('Les informations recueillies à partir de ce formulaire sont traitées par le Responsable de Traitement pour donner suite à votre demande de contact. Pour connaître vos droits, vous pouvez consulter la') }}
|
||||
<a class="fw-bold text-decoration-underline" href="{{ route('fo.confidentiality') }}"
|
||||
title="{{ __('Consulter la charte de confidentialité') }}">
|
||||
{{ __('Charte de confidentialité') }}
|
||||
</a>
|
||||
</p>
|
||||
</fieldset>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-xl-4">
|
||||
<a class="cn-cookie-link" id="recaptcha-warning" href="" rel="nofollow">
|
||||
<strong class="text-underline text-bold text-normal text-danger">
|
||||
{{ __('cookie-notice.custom.recaptcha.warning') }}
|
||||
</strong>
|
||||
</a>
|
||||
<div class="d-flex flex-column justify-content-center align-items-center">
|
||||
<div id="r_captcha"></div>
|
||||
@if ($errors->has('g-recaptcha-response'))
|
||||
|
|
@ -261,7 +243,7 @@
|
|||
<div class="text-center">
|
||||
<button class="g-recaptcha btn btn-primary rounded-pill text-capitalize"
|
||||
data-sitekey="{{ config('services.google.recaptcha.public') }}" type="submit"
|
||||
inert="true">{{ Str::ucfirst(__('Envoyer')) }}</button>
|
||||
>{{ Str::ucfirst(__('Envoyer')) }}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -270,26 +252,38 @@
|
|||
</section>
|
||||
@endsection
|
||||
|
||||
|
||||
@push('scripts')
|
||||
<script nonce="{{ $nonce }}">
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
window.__CN_Recaptcha = function() {
|
||||
(function(d, t) {
|
||||
let g = d.createElement(t),
|
||||
s = d.getElementsByTagName(t)[0];
|
||||
g.src = 'https://www.google.com/recaptcha/api.js?render=explicit&onload=__CN_Recaptcha_Loaded';
|
||||
s.parentNode.insertBefore(g, s)
|
||||
}(document, 'script'));
|
||||
};
|
||||
window.__CN_Recaptcha_Loaded = function() {
|
||||
grecaptcha.render('r_captcha', {
|
||||
'sitekey': '{{ config('services.google.recaptcha.public') }}'
|
||||
});
|
||||
document.getElementById('recaptcha-warning').remove();
|
||||
document.getElementById('listen-form').querySelectorAll('[inert="true"]').forEach(element => {
|
||||
element.inert = false;
|
||||
});
|
||||
};
|
||||
<script nonce="{{ $nonce }}">
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const initFormCaptcha = () => {
|
||||
const newDiv = document.createElement("div");
|
||||
newDiv.classList.add('g-recaptcha');
|
||||
document.getElementById('r_captcha').appendChild(newDiv);
|
||||
document.getElementById('listen-form').inert = true;
|
||||
};
|
||||
window.__CN_Recaptcha = function() {
|
||||
initFormCaptcha();
|
||||
(function(d, t) {
|
||||
let g = d.createElement(t),
|
||||
s = d.getElementsByTagName(t)[0];
|
||||
g.src = 'https://www.google.com/recaptcha/api.js?render=explicit&onload=__CN_Recaptcha_Loaded';
|
||||
s.parentNode.insertBefore(g, s)
|
||||
}(document, 'script'));
|
||||
};
|
||||
window.__CN_Recaptcha_Reset = function() {
|
||||
document.querySelector('#r_captcha > div')?.remove();
|
||||
};
|
||||
window.__CN_Recaptcha_Loaded = function() {
|
||||
document.getElementById('listen-form').inert = false;
|
||||
grecaptcha.render(document.querySelector('#r_captcha > div'), {
|
||||
'sitekey': '{{ config('services.google.recaptcha.public') }}'
|
||||
});
|
||||
};
|
||||
document.getElementById("recaptcha-accept").addEventListener('click', function(e) {
|
||||
e.preventDefault();
|
||||
window.WebCookieNotice.acceptCookie('recaptcha');
|
||||
});
|
||||
</script>
|
||||
});
|
||||
</script>
|
||||
@endpush
|
||||
|
|
|
|||
100
resources/views/vendor/cn-cookies.blade.php
vendored
100
resources/views/vendor/cn-cookies.blade.php
vendored
|
|
@ -11,16 +11,19 @@ $strings = (object)[
|
|||
'button_customize_cookies' => __('cookie-notice.button_customize_cookies'),
|
||||
'button_close_cookies' => __('cookie-notice.button_close_cookies'),
|
||||
'button_title_open_new_tab' => __('cookie-notice.button_title_open_new_tab'),
|
||||
'button_forbid' => __('cookie-notice.button_forbid'),
|
||||
'button_allow' => __('cookie-notice.button_allow'),
|
||||
'button_toggle_cookie' => __('cookie-notice.button_toggle_cookie'),
|
||||
'button_forbid_all' => Str::upper(__('cookie-notice.button_forbid_all')),
|
||||
'button_allow_all' => Str::upper(__('cookie-notice.button_allow_all')),
|
||||
'button_customize' => Str::upper(__('cookie-notice.button_customize')),
|
||||
'button_forbid_all_title' => __('cookie-notice.button_forbid_all_title'),
|
||||
'button_allow_all_title' => __('cookie-notice.button_allow_all_title'),
|
||||
'button_back' => Str::upper(__('cookie-notice.button_back')),
|
||||
'button_validate_and_close' => Str::upper(__('cookie-notice.button_validate_and_close')),
|
||||
'banner_title' => __('cookie-notice.banner_title', ['site_name' => $site_name]),
|
||||
'banner_text' => __('cookie-notice.banner_text'),
|
||||
'banner_text' => sprintf(
|
||||
"%s<br><br>%s",
|
||||
"Nous utilisons des cookies pour nous assurer du bon fonctionnement de notre site et à des fins analytiques. Vous pouvez changer d'avis à tout moment en cliquant sur l'icône présente sur chaque page de notre site. 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.",
|
||||
"<a href='/charte-de-confidentialite'>Charte de confidentialité</a>"
|
||||
),
|
||||
'panel_title' => __('cookie-notice.panel_title'),
|
||||
'panel_content' => __('cookie-notice.panel_content'),
|
||||
'panel_subtitle' => __('cookie-notice.panel_subtitle'),
|
||||
|
|
@ -29,29 +32,82 @@ $strings = (object)[
|
|||
'navigation_title' => __('cookie-notice.navigation_title'),
|
||||
];
|
||||
|
||||
|
||||
$cookieInline = function ($cookieName, $text, $subtext = '') {
|
||||
return <<<SCRIPT
|
||||
(() => {
|
||||
const cookieActivate = document.createElement("span");
|
||||
cookieActivate.classList.add("cn-cookie-activate");
|
||||
cookieActivate.dataset.cookieName = '{$cookieName}';
|
||||
|
||||
const childSpan = document.createElement("span");
|
||||
const childSpanSpan = document.createElement("span");
|
||||
const childSpanSmall = document.createElement("span");
|
||||
childSpanSpan.textContent = '{$text}';
|
||||
childSpanSmall.textContent = '{$subtext}';
|
||||
childSpan.appendChild(childSpanSpan);
|
||||
childSpan.appendChild(childSpanSmall);
|
||||
|
||||
const childBtn = document.createElement("button");
|
||||
childBtn.classList.add('btn','btn-red');
|
||||
childBtn.textContent = 'Autoriser';
|
||||
|
||||
cookieActivate.appendChild(childSpan);
|
||||
cookieActivate.appendChild(childBtn);
|
||||
return cookieActivate;
|
||||
})
|
||||
SCRIPT;
|
||||
};
|
||||
|
||||
$cookies = [];
|
||||
|
||||
// youtube
|
||||
// YOUTUBE
|
||||
$cookies['youtube'] = [
|
||||
'name' => __('cookie-notice.custom.youtube.name'),
|
||||
'description' => __('cookie-notice.custom.youtube.description'),
|
||||
'labelLink' => __('cookie-notice.custom.youtube.labelLink'),
|
||||
'name' => 'VIDEOS - Youtube',
|
||||
'description' => __('Les cookies déposés via les services de partage de vidéo ont pour finalité de permettre à l’utilisateur de visionner directement sur le site le contenu multimédia.'),
|
||||
'link' => 'https://policies.google.com/technologies/cookies?hl=fr&utm_source=ucb',
|
||||
'labelLink' => __('En savoir +'),
|
||||
'cookies' => ['NID', 'VISITOR_INFO1_LIVE', 'YSC']
|
||||
];
|
||||
|
||||
$cookies['youtube']['script'] = <<<SCRIPT
|
||||
function () {
|
||||
window.__CN_VIDEO = window.__CN_VIDEO ?? {};
|
||||
window.__CN_VIDEO.youtube = true;
|
||||
let youtubeVids = document.getElementsByClassName('cn-youtube');
|
||||
for (let item of youtubeVids) {
|
||||
let id = item.dataset.id;
|
||||
let e = document.createElement('iframe');
|
||||
e.src = "https://www.youtube.com/embed/" + id;
|
||||
e.width = "640";
|
||||
e.height = "360";
|
||||
e.frameBorder = "0";
|
||||
e.allow = "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture";
|
||||
e.allowFullscreen = true;
|
||||
item.innerHTML = "";
|
||||
item.appendChild(e);
|
||||
}
|
||||
}
|
||||
SCRIPT;
|
||||
$cookies['youtube']['fallback'] = <<<FALLBACK
|
||||
function () {
|
||||
window.__CN_VIDEO = window.__CN_VIDEO ?? {};
|
||||
window.__CN_VIDEO.youtube = false;
|
||||
let youtubeVids = document.getElementsByClassName('cn-youtube');
|
||||
for (let item of youtubeVids) {
|
||||
let a = document.createElement('a');
|
||||
a.innerText = 'Autoriser';
|
||||
a.classList.add('cn-cookie-link');
|
||||
a.setAttribute('role', 'button');
|
||||
a.onclick = function () {
|
||||
WebCookieNotice.openCookieModalToCookiePage();
|
||||
};
|
||||
let e = document.createElement('p');
|
||||
e.innerHTML = 'Youtube est désactivé. ';
|
||||
item.innerHTML = "";
|
||||
e.appendChild(a);
|
||||
item.appendChild(e);
|
||||
}
|
||||
}
|
||||
FALLBACK;
|
||||
|
||||
|
||||
// RECAPTCHA
|
||||
$cookies['recaptcha'] = [
|
||||
'name' => __('cookie-notice.custom.recaptcha.title'),
|
||||
|
|
@ -66,8 +122,28 @@ function () {
|
|||
if (window.__CN_Recaptcha) {
|
||||
window.__CN_Recaptcha();
|
||||
}
|
||||
[...document.getElementsByClassName('cn-cookie-activate')].forEach(function(el) {
|
||||
if (el.dataset.cookieName === 'recaptcha') {
|
||||
el.classList.add('d-none');
|
||||
document.getElementById('listen-form').inert = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
SCRIPT;
|
||||
$cookies['recaptcha']['fallback'] = <<<FALLBACK
|
||||
function () {
|
||||
if (window.__CN_Recaptcha_Reset) {
|
||||
window.__CN_Recaptcha_Reset();
|
||||
}
|
||||
[...document.getElementsByClassName('cn-cookie-activate')].forEach(function(el) {
|
||||
if (el.dataset.cookieName === 'recaptcha') {
|
||||
el.classList.remove('d-none');
|
||||
document.getElementById('listen-form').inert = true;
|
||||
}
|
||||
});
|
||||
}
|
||||
FALLBACK;
|
||||
|
||||
|
||||
// MATOMO
|
||||
$cookies['matomo'] = [
|
||||
|
|
|
|||
|
|
@ -1,19 +1,17 @@
|
|||
<div id="cn-wrapper" title="{{ $strings->modal_title }}" role="alertdialog" tabindex="-1">
|
||||
<button id="cn-cookie-btn" title="{{ $strings->button_customize_cookies }}">
|
||||
{{-- COOKIE SVG --}}
|
||||
<svg role="img" viewBox="0 0 28 28" xmlns="http://www.w3.org/2000/svg">
|
||||
<svg viewBox="0 0 28 28" xmlns="http://www.w3.org/2000/svg">
|
||||
<title>{{ $strings->picture_cookie_title }}</title>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd"
|
||||
d="M14.0001 2.93383C14.0001 4.16622 14.6159 5.25477 15.5567 5.90849C15.3526 6.46423 15.2412 7.06473 15.2412 7.69126C15.2412 10.5472 17.5564 12.8624 20.4123 12.8624C21.0807 12.8624 21.7195 12.7356 22.3059 12.5047C22.9456 13.527 24.0817 14.2069 25.3766 14.2069C26.1872 14.2069 26.9357 13.9404 27.539 13.4903C27.5453 13.6594 27.5484 13.8294 27.5484 14C27.5484 21.4826 21.4826 27.5484 14 27.5484C6.51748 27.5484 0.45166 21.4826 0.45166 14C0.45166 6.51748 6.51748 0.45166 14 0.45166C14.3209 0.45166 14.6391 0.462811 14.9543 0.484747C14.3618 1.12929 14.0001 1.98931 14.0001 2.93383ZM21.2176 2.53212C21.2195 2.54914 21.2213 2.56619 21.2229 2.58328C21.2569 2.58864 21.2909 2.59433 21.3247 2.60035C21.2891 2.57745 21.2534 2.5547 21.2176 2.53212ZM25.5171 6.86104C25.523 6.89745 25.5285 6.93399 25.5336 6.97066C25.5512 6.97141 25.5687 6.97228 25.5861 6.97328C25.5633 6.93574 25.5403 6.89833 25.5171 6.86104ZM12.5247 2.09283C12.4748 2.38291 12.4487 2.68118 12.4487 2.98553C12.4487 4.33316 12.9591 5.56158 13.7972 6.48802C13.7266 6.87842 13.6898 7.28054 13.6898 7.69126C13.6898 11.404 16.6996 14.4137 20.4123 14.4137C20.8725 14.4137 21.3219 14.3675 21.7562 14.2794C22.689 15.1941 23.9669 15.7582 25.3766 15.7582C25.5439 15.7582 25.7094 15.7503 25.8726 15.7347C25.0321 21.5385 20.0368 25.9971 14.0001 25.9971C7.37431 25.9971 2.00305 20.6258 2.00305 14.0001C2.00305 7.87378 6.59498 2.82 12.5247 2.09283Z"
|
||||
fill="#0e2b45" />
|
||||
<circle cx="7.58784" cy="12.8624" r="1.96503" fill="#0e2b45" />
|
||||
<circle cx="8.82887" cy="19.2745" r="1.3445" fill="#0e2b45" />
|
||||
<circle cx="13.6897" cy="14.5171" r="1.03423" fill="#0e2b45" />
|
||||
<circle cx="11.4144" cy="7.48439" r="0.930805" fill="#0e2b45" />
|
||||
<circle cx="17.5164" cy="20.3089" r="1.86161" fill="#0e2b45" />
|
||||
<circle cx="21.3432" cy="6.7604" r="0.930805" fill="#0e2b45" />
|
||||
<circle cx="22.1706" cy="1.89958" r="1.44792" fill="#0e2b45" />
|
||||
<circle cx="26.8245" cy="8.31185" r="0.72396" fill="#0e2b45" />
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M14.0001 2.93383C14.0001 4.16622 14.6159 5.25477 15.5567 5.90849C15.3526 6.46423 15.2412 7.06473 15.2412 7.69126C15.2412 10.5472 17.5564 12.8624 20.4123 12.8624C21.0807 12.8624 21.7195 12.7356 22.3059 12.5047C22.9456 13.527 24.0817 14.2069 25.3766 14.2069C26.1872 14.2069 26.9357 13.9404 27.539 13.4903C27.5453 13.6594 27.5484 13.8294 27.5484 14C27.5484 21.4826 21.4826 27.5484 14 27.5484C6.51748 27.5484 0.45166 21.4826 0.45166 14C0.45166 6.51748 6.51748 0.45166 14 0.45166C14.3209 0.45166 14.6391 0.462811 14.9543 0.484747C14.3618 1.12929 14.0001 1.98931 14.0001 2.93383ZM21.2176 2.53212C21.2195 2.54914 21.2213 2.56619 21.2229 2.58328C21.2569 2.58864 21.2909 2.59433 21.3247 2.60035C21.2891 2.57745 21.2534 2.5547 21.2176 2.53212ZM25.5171 6.86104C25.523 6.89745 25.5285 6.93399 25.5336 6.97066C25.5512 6.97141 25.5687 6.97228 25.5861 6.97328C25.5633 6.93574 25.5403 6.89833 25.5171 6.86104ZM12.5247 2.09283C12.4748 2.38291 12.4487 2.68118 12.4487 2.98553C12.4487 4.33316 12.9591 5.56158 13.7972 6.48802C13.7266 6.87842 13.6898 7.28054 13.6898 7.69126C13.6898 11.404 16.6996 14.4137 20.4123 14.4137C20.8725 14.4137 21.3219 14.3675 21.7562 14.2794C22.689 15.1941 23.9669 15.7582 25.3766 15.7582C25.5439 15.7582 25.7094 15.7503 25.8726 15.7347C25.0321 21.5385 20.0368 25.9971 14.0001 25.9971C7.37431 25.9971 2.00305 20.6258 2.00305 14.0001C2.00305 7.87378 6.59498 2.82 12.5247 2.09283Z" fill="#FF4E4E" />
|
||||
<circle cx="7.58784" cy="12.8624" r="1.96503" fill="#FF4E4E" />
|
||||
<circle cx="8.82887" cy="19.2745" r="1.3445" fill="#FF4E4E" />
|
||||
<circle cx="13.6897" cy="14.5171" r="1.03423" fill="#FF4E4E" />
|
||||
<circle cx="11.4144" cy="7.48439" r="0.930805" fill="#FF4E4E" />
|
||||
<circle cx="17.5164" cy="20.3089" r="1.86161" fill="#FF4E4E" />
|
||||
<circle cx="21.3432" cy="6.7604" r="0.930805" fill="#FF4E4E" />
|
||||
<circle cx="22.1706" cy="1.89958" r="1.44792" fill="#FF4E4E" />
|
||||
<circle cx="26.8245" cy="8.31185" r="0.72396" fill="#FF4E4E" />
|
||||
</svg>
|
||||
</button>
|
||||
{{-- BANNER --}}
|
||||
|
|
@ -33,29 +31,21 @@
|
|||
<span>{!! nl2br(e($strings->banner_title)) !!}</span>
|
||||
</div>
|
||||
<div class="cn-banner-para-p">
|
||||
<p>{!! nl2br(e($strings->banner_text)) !!}</p>
|
||||
<p>{!! clean($strings->banner_text) !!}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{-- 2ND PAGE CUSTOMIZE PANEL --}}
|
||||
<div class="cn-modal-container d-none">
|
||||
<p class="cn-modal-title" aria-level="h2">{{ $strings->panel_title }}</p>
|
||||
<p class="cn-modal-subtitle">{!! nl2br(e($strings->panel_subtitle)) !!}</p>
|
||||
<p class="cn-modal-description">{!! nl2br(e($strings->panel_details)) !!}</p>
|
||||
<div class="cn-modal-wrapper">
|
||||
{{-- COOKIES LIST --}}
|
||||
<ul id="cn-modal-list"></ul>
|
||||
</div>
|
||||
{{-- COOKIES LIST --}}
|
||||
<ul id="cn-modal-list"></ul>
|
||||
</div>
|
||||
</div>
|
||||
{{-- NAV BAR --}}
|
||||
<div class="cn-nav" title="{{ $strings->navigation_title }}" role="navigation">
|
||||
<button class="cn-banner-btn cn-deny" id="cn-deny-banner"
|
||||
title="{{ $strings->button_forbid_all_title }}">{{ $strings->button_forbid_all }}</button>
|
||||
<button class="cn-banner-btn cn-accept" id="cn-accept-banner"
|
||||
title="{{ $strings->button_allow_all_title }}">{{ $strings->button_allow_all }}</button>
|
||||
<button class="cn-banner-btn cn-custom" id="cn-settings-banner" data-open-modal="{{ $strings->button_back }}"
|
||||
data-close-modal="{{ $strings->button_customize }}">{{ $strings->button_customize }}</button>
|
||||
<button class="cn-banner-btn cn-deny" id="cn-deny-banner" title="{{ $strings->button_forbid_all_title }}">{{ $strings->button_forbid_all }}</button>
|
||||
<button class="cn-banner-btn cn-accept" id="cn-accept-banner" title="{{ $strings->button_allow_all_title }}">{{ $strings->button_allow_all }}</button>
|
||||
<button class="cn-banner-btn cn-custom" id="cn-settings-banner" data-open-modal="{{ $strings->button_validate_and_close }}" data-close-modal="{{ $strings->button_customize }}">{{ $strings->button_customize }}</button>
|
||||
</div>
|
||||
|
||||
{{-- COOKIE LIST LI TEMPLATE --}}
|
||||
|
|
@ -67,14 +57,11 @@
|
|||
<a class="cn-cookie-link" title="{{ $strings->button_title_open_new_tab }}" target="blank">#link</a>
|
||||
</div>
|
||||
<div class="cn-cookie-buttons">
|
||||
<div class="deny">
|
||||
<input id="" name="" data-name="" data-status="false" type="radio">
|
||||
<label for="" role="button" tabindex="0">{{ $strings->button_forbid }}</label>
|
||||
</div>
|
||||
<div class="accept">
|
||||
<input id="" name="" data-name="" data-status="true" type="radio">
|
||||
<label for="" role="button" tabindex="0">{{ $strings->button_allow }}</label>
|
||||
</div>
|
||||
<label class="cn-switch" role="checkbox" aria-label="{{ $strings->button_toggle_cookie }}" title="{{ $strings->button_toggle_cookie }}" aria-checked="undefined"
|
||||
tabindex="0">
|
||||
<input type="checkbox" tabindex="-1" />
|
||||
<span></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue