You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
338 lines
11 KiB
338 lines
11 KiB
<tiny-consent>
|
|
<div id="tiny-consent" class={ state.isOpen === true ? 'tiny-consent show' : 'tiny-consent' }>
|
|
<div class="tiny-consent__inner">
|
|
<div class="tiny-consent__header">
|
|
<h3 class="tiny_consent__title">
|
|
{ state.options.text.title }
|
|
</h3>
|
|
<p>
|
|
{ state.options.text.content }
|
|
</p>
|
|
<div class="tiny-consent__close">
|
|
<button class="button button--submit tiny-consent__button" onclick={ handleClose }>
|
|
{ state.options.text.button__close }
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="tiny-consent__main">
|
|
<ul class="tiny-consent__cookies">
|
|
<li class={ state.hasChanged && cookie.hasConsent === true ? 'tiny-consent__cookie' : 'tiny-consent__cookie show' } each={ (cookie, index) in props.cookies }>
|
|
<div class="tiny-consent__cookie-content">
|
|
<p>
|
|
<span if={ cookie.title } class="tiny-consent__cookie-title">{ cookie.title }</span>
|
|
{ cookie.content }
|
|
</p>
|
|
<div class="tiny-consent__cookie-footer">
|
|
<ul>
|
|
<li if={ cookie.provider }><span>{ state.options.text.footer__provider }</span> { cookie.provider }</li>
|
|
<li if={ cookie.name }><span>{ state.options.text.footer__name }</span> { cookie.name }</li>
|
|
<li if={ cookie.duration }><span>{ state.options.text.footer__duration }</span> { cookie.duration }</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="tiny-consent__cookie-decision">
|
|
<button if={ !cookie.essential } class={ getAgreeClasses(cookie) } onclick={ (event) => { handleAgree(event, cookie, index) }}>
|
|
{ state.options.text.button__agree }
|
|
</button>
|
|
<button if={ !cookie.essential } class={ getRejectClasses(cookie) } onclick={ (event) => { handleReject(event, cookie, index) }}>
|
|
{ state.options.text.button__reject }
|
|
</button>
|
|
<button if={ cookie.essentialLast === true } disabled={ isOk() } class="button button--ok tiny-consent__button" onclick={ (event) => { handleOk(event, cookies) }}>
|
|
{ state.options.text.button__ok }
|
|
</button>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
|
|
import Cookie from 'js-cookie';
|
|
|
|
/**
|
|
* tiny-consent.riot
|
|
*
|
|
* @author Björn Hase
|
|
* @license http://opensource.org/licenses/MIT The MIT License
|
|
* @link https://gitlab.tentakelfabrik.de/tentakelfabrik/tiny-components/tiny-consent Gitlab Repository
|
|
*
|
|
*/
|
|
|
|
export default {
|
|
|
|
/**
|
|
*
|
|
*
|
|
*/
|
|
state:
|
|
{
|
|
options: {
|
|
cookie_name: 'tiny_consent',
|
|
text: {
|
|
title : 'Cookies',
|
|
content : 'We are using Cookies and display that was we use, also there are cookies you can accept or reject',
|
|
button__agree : 'Yes',
|
|
button__reject : 'No',
|
|
button__ok : 'Ok',
|
|
button__close : 'Close',
|
|
footer__name: 'Cookie Name',
|
|
footer__provider: 'Provider',
|
|
footer__duration: 'Cookie Duration'
|
|
}
|
|
},
|
|
isOpen: false,
|
|
hasChanged: false
|
|
},
|
|
|
|
/**
|
|
*
|
|
* @return {[type]} [description]
|
|
*/
|
|
getData()
|
|
{
|
|
let consent = Cookie.getJSON(this.state.options.cookie_name);
|
|
|
|
if (!consent) {
|
|
consent = {};
|
|
}
|
|
|
|
return consent;
|
|
},
|
|
|
|
/**
|
|
*
|
|
* @param {[type]} cookie [description]
|
|
* @return {[type]} [description]
|
|
*/
|
|
getAgreeClasses(cookie)
|
|
{
|
|
let data = this.getData();
|
|
let classes = [
|
|
'button',
|
|
'button--agree',
|
|
'tiny-consent__button'
|
|
];
|
|
|
|
if (data[cookie.id] === true) {
|
|
classes.push('button--active');
|
|
}
|
|
|
|
return classes.join(' ');
|
|
},
|
|
|
|
/**
|
|
*
|
|
* @param {[type]} cookie [description]
|
|
* @return {[type]} [description]
|
|
*/
|
|
getRejectClasses(cookie)
|
|
{
|
|
let data = this.getData();
|
|
let classes = [
|
|
'button',
|
|
'button--reject',
|
|
'tiny-consent__button'
|
|
];
|
|
|
|
if (data[cookie.id] === false) {
|
|
classes.push('button--active');
|
|
}
|
|
|
|
return classes.join(' ');
|
|
},
|
|
|
|
/**
|
|
*
|
|
* @return {Boolean} [description]
|
|
*/
|
|
isOk()
|
|
{
|
|
let data = this.getData();
|
|
let result = true;
|
|
|
|
this.props.cookies.forEach((cookie) => {
|
|
if (data[cookie.id] !== true && cookie.essential === true) {
|
|
result = false;
|
|
}
|
|
});
|
|
|
|
return result;
|
|
},
|
|
|
|
/**
|
|
*
|
|
*
|
|
*/
|
|
onMounted()
|
|
{
|
|
window.addEventListener('tiny-consent-open', () => {
|
|
this.state.isOpen = true;
|
|
this.state.hasChanged = false;
|
|
this.update();
|
|
});
|
|
},
|
|
|
|
/**
|
|
*
|
|
*
|
|
*
|
|
*
|
|
*/
|
|
onBeforeMount()
|
|
{
|
|
const data = this.getData();
|
|
|
|
if (this.props.options) {
|
|
this.state.options = Object.assign(this.state.options, this.props.options);
|
|
}
|
|
|
|
// getting essential first
|
|
this.props.cookies.sort(function(a, b) {
|
|
return a['essential'] !== true;
|
|
});
|
|
|
|
// check if consent already has set
|
|
if (Object.entries(data).length === 0) {
|
|
this.state.hasChanged = true;
|
|
this.state.isOpen = true;
|
|
}
|
|
|
|
this.props.cookies.forEach((cookie, index) => {
|
|
if (data[cookie.id] === true || data[cookie.id] === false) {
|
|
if (data[cookie.id] === true && cookie.handleAgree) {
|
|
cookie.handleAgree();
|
|
} else if (data[cookie.id] === false && cookie.handleReject) {
|
|
cookie.handleReject();
|
|
}
|
|
|
|
this.props.cookies[index].hasConsent = true;
|
|
} else {
|
|
this.state.hasChanged = true;
|
|
this.state.isOpen = true;
|
|
|
|
this.props.cookies[index].hasConsent = false;
|
|
}
|
|
});
|
|
|
|
this.updateEssential();
|
|
},
|
|
|
|
/**
|
|
*
|
|
* @return {[type]}
|
|
*/
|
|
onBeforeUpdate() {
|
|
|
|
// state
|
|
if (this.state.hasChanged === true) {
|
|
let hasToClose = true;
|
|
|
|
this.props.cookies.forEach((cookie) => {
|
|
if (cookie.hasConsent !== true) {
|
|
hasToClose = false;
|
|
}
|
|
});
|
|
|
|
if (hasToClose === true) {
|
|
this.state.isOpen = false;
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
*
|
|
* @return {[type]} [description]
|
|
*/
|
|
updateEssential()
|
|
{
|
|
// set true for last essential cookie where consent is not already set
|
|
for (let i = (this.props.cookies.length - 1); i >= 0; i--) {
|
|
if ((this.state.hasChanged === true && this.props.cookies[i].hasConsent === false && this.props.cookies[i].essential === true) || (this.state.hasChanged === false && this.props.cookies[i].essential === true)) {
|
|
this.props.cookies[i].essentialLast = true;
|
|
break;
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
*
|
|
* @param {[type]} event [description]
|
|
* @return {[type]} [description]
|
|
*/
|
|
handleAgree(event, cookie, index) {
|
|
event.preventDefault();
|
|
|
|
let data = this.getData();
|
|
|
|
if (cookie.handleAgree) {
|
|
cookie.handleAgree();
|
|
}
|
|
|
|
data[cookie.id] = true;
|
|
Cookie.set(this.state.options.cookie_name, data);
|
|
this.props.cookies[index].hasConsent = true;
|
|
|
|
this.update();
|
|
},
|
|
|
|
/**
|
|
*
|
|
* @param {[type]} event [description]
|
|
* @return {[type]} [description]
|
|
*/
|
|
handleReject(event, cookie, index) {
|
|
event.preventDefault();
|
|
|
|
let data = this.getData();
|
|
|
|
if (cookie.handleReject) {
|
|
cookie.handleReject();
|
|
}
|
|
|
|
data[cookie.id] = false;
|
|
Cookie.set(this.state.options.cookie_name, data);
|
|
this.props.cookies[index].hasConsent = true;
|
|
|
|
this.update();
|
|
},
|
|
|
|
/**
|
|
*
|
|
* @param {[type]} event [description]
|
|
* @return {[type]} [description]
|
|
*/
|
|
handleOk(event) {
|
|
event.preventDefault();
|
|
|
|
let data = this.getData();
|
|
|
|
this.props.cookies.forEach((cookie, index) => {
|
|
if (cookie.essential === true) {
|
|
data[cookie.id] = true;
|
|
this.props.cookies[index].hasConsent = true;
|
|
}
|
|
});
|
|
|
|
Cookie.set(this.state.options.cookie_name, data);
|
|
this.updateEssential();
|
|
|
|
this.update();
|
|
},
|
|
|
|
/**
|
|
*
|
|
* @param {[type]} event
|
|
* @return {[type]}
|
|
*/
|
|
handleClose(event) {
|
|
event.preventDefault();
|
|
|
|
this.state.isOpen = false;
|
|
this.update();
|
|
}
|
|
}
|
|
|
|
</script>
|
|
</tiny-consent>
|