https://github.com/dmstr/cookie-consent
https://github.com/dmstr/cookie-consent
Last synced: 12 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/dmstr/cookie-consent
- Owner: dmstr
- License: mit
- Created: 2019-11-15T10:06:02.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2024-03-21T12:16:57.000Z (about 2 years ago)
- Last Synced: 2025-05-31T23:16:53.103Z (about 1 year ago)
- Language: JavaScript
- Size: 836 KB
- Stars: 1
- Watchers: 7
- Forks: 3
- Open Issues: 17
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://travis-ci.org/dmstr/cookie-consent)
# COOKIE CONSENT
It allows the user to choose through his active consent if the page can or not
use/render/register features that could collect users personal data.
## Getting started
### Install
```html
```
### Javascript
```javascript
var cc = new CookieConsent();
```
or
```javascript
var cc = new CookieConsent({
name: 'cookie_consent_status',
path: '/',
domain: '',
expiryDays: 365
});
```
### HTML
```html
open
close
toggle
Open controls
Close controls
Toggle controls
Open Details
Close Details
Toggle details
var cc = new CookieConsent()
```
### CSS
```css
.cookie-consent-popup {
animation-name: show;
animation-duration: 1s;
animation-timing-function: ease;
display: none;
position: fixed;
bottom: 0;
left: 0;
width: 100%;
z-index: 999999;
}
.cookie-consent-popup.open {
display: block;
opacity: 1;
animation-name: show;
animation-duration: 1s;
animation-timing-function: ease;
}
.cookie-consent-controls {
max-height: 0;
overflow: hidden;
-webkit-transition: max-height 0.5s ease-out;
-moz-transition: max-height 0.5s ease-out;
transition: max-height 0.5s ease-out;
}
.cookie-consent-controls.open {
max-height: 600px;
}
.cookie-consent-details {
max-height: 0;
overflow: hidden;
-webkit-transition: max-height 0.5s ease-out;
-moz-transition: max-height 0.5s ease-out;
transition: max-height 0.5s ease-out;
}
.cookie-consent-details.open {
max-height: 600px;
}
@keyframes show {
from {opacity: 0;}
to {opacity: 1;}
}
@keyframes hide {
from {opacity: 1;}
to {opacity: 0;}
}
```
## OPTIONS
option
description
default
type
name
Defines the cookie name that Cookie Consent will use to store the status of the consent
'cookie_consent_status'
STRING
path
Defines the cookie path
'/'
STRING
domain
Defines the cookie domain
''
STRING
expiryDays
Defines the cookie exipration days
365
INT
## HTML
This Cookie Consent library works in a declarative approach. That mean that you
just need to put the right classes in your html to get it working.
* `cookie-consent-popup`: The popup widget. It will take the class "open" when no consent cookie was saved or when its manually triggered.
* `cookie-consent-controls`: container for the consent checkboxes (controls).
* `cookie-consent-save`: save the data-cc-consent values of the checkboxes in its same namespace in the consent cookie.
* `cookie-consent-accept-all`: check all consents controls and save.
* `cookie-consent-deny-all`: uncheck all consents controls and save.
* `cookie-consent-open`: opens the popup.
* `cookie-consent-close`: closes the popup.
* `cookie-consent-toggle`: toggles the popup.
* `cookie-consent-controls-open`: opens the controls
* `cookie-consent-controls-close`: closes the controls
* `cookie-consent-controls-toggle`: toggles the controls
* `cookie-consent-details-open`: opens the details
* `cookie-consent-details-close`: closes the details
* `cookie-consent-details-toggle`: toggles the details
* `data-cc-consent`: the consent name/value that will be stored in the consent cookie.
* `data-cc-namespace`: used to group checkboxes and save buttons. In that way you can add different groups in different zones of your website without conflicting with other checkboxes or save buttons.
## Events
```javascript
cc.afterSave = function (cc) {
// clean google analytics cookies if we do not have the "statistics" consent by expiring them. Then reload the page
cc.clean({
'statistics': {
'cookies': [
{name: '_ga'},
{name: '_gat', domain: '', path: '/'},
{name: '_gid', domain: '', path: '/'}
]
}
})
window.location.reload()
}
```