tentakelfabrik
/
tiny-consent
1
0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

adding

master
Björn 4 years ago
parent
4bd237e337
commit
992a82f17e
11 changed files with 227 additions and 3400 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +23
    -8
      demo.js
  2. +17
    -0
      demo.scss
  3. +1
    -0
      dist/css/demo.css
  4. +1
    -0
      dist/index.html
  5. +1
    -3351
      dist/js/demo.js
  6. +2
    -1
      mix-manifest.json
  7. +1
    -1
      package-lock.json
  8. +1
    -1
      package.json
  9. +132
    -36
      src/TinyConsent.riot
  10. +47
    -0
      src/TinyConsentButton.riot
  11. +1
    -2
      webpack.mix.js

+ 23
- 8
demo.js View File

@ -1,23 +1,38 @@
import * as riot from 'riot'; import * as riot from 'riot';
import TinyConsent from './src/TinyConsent.riot'; import TinyConsent from './src/TinyConsent.riot';
import TinyConsentButton from './src/TinyConsentButton.riot';
riot.register('tiny-consent', TinyConsent); riot.register('tiny-consent', TinyConsent);
riot.register('tiny-consent-button', TinyConsentButton);
const consent = { const consent = {
cookies: [{ cookies: [{
id: 'wordpress',
name: 'wordpress_*',
content: 'Wordpress und WooCommerce nutzen Session, diese werden zum einen für den Login genutzt, aber auch für den Warenkorb.',
essential: true
},{
name: 'matamo',
content: 'test',
title: 'Matomo',
name: 'matamo_',
id: 'matamo',
content: 'Analyse des Benutzerverhaltens, damit helfen Sie uns diese Seite zu verbessern.',
handleAgree: function() { handleAgree: function() {
console.log('agree'); console.log('agree');
}, },
handleReject: function() { handleReject: function() {
console.log('reject'); console.log('reject');
} }
},{
id: 'wordpress2',
name: 'wordpress2_',
content: 'Wordpress und WooCommerce nutzen Session, diese werden zum einen für den Login genutzt, aber auch für den Warenkorb.',
essential: true
},{
id: 'wordpress12',
name: 'wordpress12_',
content: 'Wordpress und WooCommerce nutzen Session, diese werden zum einen für den Login genutzt, aber auch für den Warenkorb.',
essential: true
},{
id: 'wordpress3',
name: 'wordpress3_',
content: 'Wordpress und WooCommerce nutzen Session, diese werden zum einen für den Login genutzt, aber auch für den Warenkorb.',
essential: true
}] }]
}; };
riot.mount('tiny-consent', consent);
riot.mount('tiny-consent', consent);
riot.mount('tiny-consent-button');

+ 17
- 0
demo.scss View File

@ -0,0 +1,17 @@
/**
*
*
*
*/
.tiny-consent__content {
display: none;
}
.tiny-consent__cookie {
display: none;
}
.show {
display: block;
}

+ 1
- 0
dist/css/demo.css View File

@ -0,0 +1 @@
.tiny-consent__content,.tiny-consent__cookie{display:none}.show{display:block}

+ 1
- 0
dist/index.html View File

@ -13,6 +13,7 @@
</head> </head>
<body> <body>
<tiny-consent></tiny-consent> <tiny-consent></tiny-consent>
<tiny-consent-button></tiny-consent-button>
<footer> <footer>
<a target="_blank" href="https://github.com/HerrHase/tiny-consent"> <a target="_blank" href="https://github.com/HerrHase/tiny-consent">
<i class="icon icon-github"></i> <i class="icon icon-github"></i>


+ 1
- 3351
dist/js/demo.js
File diff suppressed because it is too large
View File


+ 2
- 1
mix-manifest.json View File

@ -1,3 +1,4 @@
{ {
"/dist/js/demo.js": "/dist/js/demo.js"
"/dist/js/demo.js": "/dist/js/demo.js",
"/dist/css/demo.css": "/dist/css/demo.css"
} }

+ 1
- 1
package-lock.json View File

@ -2500,7 +2500,7 @@
"cross-env": { "cross-env": {
"version": "5.2.1", "version": "5.2.1",
"resolved": "https://registry.npmjs.org/cross-env/-/cross-env-5.2.1.tgz", "resolved": "https://registry.npmjs.org/cross-env/-/cross-env-5.2.1.tgz",
"integrity": "sha1-ssdsHKet1m3IdNEXmEZglPVRs00=",
"integrity": "sha512-1yHhtcfAd1r4nwQgknowuUNfIT9E8dOMMspC36g45dN+iD1blloi7xp8X/xAIDnjHWyt1uQ8PHk2fkNaym7soQ==",
"dev": true, "dev": true,
"requires": { "requires": {
"cross-spawn": "^6.0.5" "cross-spawn": "^6.0.5"


+ 1
- 1
package.json View File

@ -24,7 +24,7 @@
"devDependencies": { "devDependencies": {
"@riotjs/compiler": "^4.2.0", "@riotjs/compiler": "^4.2.0",
"@riotjs/webpack-loader": "^4.0.0", "@riotjs/webpack-loader": "^4.0.0",
"cross-env": "^5.2.0",
"cross-env": "^5.2.1",
"laravel-mix": "^4.1.4", "laravel-mix": "^4.1.4",
"replace-in-file-webpack-plugin": "^1.0.6", "replace-in-file-webpack-plugin": "^1.0.6",
"resolve-url-loader": "^2.3.1", "resolve-url-loader": "^2.3.1",


+ 132
- 36
src/TinyConsent.riot View File

@ -1,28 +1,29 @@
<tiny-consent> <tiny-consent>
<div class="tiny-consent"> <div class="tiny-consent">
<div class="tiny-consent__banner"> <div class="tiny-consent__banner">
<div class="tiny-consent__content" show={ state.hasCookie === false }>
<div class={ state.isOpen === true ? 'tiny-consent__content show' : 'tiny-consent__content' }>
<p> <p>
{ state.options.messages.content } { state.options.messages.content }
</p> </p>
<ul class="tiny-consent__cookies"> <ul class="tiny-consent__cookies">
<li each={ cookie in props.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"> <div class="tiny-consent__cookie-content">
<p> <p>
<span if={ cookie.title } class="tiny-consent__cookie.title">{ cookie.title } - </span>
{ cookie.content } { cookie.content }
</p> </p>
<p if={ cookie.names } class="tiny-consent__cookie-small">
<p if={ cookie.name } class="tiny-consent__cookie-name">
{ cookie.name }
</p> </p>
</div> </div>
<div class="tiny-consent__cookie-decision"> <div class="tiny-consent__cookie-decision">
<button if={ !cookie.essential } class={ getAgreeClasses(cookie) } onclick={ (event) => { handleAgree(event, cookie) }}>
<button if={ !cookie.essential } class={ getAgreeClasses(cookie) } onclick={ (event) => { handleAgree(event, cookie, index) }}>
{ state.options.messages.yes } { state.options.messages.yes }
</button> </button>
<button if={ !cookie.essential } class={ getRejectClasses(cookie) } onclick={ (event) => { handleReject(event, cookie) }}>
<button if={ !cookie.essential } class={ getRejectClasses(cookie) } onclick={ (event) => { handleReject(event, cookie, index) }}>
{ state.options.messages.no } { state.options.messages.no }
</button> </button>
<button if={ cookie.essential } disabled={ isOk(cookie) === true } class="button button--ok tiny-consent__button" onclick={ (event) => { handleOk(event, cookie) }}>
<button if={ cookie.essentialLast === true } disabled={ isOk() } class="button button--ok tiny-consent__button" onclick={ (event) => { handleOk(event, cookies) }}>
{ state.options.messages.ok } { state.options.messages.ok }
</button> </button>
</div> </div>
@ -61,6 +62,7 @@
options: { options: {
cookie_name: 'tiny_consent', cookie_name: 'tiny_consent',
messages: { messages: {
'session': 'LALAL',
'content': 'TTATA', 'content': 'TTATA',
'yes': 'Yes', 'yes': 'Yes',
'no': 'No', 'no': 'No',
@ -68,7 +70,8 @@
'close': 'Close' 'close': 'Close'
} }
}, },
hasCookie: false
isOpen: false,
hasChanged: false
}, },
/** /**
@ -86,26 +89,19 @@
return consent; return consent;
}, },
isOk(cookie)
{
let data = this.getData();
let result = false;
if (data[cookie.id] === true) {
result = true;
}
return result;
},
/**
*
* @param {[type]} cookie [description]
* @return {[type]} [description]
*/
getAgreeClasses(cookie) getAgreeClasses(cookie)
{ {
let data = this.getData();
let classes = [ let classes = [
'button', 'button',
'button--agree', 'button--agree',
'tiny-consent__button' 'tiny-consent__button'
]; ];
let data = this.getData();
if (data[cookie.id] === true) { if (data[cookie.id] === true) {
classes.push('button--active'); classes.push('button--active');
@ -114,14 +110,19 @@
return classes.join(' '); return classes.join(' ');
}, },
/**
*
* @param {[type]} cookie [description]
* @return {[type]} [description]
*/
getRejectClasses(cookie) getRejectClasses(cookie)
{ {
let data = this.getData();
let classes = [ let classes = [
'button', 'button',
'button--reject', 'button--reject',
'tiny-consent__button' 'tiny-consent__button'
]; ];
let data = this.getData();
if (data[cookie.id] === false) { if (data[cookie.id] === false) {
classes.push('button--active'); classes.push('button--active');
@ -130,6 +131,37 @@
return classes.join(' '); 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();
});
},
/** /**
* *
* *
@ -144,19 +176,71 @@
this.state.options = Object.assign(this.state.options, 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 // check if consent already has set
if (data) {
this.state.hasCookie = true;
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) => { this.props.cookies.forEach((cookie) => {
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();
}
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.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;
}
} }
}, },
@ -165,7 +249,7 @@
* @param {[type]} event [description] * @param {[type]} event [description]
* @return {[type]} [description] * @return {[type]} [description]
*/ */
handleAgree(event, cookie) {
handleAgree(event, cookie, index) {
event.preventDefault(); event.preventDefault();
let data = this.getData(); let data = this.getData();
@ -176,6 +260,7 @@
data[cookie.id] = true; data[cookie.id] = true;
Cookie.set(this.state.options.cookie_name, data); Cookie.set(this.state.options.cookie_name, data);
this.props.cookies[index].hasConsent = true;
this.update(); this.update();
}, },
@ -185,7 +270,7 @@
* @param {[type]} event [description] * @param {[type]} event [description]
* @return {[type]} [description] * @return {[type]} [description]
*/ */
handleReject(event, cookie) {
handleReject(event, cookie, index) {
event.preventDefault(); event.preventDefault();
let data = this.getData(); let data = this.getData();
@ -196,6 +281,7 @@
data[cookie.id] = false; data[cookie.id] = false;
Cookie.set(this.state.options.cookie_name, data); Cookie.set(this.state.options.cookie_name, data);
this.props.cookies[index].hasConsent = true;
this.update(); this.update();
}, },
@ -205,24 +291,34 @@
* @param {[type]} event [description] * @param {[type]} event [description]
* @return {[type]} [description] * @return {[type]} [description]
*/ */
handleOk(event, cookie) {
handleOk(event) {
event.preventDefault(); event.preventDefault();
let data = this.getData(); let data = this.getData();
data[cookie.id] = true;
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); Cookie.set(this.state.options.cookie_name, data);
this.updateEssential();
this.update(); this.update();
}, },
/** /**
* *
* @param {[type]} event [description]
* @return {[type]} [description]
* @param {[type]} event
* @return {[type]}
*/ */
handleClose(event) { handleClose(event) {
event.preventDefault(); event.preventDefault();
this.state.isOpen = false;
this.update();
} }
} }


+ 47
- 0
src/TinyConsentButton.riot View File

@ -0,0 +1,47 @@
<tiny-consent-button>
<div class="tiny-consent-button">
<button class="button tiny-consent-button__button" onclick={ handleOpen }>
{ state.options.messages.open }
</button>
</div>
<script>
/**
* tiny-consent-button.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: {
messages: {
'open': 'Open'
}
}
},
/**
*
* @param {[type]} event
* @return {[type]}
*/
handleOpen(event) {
event.preventDefault();
window.dispatchEvent(new window.CustomEvent('tiny-consent-open'))
}
}
</script>
</tiny-consent-button>

+ 1
- 2
webpack.mix.js View File

@ -28,5 +28,4 @@ mix.webpackConfig({
}); });
mix.js('demo.js', 'dist/js'); mix.js('demo.js', 'dist/js');
//mix.sass('demo-386.scss', 'dist/css');
//mix.copy('src/fonts', 'dist/fonts');
mix.sass('demo.scss', 'dist/css');

Write Preview
Loading…
Cancel
Save