forge-joniko/ldc-web-cookie-notice
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

remove btn/event more details on first page banner

Browse source
This commit is contained in:
Alexis Gousseau 2023-11-28 10:23:42 +01:00
parent 6ba0ba9d86
commit 2fa2063957
17 changed files with 42 additions and 422 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

33
dist/browser/cookie-cn.css vendored
View file

@ -58,7 +58,7 @@
/* Accept/Deny btn settings */
/* Cookies list settings */
#cn-wrapper .cn-nav #cn-settings-banner, #cn-wrapper .cn-nav #cn-accept-banner, #cn-wrapper .cn-nav #cn-deny-banner, #cn-wrapper .cn-content .cn-modal-container .accept label,
#cn-wrapper .cn-content .cn-modal-container .deny label, #cn-wrapper .cn-content .cn-banner-content .cn-banner-btn-details-p {
#cn-wrapper .cn-content .cn-modal-container .deny label {
display: flex;
height: 3rem;
flex-direction: column;
@ -71,13 +71,13 @@
font-size: 1rem;
}
#cn-wrapper .cn-nav #cn-settings-banner:hover, #cn-wrapper .cn-nav #cn-accept-banner:hover, #cn-wrapper .cn-nav #cn-deny-banner:hover, #cn-wrapper .cn-content .cn-modal-container .accept label:hover,
#cn-wrapper .cn-content .cn-modal-container .deny label:hover, #cn-wrapper .cn-content .cn-banner-content .cn-banner-btn-details-p:hover, #cn-wrapper .cn-nav #cn-settings-banner:focus, #cn-wrapper .cn-nav #cn-accept-banner:focus, #cn-wrapper .cn-nav #cn-deny-banner:focus, #cn-wrapper .cn-content .cn-modal-container .accept label:focus,
#cn-wrapper .cn-content .cn-modal-container .deny label:focus, #cn-wrapper .cn-content .cn-banner-content .cn-banner-btn-details-p:focus {
#cn-wrapper .cn-content .cn-modal-container .deny label:hover, #cn-wrapper .cn-nav #cn-settings-banner:focus, #cn-wrapper .cn-nav #cn-accept-banner:focus, #cn-wrapper .cn-nav #cn-deny-banner:focus, #cn-wrapper .cn-content .cn-modal-container .accept label:focus,
#cn-wrapper .cn-content .cn-modal-container .deny label:focus {
background-color: #a0a0a0;
color: #000;
}
#cn-wrapper .cn-nav #cn-settings-banner:focus, #cn-wrapper .cn-nav #cn-accept-banner:focus, #cn-wrapper .cn-nav #cn-deny-banner:focus, #cn-wrapper .cn-content .cn-modal-container .accept label:focus,
#cn-wrapper .cn-content .cn-modal-container .deny label:focus, #cn-wrapper .cn-content .cn-banner-content .cn-banner-btn-details-p:focus {
#cn-wrapper .cn-content .cn-modal-container .deny label:focus {
outline-color: #000;
}
@ -253,31 +253,6 @@
margin: 6px 0;
text-align: justify;
}
#cn-wrapper .cn-content .cn-banner-content .cn-banner-details {
display: flex;
overflow: hidden;
height: 0;
flex-direction: row;
align-items: flex-start;
justify-content: center;
text-align: justify;
transition: 0.3s;
}
#cn-wrapper .cn-content .cn-banner-content .cn-banner-details p {
padding-bottom: 1rem;
}
#cn-wrapper .cn-content .cn-banner-content .cn-banner-btn-details {
width: 100%;
}
#cn-wrapper .cn-content .cn-banner-content .cn-banner-btn-details-p {
display: inline-block;
width: 100%;
padding: 1rem 0;
margin: 0 auto;
cursor: pointer;
font-size: 14px;
text-align: center;
}
#cn-wrapper .cn-content .cn-modal-container .cn-modal-title {
color: #dc9c52;
font-family: "Satisfy", sans-serif;

2
dist/browser/cookie-cn.js vendored
View file

File diff suppressed because one or more lines are too long

10
dist/browser/typings/ts/index.d.ts vendored
View file

@ -15,13 +15,7 @@ export default class CookieNotice {
modalContainer: HTMLDivElement;
cookieShowModalBtn: HTMLButtonElement;
cookieCloseModalBtn: HTMLButtonElement;
bannerDetailsCollapseBtn: HTMLButtonElement;
bannerParaP: HTMLDivElement;
detailsTextOpen: HTMLParagraphElement;
detailsTextClose: HTMLParagraphElement;
bannerContent: HTMLDivElement;
bannerDetails: HTMLDivElement;
bannerDetailsContainer: HTMLDivElement;
acceptAllBtn: HTMLButtonElement;
denyAllBtn: HTMLButtonElement;
customizeBtn: HTMLButtonElement;
@ -184,10 +178,6 @@ export default class CookieNotice {
* Set the cookies list in the modal
*/
setupCookieModalList(): void;
/**
* Toggle show hide banner details
*/
toggleBannerDetails(): void;
/**
* Toggle Cookie modal pages
*/

66
dist/esm/ts/index.js vendored
View file

@ -25,7 +25,7 @@ export default class CookieNotice {
document.body.append(modalBg);
this.modalBg = modalBg;
// * Setup Dom Elements
const cookieContainer = document.querySelector("div#cn-wrapper"), cookieShowModalBtn = document.querySelector("button#cn-cookie-btn"), cookieCloseModalBtn = document.querySelector("button#cn-close-modal"), cookieLinkShowCustomizeModalPageList = document.querySelectorAll(".cn-cookie-link"), bannerContainer = document.querySelector("div#cn-banner"), bannerContent = document.querySelector("div.cn-banner-content"), bannerDetails = document.querySelector("div.cn-banner-details"), bannerParaP = document.querySelector("div.cn-banner-para-p"), detailsTextOpen = document.querySelector("p.cn-banner-para-p-open"), detailsTextClose = document.querySelector("p.cn-banner-para-p-close"), bannerDetailsCollapseBtn = document.querySelector("button.cn-banner-btn-details-p"), bannerDetailsContainer = document.querySelector("div.cn-banner-btn-details"), modalContainer = document.querySelector("div.cn-modal-container"), acceptAllBtn = document.querySelector("button#cn-accept-banner"), denyAllBtn = document.querySelector("button#cn-deny-banner"), customizeBtn = document.querySelector("button#cn-settings-banner"), cookiesUnorderedList = document.querySelector("ul#cn-modal-list"), modalWrapper = document.querySelector("div.cn-modal-wrapper"), template = document.querySelector("div#cn-li-template");
const cookieContainer = document.querySelector("div#cn-wrapper"), cookieShowModalBtn = document.querySelector("button#cn-cookie-btn"), cookieCloseModalBtn = document.querySelector("button#cn-close-modal"), cookieLinkShowCustomizeModalPageList = document.querySelectorAll(".cn-cookie-link"), bannerContainer = document.querySelector("div#cn-banner"), bannerContent = document.querySelector("div.cn-banner-content"), modalContainer = document.querySelector("div.cn-modal-container"), acceptAllBtn = document.querySelector("button#cn-accept-banner"), denyAllBtn = document.querySelector("button#cn-deny-banner"), customizeBtn = document.querySelector("button#cn-settings-banner"), cookiesUnorderedList = document.querySelector("ul#cn-modal-list"), modalWrapper = document.querySelector("div.cn-modal-wrapper"), template = document.querySelector("div#cn-li-template");
if (!cookieContainer) {
throw new Error("Cannot find div#cn-wrapper");
}
@ -41,24 +41,6 @@ export default class CookieNotice {
if (!bannerContent) {
throw new Error("Cannot find 'div.cn-banner-content' element");
}
if (!bannerDetails) {
throw new Error("Cannot find 'div.cn-banner-details' element");
}
if (!bannerParaP) {
throw new Error("Cannot find 'div.cn-banner-para-p' element");
}
if (!detailsTextOpen) {
throw new Error("Cannot find 'p.cn-banner-para-p-open' element");
}
if (!detailsTextClose) {
throw new Error("Cannot find 'p.cn-banner-para-p-close' element");
}
if (!bannerDetailsCollapseBtn) {
throw new Error("Cannot find 'button.cn-banner-btn-details-p' element");
}
if (!bannerDetailsContainer) {
throw new Error("Cannot find '.cn-banner-btn-details' element");
}
if (!modalContainer) {
throw new Error("Cannot find 'div.cn-modal-container' element");
}
@ -85,16 +67,10 @@ export default class CookieNotice {
this.cookieLinkShowCustomizeModalList =
cookieLinkShowCustomizeModalPageList;
this.cookieContainer = cookieContainer;
this.bannerDetailsContainer = bannerDetailsContainer;
this.bannerContainer = bannerContainer;
this.bannerContent = bannerContent;
this.cookiesUnorderedList = cookiesUnorderedList;
this.modalWrapper = modalWrapper;
this.bannerParaP = bannerParaP;
this.detailsTextOpen = detailsTextOpen;
this.detailsTextClose = detailsTextClose;
this.bannerDetails = bannerDetails;
this.bannerDetailsCollapseBtn = bannerDetailsCollapseBtn;
this.modalContainer = modalContainer;
this.acceptAllBtn = acceptAllBtn;
this.denyAllBtn = denyAllBtn;
@ -110,7 +86,6 @@ export default class CookieNotice {
this.addEventPrevent(this.acceptAllBtn, "click", this.acceptAllCookies);
this.addEventPrevent(this.denyAllBtn, "click", this.denyAllCookies);
this.addEventPrevent(this.customizeBtn, "click", this.toggleCookieModalPages);
this.addEventPrevent(this.bannerDetailsCollapseBtn, "click", this.toggleBannerDetails);
this.addEventPrevent(this.cookieShowModalBtn, "click", this.toggleCookieModal);
this.cookieLinkShowCustomizeModalList.forEach((cookieLink) => {
this.addEventPrevent(cookieLink, "click", this.openCookieModalToCookiePage);
@ -431,8 +406,6 @@ export default class CookieNotice {
document.body.classList.add("cn-open");
this.resetCookieModal();
this.bannerContent.classList.add("d-none");
this.bannerDetails.classList.add("d-none");
this.bannerDetailsContainer.classList.add("d-none");
this.modalContainer.classList.remove("d-none");
// Scroll to the top of the cookies list
this.modalWrapper.scrollTop = 0;
@ -495,8 +468,6 @@ export default class CookieNotice {
*/
resetCookieModal() {
this.bannerContent.classList.remove("d-none");
this.bannerDetails.classList.remove("d-none");
this.bannerDetailsContainer.classList.remove("d-none");
this.modalContainer.classList.add("d-none");
if (!this.customizeBtn.dataset.openModal) {
throw new Error("Cannot find attribut data-open-modal");
@ -573,46 +544,11 @@ export default class CookieNotice {
});
});
}
/**
* Toggle show hide banner details
*/
toggleBannerDetails() {
this.bannerDetails.classList.toggle("cn-details-open");
if (!this.bannerDetailsCollapseBtn.dataset.open ||
!this.bannerDetailsCollapseBtn.dataset.close) {
throw new Error("Cannot find attribute data-open or data-close");
}
if (this.bannerDetailsAreExpanded) {
this.bannerDetailsCollapseBtn.innerHTML =
this.bannerDetailsCollapseBtn.dataset.close;
this.bannerDetailsCollapseBtn.title =
this.bannerDetailsCollapseBtn.dataset.close;
this.bannerDetailsCollapseBtn.ariaPressed = "false";
this.detailsTextOpen.classList.add("d-none");
this.detailsTextClose.classList.remove("d-none");
this.bannerDetails.style.height = "0px";
this.bannerDetailsAreExpanded = false;
}
else {
this.bannerDetailsCollapseBtn.innerHTML =
this.bannerDetailsCollapseBtn.dataset.open;
this.bannerDetailsCollapseBtn.title =
this.bannerDetailsCollapseBtn.dataset.open;
this.bannerDetailsCollapseBtn.ariaPressed = "true";
this.detailsTextOpen.classList.remove("d-none");
this.detailsTextClose.classList.add("d-none");
this.bannerDetails.style.height =
this.bannerDetails.children[0].clientHeight + "px";
this.bannerDetailsAreExpanded = true;
}
}
/**
* Toggle Cookie modal pages
*/
toggleCookieModalPages() {
this.bannerContent.classList.toggle("d-none");
this.bannerDetails.classList.toggle("d-none");
this.bannerDetailsContainer.classList.toggle("d-none");
this.modalContainer.classList.toggle("d-none");
this.setTabIndex();
this.setupCookieModalList();

10
dist/typings/ts/index.d.ts vendored
View file

@ -15,13 +15,7 @@ export default class CookieNotice {
modalContainer: HTMLDivElement;
cookieShowModalBtn: HTMLButtonElement;
cookieCloseModalBtn: HTMLButtonElement;
bannerDetailsCollapseBtn: HTMLButtonElement;
bannerParaP: HTMLDivElement;
detailsTextOpen: HTMLParagraphElement;
detailsTextClose: HTMLParagraphElement;
bannerContent: HTMLDivElement;
bannerDetails: HTMLDivElement;
bannerDetailsContainer: HTMLDivElement;
acceptAllBtn: HTMLButtonElement;
denyAllBtn: HTMLButtonElement;
customizeBtn: HTMLButtonElement;
@ -184,10 +178,6 @@ export default class CookieNotice {
* Set the cookies list in the modal
*/
setupCookieModalList(): void;
/**
* Toggle show hide banner details
*/
toggleBannerDetails(): void;
/**
* Toggle Cookie modal pages
*/

33
dist/umd/css/standard.css vendored
View file

@ -58,7 +58,7 @@
/* Accept/Deny btn settings */
/* Cookies list settings */
#cn-wrapper .cn-nav #cn-settings-banner, #cn-wrapper .cn-nav #cn-accept-banner, #cn-wrapper .cn-nav #cn-deny-banner, #cn-wrapper .cn-content .cn-modal-container .accept label,
#cn-wrapper .cn-content .cn-modal-container .deny label, #cn-wrapper .cn-content .cn-banner-content .cn-banner-btn-details-p {
#cn-wrapper .cn-content .cn-modal-container .deny label {
display: flex;
height: 3rem;
flex-direction: column;
@ -71,13 +71,13 @@
font-size: 1rem;
}
#cn-wrapper .cn-nav #cn-settings-banner:hover, #cn-wrapper .cn-nav #cn-accept-banner:hover, #cn-wrapper .cn-nav #cn-deny-banner:hover, #cn-wrapper .cn-content .cn-modal-container .accept label:hover,
#cn-wrapper .cn-content .cn-modal-container .deny label:hover, #cn-wrapper .cn-content .cn-banner-content .cn-banner-btn-details-p:hover, #cn-wrapper .cn-nav #cn-settings-banner:focus, #cn-wrapper .cn-nav #cn-accept-banner:focus, #cn-wrapper .cn-nav #cn-deny-banner:focus, #cn-wrapper .cn-content .cn-modal-container .accept label:focus,
#cn-wrapper .cn-content .cn-modal-container .deny label:focus, #cn-wrapper .cn-content .cn-banner-content .cn-banner-btn-details-p:focus {
#cn-wrapper .cn-content .cn-modal-container .deny label:hover, #cn-wrapper .cn-nav #cn-settings-banner:focus, #cn-wrapper .cn-nav #cn-accept-banner:focus, #cn-wrapper .cn-nav #cn-deny-banner:focus, #cn-wrapper .cn-content .cn-modal-container .accept label:focus,
#cn-wrapper .cn-content .cn-modal-container .deny label:focus {
background-color: #a0a0a0;
color: #000;
}
#cn-wrapper .cn-nav #cn-settings-banner:focus, #cn-wrapper .cn-nav #cn-accept-banner:focus, #cn-wrapper .cn-nav #cn-deny-banner:focus, #cn-wrapper .cn-content .cn-modal-container .accept label:focus,
#cn-wrapper .cn-content .cn-modal-container .deny label:focus, #cn-wrapper .cn-content .cn-banner-content .cn-banner-btn-details-p:focus {
#cn-wrapper .cn-content .cn-modal-container .deny label:focus {
outline-color: #000;
}
@ -253,31 +253,6 @@
margin: 6px 0;
text-align: justify;
}
#cn-wrapper .cn-content .cn-banner-content .cn-banner-details {
display: flex;
overflow: hidden;
height: 0;
flex-direction: row;
align-items: flex-start;
justify-content: center;
text-align: justify;
transition: 0.3s;
}
#cn-wrapper .cn-content .cn-banner-content .cn-banner-details p {
padding-bottom: 1rem;
}
#cn-wrapper .cn-content .cn-banner-content .cn-banner-btn-details {
width: 100%;
}
#cn-wrapper .cn-content .cn-banner-content .cn-banner-btn-details-p {
display: inline-block;
width: 100%;
padding: 1rem 0;
margin: 0 auto;
cursor: pointer;
font-size: 14px;
text-align: center;
}
#cn-wrapper .cn-content .cn-modal-container .cn-modal-title {
color: #dc9c52;
font-family: "Satisfy", sans-serif;

66
dist/umd/main.js vendored
View file

@ -80,12 +80,6 @@ var CookieNotice = /*#__PURE__*/function () {
cookieLinkShowCustomizeModalPageList = document.querySelectorAll(".cn-cookie-link"),
bannerContainer = document.querySelector("div#cn-banner"),
bannerContent = document.querySelector("div.cn-banner-content"),
bannerDetails = document.querySelector("div.cn-banner-details"),
bannerParaP = document.querySelector("div.cn-banner-para-p"),
detailsTextOpen = document.querySelector("p.cn-banner-para-p-open"),
detailsTextClose = document.querySelector("p.cn-banner-para-p-close"),
bannerDetailsCollapseBtn = document.querySelector("button.cn-banner-btn-details-p"),
bannerDetailsContainer = document.querySelector("div.cn-banner-btn-details"),
modalContainer = document.querySelector("div.cn-modal-container"),
acceptAllBtn = document.querySelector("button#cn-accept-banner"),
denyAllBtn = document.querySelector("button#cn-deny-banner"),
@ -108,24 +102,6 @@ var CookieNotice = /*#__PURE__*/function () {
if (!bannerContent) {
throw new Error("Cannot find 'div.cn-banner-content' element");
}
if (!bannerDetails) {
throw new Error("Cannot find 'div.cn-banner-details' element");
}
if (!bannerParaP) {
throw new Error("Cannot find 'div.cn-banner-para-p' element");
}
if (!detailsTextOpen) {
throw new Error("Cannot find 'p.cn-banner-para-p-open' element");
}
if (!detailsTextClose) {
throw new Error("Cannot find 'p.cn-banner-para-p-close' element");
}
if (!bannerDetailsCollapseBtn) {
throw new Error("Cannot find 'button.cn-banner-btn-details-p' element");
}
if (!bannerDetailsContainer) {
throw new Error("Cannot find '.cn-banner-btn-details' element");
}
if (!modalContainer) {
throw new Error("Cannot find 'div.cn-modal-container' element");
}
@ -151,16 +127,10 @@ var CookieNotice = /*#__PURE__*/function () {
this.cookieCloseModalBtn = cookieCloseModalBtn;
this.cookieLinkShowCustomizeModalList = cookieLinkShowCustomizeModalPageList;
this.cookieContainer = cookieContainer;
this.bannerDetailsContainer = bannerDetailsContainer;
this.bannerContainer = bannerContainer;
this.bannerContent = bannerContent;
this.cookiesUnorderedList = cookiesUnorderedList;
this.modalWrapper = modalWrapper;
this.bannerParaP = bannerParaP;
this.detailsTextOpen = detailsTextOpen;
this.detailsTextClose = detailsTextClose;
this.bannerDetails = bannerDetails;
this.bannerDetailsCollapseBtn = bannerDetailsCollapseBtn;
this.modalContainer = modalContainer;
this.acceptAllBtn = acceptAllBtn;
this.denyAllBtn = denyAllBtn;
@ -177,7 +147,6 @@ var CookieNotice = /*#__PURE__*/function () {
this.addEventPrevent(this.acceptAllBtn, "click", this.acceptAllCookies);
this.addEventPrevent(this.denyAllBtn, "click", this.denyAllCookies);
this.addEventPrevent(this.customizeBtn, "click", this.toggleCookieModalPages);
this.addEventPrevent(this.bannerDetailsCollapseBtn, "click", this.toggleBannerDetails);
this.addEventPrevent(this.cookieShowModalBtn, "click", this.toggleCookieModal);
this.cookieLinkShowCustomizeModalList.forEach(function (cookieLink) {
_this.addEventPrevent(cookieLink, "click", _this.openCookieModalToCookiePage);
@ -633,8 +602,6 @@ var CookieNotice = /*#__PURE__*/function () {
document.body.classList.add("cn-open");
this.resetCookieModal();
this.bannerContent.classList.add("d-none");
this.bannerDetails.classList.add("d-none");
this.bannerDetailsContainer.classList.add("d-none");
this.modalContainer.classList.remove("d-none");
// Scroll to the top of the cookies list
this.modalWrapper.scrollTop = 0;
@ -708,8 +675,6 @@ var CookieNotice = /*#__PURE__*/function () {
key: "resetCookieModal",
value: function resetCookieModal() {
this.bannerContent.classList.remove("d-none");
this.bannerDetails.classList.remove("d-none");
this.bannerDetailsContainer.classList.remove("d-none");
this.modalContainer.classList.add("d-none");
if (!this.customizeBtn.dataset.openModal) {
throw new Error("Cannot find attribut data-open-modal");
@ -798,35 +763,6 @@ var CookieNotice = /*#__PURE__*/function () {
});
}
/**
* Toggle show hide banner details
*/
}, {
key: "toggleBannerDetails",
value: function toggleBannerDetails() {
this.bannerDetails.classList.toggle("cn-details-open");
if (!this.bannerDetailsCollapseBtn.dataset.open || !this.bannerDetailsCollapseBtn.dataset.close) {
throw new Error("Cannot find attribute data-open or data-close");
}
if (this.bannerDetailsAreExpanded) {
this.bannerDetailsCollapseBtn.innerHTML = this.bannerDetailsCollapseBtn.dataset.close;
this.bannerDetailsCollapseBtn.title = this.bannerDetailsCollapseBtn.dataset.close;
this.bannerDetailsCollapseBtn.ariaPressed = "false";
this.detailsTextOpen.classList.add("d-none");
this.detailsTextClose.classList.remove("d-none");
this.bannerDetails.style.height = "0px";
this.bannerDetailsAreExpanded = false;
} else {
this.bannerDetailsCollapseBtn.innerHTML = this.bannerDetailsCollapseBtn.dataset.open;
this.bannerDetailsCollapseBtn.title = this.bannerDetailsCollapseBtn.dataset.open;
this.bannerDetailsCollapseBtn.ariaPressed = "true";
this.detailsTextOpen.classList.remove("d-none");
this.detailsTextClose.classList.add("d-none");
this.bannerDetails.style.height = this.bannerDetails.children[0].clientHeight + "px";
this.bannerDetailsAreExpanded = true;
}
}
/**
* Toggle Cookie modal pages
*/
@ -834,8 +770,6 @@ var CookieNotice = /*#__PURE__*/function () {
key: "toggleCookieModalPages",
value: function toggleCookieModalPages() {
this.bannerContent.classList.toggle("d-none");
this.bannerDetails.classList.toggle("d-none");
this.bannerDetailsContainer.classList.toggle("d-none");
this.modalContainer.classList.toggle("d-none");
this.setTabIndex();
this.setupCookieModalList();

2
dist/umd/main.js.map vendored
View file

File diff suppressed because one or more lines are too long

9
examples/laravel/cn-cookies.blade.php
View file

@ -5,7 +5,6 @@ $site_name = Str::ucfirst(config('app.name'));
$logo_picture_url = asset('picture string path');
$logo_title_text = __('Logo du site :name', ['name' => $site_name]);
$logo_alt_text = __('Logo :name', ['name' => $site_name]);
$confidentiality_page_url = route('fo.charte');
$strings = (object)[
'modal_title' => __('Fenetre de gestion de cookies'),
@ -20,13 +19,7 @@ $strings = (object)[
'button_allow_all_title' => __('cookie-notice.button_allow_all_title'),
'button_back' => Str::upper(__('cookie-notice.button_back')),
'banner_title' => __('cookie-notice.banner_title', ['site_name' => $site_name]),
'banner_text_open' => __('cookie-notice.banner_text_open', ['site_name' => $site_name]),
'banner_text' => __('cookie-notice.banner_text'),
'banner_details' => __('cookie-notice.banner_details'),
'banner_details_link' => __('cookie-notice.banner_details_link'),
'banner_details_link_title' => __('cookie-notice.banner_details_link_title'),
'banner_more_details' => __('cookie-notice.banner_more_details'),
'banner_less_details' => __('cookie-notice.banner_less_details'),
'Panel_title' => __('cookie-notice.Panel_title'),
'Panel_content' => __('cookie-notice.Panel_content'),
'Panel_subtitle' => __('cookie-notice.Panel_subtitle'),
@ -215,7 +208,7 @@ SCRIPT;
{{-- INCLUDE TEMPLATE --}}
@include('vendor.cookie-notice-templates.standard', compact(
'site_name', 'logo_picture_url', 'logo_alt_text',
'logo_title_text', 'confidentiality_page_url', 'strings'
'logo_title_text', 'strings'
))
@push('scripts')

10
examples/laravel/lang/de/cookie-notice.php
View file

@ -14,13 +14,9 @@ return [
'button_customize' => 'Einstellungen',
'button_back' => 'Rückkehr',
'banner_title' => 'Die Website :site_name nutzt Cookies!',
'banner_text_open' => 'Diese Website speichert Cookies auf Ihrem Computer. :site_name verwendet diese Informationen zur Verbesserung und Personalisierung Ihres Surferlebnisses sowie zur Analyse und Kennzahlen über unsere Besucher sowohl auf dieser Website als auch anderswo. Sie können auf „Akzeptieren“ klicken, wenn Sie der Verwendung dieser Cookies zustimmen.',
'banner_text' => 'Wir verwenden Cookies, um das ordnungsgemäße Funktionieren unserer Website sicherzustellen und für analytische Zwecke. Indem Sie diese Website weiterhin durchsuchen oder durch Wenn Sie dieses Banner schließen, stimmen Sie der Verwendung dieser Cookies zu.',
'banner_details' => 'Wenn Sie die Verwendung von Cookies ablehnen, werden Ihre Daten nicht erfasst. während Ihres Besuchs auf dieser Website. In Ihrem Browser wird ein Cookie verwendet, um Ihre Präferenzen nicht zu verfolgen. Auf einige Funktionen kann nicht zugegriffen werden. Sie können Ihre Meinung jederzeit ändern und Ihre Einwilligung ändern, indem Sie zu dieser Website zurückkehren.',
'banner_details_link' => 'Weitere Informationen zu den von uns verwendeten Cookies finden Sie in unserer Datenschutzerklärung.',
'banner_details_link_title' => 'Öffnen Sie die Seite mit den Datenschutzbestimmungen',
'banner_more_details' => 'Mehr Erfahren...',
'banner_less_details' => 'Weniger Details...',
'banner_text' => 'Wir verwenden Cookies, um sicherzustellen, dass unsere Website ordnungsgemäß funktioniert, und zu analytischen Zwecken.
Sie können Ihre Meinung jederzeit ändern, indem Sie auf das Symbol auf jeder Seite unserer Website klicken.
Wenn Sie diese Dienste von Drittanbietern zulassen, stimmen Sie dem Ablegen und Lesen von Cookies und der Verwendung von Tracking-Technologien zu, die für das Funktionieren dieser Dienste erforderlich sind.',
'Panel_title' => 'Panel zur Verwaltung von Cookies',
'Panel_content' => 'Inhalt des Cookie-Verwaltungspanels',
'Panel_subtitle' => 'DerSchutz Ihrer Privatsphäre ist unsere Priorität',

10
examples/laravel/lang/en/cookie-notice.php
View file

@ -14,13 +14,9 @@ return [
'button_customize' => 'Customize',
'button_back' => 'Back',
'banner_title' => 'The :site_name website uses cookies!',
'banner_text_open' => 'This website stores cookies on your computer. :site_name uses this information to improve and personalize your browsing experience, as well as for analysis and indicators concerning our visitors both on this website and on other media. You can click on "Accept" if you consent to the use of these cookies.',
'banner_text' => 'We use cookies to ensure the smooth operation of our site and for analytical purposes. By continuing to browse this site or by closing this banner, you consent to the use of these cookies.',
'banner_details' => 'If you refuse the use of cookies, your information will not be tracked during your visit to this site. A cookie will be used in your browser to remember not to track your preferences. Some features will not be accessible. You can change your mind and modify your consent at any time by returning to this site.',
'banner_details_link' => 'To find out more about the cookies we use, please consult our privacy policy.',
'banner_details_link_title' => 'Open the privacy policy page',
'banner_more_details' => 'More details...',
'banner_less_details' => 'Fewer details...',
'banner_text' => 'We use cookies to ensure the proper functioning of our site and for analytical purposes.
You can change your mind at any time by clicking on the icon on any page of our site.
By authorizing these third-party services, you agree to the deposit and reading of cookies and the use of tracking technologies necessary for their proper operation.',
'Panel_title' => 'Cookie management panel',
'Panel_content' => 'Cookie management panel content',
'Panel_subtitle' => 'Your privacy is our priority',

10
examples/laravel/lang/fr/cookie-notice.php
View file

@ -14,13 +14,9 @@ return [
'button_customize' => 'Personnaliser',
'button_back' => 'Retour',
'banner_title' => 'Le site internet :site_name utilise des cookies !',
'banner_text_open' => 'Ce site web stocke les cookies sur votre ordinateur. :site_name utilise ces informations afin d’améliorer et de personnaliser votre expérience de navigation, ainsi que pour l’analyse et les indicateurs concernant nos visiteurs à la fois sur ce site web et sur d’autres supports. Vous pouvez cliquer sur « Accepter » si vous consentez à l’utilisation de ces cookies.',
'banner_text' => 'Nous utilisons des cookies pour nous assurer du bon fonctionnement de notre site et à des fins analytiques. En poursuivant votre navigation sur ce site ou en fermant ce bandeau, vous consentez à l’utilisationde ces cookies.',
'banner_details' => 'Si vous refusez l’utilisation des cookies, vos informations ne seront pas suivies lors de votre visite sur ce site. Un cookie sera utilisé dans votre navigateur afin de se souvenir de ne pas suivre vos préférences. Certaines fonctionnalités ne seront pas accessibles. Vous pouvez changer d’avis et modifier votre consentement à tout moment en revenant sur ce site.',
'banner_details_link' => 'Pour en savoir plus sur les cookies que nous utilisons, consultez notre charte de confidentialité.',
'banner_details_link_title' => 'Ouvrir la page de la charte de confidentialité',
'banner_more_details' => 'Plus de détails...',
'banner_less_details' => 'Moins de détails...',
'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.',
'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é',

14
examples/laravel/templates/standard.blade.php
View file

@ -33,21 +33,9 @@
<span>{!! nl2br(e($strings->banner_title)) !!}</span>
</div>
<div class="cn-banner-para-p">
<p class="cn-banner-para-p-close">{!! nl2br(e($strings->banner_text)) !!}</p>
<p class="cn-banner-para-p-open d-none">{!! nl2br(e($strings->banner_text_open)) !!}</p>
<p>{!! nl2br(e($strings->banner_text)) !!}</p>
</div>
</div>
<div class="cn-banner-details">
<p>
{!! nl2br(e($strings->banner_details)) !!}<br>
<a href="{{ $confidentiality_page_url }}"
title="{{ $strings->banner_details_link_title }}">{{ $strings->banner_details_link }}</a>
</p>
</div>
<div class="cn-banner-btn-details">
<button class="cn-banner-btn-details-p" data-open="{{ $strings->banner_less_details }}"
data-close="{{ $strings->banner_more_details }}" aria-pressed="false">{!! nl2br(e($strings->banner_more_details)) !!}</button>
</div>
</div>
{{-- 2ND PAGE CUSTOMIZE PANEL --}}
<div class="cn-modal-container d-none">

43
examples/wordpress/cn-cookies.php
View file

@ -4,31 +4,26 @@ $site_name = 'Marie Restauration';
$logo_picture_url = get_stylesheet_directory_uri() . '/assets/images/logo-mr.png';
$logo_alt_text = "Logo " . $site_name;
$logo_title_text = "Logo " . $site_name;
$confidentiality_page_url = '';
$strings = (object)[
'button_customize_cookies' => 'Personnaliser les cookies',
'button_close_cookies' => 'Fermer la fenêtre des cookies',
'button_forbid' => 'Interdire',
'button_allow' => 'Autoriser',
'button_forbid_all' => strtoupper('Tout refuser'),
'button_allow_all' => strtoupper('Tout accepter'),
'button_customize' => strtoupper('Personnaliser'),
'button_back' => strtoupper('Retour'),
'banner_title' => 'Le site internet ' . $site_name . ' utilise des cookies !',
'banner_text_open' => "Ce site web stocke les cookies sur votre ordinateur. " . $site_name . " utilise ces informations afin d’améliorer et de personnaliser votre expérience de navigation, ainsi que pour l’analyse et les indicateurs concernant nos visiteurs à la fois sur ce site web et sur d’autres supports.\n Vous pouvez cliquer sur « Accepter » si vous consentez à l’utilisation de ces cookies.",
'banner_text' => 'Nous utilisons des cookies pour nous assurer du bon fonctionnement de notre site et à des fins analytiques. En poursuivant votre navigation sur ce site ou en fermant ce bandeau, vous consentez à l’utilisation de ces cookies.',
'banner_details' => 'Si vous refusez l’utilisation des cookies, vos informations ne seront pas suivies lors de votre visite sur ce site. Un cookie sera utilisé dans votre navigateur afin de se souvenir de ne pas suivre vos préférences. Certaines fonctionnalités ne seront pas accessibles. Vous pouvez changer d’avis et modifier votre consentement à tout moment en revenant sur ce site.',
'banner_details_link' => 'Pour en savoir plus sur les cookies que nous utilisons, consultez notre charte de confidentialité.',
'banner_details_link_title' => 'Charte de confidentialité',
'banner_more_details' => 'Plus de détails...',
'banner_less_details' => 'Moins de détails...',
'Panel_title' => 'Panneau de gestion 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.',
'button_customize_cookies' => 'Personnaliser les cookies',
'button_close_cookies' => 'Fermer la fenêtre des cookies',
'button_forbid' => 'Interdire',
'button_allow' => 'Autoriser',
'button_forbid_all' => strtoupper('Tout refuser'),
'button_allow_all' => strtoupper('Tout accepter'),
'button_customize' => strtoupper('Personnaliser'),
'button_back' => strtoupper('Retour'),
'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.',
'Panel_title' => 'Panneau de gestion 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.',
];
$cookies = [];
@ -213,4 +208,4 @@ SCRIPT;
<?php } ?>
window.WebCookieNotice = new CookieNotice(window.WebCookieNotice);
});
</script>
</script>

16
examples/wordpress/templates/standard.php
View file

@ -46,22 +46,8 @@
</div>
<div class="cn-banner-para-p">
<p class="cn-banner-para-p-close"><?= nl2br($strings->banner_text); ?></p>
<p class="cn-banner-para-p-open d-none"><?= nl2br($strings->banner_text_open); ?></p>
</div>
</div>
<div class="cn-banner-details">
<p>
<?= $strings->banner_details; ?><br>
<a href="<?php $confidentiality_page_url; ?>" title="<?= $strings->banner_details_link_title; ?>">
<?= $strings->banner_details_link; ?>
</a>
</p>
</div>
<div class="cn-banner-btn-details">
<button class="cn-banner-btn-details-p" data-open="<?= $strings->banner_less_details; ?>" data-close="<?= $strings->banner_more_details; ?>">
<?= nl2br($strings->banner_more_details); ?>
</button>
</div>
</div>
<!-- 2ND PAGE CUSTOMIZE PANEL -->
<div class="cn-modal-container d-none">
@ -108,4 +94,4 @@
</div>
</div>
</div>
</div>
</div>

31
src/scss/themes/standard.scss vendored
View file

@ -286,37 +286,6 @@ $breakpoint-mobile: 535px;
text-align: justify;
}
}
.cn-banner-details {
display: flex;
overflow: hidden;
height: 0;
flex-direction: row;
align-items: flex-start;
justify-content: center;
text-align: justify;
transition: 0.3s;
p {
padding-bottom: 1rem;
}
}
.cn-banner-btn-details {
width: 100%;
}
.cn-banner-btn-details-p {
@extend %nav-button;
display: inline-block;
width: 100%;
padding: 1rem 0;
margin: 0 auto;
cursor: pointer;
font-size: 14px;
text-align: center;
}
}
// 2nd Page MODAL

99
src/ts/index.ts
View file

@ -24,15 +24,8 @@ export default class CookieNotice {
cookieShowModalBtn: HTMLButtonElement;
cookieCloseModalBtn: HTMLButtonElement;
bannerDetailsCollapseBtn: HTMLButtonElement;
bannerParaP: HTMLDivElement;
detailsTextOpen: HTMLParagraphElement;
detailsTextClose: HTMLParagraphElement;
bannerContent: HTMLDivElement;
bannerDetails: HTMLDivElement;
bannerDetailsContainer: HTMLDivElement;
acceptAllBtn: HTMLButtonElement;
denyAllBtn: HTMLButtonElement;
customizeBtn: HTMLButtonElement;
@ -80,24 +73,6 @@ export default class CookieNotice {
bannerContent = document.querySelector(
"div.cn-banner-content"
) as HTMLDivElement | null,
bannerDetails = document.querySelector(
"div.cn-banner-details"
) as HTMLDivElement | null,
bannerParaP = document.querySelector(
"div.cn-banner-para-p"
) as HTMLDivElement | null,
detailsTextOpen = document.querySelector(
"p.cn-banner-para-p-open"
) as HTMLParagraphElement | null,
detailsTextClose = document.querySelector(
"p.cn-banner-para-p-close"
) as HTMLParagraphElement | null,
bannerDetailsCollapseBtn = document.querySelector(
"button.cn-banner-btn-details-p"
) as HTMLButtonElement | null,
bannerDetailsContainer = document.querySelector(
"div.cn-banner-btn-details"
) as HTMLDivElement | null,
modalContainer = document.querySelector(
"div.cn-modal-container"
) as HTMLDivElement | null,
@ -134,26 +109,6 @@ export default class CookieNotice {
if (!bannerContent) {
throw new Error("Cannot find 'div.cn-banner-content' element");
}
if (!bannerDetails) {
throw new Error("Cannot find 'div.cn-banner-details' element");
}
if (!bannerParaP) {
throw new Error("Cannot find 'div.cn-banner-para-p' element");
}
if (!detailsTextOpen) {
throw new Error("Cannot find 'p.cn-banner-para-p-open' element");
}
if (!detailsTextClose) {
throw new Error("Cannot find 'p.cn-banner-para-p-close' element");
}
if (!bannerDetailsCollapseBtn) {
throw new Error(
"Cannot find 'button.cn-banner-btn-details-p' element"
);
}
if (!bannerDetailsContainer) {
throw new Error("Cannot find '.cn-banner-btn-details' element");
}
if (!modalContainer) {
throw new Error("Cannot find 'div.cn-modal-container' element");
}
@ -181,16 +136,10 @@ export default class CookieNotice {
this.cookieLinkShowCustomizeModalList =
cookieLinkShowCustomizeModalPageList;
this.cookieContainer = cookieContainer;
this.bannerDetailsContainer = bannerDetailsContainer;
this.bannerContainer = bannerContainer;
this.bannerContent = bannerContent;
this.cookiesUnorderedList = cookiesUnorderedList;
this.modalWrapper = modalWrapper;
this.bannerParaP = bannerParaP;
this.detailsTextOpen = detailsTextOpen;
this.detailsTextClose = detailsTextClose;
this.bannerDetails = bannerDetails;
this.bannerDetailsCollapseBtn = bannerDetailsCollapseBtn;
this.modalContainer = modalContainer;
this.acceptAllBtn = acceptAllBtn;
this.denyAllBtn = denyAllBtn;
@ -216,11 +165,6 @@ export default class CookieNotice {
"click",
this.toggleCookieModalPages
);
this.addEventPrevent(
this.bannerDetailsCollapseBtn,
"click",
this.toggleBannerDetails
);
this.addEventPrevent(
this.cookieShowModalBtn,
"click",
@ -623,8 +567,6 @@ export default class CookieNotice {
this.resetCookieModal();
this.bannerContent.classList.add("d-none");
this.bannerDetails.classList.add("d-none");
this.bannerDetailsContainer.classList.add("d-none");
this.modalContainer.classList.remove("d-none");
// Scroll to the top of the cookies list
this.modalWrapper.scrollTop = 0;
@ -701,8 +643,6 @@ export default class CookieNotice {
*/
resetCookieModal() {
this.bannerContent.classList.remove("d-none");
this.bannerDetails.classList.remove("d-none");
this.bannerDetailsContainer.classList.remove("d-none");
this.modalContainer.classList.add("d-none");
if (!this.customizeBtn.dataset.openModal) {
throw new Error("Cannot find attribut data-open-modal");
@ -812,50 +752,11 @@ export default class CookieNotice {
});
}
/**
* Toggle show hide banner details
*/
toggleBannerDetails() {
this.bannerDetails.classList.toggle("cn-details-open");
if (
!this.bannerDetailsCollapseBtn.dataset.open ||
!this.bannerDetailsCollapseBtn.dataset.close
) {
throw new Error("Cannot find attribute data-open or data-close");
}
if (this.bannerDetailsAreExpanded) {
this.bannerDetailsCollapseBtn.innerHTML =
this.bannerDetailsCollapseBtn.dataset.close;
this.bannerDetailsCollapseBtn.title =
this.bannerDetailsCollapseBtn.dataset.close;
this.bannerDetailsCollapseBtn.ariaPressed = "false";
this.detailsTextOpen.classList.add("d-none");
this.detailsTextClose.classList.remove("d-none");
this.bannerDetails.style.height = "0px";
this.bannerDetailsAreExpanded = false;
} else {
this.bannerDetailsCollapseBtn.innerHTML =
this.bannerDetailsCollapseBtn.dataset.open;
this.bannerDetailsCollapseBtn.title =
this.bannerDetailsCollapseBtn.dataset.open;
this.bannerDetailsCollapseBtn.ariaPressed = "true";
this.detailsTextOpen.classList.remove("d-none");
this.detailsTextClose.classList.add("d-none");
this.bannerDetails.style.height =
this.bannerDetails.children[0].clientHeight + "px";
this.bannerDetailsAreExpanded = true;
}
}
/**
* Toggle Cookie modal pages
*/
toggleCookieModalPages() {
this.bannerContent.classList.toggle("d-none");
this.bannerDetails.classList.toggle("d-none");
this.bannerDetailsContainer.classList.toggle("d-none");
this.modalContainer.classList.toggle("d-none");
this.setTabIndex();
this.setupCookieModalList();