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

chore: 📦 npm build

Browse source
This commit is contained in:
Jérémy Munsch 2024-05-27 17:46:12 +02:00
parent de69955d87
commit 0ed2e2d5d0
No known key found for this signature in database
GPG key ID: 18361AF3BFEC0FEC
11 changed files with 343 additions and 297 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -24,7 +24,7 @@
border: 0;
margin: 0;
appearance: none;
background: #b9b9b9;
background: #d6d6d6;
color: #000;
cursor: pointer;
font-family: "Barlow", sans-serif;
@ -36,7 +36,7 @@
}
#cn-wrapper button:hover,
#cn-wrapper button:focus {
background: #a0a0a0;
background: #bdbdbd;
/* prettier-ignore */
color: #000;
}
@ -57,30 +57,26 @@
/* Button settings */
/* Title settings */
/* Text settings */
/* Accept/Deny btn settings */
/* Switch Buttons */
/* 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-banner .cn-modal-top-line #cn-close-modal {
#cn-wrapper .cn-nav #cn-settings-banner, #cn-wrapper .cn-nav #cn-accept-banner, #cn-wrapper .cn-nav #cn-deny-banner, #cn-wrapper #cn-banner .cn-modal-top-line #cn-close-modal {
display: flex;
height: 3rem;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 0;
background-color: #b9b9b9;
background-color: #d6d6d6;
color: #000;
font-family: "Barlow", sans-serif;
font-size: 16px;
}
#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-banner .cn-modal-top-line #cn-close-modal: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-banner .cn-modal-top-line #cn-close-modal:focus {
background-color: #a0a0a0;
#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-banner .cn-modal-top-line #cn-close-modal: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-banner .cn-modal-top-line #cn-close-modal:focus {
background-color: #bdbdbd;
/* prettier-ignore */
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-banner .cn-modal-top-line #cn-close-modal:focus {
#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-banner .cn-modal-top-line #cn-close-modal:focus {
/* prettier-ignore */
outline-color: #000;
}
@ -91,7 +87,7 @@
top: 0;
left: 0;
width: 100vw;
height: 100vh;
height: 100dvh;
background-color: rgba(0, 0, 0, 0.6);
cursor: pointer;
opacity: 0;
@ -112,7 +108,13 @@
}
#cn-wrapper {
position: fixed;
z-index: 1050;
top: 0;
left: 0;
width: 100vw;
height: 100dvh;
pointer-events: none;
}
#cn-wrapper #cn-cookie-btn {
position: fixed;
@ -126,6 +128,7 @@
background-color: #fff;
box-shadow: 0 0.1rem 1rem rgba(0, 0, 0, 0.35);
cursor: pointer;
pointer-events: auto;
}
@media (min-width: 535px) {
#cn-wrapper #cn-cookie-btn {
@ -156,15 +159,14 @@
fill: #dc9c52;
}
#cn-wrapper #cn-banner {
position: fixed;
position: absolute;
z-index: 1050;
top: 0;
bottom: 0;
left: 0;
display: flex;
width: 100vw;
height: fit-content;
max-height: 100vh;
max-height: 100dvh;
flex-direction: column;
align-items: center;
justify-content: flex-end;
@ -194,9 +196,6 @@
border-top-right-radius: 0.5rem;
}
}
#cn-wrapper #cn-banner p:not(.cn-modal-title) {
font-size: 16px;
}
#cn-wrapper #cn-banner > * {
pointer-events: all;
}
@ -206,10 +205,12 @@
bottom: calc(0.5rem + 60px);
left: 0;
width: 30rem;
height: fit-content;
max-height: 38rem;
max-height: 26rem;
border-radius: 0.5rem;
}
#cn-wrapper #cn-banner.cn-modal-page {
max-height: 38rem;
}
}
#cn-wrapper #cn-li-template {
display: none;
@ -222,11 +223,64 @@
padding: 0.8rem;
overflow-y: auto;
}
@media (min-width: 535px) {
#cn-wrapper .cn-content {
flex-grow: 0;
}
}
#cn-wrapper .cn-content .cn-switch {
position: relative;
display: inline-block;
overflow: hidden;
width: 4.2rem;
height: 2.4rem;
box-sizing: content-box;
cursor: pointer;
}
#cn-wrapper .cn-content .cn-switch:focus, #cn-wrapper .cn-content .cn-switch:focus-visible {
border-width: 0.1rem;
border-style: solid;
border-color: #346abf;
}
#cn-wrapper .cn-content .cn-switch input {
display: none;
}
#cn-wrapper .cn-content .cn-switch input + span {
position: absolute;
border-radius: 2rem;
background: #99b4df;
inset: 0;
}
#cn-wrapper .cn-content .cn-switch input + span::before {
position: absolute;
top: 50%;
left: 0.21rem;
display: inline-block;
width: 1.8rem;
height: 1.8rem;
border-radius: 50%;
background: #fff;
content: "";
transform: translateY(-50%);
transition: all 0.5s;
}
#cn-wrapper .cn-content .cn-switch input:indeterminate + span {
background: #b7b7b7;
}
#cn-wrapper .cn-content .cn-switch input:indeterminate + span::before {
left: 1.08rem;
}
#cn-wrapper .cn-content .cn-switch input:checked + span {
background: #346abf;
}
#cn-wrapper .cn-content .cn-switch input:checked + span::before {
left: 2.16rem;
}
#cn-wrapper .cn-content .cn-banner-content {
display: flex;
min-height: 100%;
flex-direction: column;
color: #b9b9b9;
color: #707070;
font-family: "Barlow", sans-serif;
font-size: 16px;
}
@ -261,37 +315,13 @@
margin: 6px 0;
text-align: justify;
}
#cn-wrapper .cn-content .cn-modal-container .cn-modal-title {
color: #dc9c52;
font-family: "Satisfy", sans-serif;
font-size: 28px;
font-weight: bold;
text-align: center;
}
#cn-wrapper .cn-content .cn-modal-container .cn-modal-subtitle {
margin-bottom: 6px;
color: #b9b9b9;
color: #dc9c52;
font-family: "Barlow", sans-serif;
font-size: 16px;
text-align: center;
}
#cn-wrapper .cn-content .cn-modal-container .cn-modal-description {
display: flex;
flex-direction: column;
align-items: center;
color: #b9b9b9;
font-family: "Barlow", sans-serif;
font-size: 16px;
font-weight: normal;
line-height: initial;
}
#cn-wrapper .cn-content .cn-modal-container .cn-modal-wrapper {
position: relative;
display: flex;
overflow: auto;
flex-direction: column;
align-items: center;
/* stylelint-disable-next-line no-descending-specificity */
}
#cn-wrapper .cn-content .cn-modal-container .cn-modal-wrapper ul {
display: flex;
@ -302,7 +332,7 @@
}
#cn-wrapper .cn-content .cn-modal-container .cn-modal-wrapper .cn-cookie-wrapper {
display: flex;
flex-direction: column;
flex-direction: row;
align-items: center;
justify-content: space-between;
padding: 20px;
@ -338,58 +368,11 @@
font-weight: bold;
}
#cn-wrapper .cn-content .cn-modal-container .cn-cookie-infos .cn-cookie-description {
color: #b9b9b9;
color: #707070;
}
#cn-wrapper .cn-content .cn-modal-container .cn-cookie-infos a {
width: fit-content;
}
#cn-wrapper .cn-content .cn-modal-container .cn-cookie-buttons {
display: flex;
width: 200px;
justify-content: space-around;
margin-top: 6px;
}
#cn-wrapper .cn-content .cn-modal-container .cn-cookie-buttons input {
display: none;
}
#cn-wrapper .cn-content .cn-modal-container .cn-cookie-buttons label {
display: block;
width: fit-content;
padding: 6px 20px;
color: #fff;
cursor: pointer;
transition: 0.3s;
}
#cn-wrapper .cn-content .cn-modal-container .cn-cookie-buttons div {
display: table;
margin: 0 0.5em;
text-align: center;
}
#cn-wrapper .cn-content .cn-modal-container .accept label,
#cn-wrapper .cn-content .cn-modal-container .deny label {
height: inherit;
background: #6d6d6d;
}
#cn-wrapper .cn-content .cn-modal-container .accept label:hover,
#cn-wrapper .cn-content .cn-modal-container .accept label:focus {
background-color: #175917;
}
#cn-wrapper .cn-content .cn-modal-container .accept .active {
background-color: #218221;
}
#cn-wrapper .cn-content .cn-modal-container .deny label:hover,
#cn-wrapper .cn-content .cn-modal-container .deny label:focus {
background-color: #712121;
}
#cn-wrapper .cn-content .cn-modal-container .deny .active {
background-color: #992c2c;
}
#cn-wrapper .cn-content .cn-modal-container .accept input:checked ~ label {
background-color: #218221;
}
#cn-wrapper .cn-content .cn-modal-container .deny input:checked ~ label {
background-color: #992c2c;
}
#cn-wrapper .cn-nav {
display: flex;
overflow: hidden;
@ -430,12 +413,6 @@
border-top: initial;
}
}
@media (min-width: 535px) {
#cn-wrapper {
width: 100%;
height: 100%;
}
}
.cn-open {
overflow: hidden !important;

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

File diff suppressed because one or more lines are too long

2
dist/browser/typings/ts/export/global.d.ts vendored
View file

@ -1,5 +1,5 @@
import CookieNotice from "./../index";
import "./../../scss/themes/standard.scss";
import CookieNotice from "./../index";
declare global {
interface Window {
CookieNotice: typeof CookieNotice;

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

@ -200,6 +200,7 @@ export default class CookieNotice {
* Set the cookies list in the modal
*/
setupCookieModalList(): void;
switchToModalPageOrClose(): void;
/**
* Toggle Cookie modal pages
*/
@ -208,6 +209,10 @@ export default class CookieNotice {
* Toggle customize btn
*/
togglePersonalizeBtn(): void;
/**
* Get the actual page: banner or modal (with cookie choices)
*/
isOnBannerPage(): boolean;
}
declare enum CookieStatus {
true = "true",

2
dist/esm/ts/export/global.js vendored
View file

@ -1,5 +1,5 @@
import CookieNotice from "./../index";
import "./../../scss/themes/standard.scss";
import CookieNotice from "./../index";
const // Map over CookieNotice in case of overwrite
_CookieNotice = window.CookieNotice;
CookieNotice.noConflict = function (deep = false) {

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

@ -87,7 +87,7 @@ export default class CookieNotice {
this.addEventPrevent(this.cookieCloseModalBtn, "click", this.closeCookieModal);
this.addEventPrevent(this.acceptAllBtn, "click", this.acceptAllCookies);
this.addEventPrevent(this.denyAllBtn, "click", this.denyAllCookies);
this.addEventPrevent(this.customizeBtn, "click", this.toggleCookieModalPages);
this.addEventPrevent(this.customizeBtn, "click", this.switchToModalPageOrClose);
this.addEventPrevent(this.cookieShowModalBtn, "click", this.toggleCookieModal);
this.cookieLinkShowCustomizeModalList.forEach((cookieLink) => {
this.addEventPrevent(cookieLink, "click", this.openCookieModalToCookiePage);
@ -177,11 +177,12 @@ export default class CookieNotice {
* Accept a specific cookie
*/
acceptCookie(cookieName) {
var _a, _b, _c, _d;
const cookieOptions = this.getCookie(cookieName);
this.setCookieStatus(cookieName, CookieStatus.true, cookieOptions);
(_b = (_a = this.cookieContainer.querySelector(`#${cookieName}-accept`)) === null || _a === void 0 ? void 0 : _a.classList) === null || _b === void 0 ? void 0 : _b.add("active");
(_d = (_c = this.cookieContainer.querySelector(`#${cookieName}-deny`)) === null || _c === void 0 ? void 0 : _c.classList) === null || _d === void 0 ? void 0 : _d.remove("active");
const cnSwitch = document.getElementById(`${cookieName}-switch`);
const cnSwitchInput = cnSwitch.querySelector("input");
cnSwitchInput.checked = true;
cnSwitch.ariaChecked = "true";
}
/**
* Deny a all cookies
@ -194,11 +195,12 @@ export default class CookieNotice {
* Deny a specific cookie
*/
denyCookie(cookieName) {
var _a, _b, _c, _d;
const cookieOptions = this.getCookie(cookieName);
this.setCookieStatus(cookieName, CookieStatus.false, cookieOptions);
(_b = (_a = this.cookieContainer.querySelector(`#${cookieName}-deny`)) === null || _a === void 0 ? void 0 : _a.classList) === null || _b === void 0 ? void 0 : _b.add("active");
(_d = (_c = this.cookieContainer.querySelector(`#${cookieName}-accept`)) === null || _c === void 0 ? void 0 : _c.classList) === null || _d === void 0 ? void 0 : _d.remove("active");
const cnSwitch = document.getElementById(`${cookieName}-switch`);
const cnSwitchInput = cnSwitch.querySelector("input");
cnSwitchInput.checked = false;
cnSwitch.ariaChecked = "false";
}
/**
* Deny all waiting cookies
@ -262,7 +264,6 @@ export default class CookieNotice {
* @param cookieOption
*/
setCookieStatus(cookieName, status, cookieOption) {
console.log(`setcookie status ${cookieName} ${status}`);
if (status === CookieStatus.true) {
this.addCookieStatus(cookieName, cookieOption);
return;
@ -450,6 +451,7 @@ export default class CookieNotice {
this.resetCookieModal();
this.bannerContent.classList.add("d-none");
this.modalContainer.classList.remove("d-none");
this.bannerContainer.classList.add("cn-modal-page");
// Scroll to the top of the cookies list
this.modalWrapper.scrollTop = 0;
this.setupCookieModalList();
@ -462,6 +464,12 @@ export default class CookieNotice {
this.updateRestrictCloseModal();
if (!this.restrictCloseModal) {
document.body.classList.remove("cn-open");
if (!this.isOnBannerPage()) {
// * Make toggle page to banner on closing
this.bannerContent.classList.toggle("d-none");
this.modalContainer.classList.toggle("d-none");
this.bannerContainer.classList.remove("cn-modal-page");
}
this.unsetTabIndex();
this.setupCookieModalList();
}
@ -480,7 +488,8 @@ export default class CookieNotice {
// * Only focusable elements
[...document.body.querySelectorAll(focusableSelector)]
.filter((el) => !el.hasAttribute("disabled") &&
!el.getAttribute("aria-hidden"))
!el.getAttribute("aria-hidden") &&
!this.cookieContainer.contains(el))
.forEach((el) => {
el.setAttribute("tabindex", "-1");
el.classList.add("cn-disabled");
@ -491,7 +500,8 @@ export default class CookieNotice {
// * Only visible elements
!!(el.offsetWidth ||
el.offsetHeight ||
el.getClientRects().length))
el.getClientRects().length) &&
!this.cookieContainer.contains(el))
.forEach((el) => {
el.setAttribute("tabindex", "0");
el.classList.remove("cn-disabled");
@ -518,6 +528,7 @@ export default class CookieNotice {
resetCookieModal() {
this.bannerContent.classList.remove("d-none");
this.modalContainer.classList.add("d-none");
this.bannerContainer.classList.remove("cn-modal-page");
if (!this.customizeBtn.dataset.openModal) {
throw new Error("Cannot find attribut data-open-modal");
}
@ -538,39 +549,45 @@ export default class CookieNotice {
const name = cookie.querySelector("span.cn-cookie-name");
const description = cookie.querySelector("span.cn-cookie-description");
const link = cookie.querySelector(".cn-cookie-link");
const acceptInput = cookie.querySelector(".accept > input");
const denyInput = cookie.querySelector(".deny > input");
const acceptLabel = cookie.querySelector(".accept > label");
const denyLabel = cookie.querySelector(".deny > label");
const cnSwitch = cookie.querySelector(".cn-switch");
const cnSwitchInput = cookie.querySelector(".cn-switch > input");
// * Undertermined state
cnSwitchInput.indeterminate = true;
cnSwitchInput.checked = false;
// * Assign cookie aside content
name.textContent = cookieConfig.name;
description.id = `${cookieName}-desc`;
description.textContent = cookieConfig.description;
link.textContent = cookieConfig.labelLink;
link.setAttribute("href", cookieConfig.link);
acceptInput.id = cookieName + "-accept";
acceptInput.name = cookieName;
acceptInput.dataset.name = cookieName;
acceptLabel.htmlFor = cookieName + "-accept";
acceptLabel.textContent = `${acceptLabel.textContent} ${cookieName}`;
acceptLabel.title = `${acceptLabel.textContent} ${cookieName}`;
denyInput.id = cookieName + "-deny";
denyInput.name = cookieName;
denyInput.dataset.name = cookieName;
denyLabel.htmlFor = cookieName + "-deny";
denyLabel.textContent = `${denyLabel.textContent} ${cookieName}`;
denyLabel.title = `${denyLabel.textContent} ${cookieName}`;
const acceptFn = () => {
acceptLabel.classList.add("active");
denyLabel.classList.remove("active");
this.setCookieStatus(cookieName, CookieStatus.true, cookieConfig);
}, denyFn = () => {
acceptLabel.classList.remove("active");
denyLabel.classList.add("active");
this.setCookieStatus(cookieName, CookieStatus.false, cookieConfig);
// * Assign cookie controls
cnSwitch.id = `${cookieName}-switch`;
cnSwitch.name = cookieName;
cnSwitch.dataset.name = cookieName;
cnSwitch.setAttribute("aria-labelledby", `${cookieName}-desc`);
cnSwitch.setAttribute("aria-describedby", `${cookieName}-desc`);
const toggleCookie = () => {
this.setCookieStatus(cookieName, cnSwitch.checked ? CookieStatus.true : CookieStatus.false, cookieConfig);
};
this.addEvent(acceptInput, "click", acceptFn);
this.addEventKbdValidate(acceptLabel, acceptFn);
this.addEvent(denyInput, "click", denyFn);
this.addEventKbdValidate(denyLabel, denyFn);
this.addEvent(cnSwitch, "click", () => {
toggleCookie();
if (cnSwitchInput.checked) {
cnSwitch.ariaChecked = "true";
}
else {
cnSwitch.ariaChecked = "false";
}
});
this.addEventKbdValidate(cnSwitch, () => {
toggleCookie();
cnSwitchInput.checked = !cnSwitchInput.checked;
if (cnSwitchInput.checked) {
cnSwitch.ariaChecked = "true";
}
else {
cnSwitch.ariaChecked = "false";
}
});
this.cookiesUnorderedList.append(cookie);
if (!this.hasBrowserCookie()) {
// * Ldcweb cookie is not set.
@ -579,27 +596,43 @@ export default class CookieNotice {
// * Setup list status state
Object.entries(this.getCookieStatusList()).forEach(([ckName, cookieStatus]) => {
if (ckName === cookieName) {
acceptLabel.classList.remove("active");
denyLabel.classList.remove("active");
switch (cookieStatus) {
case CookieStatus.true:
acceptLabel.classList.add("active");
cnSwitchInput.indeterminate = false;
cnSwitchInput.checked = true;
break;
case CookieStatus.false:
denyLabel.classList.add("active");
cnSwitchInput.indeterminate = false;
cnSwitchInput.checked = false;
break;
case CookieStatus.wait:
cnSwitchInput.indeterminate = true;
cnSwitchInput.checked = false;
break;
}
}
});
});
}
switchToModalPageOrClose() {
// * Modification du comportement du bouton, même si ca n'a pas de sens.
// https://lab.s-web.fr/ldc-web/projets/ldc-web-cookie-notice/-/issues/9`
if (this.isOnBannerPage()) {
this.toggleCookieModalPages();
return;
}
// * Pas de permutation en arrière
this.closeCookieModal();
}
/**
* Toggle Cookie modal pages
*/
toggleCookieModalPages() {
this.bannerContent.classList.toggle("d-none");
this.modalContainer.classList.toggle("d-none");
if (!this.modalContainer.classList.contains("d-none")) {
this.bannerContainer.classList.toggle("cn-modal-page");
if (!this.isOnBannerPage()) {
this.bannerContainer.classList.add("cn-modal-page");
this.denyAllWaitingCookies();
}
this.setTabIndex();
@ -623,6 +656,12 @@ export default class CookieNotice {
this.customizeBtn.title = customizeBtnBannerDataset.closeModal;
}
}
/**
* Get the actual page: banner or modal (with cookie choices)
*/
isOnBannerPage() {
return this.modalContainer.classList.contains("d-none");
}
}
var CookieStatus;
(function (CookieStatus) {

2
dist/typings/ts/export/global.d.ts vendored
View file

@ -1,5 +1,5 @@
import CookieNotice from "./../index";
import "./../../scss/themes/standard.scss";
import CookieNotice from "./../index";
declare global {
interface Window {
CookieNotice: typeof CookieNotice;

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

@ -200,6 +200,7 @@ export default class CookieNotice {
* Set the cookies list in the modal
*/
setupCookieModalList(): void;
switchToModalPageOrClose(): void;
/**
* Toggle Cookie modal pages
*/
@ -208,6 +209,10 @@ export default class CookieNotice {
* Toggle customize btn
*/
togglePersonalizeBtn(): void;
/**
* Get the actual page: banner or modal (with cookie choices)
*/
isOnBannerPage(): boolean;
}
declare enum CookieStatus {
true = "true",

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

@ -24,7 +24,7 @@
border: 0;
margin: 0;
appearance: none;
background: #b9b9b9;
background: #d6d6d6;
color: #000;
cursor: pointer;
font-family: "Barlow", sans-serif;
@ -36,7 +36,7 @@
}
#cn-wrapper button:hover,
#cn-wrapper button:focus {
background: #a0a0a0;
background: #bdbdbd;
/* prettier-ignore */
color: #000;
}
@ -57,30 +57,26 @@
/* Button settings */
/* Title settings */
/* Text settings */
/* Accept/Deny btn settings */
/* Switch Buttons */
/* 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-banner .cn-modal-top-line #cn-close-modal {
#cn-wrapper .cn-nav #cn-settings-banner, #cn-wrapper .cn-nav #cn-accept-banner, #cn-wrapper .cn-nav #cn-deny-banner, #cn-wrapper #cn-banner .cn-modal-top-line #cn-close-modal {
display: flex;
height: 3rem;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 0;
background-color: #b9b9b9;
background-color: #d6d6d6;
color: #000;
font-family: "Barlow", sans-serif;
font-size: 16px;
}
#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-banner .cn-modal-top-line #cn-close-modal: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-banner .cn-modal-top-line #cn-close-modal:focus {
background-color: #a0a0a0;
#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-banner .cn-modal-top-line #cn-close-modal: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-banner .cn-modal-top-line #cn-close-modal:focus {
background-color: #bdbdbd;
/* prettier-ignore */
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-banner .cn-modal-top-line #cn-close-modal:focus {
#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-banner .cn-modal-top-line #cn-close-modal:focus {
/* prettier-ignore */
outline-color: #000;
}
@ -91,7 +87,7 @@
top: 0;
left: 0;
width: 100vw;
height: 100vh;
height: 100dvh;
background-color: rgba(0, 0, 0, 0.6);
cursor: pointer;
opacity: 0;
@ -112,7 +108,13 @@
}
#cn-wrapper {
position: fixed;
z-index: 1050;
top: 0;
left: 0;
width: 100vw;
height: 100dvh;
pointer-events: none;
}
#cn-wrapper #cn-cookie-btn {
position: fixed;
@ -126,6 +128,7 @@
background-color: #fff;
box-shadow: 0 0.1rem 1rem rgba(0, 0, 0, 0.35);
cursor: pointer;
pointer-events: auto;
}
@media (min-width: 535px) {
#cn-wrapper #cn-cookie-btn {
@ -156,15 +159,14 @@
fill: #dc9c52;
}
#cn-wrapper #cn-banner {
position: fixed;
position: absolute;
z-index: 1050;
top: 0;
bottom: 0;
left: 0;
display: flex;
width: 100vw;
height: fit-content;
max-height: 100vh;
max-height: 100dvh;
flex-direction: column;
align-items: center;
justify-content: flex-end;
@ -194,9 +196,6 @@
border-top-right-radius: 0.5rem;
}
}
#cn-wrapper #cn-banner p:not(.cn-modal-title) {
font-size: 16px;
}
#cn-wrapper #cn-banner > * {
pointer-events: all;
}
@ -206,10 +205,12 @@
bottom: calc(0.5rem + 60px);
left: 0;
width: 30rem;
height: fit-content;
max-height: 38rem;
max-height: 26rem;
border-radius: 0.5rem;
}
#cn-wrapper #cn-banner.cn-modal-page {
max-height: 38rem;
}
}
#cn-wrapper #cn-li-template {
display: none;
@ -222,11 +223,64 @@
padding: 0.8rem;
overflow-y: auto;
}
@media (min-width: 535px) {
#cn-wrapper .cn-content {
flex-grow: 0;
}
}
#cn-wrapper .cn-content .cn-switch {
position: relative;
display: inline-block;
overflow: hidden;
width: 4.2rem;
height: 2.4rem;
box-sizing: content-box;
cursor: pointer;
}
#cn-wrapper .cn-content .cn-switch:focus, #cn-wrapper .cn-content .cn-switch:focus-visible {
border-width: 0.1rem;
border-style: solid;
border-color: #346abf;
}
#cn-wrapper .cn-content .cn-switch input {
display: none;
}
#cn-wrapper .cn-content .cn-switch input + span {
position: absolute;
border-radius: 2rem;
background: #99b4df;
inset: 0;
}
#cn-wrapper .cn-content .cn-switch input + span::before {
position: absolute;
top: 50%;
left: 0.21rem;
display: inline-block;
width: 1.8rem;
height: 1.8rem;
border-radius: 50%;
background: #fff;
content: "";
transform: translateY(-50%);
transition: all 0.5s;
}
#cn-wrapper .cn-content .cn-switch input:indeterminate + span {
background: #b7b7b7;
}
#cn-wrapper .cn-content .cn-switch input:indeterminate + span::before {
left: 1.08rem;
}
#cn-wrapper .cn-content .cn-switch input:checked + span {
background: #346abf;
}
#cn-wrapper .cn-content .cn-switch input:checked + span::before {
left: 2.16rem;
}
#cn-wrapper .cn-content .cn-banner-content {
display: flex;
min-height: 100%;
flex-direction: column;
color: #b9b9b9;
color: #707070;
font-family: "Barlow", sans-serif;
font-size: 16px;
}
@ -261,37 +315,13 @@
margin: 6px 0;
text-align: justify;
}
#cn-wrapper .cn-content .cn-modal-container .cn-modal-title {
color: #dc9c52;
font-family: "Satisfy", sans-serif;
font-size: 28px;
font-weight: bold;
text-align: center;
}
#cn-wrapper .cn-content .cn-modal-container .cn-modal-subtitle {
margin-bottom: 6px;
color: #b9b9b9;
color: #dc9c52;
font-family: "Barlow", sans-serif;
font-size: 16px;
text-align: center;
}
#cn-wrapper .cn-content .cn-modal-container .cn-modal-description {
display: flex;
flex-direction: column;
align-items: center;
color: #b9b9b9;
font-family: "Barlow", sans-serif;
font-size: 16px;
font-weight: normal;
line-height: initial;
}
#cn-wrapper .cn-content .cn-modal-container .cn-modal-wrapper {
position: relative;
display: flex;
overflow: auto;
flex-direction: column;
align-items: center;
/* stylelint-disable-next-line no-descending-specificity */
}
#cn-wrapper .cn-content .cn-modal-container .cn-modal-wrapper ul {
display: flex;
@ -302,7 +332,7 @@
}
#cn-wrapper .cn-content .cn-modal-container .cn-modal-wrapper .cn-cookie-wrapper {
display: flex;
flex-direction: column;
flex-direction: row;
align-items: center;
justify-content: space-between;
padding: 20px;
@ -338,58 +368,11 @@
font-weight: bold;
}
#cn-wrapper .cn-content .cn-modal-container .cn-cookie-infos .cn-cookie-description {
color: #b9b9b9;
color: #707070;
}
#cn-wrapper .cn-content .cn-modal-container .cn-cookie-infos a {
width: fit-content;
}
#cn-wrapper .cn-content .cn-modal-container .cn-cookie-buttons {
display: flex;
width: 200px;
justify-content: space-around;
margin-top: 6px;
}
#cn-wrapper .cn-content .cn-modal-container .cn-cookie-buttons input {
display: none;
}
#cn-wrapper .cn-content .cn-modal-container .cn-cookie-buttons label {
display: block;
width: fit-content;
padding: 6px 20px;
color: #fff;
cursor: pointer;
transition: 0.3s;
}
#cn-wrapper .cn-content .cn-modal-container .cn-cookie-buttons div {
display: table;
margin: 0 0.5em;
text-align: center;
}
#cn-wrapper .cn-content .cn-modal-container .accept label,
#cn-wrapper .cn-content .cn-modal-container .deny label {
height: inherit;
background: #6d6d6d;
}
#cn-wrapper .cn-content .cn-modal-container .accept label:hover,
#cn-wrapper .cn-content .cn-modal-container .accept label:focus {
background-color: #175917;
}
#cn-wrapper .cn-content .cn-modal-container .accept .active {
background-color: #218221;
}
#cn-wrapper .cn-content .cn-modal-container .deny label:hover,
#cn-wrapper .cn-content .cn-modal-container .deny label:focus {
background-color: #712121;
}
#cn-wrapper .cn-content .cn-modal-container .deny .active {
background-color: #992c2c;
}
#cn-wrapper .cn-content .cn-modal-container .accept input:checked ~ label {
background-color: #218221;
}
#cn-wrapper .cn-content .cn-modal-container .deny input:checked ~ label {
background-color: #992c2c;
}
#cn-wrapper .cn-nav {
display: flex;
overflow: hidden;
@ -430,12 +413,6 @@
border-top: initial;
}
}
@media (min-width: 535px) {
#cn-wrapper {
width: 100%;
height: 100%;
}
}
.cn-open {
overflow: hidden !important;

133
dist/umd/main.js vendored
View file

@ -147,7 +147,7 @@ var CookieNotice = /*#__PURE__*/function () {
this.addEventPrevent(this.cookieCloseModalBtn, "click", this.closeCookieModal);
this.addEventPrevent(this.acceptAllBtn, "click", this.acceptAllCookies);
this.addEventPrevent(this.denyAllBtn, "click", this.denyAllCookies);
this.addEventPrevent(this.customizeBtn, "click", this.toggleCookieModalPages);
this.addEventPrevent(this.customizeBtn, "click", this.switchToModalPageOrClose);
this.addEventPrevent(this.cookieShowModalBtn, "click", this.toggleCookieModal);
this.cookieLinkShowCustomizeModalList.forEach(function (cookieLink) {
_this.addEventPrevent(cookieLink, "click", _this.openCookieModalToCookiePage);
@ -266,11 +266,12 @@ var CookieNotice = /*#__PURE__*/function () {
}, {
key: "acceptCookie",
value: function acceptCookie(cookieName) {
var _this$cookieContainer, _this$cookieContainer2;
var cookieOptions = this.getCookie(cookieName);
this.setCookieStatus(cookieName, CookieStatus.true, cookieOptions);
(_this$cookieContainer = this.cookieContainer.querySelector("#".concat(cookieName, "-accept"))) === null || _this$cookieContainer === void 0 || (_this$cookieContainer = _this$cookieContainer.classList) === null || _this$cookieContainer === void 0 || _this$cookieContainer.add("active");
(_this$cookieContainer2 = this.cookieContainer.querySelector("#".concat(cookieName, "-deny"))) === null || _this$cookieContainer2 === void 0 || (_this$cookieContainer2 = _this$cookieContainer2.classList) === null || _this$cookieContainer2 === void 0 || _this$cookieContainer2.remove("active");
var cnSwitch = document.getElementById("".concat(cookieName, "-switch"));
var cnSwitchInput = cnSwitch.querySelector("input");
cnSwitchInput.checked = true;
cnSwitch.ariaChecked = "true";
}
/**
@ -292,11 +293,12 @@ var CookieNotice = /*#__PURE__*/function () {
}, {
key: "denyCookie",
value: function denyCookie(cookieName) {
var _this$cookieContainer3, _this$cookieContainer4;
var cookieOptions = this.getCookie(cookieName);
this.setCookieStatus(cookieName, CookieStatus.false, cookieOptions);
(_this$cookieContainer3 = this.cookieContainer.querySelector("#".concat(cookieName, "-deny"))) === null || _this$cookieContainer3 === void 0 || (_this$cookieContainer3 = _this$cookieContainer3.classList) === null || _this$cookieContainer3 === void 0 || _this$cookieContainer3.add("active");
(_this$cookieContainer4 = this.cookieContainer.querySelector("#".concat(cookieName, "-accept"))) === null || _this$cookieContainer4 === void 0 || (_this$cookieContainer4 = _this$cookieContainer4.classList) === null || _this$cookieContainer4 === void 0 || _this$cookieContainer4.remove("active");
var cnSwitch = document.getElementById("".concat(cookieName, "-switch"));
var cnSwitchInput = cnSwitch.querySelector("input");
cnSwitchInput.checked = false;
cnSwitch.ariaChecked = "false";
}
/**
@ -385,7 +387,6 @@ var CookieNotice = /*#__PURE__*/function () {
}, {
key: "setCookieStatus",
value: function setCookieStatus(cookieName, status, cookieOption) {
console.log("setcookie status ".concat(cookieName, " ").concat(status));
if (status === CookieStatus.true) {
this.addCookieStatus(cookieName, cookieOption);
return;
@ -624,6 +625,7 @@ var CookieNotice = /*#__PURE__*/function () {
this.resetCookieModal();
this.bannerContent.classList.add("d-none");
this.modalContainer.classList.remove("d-none");
this.bannerContainer.classList.add("cn-modal-page");
// Scroll to the top of the cookies list
this.modalWrapper.scrollTop = 0;
@ -640,6 +642,12 @@ var CookieNotice = /*#__PURE__*/function () {
this.updateRestrictCloseModal();
if (!this.restrictCloseModal) {
document.body.classList.remove("cn-open");
if (!this.isOnBannerPage()) {
// * Make toggle page to banner on closing
this.bannerContent.classList.toggle("d-none");
this.modalContainer.classList.toggle("d-none");
this.bannerContainer.classList.remove("cn-modal-page");
}
this.unsetTabIndex();
this.setupCookieModalList();
} else {
@ -661,7 +669,7 @@ var CookieNotice = /*#__PURE__*/function () {
// * Only focusable elements
_toConsumableArray(document.body.querySelectorAll(focusableSelector)).filter(function (el) {
return !el.hasAttribute("disabled") && !el.getAttribute("aria-hidden");
return !el.hasAttribute("disabled") && !el.getAttribute("aria-hidden") && !_this9.cookieContainer.contains(el);
}).forEach(function (el) {
el.setAttribute("tabindex", "-1");
el.classList.add("cn-disabled");
@ -669,7 +677,7 @@ var CookieNotice = /*#__PURE__*/function () {
_toConsumableArray(_this9.cookieContainer.querySelectorAll(focusableSelector)).filter(function (el) {
return !el.hasAttribute("disabled") && !el.getAttribute("aria-hidden") &&
// * Only visible elements
!!(el.offsetWidth || el.offsetHeight || el.getClientRects().length);
!!(el.offsetWidth || el.offsetHeight || el.getClientRects().length) && !_this9.cookieContainer.contains(el);
}).forEach(function (el) {
el.setAttribute("tabindex", "0");
el.classList.remove("cn-disabled");
@ -703,6 +711,7 @@ var CookieNotice = /*#__PURE__*/function () {
value: function resetCookieModal() {
this.bannerContent.classList.remove("d-none");
this.modalContainer.classList.add("d-none");
this.bannerContainer.classList.remove("cn-modal-page");
if (!this.customizeBtn.dataset.openModal) {
throw new Error("Cannot find attribut data-open-modal");
}
@ -730,40 +739,46 @@ var CookieNotice = /*#__PURE__*/function () {
var name = cookie.querySelector("span.cn-cookie-name");
var description = cookie.querySelector("span.cn-cookie-description");
var link = cookie.querySelector(".cn-cookie-link");
var acceptInput = cookie.querySelector(".accept > input");
var denyInput = cookie.querySelector(".deny > input");
var acceptLabel = cookie.querySelector(".accept > label");
var denyLabel = cookie.querySelector(".deny > label");
var cnSwitch = cookie.querySelector(".cn-switch");
var cnSwitchInput = cookie.querySelector(".cn-switch > input");
// * Undertermined state
cnSwitchInput.indeterminate = true;
cnSwitchInput.checked = false;
// * Assign cookie aside content
name.textContent = cookieConfig.name;
description.id = "".concat(cookieName, "-desc");
description.textContent = cookieConfig.description;
link.textContent = cookieConfig.labelLink;
link.setAttribute("href", cookieConfig.link);
acceptInput.id = cookieName + "-accept";
acceptInput.name = cookieName;
acceptInput.dataset.name = cookieName;
acceptLabel.htmlFor = cookieName + "-accept";
acceptLabel.textContent = "".concat(acceptLabel.textContent, " ").concat(cookieName);
acceptLabel.title = "".concat(acceptLabel.textContent, " ").concat(cookieName);
denyInput.id = cookieName + "-deny";
denyInput.name = cookieName;
denyInput.dataset.name = cookieName;
denyLabel.htmlFor = cookieName + "-deny";
denyLabel.textContent = "".concat(denyLabel.textContent, " ").concat(cookieName);
denyLabel.title = "".concat(denyLabel.textContent, " ").concat(cookieName);
var acceptFn = function acceptFn() {
acceptLabel.classList.add("active");
denyLabel.classList.remove("active");
_this11.setCookieStatus(cookieName, CookieStatus.true, cookieConfig);
},
denyFn = function denyFn() {
acceptLabel.classList.remove("active");
denyLabel.classList.add("active");
_this11.setCookieStatus(cookieName, CookieStatus.false, cookieConfig);
};
_this11.addEvent(acceptInput, "click", acceptFn);
_this11.addEventKbdValidate(acceptLabel, acceptFn);
_this11.addEvent(denyInput, "click", denyFn);
_this11.addEventKbdValidate(denyLabel, denyFn);
// * Assign cookie controls
cnSwitch.id = "".concat(cookieName, "-switch");
cnSwitch.name = cookieName;
cnSwitch.dataset.name = cookieName;
cnSwitch.setAttribute("aria-labelledby", "".concat(cookieName, "-desc"));
cnSwitch.setAttribute("aria-describedby", "".concat(cookieName, "-desc"));
var toggleCookie = function toggleCookie() {
_this11.setCookieStatus(cookieName, cnSwitch.checked ? CookieStatus.true : CookieStatus.false, cookieConfig);
};
_this11.addEvent(cnSwitch, "click", function () {
toggleCookie();
if (cnSwitchInput.checked) {
cnSwitch.ariaChecked = "true";
} else {
cnSwitch.ariaChecked = "false";
}
});
_this11.addEventKbdValidate(cnSwitch, function () {
toggleCookie();
cnSwitchInput.checked = !cnSwitchInput.checked;
if (cnSwitchInput.checked) {
cnSwitch.ariaChecked = "true";
} else {
cnSwitch.ariaChecked = "false";
}
});
_this11.cookiesUnorderedList.append(cookie);
if (!_this11.hasBrowserCookie()) {
// * Ldcweb cookie is not set.
@ -775,20 +790,37 @@ var CookieNotice = /*#__PURE__*/function () {
ckName = _ref14[0],
cookieStatus = _ref14[1];
if (ckName === cookieName) {
acceptLabel.classList.remove("active");
denyLabel.classList.remove("active");
switch (cookieStatus) {
case CookieStatus.true:
acceptLabel.classList.add("active");
cnSwitchInput.indeterminate = false;
cnSwitchInput.checked = true;
break;
case CookieStatus.false:
denyLabel.classList.add("active");
cnSwitchInput.indeterminate = false;
cnSwitchInput.checked = false;
break;
case CookieStatus.wait:
cnSwitchInput.indeterminate = true;
cnSwitchInput.checked = false;
break;
}
}
});
});
}
}, {
key: "switchToModalPageOrClose",
value: function switchToModalPageOrClose() {
// * Modification du comportement du bouton, même si ca n'a pas de sens.
// https://lab.s-web.fr/ldc-web/projets/ldc-web-cookie-notice/-/issues/9`
if (this.isOnBannerPage()) {
this.toggleCookieModalPages();
return;
}
// * Pas de permutation en arrière
this.closeCookieModal();
}
/**
* Toggle Cookie modal pages
@ -798,7 +830,9 @@ var CookieNotice = /*#__PURE__*/function () {
value: function toggleCookieModalPages() {
this.bannerContent.classList.toggle("d-none");
this.modalContainer.classList.toggle("d-none");
if (!this.modalContainer.classList.contains("d-none")) {
this.bannerContainer.classList.toggle("cn-modal-page");
if (!this.isOnBannerPage()) {
this.bannerContainer.classList.add("cn-modal-page");
this.denyAllWaitingCookies();
}
this.setTabIndex();
@ -822,6 +856,15 @@ var CookieNotice = /*#__PURE__*/function () {
this.customizeBtn.title = customizeBtnBannerDataset.closeModal;
}
}
/**
* Get the actual page: banner or modal (with cookie choices)
*/
}, {
key: "isOnBannerPage",
value: function isOnBannerPage() {
return this.modalContainer.classList.contains("d-none");
}
}]);
}();

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

File diff suppressed because one or more lines are too long