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
54be6d90bc
commit
027b400c38
5 changed files with 176 additions and 57 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +24
    -2
      demo.js
  2. +96
    -11
      demo.scss
  3. +1
    -1
      dist/css/demo.css
  4. +1
    -1
      dist/js/demo.js
  5. +54
    -42
      src/TinyConsent.riot

+ 24
- 2
demo.js View File

@ -10,7 +10,10 @@ const data = {
title: 'Matomo', title: 'Matomo',
name: 'matamo_', name: 'matamo_',
id: 'matamo', id: 'matamo',
content: '',
content: 'Cookie from Matamo for Website-Analytics. Creates statiscial Data how the User uses this Website',
provider: 'Tentakelfabrik.de',
duration: '1 Year',
privacy_policy: 'http://this',
handleAgree: function() { handleAgree: function() {
console.log('agree'); console.log('agree');
}, },
@ -18,9 +21,28 @@ const data = {
console.log('reject'); console.log('reject');
} }
},{ },{
title: 'Tiny Consent',
id: 'tiny_consent',
name: 'tiny_consent',
content: 'Saves the Settings of Cookies from Tiny Consent',
provider: 'Owner of this Site',
duration: '1 Year',
essential: true
}, {
title: 'Wordpress',
id: 'wordpress',
name: 'wordpress_',
content: 'Wordpress is using Session Cookie to handle the Login',
provider: 'Owner of this Site',
duration: '1 Year',
essential: true
},{
title: 'Wordpress - WooCommerce',
id: 'wordpress', id: 'wordpress',
name: 'wordpress_', name: 'wordpress_',
content: 'Wordpress und WooCommerce nutzen Session, diese werden zum einen für den Login genutzt, aber auch für den Warenkorb.',
content: 'WooCommerce is a Shop-Plugin for Wordpress. Cookies will be used for the Cart',
provider: 'Owner of this Site',
duration: '1 Year',
essential: true essential: true
}] }]
}; };


+ 96
- 11
demo.scss View File

@ -5,15 +5,31 @@
*/ */
.tiny-consent { .tiny-consent {
&__banner {
position: fixed;
left: 0;
bottom: 0;
position: fixed;
left: 0;
bottom: 0;
overflow: hidden;
width: 100%;
height: auto;
background: #171717;
margin: 1em;
width: 100%;
height: auto;
display: none;
color: white;
&__inner {
padding: 2em;
}
&__header {
position: relative;
}
&__close {
position: absolute;
top: 0;
right: 0;
} }
&__cookies { &__cookies {
@ -21,15 +37,84 @@
padding: 0; padding: 0;
} }
&__content {
&__cookie {
display: none; display: none;
position: relative;
margin-bottom: 1.5em;
&-title {
display: inline-block;
margin-right: 10px;
font-weight: bold;
}
&-content {
max-width: 80%;
p {
line-height: 1.5;
}
}
&-decision {
position: absolute;
right: 0;
bottom: 0;
text-align: right;
.tiny-consent__button {
margin-left: 0.8em;
}
}
&-footer {
ul {
list-style: none;
padding: 0;
margin: -0.8em 0 0.8em 0;
li {
display: inline-block;
margin-right: 1em;
font-size: 80%;
span {
display: inline-block;
margin-right: .5em;
font-weight: bold;
}
}
}
}
} }
&__cookie {
display: none;
.button {
background: black;
border: 2px solid white;
padding: .5em 1.8em;
color: white;
font-size: 0.9rem;
&--active {
color: black;
background: white;
}
&:hover {
cursor: pointer;
color: black;
background: white;
}
&:disabled {
cursor: not-allowed;
background: #7d7d7d;
color: #cecece;
border-color: #cecece;
}
} }
} }
.show { .show {
display: block;
display: block !important;
} }

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

@ -1 +1 @@
.tiny-consent__banner{position:fixed;left:0;bottom:0;width:100%;height:auto;margin:1em}.tiny-consent__cookies{margin:0;padding:0}.tiny-consent__content,.tiny-consent__cookie{display:none}.show{display:block}
.tiny-consent{position:fixed;left:0;bottom:0;overflow:hidden;background:#171717;width:100%;height:auto;display:none;color:#fff}.tiny-consent__inner{padding:2em}.tiny-consent__header{position:relative}.tiny-consent__close{position:absolute;top:0;right:0}.tiny-consent__cookies{margin:0;padding:0}.tiny-consent__cookie{display:none;position:relative;margin-bottom:1.5em}.tiny-consent__cookie-title{display:inline-block;margin-right:10px;font-weight:700}.tiny-consent__cookie-content{max-width:80%}.tiny-consent__cookie-content p{line-height:1.5}.tiny-consent__cookie-decision{position:absolute;right:0;bottom:0;text-align:right}.tiny-consent__cookie-decision .tiny-consent__button{margin-left:.8em}.tiny-consent__cookie-footer ul{list-style:none;padding:0;margin:-.8em 0 .8em}.tiny-consent__cookie-footer ul li{display:inline-block;margin-right:1em;font-size:80%}.tiny-consent__cookie-footer ul li span{display:inline-block;margin-right:.5em;font-weight:700}.tiny-consent .button{background:#000;border:2px solid #fff;padding:.5em 1.8em;color:#fff;font-size:.9rem}.tiny-consent .button--active{color:#000;background:#fff}.tiny-consent .button:hover{cursor:pointer;color:#000;background:#fff}.tiny-consent .button:disabled{cursor:not-allowed;background:#7d7d7d;color:#cecece;border-color:#cecece}.show{display:block!important}

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


+ 54
- 42
src/TinyConsent.riot View File

@ -1,41 +1,50 @@
<tiny-consent> <tiny-consent>
<div id="tiny-consent" class="tiny-consent">
<div class="tiny-consent__banner">
<div class={ state.isOpen === true ? 'tiny-consent__content show' : 'tiny-consent__content' }>
<p>
{ state.options.messages.content }
</p>
<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>
<p if={ cookie.name } class="tiny-consent__cookie-name">
{ cookie.name }
</p>
</div>
<div class="tiny-consent__cookie-decision">
<button if={ !cookie.essential } class={ getAgreeClasses(cookie) } onclick={ (event) => { handleAgree(event, cookie, index) }}>
{ state.options.messages.yes }
</button>
<button if={ !cookie.essential } class={ getRejectClasses(cookie) } onclick={ (event) => { handleReject(event, cookie, index) }}>
{ state.options.messages.no }
</button>
<button if={ cookie.essentialLast === true } disabled={ isOk() } class="button button--ok tiny-consent__button" onclick={ (event) => { handleOk(event, cookies) }}>
{ state.options.messages.ok }
</button>
</div>
</li>
</ul>
<div if={ state.hasChanged === false } class="tiny-consent__close">
<button class="button button--submit tiny-consent__button" onclick={ handleClose }>
{ state.options.messages.close }
</button>
</div>
<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> </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> </div>
<script> <script>
@ -61,13 +70,16 @@
{ {
options: { options: {
cookie_name: 'tiny_consent', cookie_name: 'tiny_consent',
messages: {
'session': 'LALAL',
'content': 'TTATA',
'yes': 'Yes',
'no': 'No',
'ok': 'Ok',
'close': 'Close'
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, isOpen: false,


Write Preview
Loading…
Cancel
Save