Add Browser build
This commit is contained in:
Jérémy Munsch
parent
9aee788a13
commit
3934d0b6cb
21 changed files with 4726 additions and 2725 deletions
|
|
@ -3,16 +3,19 @@ root = true
|
|||
[*]
|
||||
charset = utf-8
|
||||
end_of_line = lf
|
||||
insert_final_newline = true
|
||||
indent_style = space
|
||||
indent_size = 4
|
||||
indent_style = space
|
||||
insert_final_newline = true
|
||||
trim_trailing_whitespace = true
|
||||
|
||||
[*.md]
|
||||
trim_trailing_whitespace = false
|
||||
|
||||
[*.vue]
|
||||
indent_size = 2
|
||||
|
||||
[*.{yml,yaml}]
|
||||
indent_size = 2
|
||||
|
||||
[docker-compose.yml]
|
||||
indent_size = 4
|
||||
|
||||
[*.vue]
|
||||
indent_size = 2
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
{
|
||||
"extends": [
|
||||
"stylelint-config-prettier",
|
||||
"stylelint-config-standard-scss",
|
||||
"stylelint-config-sass-guidelines",
|
||||
"stylelint-config-idiomatic-order"
|
||||
|
|
@ -18,12 +19,17 @@
|
|||
],
|
||||
"customSyntax": "postcss-scss",
|
||||
"rules": {
|
||||
"indentation": 4,
|
||||
"string-quotes": "double",
|
||||
"selector-max-id": null,
|
||||
"color-no-invalid-hex": true,
|
||||
"order/properties-alphabetical-order": null,
|
||||
"max-nesting-depth": 5,
|
||||
"selector-max-compound-selectors": 5,
|
||||
"declaration-colon-space-after": "always-single-line",
|
||||
"function-parentheses-space-inside": "never-single-line",
|
||||
"declaration-colon-newline-after": null,
|
||||
"value-list-comma-newline-after": null,
|
||||
"scss/double-slash-comment-empty-line-before": [
|
||||
"always",
|
||||
{
|
||||
|
|
|
|||
|
|
@ -21,6 +21,9 @@ Ici pour l'instant seulement un exemple pour **Laravel**.
|
|||
|
||||
[Lien doc Gitlab](https://docs.gitlab.com/ee/user/packages/npm_registry/)
|
||||
|
||||
## Browser
|
||||
- Pour inclure directement dans le navigateur, les fichiers compilés sont dans `dist/browser`.
|
||||
|
||||
### Laravel
|
||||
- Ajouter dans le projet, les fichiers au bon endroit :
|
||||
- [`cn-cookies.blade.php`](./examples/cn-cookies.blade.php) dans le dossier `resources/view/vendor/`
|
||||
|
|
|
|||
446
dist/browser/cookie-cn.css
vendored
Normal file
446
dist/browser/cookie-cn.css
vendored
Normal file
|
|
@ -0,0 +1,446 @@
|
|||
@charset "UTF-8";
|
||||
:root {
|
||||
--cs-primary-color: var();
|
||||
}
|
||||
|
||||
/* Distance par rapport à la gauche de la fenêtre */
|
||||
/* Distance par rapport à la droite de la fenêtre */
|
||||
/* Distance par rapport au bas de la fenêtre */
|
||||
/* Position gauche de base des cookies */
|
||||
/* Position droite de base des cookies */
|
||||
#cn-wrapper {
|
||||
/* Buttons styles start */
|
||||
/* Button styles end */
|
||||
}
|
||||
#cn-wrapper * {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
#cn-wrapper *::before {
|
||||
display: none;
|
||||
}
|
||||
#cn-wrapper button {
|
||||
display: inline-block;
|
||||
padding: 0.2rem 0.5rem;
|
||||
border: 0;
|
||||
margin: 0;
|
||||
appearance: none;
|
||||
background: #b9b9b9;
|
||||
color: #000;
|
||||
cursor: pointer;
|
||||
font-family: "Barlow", sans-serif;
|
||||
font-size: 1rem;
|
||||
line-height: 1;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
transition: background 250ms ease-in-out, transform 150ms ease;
|
||||
}
|
||||
#cn-wrapper button:hover,
|
||||
#cn-wrapper button:focus {
|
||||
background: #a0a0a0;
|
||||
color: #000;
|
||||
}
|
||||
#cn-wrapper button:focus {
|
||||
outline: 1px solid;
|
||||
outline-color: #000;
|
||||
outline-offset: -4px;
|
||||
}
|
||||
#cn-wrapper button:active {
|
||||
transform: scale(0.99);
|
||||
}
|
||||
|
||||
/** 3.0.0 */
|
||||
/* FENETRE D'ACCUEIL */
|
||||
/* Title settings */
|
||||
/* Text settings */
|
||||
/* Button settings */
|
||||
/* Title settings */
|
||||
/* Text settings */
|
||||
/* 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 {
|
||||
display: flex;
|
||||
height: 3rem;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0;
|
||||
background-color: #000;
|
||||
color: #b9b9b9;
|
||||
font-family: "Barlow", sans-serif;
|
||||
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 {
|
||||
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 {
|
||||
outline-color: #000;
|
||||
}
|
||||
|
||||
.cn-modal-bg {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.cn-open .cn-modal-bg {
|
||||
position: fixed;
|
||||
z-index: 1030;
|
||||
top: 0;
|
||||
display: block;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background-color: rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
|
||||
.cn-disabled {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
#cn-wrapper {
|
||||
z-index: 1050;
|
||||
}
|
||||
#cn-wrapper #cn-cookie-btn {
|
||||
position: fixed;
|
||||
right: auto;
|
||||
bottom: 1rem;
|
||||
left: 1rem;
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
padding: 0.5rem;
|
||||
background-color: #fff;
|
||||
border-radius: 100%;
|
||||
box-shadow: 0 0.1rem 1rem rgba(0, 0, 0, 0.35);
|
||||
cursor: pointer;
|
||||
}
|
||||
#cn-wrapper #cn-cookie-btn:focus {
|
||||
outline-color: #d1842a;
|
||||
}
|
||||
#cn-wrapper #cn-cookie-btn-icon path {
|
||||
fill: #dc9c52;
|
||||
}
|
||||
#cn-wrapper #cn-cookie-btn-icon circle {
|
||||
fill: #dc9c52;
|
||||
}
|
||||
#cn-wrapper #cn-banner {
|
||||
position: fixed;
|
||||
z-index: 1050;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
display: flex;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
max-height: 100vh;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
padding: 0;
|
||||
margin: auto;
|
||||
margin-bottom: 0;
|
||||
background-color: #fff;
|
||||
border-radius: 0;
|
||||
box-shadow: 0 0.1rem 1rem rgba(0, 0, 0, 0.35);
|
||||
line-height: initial;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: 0.3s;
|
||||
user-select: none;
|
||||
visibility: hidden;
|
||||
}
|
||||
#cn-wrapper #cn-banner .cn-modal-top-line {
|
||||
align-self: end;
|
||||
}
|
||||
#cn-wrapper #cn-banner .cn-modal-top-line #cn-close-modal {
|
||||
width: 4rem;
|
||||
height: 3rem;
|
||||
border-bottom-left-radius: 0.5rem;
|
||||
}
|
||||
@media (min-width: 535px) {
|
||||
#cn-wrapper #cn-banner .cn-modal-top-line #cn-close-modal {
|
||||
width: 3rem;
|
||||
height: 2rem;
|
||||
border-top-right-radius: 0.5rem;
|
||||
}
|
||||
}
|
||||
#cn-wrapper #cn-banner > * {
|
||||
pointer-events: all;
|
||||
}
|
||||
@media (min-width: 535px) {
|
||||
#cn-wrapper #cn-banner {
|
||||
right: auto;
|
||||
bottom: calc(1rem + 60px);
|
||||
left: 0;
|
||||
width: 30rem;
|
||||
height: auto;
|
||||
max-height: 26rem;
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
}
|
||||
#cn-wrapper #cn-li-template {
|
||||
display: none;
|
||||
}
|
||||
#cn-wrapper .d-none {
|
||||
display: none !important;
|
||||
}
|
||||
#cn-wrapper .cn-content {
|
||||
flex-grow: 1;
|
||||
padding: 0.8rem;
|
||||
overflow-y: auto;
|
||||
}
|
||||
#cn-wrapper .cn-content .cn-banner-content {
|
||||
display: flex;
|
||||
min-height: 100%;
|
||||
flex-direction: column;
|
||||
color: #b9b9b9;
|
||||
font-family: "Barlow", sans-serif;
|
||||
font-size: 14px;
|
||||
}
|
||||
@media (min-width: 535px) {
|
||||
#cn-wrapper .cn-content .cn-banner-content {
|
||||
flex-flow: row wrap;
|
||||
align-items: center;
|
||||
}
|
||||
#cn-wrapper .cn-content .cn-banner-content .cn-banner-img {
|
||||
width: 33%;
|
||||
}
|
||||
#cn-wrapper .cn-content .cn-banner-content .cn-banner-text {
|
||||
width: 66%;
|
||||
}
|
||||
}
|
||||
#cn-wrapper .cn-content .cn-banner-content .cn-banner-img {
|
||||
text-align: center;
|
||||
}
|
||||
#cn-wrapper .cn-content .cn-banner-content .cn-banner-img img {
|
||||
width: 90%;
|
||||
object-fit: contain;
|
||||
}
|
||||
#cn-wrapper .cn-content .cn-banner-content .cn-banner-text {
|
||||
flex: 2;
|
||||
}
|
||||
#cn-wrapper .cn-content .cn-banner-content .cn-banner-text .cn-banner-title {
|
||||
color: #dc9c52;
|
||||
font-family: "Satisfy", sans-serif;
|
||||
font-size: 25px;
|
||||
font-weight: bold;
|
||||
line-height: inherit;
|
||||
text-align: left;
|
||||
}
|
||||
#cn-wrapper .cn-content .cn-banner-content .cn-banner-text .cn-banner-para-p {
|
||||
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-btn-details {
|
||||
width: 100%;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
#cn-wrapper .cn-content .cn-banner-content .cn-banner-btn-details-p {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
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;
|
||||
font-size: 25px;
|
||||
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: 14px;
|
||||
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: 14px;
|
||||
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;
|
||||
}
|
||||
#cn-wrapper .cn-content .cn-modal-container .cn-modal-wrapper ul {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0 20px;
|
||||
list-style: none;
|
||||
}
|
||||
#cn-wrapper .cn-content .cn-modal-container .cn-modal-wrapper .cn-cookie-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 20px;
|
||||
border: 1px solid #e4e4e4;
|
||||
margin: 10px 0;
|
||||
border-radius: 20px;
|
||||
}
|
||||
#cn-wrapper .cn-content .cn-modal-container .cn-modal-wrapper span {
|
||||
color: #dc9c52;
|
||||
font-family: "Barlow", sans-serif;
|
||||
font-size: 14px;
|
||||
}
|
||||
#cn-wrapper .cn-content .cn-modal-container .cn-modal-wrapper a {
|
||||
color: #dc9c52;
|
||||
font-family: "Barlow", sans-serif;
|
||||
font-size: 14px;
|
||||
}
|
||||
#cn-wrapper .cn-content .cn-modal-container .cn-modal-wrapper label {
|
||||
color: #dc9c52;
|
||||
font-family: "Barlow", sans-serif;
|
||||
font-size: 14px;
|
||||
}
|
||||
#cn-wrapper .cn-content .cn-modal-container .cn-cookie-name {
|
||||
color: #dc9c52;
|
||||
}
|
||||
#cn-wrapper .cn-content .cn-modal-container .cn-cookie-infos {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
}
|
||||
#cn-wrapper .cn-content .cn-modal-container .cn-cookie-infos span:first-of-type {
|
||||
font-size: 17.5px;
|
||||
font-weight: bold;
|
||||
}
|
||||
#cn-wrapper .cn-content .cn-modal-container .cn-cookie-infos .cn-cookie-description {
|
||||
color: #b9b9b9;
|
||||
}
|
||||
#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: 100px;
|
||||
padding: 6px 20px;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
transition: color 0.3s;
|
||||
}
|
||||
#cn-wrapper .cn-content .cn-modal-container .cn-cookie-buttons div {
|
||||
display: table;
|
||||
margin: 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: #808080;
|
||||
}
|
||||
#cn-wrapper .cn-content .cn-modal-container .accept label:hover,
|
||||
#cn-wrapper .cn-content .cn-modal-container .accept label:focus {
|
||||
background-color: #278327;
|
||||
}
|
||||
#cn-wrapper .cn-content .cn-modal-container .accept .active {
|
||||
background-color: #3a3;
|
||||
}
|
||||
#cn-wrapper .cn-content .cn-modal-container .deny label:hover,
|
||||
#cn-wrapper .cn-content .cn-modal-container .deny label:focus {
|
||||
background-color: #832727;
|
||||
}
|
||||
#cn-wrapper .cn-content .cn-modal-container .deny .active {
|
||||
background-color: #a33;
|
||||
}
|
||||
#cn-wrapper .cn-content .cn-modal-container .accept input:checked ~ label {
|
||||
background-color: #3a3;
|
||||
}
|
||||
#cn-wrapper .cn-content .cn-modal-container .deny input:checked ~ label {
|
||||
background-color: #a33;
|
||||
}
|
||||
#cn-wrapper .cn-nav {
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
height: 6rem;
|
||||
flex-shrink: 0;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
border-top: 1px solid #808080;
|
||||
}
|
||||
#cn-wrapper .cn-nav #cn-deny-banner {
|
||||
width: 50%;
|
||||
}
|
||||
#cn-wrapper .cn-nav #cn-accept-banner {
|
||||
width: 50%;
|
||||
border-right: 1px solid #808080;
|
||||
border-left: 1px solid #808080;
|
||||
font-weight: bolder;
|
||||
}
|
||||
#cn-wrapper .cn-nav #cn-settings-banner {
|
||||
width: 100%;
|
||||
border-top: 1px solid #808080;
|
||||
}
|
||||
@media (min-width: 535px) {
|
||||
#cn-wrapper .cn-nav {
|
||||
height: 3rem;
|
||||
flex-wrap: initial;
|
||||
border-bottom-left-radius: 0.5rem;
|
||||
border-bottom-right-radius: 0.5rem;
|
||||
}
|
||||
#cn-wrapper .cn-nav #cn-deny-banner {
|
||||
width: 33.33%;
|
||||
}
|
||||
#cn-wrapper .cn-nav #cn-accept-banner {
|
||||
width: 33.33%;
|
||||
}
|
||||
#cn-wrapper .cn-nav #cn-settings-banner {
|
||||
width: 33.33%;
|
||||
border-top: initial;
|
||||
}
|
||||
}
|
||||
@media (min-width: 535px) {
|
||||
#cn-wrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.cn-open {
|
||||
overflow: hidden !important;
|
||||
}
|
||||
.cn-open #cn-wrapper #cn-banner {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
@media (min-width: 535px) {
|
||||
.cn-open #cn-wrapper #cn-banner {
|
||||
right: auto;
|
||||
left: 1rem;
|
||||
}
|
||||
}
|
||||
1
dist/browser/cookie-cn.js
vendored
Normal file
1
dist/browser/cookie-cn.js
vendored
Normal file
File diff suppressed because one or more lines are too long
7
dist/browser/typings/ts/export/global.d.ts
vendored
Normal file
7
dist/browser/typings/ts/export/global.d.ts
vendored
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
import CookieNotice from "./../index";
|
||||
import "./../../scss/themes/standard.scss";
|
||||
declare global {
|
||||
interface Window {
|
||||
CookieNotice: typeof CookieNotice;
|
||||
}
|
||||
}
|
||||
220
dist/browser/typings/ts/index.d.ts
vendored
Normal file
220
dist/browser/typings/ts/index.d.ts
vendored
Normal file
|
|
@ -0,0 +1,220 @@
|
|||
export default class CookieNotice {
|
||||
browserCookieName: string;
|
||||
cookiePolicies: CookiePolicy;
|
||||
config: Record<string, CookieOptions>;
|
||||
modalBg: HTMLDivElement;
|
||||
cookieContainer: HTMLDivElement;
|
||||
bannerContainer: HTMLDivElement;
|
||||
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;
|
||||
cookiesUnorderedList: HTMLUListElement;
|
||||
cookieLinkShowCustomizeModalList: NodeListOf<HTMLAnchorElement>;
|
||||
modalWrapper: HTMLDivElement;
|
||||
template: HTMLDivElement;
|
||||
bannerDetailsAreExpanded: boolean;
|
||||
static noConflict: (deep: boolean) => typeof CookieNotice;
|
||||
constructor(config: Record<string, CookieOptions>);
|
||||
/**
|
||||
* Check if the actual cookie matches the config
|
||||
*/
|
||||
cookiesMatchesConfig(): boolean;
|
||||
/**
|
||||
* Accept a specific cookie
|
||||
*/
|
||||
acceptAllCookies(): void;
|
||||
/**
|
||||
* Deny a specific cookie
|
||||
*/
|
||||
denyAllCookies(): void;
|
||||
/**
|
||||
* Fetch the cookie status list
|
||||
*
|
||||
* @returns the cookie status list
|
||||
*/
|
||||
getCookieStatusList(): CookieStatusList;
|
||||
/**
|
||||
* Check has cookie status
|
||||
*
|
||||
* @param key
|
||||
* @param value
|
||||
*/
|
||||
containsCookieStatus(key: string): boolean;
|
||||
/**
|
||||
* Set the cookie value
|
||||
*
|
||||
* @param cookieName
|
||||
* @param status
|
||||
* @param cookieOption
|
||||
*/
|
||||
setCookieStatus(cookieName: string, status: CookieStatus, cookieOption: CookieOptions): void;
|
||||
/**
|
||||
* Add a specific cookie and
|
||||
* change his status to true
|
||||
*
|
||||
* @param cookieName
|
||||
* @param cookieOption
|
||||
*/
|
||||
addCookieStatus(cookieName: string, cookieOption: CookieOptions): void;
|
||||
/**
|
||||
* Remove a specific cookie and
|
||||
* change his status to false
|
||||
*
|
||||
* @param cookieName
|
||||
* @param cookieOption
|
||||
*/
|
||||
removeCookieStatus(cookieName: string, cookieOption: CookieOptions): void;
|
||||
/**
|
||||
* Change the status of a cookie
|
||||
*
|
||||
* @param cookieName
|
||||
* @param status
|
||||
*/
|
||||
setBrowserCookieStatus(cookieName: string, status: CookieStatus): void;
|
||||
/**
|
||||
* Has CN cokie setup ?
|
||||
* @returns true if the cookie is setup
|
||||
*/
|
||||
hasBrowserCookie(): boolean;
|
||||
/**
|
||||
* Get the Ldcweb cookie
|
||||
*
|
||||
* @returns A string like analytics=true,youtube=true or undefined
|
||||
*/
|
||||
getBrowserCookieValue(): string | undefined;
|
||||
/**
|
||||
* Save cookie content on web browser
|
||||
*
|
||||
* @param list
|
||||
*/
|
||||
saveBrowserCookie(statusList: CookieStatusList): void;
|
||||
/**
|
||||
* Set an older expire parameter to a specific cookie
|
||||
*/
|
||||
deleteBrowserCookie(): void;
|
||||
getCookiePoliciesAsString(): string;
|
||||
/**
|
||||
* Reset Ldc Web CN cookie
|
||||
*/
|
||||
resetBrowserCookie(): void;
|
||||
/**
|
||||
* Add event on a specific element
|
||||
*
|
||||
* @param element
|
||||
* @param evnt
|
||||
* @param funct
|
||||
* @returns
|
||||
*/
|
||||
addEvent(element: HTMLElement, evnt: string, funct: (e: Event) => void): void;
|
||||
/**
|
||||
* Add event on a specific element and prevent default
|
||||
*
|
||||
* @param element
|
||||
* @param evnt
|
||||
* @param funct
|
||||
* @returns
|
||||
*/
|
||||
addEventPrevent(element: HTMLElement, evnt: string, funct: (e: Event) => void): void;
|
||||
/**
|
||||
* Add event on a specific element
|
||||
*
|
||||
* @param element
|
||||
* @param evnt
|
||||
* @param funct
|
||||
* @returns
|
||||
*/
|
||||
addEventKbdValidate(element: HTMLElement, funct: (e: Event) => void): void;
|
||||
/**
|
||||
* Show or hide Cookie modal
|
||||
* @returns
|
||||
*/
|
||||
toggleCookieModal(): void;
|
||||
/**
|
||||
* Open the cookies modal to the banner page
|
||||
*/
|
||||
openCookieModalToBannerPage(): void;
|
||||
/**
|
||||
* Open the cookies modal to the cookies page
|
||||
*/
|
||||
openCookieModalToCookiePage(): void;
|
||||
/**
|
||||
* Hide the cookies modal
|
||||
*/
|
||||
closeCookieModal(): void;
|
||||
/**
|
||||
* Setup tab indexes on visible elements
|
||||
*/
|
||||
setTabIndex(): void;
|
||||
/**
|
||||
* Undo setup tab indexes on visible elements
|
||||
*/
|
||||
unsetTabIndex(): void;
|
||||
/**
|
||||
* Reset the modal view state
|
||||
*/
|
||||
resetCookieModal(): void;
|
||||
/**
|
||||
* Set the cookies list in the modal
|
||||
*/
|
||||
setupCookieModalList(): void;
|
||||
/**
|
||||
* Toggle show hide banner details
|
||||
*/
|
||||
toggleBannerDetails(): void;
|
||||
/**
|
||||
* Toggle Cookie modal pages
|
||||
*/
|
||||
toggleCookieModalPages(): void;
|
||||
/**
|
||||
* Toggle customize btn
|
||||
*/
|
||||
togglePersonalizeBtn(): void;
|
||||
}
|
||||
declare enum CookieStatus {
|
||||
true = "true",
|
||||
false = "false",
|
||||
wait = "wait"
|
||||
}
|
||||
type CookieStatusList = Record<string, keyof typeof CookieStatus>;
|
||||
type CookiePolicy = {
|
||||
sameSite: CookiePolicySameSite;
|
||||
secure: string;
|
||||
};
|
||||
declare enum CookiePolicySameSite {
|
||||
lax = "lax",
|
||||
strict = "strict",
|
||||
none = "none"
|
||||
}
|
||||
export type CookieOptions = {
|
||||
name: string;
|
||||
description: string;
|
||||
link: string;
|
||||
labelLink: string;
|
||||
cookies: string[];
|
||||
/**
|
||||
* Fonction qui sert à initialiser la fonctionnalité
|
||||
* conduisant à la génération du cookie
|
||||
* @return void
|
||||
*/
|
||||
script: () => void;
|
||||
/**
|
||||
* Fonction qui sert à informer l'utilisateur
|
||||
* sur chaque élèment que le cookie
|
||||
* associé à la fonctionnalité
|
||||
* est désactivé et propose un lien sur
|
||||
* cookie notice pour l'activer
|
||||
* @return void
|
||||
*/
|
||||
fallback: () => void | null;
|
||||
};
|
||||
export {};
|
||||
10
dist/esm/ts/export/global.js
vendored
Normal file
10
dist/esm/ts/export/global.js
vendored
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
import CookieNotice from "./../index";
|
||||
import "./../../scss/themes/standard.scss";
|
||||
const // Map over CookieNotice in case of overwrite
|
||||
_CookieNotice = window.CookieNotice;
|
||||
CookieNotice.noConflict = function (deep) {
|
||||
if (deep && window.CookieNotice === CookieNotice) {
|
||||
window.CookieNotice = _CookieNotice;
|
||||
}
|
||||
return CookieNotice;
|
||||
};
|
||||
594
dist/esm/ts/index.js
vendored
Normal file
594
dist/esm/ts/index.js
vendored
Normal file
|
|
@ -0,0 +1,594 @@
|
|||
export default class CookieNotice {
|
||||
constructor(config) {
|
||||
this.browserCookieName = "cn-init";
|
||||
this.cookiePolicies = {
|
||||
sameSite: CookiePolicySameSite.lax,
|
||||
secure: "",
|
||||
};
|
||||
// * Setup Config
|
||||
this.config = config;
|
||||
// * Inject DOM modal BG
|
||||
const modalBg = document.createElement("div");
|
||||
modalBg.classList.add("cn-modal-bg");
|
||||
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("a.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");
|
||||
if (!cookieContainer) {
|
||||
throw new Error("Cannot find div#cn-wrapper");
|
||||
}
|
||||
if (!cookieShowModalBtn) {
|
||||
throw new Error("Cannot find 'button#cn-cookie-btn' element");
|
||||
}
|
||||
if (!cookieCloseModalBtn) {
|
||||
throw new Error("Cannot find 'button#cn-close-modal' element");
|
||||
}
|
||||
if (!bannerContainer) {
|
||||
throw new Error("Cannot find 'div#cn-banner' element");
|
||||
}
|
||||
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");
|
||||
}
|
||||
if (!acceptAllBtn) {
|
||||
throw new Error("Cannot find 'button#cn-accept-banner' element");
|
||||
}
|
||||
if (!denyAllBtn) {
|
||||
throw new Error("Cannot find 'button#cn-deny-banner' element");
|
||||
}
|
||||
if (!customizeBtn) {
|
||||
throw new Error("Cannot find 'button.cn-settings-banner' element");
|
||||
}
|
||||
if (!cookiesUnorderedList) {
|
||||
throw new Error("Cannot find 'ul#cn-modal-list' element");
|
||||
}
|
||||
if (!modalWrapper) {
|
||||
throw new Error("Cannot find 'div.cn-modal-wrapper' element");
|
||||
}
|
||||
if (!template) {
|
||||
throw new Error("Cannot find 'div#cn-li-template' element");
|
||||
}
|
||||
this.cookieShowModalBtn = cookieShowModalBtn;
|
||||
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;
|
||||
this.customizeBtn = customizeBtn;
|
||||
this.bannerDetailsAreExpanded = false;
|
||||
this.template = template;
|
||||
const memoryTemplate = this.template.cloneNode(true);
|
||||
this.template.remove();
|
||||
this.template = memoryTemplate;
|
||||
// * Setup Events
|
||||
this.addEventPrevent(this.modalBg, "click", this.closeCookieModal);
|
||||
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.bannerDetailsCollapseBtn, "click", this.toggleBannerDetails);
|
||||
this.addEventPrevent(this.cookieShowModalBtn, "click", this.toggleCookieModal);
|
||||
this.cookieLinkShowCustomizeModalList.forEach((cookieLink) => {
|
||||
this.addEventPrevent(cookieLink, "click", this.openCookieModalToCookiePage);
|
||||
});
|
||||
// * Setup CN Cookie
|
||||
if (!this.cookiesMatchesConfig()) {
|
||||
// * Setup Browser Cookie if none.
|
||||
this.resetBrowserCookie();
|
||||
this.openCookieModalToBannerPage();
|
||||
}
|
||||
// * Cookie should have been created from here.
|
||||
const cookies = this.getCookieStatusList();
|
||||
Object.entries(cookies).forEach(([cookieName, cookieStatus]) => {
|
||||
if (cookieStatus === CookieStatus.wait) {
|
||||
// * Open modal if any cookie config is not set.
|
||||
this.openCookieModalToBannerPage();
|
||||
return;
|
||||
}
|
||||
if (!this.config[cookieName]) {
|
||||
// * Ignore missing config
|
||||
return;
|
||||
}
|
||||
if (cookieStatus === CookieStatus.true) {
|
||||
// * Exec script part for accepted cookie.
|
||||
this.config[cookieName].script();
|
||||
return;
|
||||
}
|
||||
if (this.config[cookieName].fallback != null) {
|
||||
// * Exec fallback part for accepted cookie if provided.
|
||||
this.config[cookieName].fallback();
|
||||
}
|
||||
});
|
||||
}
|
||||
// COOKIES
|
||||
/**
|
||||
* Check if the actual cookie matches the config
|
||||
*/
|
||||
cookiesMatchesConfig() {
|
||||
const cookies = this.getCookieStatusList();
|
||||
return Object.keys(cookies).length === Object.keys(this.config).length;
|
||||
}
|
||||
/**
|
||||
* Accept a specific cookie
|
||||
*/
|
||||
acceptAllCookies() {
|
||||
Object.entries(this.config).forEach(([cookieName, cookieOption]) => this.setCookieStatus(cookieName, CookieStatus.true, cookieOption));
|
||||
for (const acceptLabel of this.cookieContainer.querySelectorAll(".accept > label")) {
|
||||
acceptLabel.classList.add("active");
|
||||
}
|
||||
for (const denyLabel of this.cookieContainer.querySelectorAll(".deny > label")) {
|
||||
denyLabel.classList.remove("active");
|
||||
}
|
||||
this.closeCookieModal();
|
||||
}
|
||||
/**
|
||||
* Deny a specific cookie
|
||||
*/
|
||||
denyAllCookies() {
|
||||
Object.entries(this.config).forEach(([cookieName, cookieOption]) => this.setCookieStatus(cookieName, CookieStatus.false, cookieOption));
|
||||
for (const acceptLabel of this.cookieContainer.querySelectorAll(".accept > label")) {
|
||||
acceptLabel.classList.remove("active");
|
||||
}
|
||||
for (const denyLabel of this.cookieContainer.querySelectorAll(".deny > label")) {
|
||||
denyLabel.classList.add("active");
|
||||
}
|
||||
this.closeCookieModal();
|
||||
}
|
||||
/**
|
||||
* Fetch the cookie status list
|
||||
*
|
||||
* @returns the cookie status list
|
||||
*/
|
||||
getCookieStatusList() {
|
||||
const cookies = this.getBrowserCookieValue(), statusList = {};
|
||||
if (cookies === undefined) {
|
||||
return statusList;
|
||||
}
|
||||
/** specificCookieString contains youtube=true like */
|
||||
cookies.split(",").forEach((specificCookieString) => {
|
||||
const values = specificCookieString.split("=");
|
||||
statusList[values[0]] = values[1];
|
||||
});
|
||||
return statusList;
|
||||
}
|
||||
/**
|
||||
* Check has cookie status
|
||||
*
|
||||
* @param key
|
||||
* @param value
|
||||
*/
|
||||
containsCookieStatus(key) {
|
||||
const statusList = this.getCookieStatusList();
|
||||
return (Object.keys(statusList).find((cookieName) => cookieName === key) !==
|
||||
undefined);
|
||||
}
|
||||
/**
|
||||
* Set the cookie value
|
||||
*
|
||||
* @param cookieName
|
||||
* @param status
|
||||
* @param cookieOption
|
||||
*/
|
||||
setCookieStatus(cookieName, status, cookieOption) {
|
||||
if (status === CookieStatus.true) {
|
||||
this.addCookieStatus(cookieName, cookieOption);
|
||||
return;
|
||||
}
|
||||
if (status === CookieStatus.false) {
|
||||
this.removeCookieStatus(cookieName, cookieOption);
|
||||
return;
|
||||
}
|
||||
this.setBrowserCookieStatus(cookieName, CookieStatus.wait);
|
||||
}
|
||||
/**
|
||||
* Add a specific cookie and
|
||||
* change his status to true
|
||||
*
|
||||
* @param cookieName
|
||||
* @param cookieOption
|
||||
*/
|
||||
addCookieStatus(cookieName, cookieOption) {
|
||||
if (cookieOption.script) {
|
||||
cookieOption.script();
|
||||
}
|
||||
this.setBrowserCookieStatus(cookieName, CookieStatus.true);
|
||||
}
|
||||
/**
|
||||
* Remove a specific cookie and
|
||||
* change his status to false
|
||||
*
|
||||
* @param cookieName
|
||||
* @param cookieOption
|
||||
*/
|
||||
removeCookieStatus(cookieName, cookieOption) {
|
||||
const cookieNameElement = document.getElementById(cookieName);
|
||||
if (cookieNameElement) {
|
||||
cookieNameElement.remove();
|
||||
}
|
||||
if (cookieOption.fallback) {
|
||||
cookieOption.fallback();
|
||||
}
|
||||
this.setBrowserCookieStatus(cookieName, CookieStatus.false);
|
||||
}
|
||||
/**
|
||||
* Change the status of a cookie
|
||||
*
|
||||
* @param cookieName
|
||||
* @param status
|
||||
*/
|
||||
setBrowserCookieStatus(cookieName, status) {
|
||||
const statusList = this.getCookieStatusList();
|
||||
// * Force refresh
|
||||
this.deleteBrowserCookie();
|
||||
statusList[cookieName] = status;
|
||||
this.saveBrowserCookie(statusList);
|
||||
}
|
||||
/**
|
||||
* Has CN cokie setup ?
|
||||
* @returns true if the cookie is setup
|
||||
*/
|
||||
hasBrowserCookie() {
|
||||
return Boolean(this.getBrowserCookieValue());
|
||||
}
|
||||
/**
|
||||
* Get the Ldcweb cookie
|
||||
*
|
||||
* @returns A string like analytics=true,youtube=true or undefined
|
||||
*/
|
||||
getBrowserCookieValue() {
|
||||
const matches = document.cookie.match(new RegExp("(?:^|; )" +
|
||||
this.browserCookieName.replace(/([.$?*|{}()[\]\\/+^])/g, "\\$1") +
|
||||
"=([^;]*)"));
|
||||
return matches ? decodeURIComponent(matches[1]) : undefined;
|
||||
}
|
||||
/**
|
||||
* Save cookie content on web browser
|
||||
*
|
||||
* @param list
|
||||
*/
|
||||
saveBrowserCookie(statusList) {
|
||||
const date = new Date(), newDate = new Date(date.setMonth(date.getMonth() + 13)), content = Object.entries(statusList)
|
||||
.map(([cookieName, cookieStatus]) => {
|
||||
return `${cookieName}=${cookieStatus}`;
|
||||
})
|
||||
.join(",");
|
||||
document.cookie = `${this.browserCookieName}=${content};path=/${location.hostname ? `;domain=${location.hostname}` : ""};expires=${newDate.toUTCString()};${this.getCookiePoliciesAsString()}`;
|
||||
}
|
||||
/**
|
||||
* Set an older expire parameter to a specific cookie
|
||||
*/
|
||||
deleteBrowserCookie() {
|
||||
if (this.hasBrowserCookie()) {
|
||||
// * Suppression du cookie et de sa version precedé d'un point
|
||||
document.cookie = `${this.browserCookieName}=;path=/${location.hostname ? `;domain=.${location.hostname}` : ""};expires=Thu, 01 Jan 1970 00:00:01 GMT;${this.getCookiePoliciesAsString()}`;
|
||||
document.cookie = `${this.browserCookieName}=;path=/${location.hostname ? `;domain=${location.hostname}` : ""};expires=Thu, 01 Jan 1970 00:00:01 GMT;${this.getCookiePoliciesAsString()}`;
|
||||
}
|
||||
}
|
||||
getCookiePoliciesAsString() {
|
||||
return Object.entries(this.cookiePolicies)
|
||||
.map(([policyName, policyValue]) => `${policyName}=${policyValue}`)
|
||||
.join(";");
|
||||
}
|
||||
/**
|
||||
* Reset Ldc Web CN cookie
|
||||
*/
|
||||
resetBrowserCookie() {
|
||||
// * Create Cookie as It does not exists.
|
||||
const newCookieList = {};
|
||||
Object.entries(this.config).forEach(([cookieName]) => (newCookieList[cookieName] = CookieStatus.wait));
|
||||
this.saveBrowserCookie(newCookieList);
|
||||
}
|
||||
// LISTENERS
|
||||
/**
|
||||
* Add event on a specific element
|
||||
*
|
||||
* @param element
|
||||
* @param evnt
|
||||
* @param funct
|
||||
* @returns
|
||||
*/
|
||||
addEvent(element, evnt, funct) {
|
||||
return element.addEventListener(evnt, funct.bind(this), false);
|
||||
}
|
||||
/**
|
||||
* Add event on a specific element and prevent default
|
||||
*
|
||||
* @param element
|
||||
* @param evnt
|
||||
* @param funct
|
||||
* @returns
|
||||
*/
|
||||
addEventPrevent(element, evnt, funct) {
|
||||
return element.addEventListener(evnt, (e) => {
|
||||
e.preventDefault();
|
||||
funct.call(this, e);
|
||||
}, false);
|
||||
}
|
||||
/**
|
||||
* Add event on a specific element
|
||||
*
|
||||
* @param element
|
||||
* @param evnt
|
||||
* @param funct
|
||||
* @returns
|
||||
*/
|
||||
addEventKbdValidate(element, funct) {
|
||||
return this.addEvent(element, "keyup", (e) => {
|
||||
const kbdEvt = e;
|
||||
if (kbdEvt.key == " " ||
|
||||
kbdEvt.code == "Space" ||
|
||||
kbdEvt.keyCode == 32 ||
|
||||
kbdEvt.key == "Enter" ||
|
||||
kbdEvt.code == "Enter" ||
|
||||
kbdEvt.keyCode == 13) {
|
||||
funct.call(this, kbdEvt);
|
||||
}
|
||||
});
|
||||
}
|
||||
// COOKIE MODAL
|
||||
/**
|
||||
* Show or hide Cookie modal
|
||||
* @returns
|
||||
*/
|
||||
toggleCookieModal() {
|
||||
if (!document.body.classList.contains("cn-open")) {
|
||||
this.openCookieModalToBannerPage();
|
||||
return;
|
||||
}
|
||||
this.closeCookieModal();
|
||||
}
|
||||
/**
|
||||
* Open the cookies modal to the banner page
|
||||
*/
|
||||
openCookieModalToBannerPage() {
|
||||
this.openCookieModalToCookiePage();
|
||||
this.toggleCookieModalPages();
|
||||
}
|
||||
/**
|
||||
* Open the cookies modal to the cookies page
|
||||
*/
|
||||
openCookieModalToCookiePage() {
|
||||
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;
|
||||
this.setupCookieModalList();
|
||||
this.setTabIndex();
|
||||
}
|
||||
/**
|
||||
* Hide the cookies modal
|
||||
*/
|
||||
closeCookieModal() {
|
||||
document.body.classList.remove("cn-open");
|
||||
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.unsetTabIndex();
|
||||
this.setupCookieModalList();
|
||||
}
|
||||
/**
|
||||
* Setup tab indexes on visible elements
|
||||
*/
|
||||
setTabIndex() {
|
||||
// * Prevent focus html tag
|
||||
document.documentElement.setAttribute("tabindex", "-1");
|
||||
setTimeout(() => {
|
||||
const focusableSelector = "a[href], button, [role=\"button\"], input, embed, object, iframe, textarea, select, details, [tabindex]:not([tabindex=\"-1\"])";
|
||||
// * Only focusable elements
|
||||
[...document.body.querySelectorAll(focusableSelector)]
|
||||
.filter((el) => !el.hasAttribute("disabled") &&
|
||||
!el.getAttribute("aria-hidden"))
|
||||
.forEach((el) => {
|
||||
el.setAttribute("tabindex", "-1");
|
||||
el.classList.add("cn-disabled");
|
||||
});
|
||||
[...this.cookieContainer.querySelectorAll(focusableSelector)]
|
||||
.filter((el) => !el.hasAttribute("disabled") &&
|
||||
!el.getAttribute("aria-hidden") &&
|
||||
// * Only visible elements
|
||||
!!(el.offsetWidth ||
|
||||
el.offsetHeight ||
|
||||
el.getClientRects().length))
|
||||
.forEach((el) => {
|
||||
el.setAttribute("tabindex", "0");
|
||||
el.classList.remove("cn-disabled");
|
||||
});
|
||||
this.cookieShowModalBtn.setAttribute("tabindex", "-1");
|
||||
}, 500);
|
||||
}
|
||||
/**
|
||||
* Undo setup tab indexes on visible elements
|
||||
*/
|
||||
unsetTabIndex() {
|
||||
document.documentElement.setAttribute("tabindex", "0");
|
||||
setTimeout(() => {
|
||||
document.body.querySelectorAll(".cn-disabled").forEach((el) => {
|
||||
el.setAttribute("tabindex", "0");
|
||||
el.classList.remove("cn-disabled");
|
||||
});
|
||||
this.cookieShowModalBtn.setAttribute("tabindex", "0");
|
||||
}, 500);
|
||||
}
|
||||
/**
|
||||
* Reset the modal view state
|
||||
*/
|
||||
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");
|
||||
}
|
||||
this.customizeBtn.innerHTML = this.customizeBtn.dataset.openModal;
|
||||
}
|
||||
/**
|
||||
* Set the cookies list in the modal
|
||||
*/
|
||||
setupCookieModalList() {
|
||||
this.cookiesUnorderedList.innerHTML = "";
|
||||
Object.entries(this.config).forEach(([cookieName, cookieConfig]) => {
|
||||
const cookie = document.createElement("li");
|
||||
const childItem = this.template.children.item(0);
|
||||
if (childItem === null) {
|
||||
throw new Error("Cannot find child item");
|
||||
}
|
||||
cookie.append(childItem.cloneNode(true));
|
||||
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");
|
||||
name.textContent = cookieConfig.name;
|
||||
description.textContent = cookieConfig.description;
|
||||
link.textContent = cookieConfig.labelLink;
|
||||
link.setAttribute("href", cookieConfig.link);
|
||||
acceptInput.id = cookieName + "1";
|
||||
acceptInput.name = cookieName;
|
||||
acceptInput.dataset.name = cookieName;
|
||||
acceptLabel.htmlFor = cookieName + "1";
|
||||
denyInput.id = cookieName + "2";
|
||||
denyInput.name = cookieName;
|
||||
denyInput.dataset.name = cookieName;
|
||||
denyLabel.htmlFor = cookieName + "2";
|
||||
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);
|
||||
};
|
||||
this.addEvent(acceptInput, "click", acceptFn);
|
||||
this.addEventKbdValidate(acceptLabel, acceptFn);
|
||||
this.addEvent(denyInput, "click", denyFn);
|
||||
this.addEventKbdValidate(denyLabel, denyFn);
|
||||
this.cookiesUnorderedList.append(cookie);
|
||||
if (!this.hasBrowserCookie()) {
|
||||
// * Ldcweb cookie is not set.
|
||||
return;
|
||||
}
|
||||
// * 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");
|
||||
break;
|
||||
case CookieStatus.false:
|
||||
denyLabel.classList.add("active");
|
||||
break;
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
/**
|
||||
* 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.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.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();
|
||||
this.togglePersonalizeBtn();
|
||||
}
|
||||
/**
|
||||
* Toggle customize btn
|
||||
*/
|
||||
togglePersonalizeBtn() {
|
||||
const customizeBtnBannerDataset = this.customizeBtn.dataset;
|
||||
this.modalWrapper.scrollTop = 0;
|
||||
if (this.bannerContent.classList.contains("d-none")) {
|
||||
this.customizeBtn.innerHTML =
|
||||
customizeBtnBannerDataset.openModal;
|
||||
}
|
||||
else {
|
||||
this.customizeBtn.innerHTML =
|
||||
customizeBtnBannerDataset.closeModal;
|
||||
}
|
||||
}
|
||||
}
|
||||
var CookieStatus;
|
||||
(function (CookieStatus) {
|
||||
CookieStatus["true"] = "true";
|
||||
CookieStatus["false"] = "false";
|
||||
CookieStatus["wait"] = "wait";
|
||||
})(CookieStatus || (CookieStatus = {}));
|
||||
var CookiePolicySameSite;
|
||||
(function (CookiePolicySameSite) {
|
||||
CookiePolicySameSite["lax"] = "lax";
|
||||
CookiePolicySameSite["strict"] = "strict";
|
||||
CookiePolicySameSite["none"] = "none";
|
||||
})(CookiePolicySameSite || (CookiePolicySameSite = {}));
|
||||
7
dist/typings/ts/export/global.d.ts
vendored
Normal file
7
dist/typings/ts/export/global.d.ts
vendored
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
import CookieNotice from "./../index";
|
||||
import "./../../scss/themes/standard.scss";
|
||||
declare global {
|
||||
interface Window {
|
||||
CookieNotice: typeof CookieNotice;
|
||||
}
|
||||
}
|
||||
220
dist/typings/ts/index.d.ts
vendored
Normal file
220
dist/typings/ts/index.d.ts
vendored
Normal file
|
|
@ -0,0 +1,220 @@
|
|||
export default class CookieNotice {
|
||||
browserCookieName: string;
|
||||
cookiePolicies: CookiePolicy;
|
||||
config: Record<string, CookieOptions>;
|
||||
modalBg: HTMLDivElement;
|
||||
cookieContainer: HTMLDivElement;
|
||||
bannerContainer: HTMLDivElement;
|
||||
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;
|
||||
cookiesUnorderedList: HTMLUListElement;
|
||||
cookieLinkShowCustomizeModalList: NodeListOf<HTMLAnchorElement>;
|
||||
modalWrapper: HTMLDivElement;
|
||||
template: HTMLDivElement;
|
||||
bannerDetailsAreExpanded: boolean;
|
||||
static noConflict: (deep: boolean) => typeof CookieNotice;
|
||||
constructor(config: Record<string, CookieOptions>);
|
||||
/**
|
||||
* Check if the actual cookie matches the config
|
||||
*/
|
||||
cookiesMatchesConfig(): boolean;
|
||||
/**
|
||||
* Accept a specific cookie
|
||||
*/
|
||||
acceptAllCookies(): void;
|
||||
/**
|
||||
* Deny a specific cookie
|
||||
*/
|
||||
denyAllCookies(): void;
|
||||
/**
|
||||
* Fetch the cookie status list
|
||||
*
|
||||
* @returns the cookie status list
|
||||
*/
|
||||
getCookieStatusList(): CookieStatusList;
|
||||
/**
|
||||
* Check has cookie status
|
||||
*
|
||||
* @param key
|
||||
* @param value
|
||||
*/
|
||||
containsCookieStatus(key: string): boolean;
|
||||
/**
|
||||
* Set the cookie value
|
||||
*
|
||||
* @param cookieName
|
||||
* @param status
|
||||
* @param cookieOption
|
||||
*/
|
||||
setCookieStatus(cookieName: string, status: CookieStatus, cookieOption: CookieOptions): void;
|
||||
/**
|
||||
* Add a specific cookie and
|
||||
* change his status to true
|
||||
*
|
||||
* @param cookieName
|
||||
* @param cookieOption
|
||||
*/
|
||||
addCookieStatus(cookieName: string, cookieOption: CookieOptions): void;
|
||||
/**
|
||||
* Remove a specific cookie and
|
||||
* change his status to false
|
||||
*
|
||||
* @param cookieName
|
||||
* @param cookieOption
|
||||
*/
|
||||
removeCookieStatus(cookieName: string, cookieOption: CookieOptions): void;
|
||||
/**
|
||||
* Change the status of a cookie
|
||||
*
|
||||
* @param cookieName
|
||||
* @param status
|
||||
*/
|
||||
setBrowserCookieStatus(cookieName: string, status: CookieStatus): void;
|
||||
/**
|
||||
* Has CN cokie setup ?
|
||||
* @returns true if the cookie is setup
|
||||
*/
|
||||
hasBrowserCookie(): boolean;
|
||||
/**
|
||||
* Get the Ldcweb cookie
|
||||
*
|
||||
* @returns A string like analytics=true,youtube=true or undefined
|
||||
*/
|
||||
getBrowserCookieValue(): string | undefined;
|
||||
/**
|
||||
* Save cookie content on web browser
|
||||
*
|
||||
* @param list
|
||||
*/
|
||||
saveBrowserCookie(statusList: CookieStatusList): void;
|
||||
/**
|
||||
* Set an older expire parameter to a specific cookie
|
||||
*/
|
||||
deleteBrowserCookie(): void;
|
||||
getCookiePoliciesAsString(): string;
|
||||
/**
|
||||
* Reset Ldc Web CN cookie
|
||||
*/
|
||||
resetBrowserCookie(): void;
|
||||
/**
|
||||
* Add event on a specific element
|
||||
*
|
||||
* @param element
|
||||
* @param evnt
|
||||
* @param funct
|
||||
* @returns
|
||||
*/
|
||||
addEvent(element: HTMLElement, evnt: string, funct: (e: Event) => void): void;
|
||||
/**
|
||||
* Add event on a specific element and prevent default
|
||||
*
|
||||
* @param element
|
||||
* @param evnt
|
||||
* @param funct
|
||||
* @returns
|
||||
*/
|
||||
addEventPrevent(element: HTMLElement, evnt: string, funct: (e: Event) => void): void;
|
||||
/**
|
||||
* Add event on a specific element
|
||||
*
|
||||
* @param element
|
||||
* @param evnt
|
||||
* @param funct
|
||||
* @returns
|
||||
*/
|
||||
addEventKbdValidate(element: HTMLElement, funct: (e: Event) => void): void;
|
||||
/**
|
||||
* Show or hide Cookie modal
|
||||
* @returns
|
||||
*/
|
||||
toggleCookieModal(): void;
|
||||
/**
|
||||
* Open the cookies modal to the banner page
|
||||
*/
|
||||
openCookieModalToBannerPage(): void;
|
||||
/**
|
||||
* Open the cookies modal to the cookies page
|
||||
*/
|
||||
openCookieModalToCookiePage(): void;
|
||||
/**
|
||||
* Hide the cookies modal
|
||||
*/
|
||||
closeCookieModal(): void;
|
||||
/**
|
||||
* Setup tab indexes on visible elements
|
||||
*/
|
||||
setTabIndex(): void;
|
||||
/**
|
||||
* Undo setup tab indexes on visible elements
|
||||
*/
|
||||
unsetTabIndex(): void;
|
||||
/**
|
||||
* Reset the modal view state
|
||||
*/
|
||||
resetCookieModal(): void;
|
||||
/**
|
||||
* Set the cookies list in the modal
|
||||
*/
|
||||
setupCookieModalList(): void;
|
||||
/**
|
||||
* Toggle show hide banner details
|
||||
*/
|
||||
toggleBannerDetails(): void;
|
||||
/**
|
||||
* Toggle Cookie modal pages
|
||||
*/
|
||||
toggleCookieModalPages(): void;
|
||||
/**
|
||||
* Toggle customize btn
|
||||
*/
|
||||
togglePersonalizeBtn(): void;
|
||||
}
|
||||
declare enum CookieStatus {
|
||||
true = "true",
|
||||
false = "false",
|
||||
wait = "wait"
|
||||
}
|
||||
type CookieStatusList = Record<string, keyof typeof CookieStatus>;
|
||||
type CookiePolicy = {
|
||||
sameSite: CookiePolicySameSite;
|
||||
secure: string;
|
||||
};
|
||||
declare enum CookiePolicySameSite {
|
||||
lax = "lax",
|
||||
strict = "strict",
|
||||
none = "none"
|
||||
}
|
||||
export type CookieOptions = {
|
||||
name: string;
|
||||
description: string;
|
||||
link: string;
|
||||
labelLink: string;
|
||||
cookies: string[];
|
||||
/**
|
||||
* Fonction qui sert à initialiser la fonctionnalité
|
||||
* conduisant à la génération du cookie
|
||||
* @return void
|
||||
*/
|
||||
script: () => void;
|
||||
/**
|
||||
* Fonction qui sert à informer l'utilisateur
|
||||
* sur chaque élèment que le cookie
|
||||
* associé à la fonctionnalité
|
||||
* est désactivé et propose un lien sur
|
||||
* cookie notice pour l'activer
|
||||
* @return void
|
||||
*/
|
||||
fallback: () => void | null;
|
||||
};
|
||||
export {};
|
||||
6
dist/umd/css/standard.css
vendored
6
dist/umd/css/standard.css
vendored
|
|
@ -110,8 +110,8 @@
|
|||
width: 3rem;
|
||||
height: 3rem;
|
||||
padding: 0.5rem;
|
||||
border-radius: 100%;
|
||||
background-color: #fff;
|
||||
border-radius: 100%;
|
||||
box-shadow: 0 0.1rem 1rem rgba(0, 0, 0, 0.35);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
|
@ -138,10 +138,10 @@
|
|||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
padding: 0;
|
||||
border-radius: 0;
|
||||
margin: auto;
|
||||
margin-bottom: 0;
|
||||
background-color: #fff;
|
||||
border-radius: 0;
|
||||
box-shadow: 0 0.1rem 1rem rgba(0, 0, 0, 0.35);
|
||||
line-height: initial;
|
||||
opacity: 0;
|
||||
|
|
@ -299,8 +299,8 @@
|
|||
justify-content: space-between;
|
||||
padding: 20px;
|
||||
border: 1px solid #e4e4e4;
|
||||
border-radius: 20px;
|
||||
margin: 10px 0;
|
||||
border-radius: 20px;
|
||||
}
|
||||
#cn-wrapper .cn-content .cn-modal-container .cn-modal-wrapper span {
|
||||
color: #dc9c52;
|
||||
|
|
|
|||
5
dist/umd/main.js
vendored
5
dist/umd/main.js
vendored
|
|
@ -859,7 +859,10 @@ module.exports = __webpack_require__.p + "css/standard.css";
|
|||
/******/ scriptUrl = document.currentScript.src;
|
||||
/******/ if (!scriptUrl) {
|
||||
/******/ var scripts = document.getElementsByTagName("script");
|
||||
/******/ if(scripts.length) scriptUrl = scripts[scripts.length - 1].src
|
||||
/******/ if(scripts.length) {
|
||||
/******/ var i = scripts.length - 1;
|
||||
/******/ while (i > -1 && !scriptUrl) scriptUrl = scripts[i--].src;
|
||||
/******/ }
|
||||
/******/ }
|
||||
/******/ }
|
||||
/******/ // When supporting browsers where an automatic publicPath is not supported you must specify an output.publicPath manually via configuration
|
||||
|
|
|
|||
2
dist/umd/main.js.map
vendored
2
dist/umd/main.js.map
vendored
File diff suppressed because one or more lines are too long
5825
package-lock.json
generated
5825
package-lock.json
generated
File diff suppressed because it is too large
Load diff
38
package.json
38
package.json
|
|
@ -31,19 +31,26 @@
|
|||
"scripts": {
|
||||
"test": "echo \"Error: no test specified\" && exit 1",
|
||||
"prod": "npm run build",
|
||||
"build": "rm -rf ./dist/{esm,typings} && webpack --progress",
|
||||
"build": "rm -rf ./dist/{esm,typings} && webpack --progress && npm run buildbrowser",
|
||||
"buildbrowser": "rm -rf ./dist/browser && node ./node_modules/.bin/rollup --bundleConfigAsCjs -c rollup.config.js",
|
||||
"prebuild": "npm run stylelint && npm run eslint && tsc -p ./tsconfig.json",
|
||||
"eslint": "node ./node_modules/.bin/eslint -c .eslintrc.json ./src",
|
||||
"eslint-ci": "node ./node_modules/.bin/eslint -c .eslintrc.json ./src -f junit",
|
||||
"stylelint": "npx stylelint '**/*.scss'",
|
||||
"stylelint-ci": "npx stylelint '**/*.scss' -f json"
|
||||
"eslint": "node ./node_modules/.bin/eslint --max-warnings 0 -c .eslintrc.json ./src",
|
||||
"eslint-fix": "node ./node_modules/.bin/eslint --fix --max-warnings 0 -c .eslintrc.json ./src",
|
||||
"eslint-ci": "node ./node_modules/.bin/eslint --max-warnings 0 -c .eslintrc.json ./src -f junit",
|
||||
"stylelint": "node ./node_modules/.bin/stylelint --config './.stylelintrc.json' --max-warnings 0 '**/*.scss'",
|
||||
"stylelint-fix": "node ./node_modules/.bin/stylelint --config './.stylelintrc.json' --fix --max-warnings 0 '**/*.scss'",
|
||||
"stylelint-ci": "node ./node_modules/.bin/stylelint --config './.stylelintrc.json' --max-warnings 0 '**/*.scss' -f json"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/preset-env": "^7.21.4",
|
||||
"@babel/preset-typescript": "^7.21.4",
|
||||
"@rollup/plugin-babel": "^6.0.3",
|
||||
"@rollup/plugin-terser": "^0.4.3",
|
||||
"@rollup/plugin-typescript": "^11.1.1",
|
||||
"@typescript-eslint/parser": "^5.58.0",
|
||||
"@vue/eslint-config-typescript": "^11.0.2",
|
||||
"babel-loader": "^9.1.2",
|
||||
"core-js": "^3.30.2",
|
||||
"eslint": "^8.38.0",
|
||||
"eslint-config-typescript": "^3.0.0",
|
||||
"eslint-plugin-vue": "^9.10.0",
|
||||
|
|
@ -51,19 +58,20 @@
|
|||
"postcss": "^8.4.21",
|
||||
"postcss-scss": "^4.0.6",
|
||||
"prettier": "^2.8.7",
|
||||
"sass": "^1.61.0",
|
||||
"sass-loader": "^13.2.2",
|
||||
"stylelint": "^15.4.0",
|
||||
"stylelint-config-idiomatic-order": "^9.0.0",
|
||||
"stylelint-config-sass-guidelines": "^10.0.0",
|
||||
"stylelint-config-standard-scss": "^8.0.0",
|
||||
"stylelint-webpack-plugin": "^4.1.1",
|
||||
"rollup": "^3.23.0",
|
||||
"rollup-plugin-scss": "^3.0.0",
|
||||
"sass": "^1.58.3",
|
||||
"sass-loader": "^13.3.1",
|
||||
"stylelint": "^14.16.1",
|
||||
"stylelint-config-idiomatic-order": "^8.1.0",
|
||||
"stylelint-config-prettier": "^9.0.5",
|
||||
"stylelint-config-sass-guidelines": "^9.0.1",
|
||||
"stylelint-config-standard-scss": "^6.1.0",
|
||||
"stylelint-scss": "^4.4.0",
|
||||
"stylelint-webpack-plugin": "^3.3.0",
|
||||
"typescript": "^5.0.4",
|
||||
"typescript-eslint": "^0.0.1-alpha.0",
|
||||
"webpack": "^5.78.0",
|
||||
"webpack-cli": "^5.0.1"
|
||||
},
|
||||
"dependencies": {
|
||||
"core-js": "^3.30.0"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
20
rollup.config.js
vendored
Normal file
20
rollup.config.js
vendored
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
import typescript from "@rollup/plugin-typescript";
|
||||
import { babel } from "@rollup/plugin-babel";
|
||||
import terser from "@rollup/plugin-terser";
|
||||
import scss from "rollup-plugin-scss";
|
||||
|
||||
export default {
|
||||
input: "./src/ts/export/global.ts",
|
||||
output: {
|
||||
file: "./dist/browser/cookie-cn.js",
|
||||
format: "iife",
|
||||
name: "CookieNotice",
|
||||
strict: false
|
||||
},
|
||||
plugins: [
|
||||
scss({ fileName: "cookie-cn.css" }),
|
||||
typescript(),
|
||||
babel({ babelHelpers: "runtime" }),
|
||||
terser()
|
||||
]
|
||||
};
|
||||
6
src/scss/themes/standard.scss
vendored
6
src/scss/themes/standard.scss
vendored
|
|
@ -116,8 +116,8 @@ $breakpoint-mobile: 535px;
|
|||
width: 3rem;
|
||||
height: 3rem;
|
||||
padding: 0.5rem;
|
||||
border-radius: 100%;
|
||||
background-color: $ck-btn-background-color;
|
||||
border-radius: 100%;
|
||||
box-shadow: $ck-shadow-color;
|
||||
cursor: pointer;
|
||||
|
||||
|
|
@ -154,10 +154,10 @@ $breakpoint-mobile: 535px;
|
|||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
padding: 0;
|
||||
border-radius: 0;
|
||||
margin: auto;
|
||||
margin-bottom: 0;
|
||||
background-color: $ck-bg-color;
|
||||
border-radius: 0;
|
||||
box-shadow: $ck-shadow-color;
|
||||
line-height: initial;
|
||||
opacity: 0;
|
||||
|
|
@ -343,8 +343,8 @@ $breakpoint-mobile: 535px;
|
|||
justify-content: space-between;
|
||||
padding: 20px;
|
||||
border: 1px solid $ck-bgcolor-list;
|
||||
border-radius: 20px;
|
||||
margin: 10px 0;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
span {
|
||||
|
|
|
|||
19
src/ts/export/global.ts
Normal file
19
src/ts/export/global.ts
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
import CookieNotice from "./../index";
|
||||
import "./../../scss/themes/standard.scss";
|
||||
|
||||
declare global {
|
||||
interface Window {
|
||||
CookieNotice: typeof CookieNotice;
|
||||
}
|
||||
}
|
||||
|
||||
const // Map over CookieNotice in case of overwrite
|
||||
_CookieNotice = window.CookieNotice;
|
||||
|
||||
CookieNotice.noConflict = function (deep) {
|
||||
if (deep && window.CookieNotice === CookieNotice) {
|
||||
window.CookieNotice = _CookieNotice;
|
||||
}
|
||||
|
||||
return CookieNotice;
|
||||
};
|
||||
|
|
@ -30,6 +30,7 @@ export default class CookieNotice {
|
|||
modalWrapper: HTMLDivElement;
|
||||
template: HTMLDivElement;
|
||||
bannerDetailsAreExpanded: boolean;
|
||||
static noConflict: (deep: boolean) => typeof CookieNotice;
|
||||
|
||||
constructor(config: Record<string, CookieOptions>) {
|
||||
// * Setup Config
|
||||
|
|
@ -16,7 +16,7 @@
|
|||
"node_modules/@types"
|
||||
]
|
||||
},
|
||||
"files": ["./src/index.ts"],
|
||||
"files": ["src/ts/index.ts"],
|
||||
"include": [
|
||||
"src/**/*.js",
|
||||
"src/**/*.ts",
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue