adding

demo.js

@@ -30,7 +30,7 @@ const data = {
         content: 'Saves the Settings of Cookies from Tiny Consent',
         provider: 'Owner of this Site',
         duration: '1 Year',
-        essential: true
+        default: true
     }, {
         title: 'Wordpress mit WooCommerce',
         id: 'wordpress_woocommerce',
@@ -38,7 +38,7 @@ const data = {
         content: 'Handle Login of User and Cart of WooCommerce Shop',
         provider: 'Owner of this Site',
         duration: 'Session',
-        essential: true
+        default: true
     }]
 };
 

demo.scss

@@ -9,15 +9,18 @@
     left: 0;
     bottom: 0;
     overflow: hidden;
+    visibility: hidden;
 
     background: #171717;
 
     width: 100%;
     height: auto;
-    display: none;
-
     color: white;
 
+    &--animation {
+        transition: bottom 0.5s ease;
+    }
+
     &__inner {
         margin: 0 auto;
         max-width: 1280px;
@@ -41,9 +44,17 @@
 
     &__cookie {
         display: none;
-        position: relative;
         margin-bottom: 1.5em;
 
+        &-group {
+            list-style: none;
+            margin: 0;
+            padding: 0;
+            border: 2px white solid;
+            padding: 15px 18px;
+            margin-bottom: 10px;
+        }
+
         &-title {
             display: inline-block;
             margin-right: 10px;
@@ -54,10 +65,48 @@
             max-width: 80%;
 
             p {
+                margin: 0;
                 line-height: 1.5;
             }
         }
 
+        &-accordion--active {
+            overflow: hidden;
+            transition: max-height 0.5s ease;
+            max-height: 0;
+        }
+
+        &-accordion-header {
+            position: relative;
+        }
+
+        &-accordion-header-icon {
+            position: absolute;
+            transition-duration: 0.5s;
+            transition-property: transform;
+            right: 0;
+        }
+
+        &-accordion--active {
+            .tiny-consent__cookie-accordion-inner {
+                padding-top: 1em;
+            }
+        }
+
+        &-accordion-header--open {
+            .tiny-consent__cookie-accordion-header-icon {
+                transform: rotate(180deg);
+            }
+        }
+
+        &-accordion-inner {
+            margin-bottom: -0.5em;
+        }
+
+        &-wrapper {
+            position: relative;
+        }
+
         &-decision {
             position: absolute;
             right: 0;
@@ -73,7 +122,7 @@
             ul {
                 list-style: none;
                 padding: 0;
-                margin: -0.8em 0 0.8em 0;
+                margin: 0 0 0.8em 0;
 
                 li {
                     display: inline-block;

dist/css/demo.css

@@ -1 +1 @@
-.tiny-consent{position:fixed;left:0;bottom:0;overflow:hidden;background:#171717;width:100%;height:auto;display:none;color:#fff}.tiny-consent__inner{margin:0 auto;max-width:1280px;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}
+.tiny-consent{position:fixed;left:0;bottom:0;overflow:hidden;visibility:hidden;background:#171717;width:100%;height:auto;color:#fff}.tiny-consent--animation{-webkit-transition:bottom .5s ease;transition:bottom .5s ease}.tiny-consent__inner{margin:0 auto;max-width:1280px;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;margin-bottom:1.5em}.tiny-consent__cookie-group{list-style:none;border:2px solid #fff;padding:15px 18px;margin:0 0 10px}.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{margin:0;line-height:1.5}.tiny-consent__cookie-accordion--active{overflow:hidden;-webkit-transition:max-height .5s ease;transition:max-height .5s ease;max-height:0}.tiny-consent__cookie-accordion-header{position:relative}.tiny-consent__cookie-accordion-header-icon{position:absolute;-webkit-transition-duration:.5s;transition-duration:.5s;-webkit-transition-property:-webkit-transform;transition-property:-webkit-transform;transition-property:transform;transition-property:transform,-webkit-transform;right:0}.tiny-consent__cookie-accordion--active .tiny-consent__cookie-accordion-inner{padding-top:1em}.tiny-consent__cookie-accordion-header--open .tiny-consent__cookie-accordion-header-icon{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.tiny-consent__cookie-accordion-inner{margin-bottom:-.5em}.tiny-consent__cookie-wrapper{position:relative}.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:0 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}

package.json

@@ -1,6 +1,6 @@
 {
     "name": "tiny-consent",
-    "version": "1.0.0",
+    "version": "1.1.0",
     "description": "Consent Banner for GDPR with RiotJS, part of Tiny-Components",
     "scripts": {
         "dev": "npm run development",

src/TinyConsent.riot

@@ -1,5 +1,5 @@
 <tiny-consent>
-    <div id="tiny-consent" class={ state.isOpen === true ? 'tiny-consent show' : 'tiny-consent' }>
+    <div id="tiny-consent" class="tiny-consent">
         <div class="tiny-consent__inner">
         <div class="tiny-consent__header">
             <h3 class="tiny_consent__title">
@@ -16,32 +16,43 @@
         </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>
-                                <li if={ cookie.privacy_policy }><a href="{ cookie.privacy_policy }">{ state.options.text.footer__url }</a></li>
-                            </ul>
+                <li class="tiny-consent__cookie-group" each={ group in Object.entries(state.cookies) }>
+                    <header class="tiny-consent__cookie-accordion-header" if={ group[0] === 'default' && group[1].length > 1 } onclick={ (event) => { handleToogle(event) }}>
+                        { state.options.text.title__default } ({ group[1].length }) <span class="tiny-consent__cookie-accordion-header-icon">&#9650;</span>
+                    </header>
+                    <div class="tiny-consent__cookie-accordion{ group[0] === 'default' && group[1].length > 1 ? ' tiny-consent__cookie-accordion--active' : '' }">
+                        <div class="tiny-consent__cookie-accordion-inner">
+                            <div class="tiny-consent__cookie-wrapper" each={ (cookie, index) in group[1] }>
+                                <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>
+                                            <li if={ cookie.privacy_policy }><a href="{ cookie.privacy_policy }">{ state.options.text.footer__url }</a></li>
+                                        </ul>
+                                    </div>
+                                </div>
+                                <div if={ group[0] === 'other' } class="tiny-consent__cookie-decision">
+                                    <button  class={ getAgreeClasses(cookie) } onclick={ (event) => {  handleAgree(event, cookie, index) }}>
+                                        { state.options.text.button__agree }
+                                    </button>
+                                    <button if={ group[0] === 'other' } class={ getRejectClasses(cookie) } onclick={ (event) => { handleReject(event, cookie, index) }}>
+                                        { state.options.text.button__reject }
+                                    </button>
+                                </div>
+                                <div if={ group[0] === 'default' && index === (group[1].length - 1) } class="tiny-consent__cookie-decision">
+                                    <button disabled={ isOk() } class="button button--ok tiny-consent__button" onclick={ (event) => { handleDefault(event, cookies) }}>
+                                        { state.options.text.button__ok }
+                                    </button>
+                                </div>
+                            </div>
                         </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>
@@ -54,6 +65,7 @@
 
         /**
          *  tiny-consent.riot
+         * <li class={ state.hasChanged && cookie.hasConsent === true ? 'tiny-consent__cookie' : 'tiny-consent__cookie show' } each={ (group, index) in state.cookies }>
          *
          *  @author Björn Hase
          *  @license http://opensource.org/licenses/MIT The MIT License
@@ -74,6 +86,7 @@
                     text: {
                         title : 'Cookies',
                         content : 'We are using Cookies and display that was we use, also there are cookies you can accept or reject',
+                        title__default : 'Essential',
                         button__agree : 'Yes',
                         button__reject : 'No',
                         button__ok : 'Ok',
@@ -82,10 +95,14 @@
                         footer__provider: 'Provider',
                         footer__duration: 'Cookie Duration',
                         footer__privacy_policy: 'Privacy Policy'
-                    }
+                    },
+                    offsetLineHeight: 1.15
                 },
                 isOpen: false,
-                hasChanged: false
+                hasChanged: false,
+                cookies: {
+
+                }
             },
 
             /**
@@ -145,6 +162,51 @@
                 return classes.join(' ');
             },
 
+            /**
+             *
+             *  @param  {[type]} cookie [description]
+             *  @return {[type]}        [description]
+             */
+            getWrapperClasses(cookie)
+            {
+                let classes = [
+                    'tiny-consent__wrapper'
+                ];
+
+                if (data[cookie.id] === false) {
+                    classes.push('button--active');
+                }
+
+                return classes.join(' ');
+            },
+
+            /**
+             *  handle accordion, open and close
+             *
+             *
+             *  @param  {object} event
+             *
+             */
+            handleToogle(event)
+            {
+                event.preventDefault();
+
+                let target = event.target;
+
+                if (!event.target.nextElementSibling) {
+                    target = event.target.parentNode;
+                }
+
+                const height = target.nextElementSibling.childNodes[0].offsetHeight * this.state.options.offsetLineHeight;
+                target.classList.toggle('tiny-consent__cookie-accordion-header--open');
+
+                if (!target.nextElementSibling.style.maxHeight) {
+                    target.nextElementSibling.style.maxHeight = height + 'px';
+                } else {
+                    target.nextElementSibling.style.maxHeight = '';
+                }
+            },
+
             /**
              *
              *  @return {Boolean} [description]
@@ -154,8 +216,8 @@
                 let data = this.getData();
                 let result = true;
 
-                this.props.cookies.forEach((cookie) => {
-                    if (data[cookie.id] !== true && cookie.essential === true) {
+                this.state.cookies.default.forEach((cookie) => {
+                    if (data[cookie.id] !== true) {
                         result = false;
                     }
                 });
@@ -170,15 +232,28 @@
             onMounted()
             {
                 window.addEventListener('tiny-consent-open', () => {
-                    this.state.isOpen = true;
-                    this.state.hasChanged = false;
+                    this.root.firstChild.style.bottom = '0px';
                     this.update();
                 });
+
+                // slide and set to visible
+                this.root.firstChild.style.bottom = -(this.root.firstChild.offsetHeight) + 'px';
+                this.root.firstChild.style.visibility = 'visible';
+
+                window.requestAnimationFrame(() => {
+                    this.root.firstChild.classList.add('tiny-consent--animation');
+                    if (this.state.hasChanged === true) {
+                        this.root.firstChild.style.bottom = '0px';
+                    }
+                });
+            },
+
+            push()
+            {
+
             },
 
             /**
-             *
-             *
              *
              *
              */
@@ -190,18 +265,13 @@
                     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();
@@ -209,16 +279,28 @@
                             cookie.handleReject();
                         }
 
-                        this.props.cookies[index].hasConsent = true;
+                        cookie.hasConsent = true;
                     } else {
                         this.state.hasChanged = true;
-                        this.state.isOpen = true;
+                        cookie.hasConsent = false;
+                    }
 
-                        this.props.cookies[index].hasConsent = false;
+                    // adding cookies to state
+                    if (cookie.default) {
+                        if (!this.state.cookies['default']) {
+                            this.state.cookies['default'] = [];
+                        }
+
+                        this.state.cookies['default'].push(cookie);
+                    } else {
+                        if (!this.state.cookies['other']) {
+                            this.state.cookies['other'] = [];
+                        }
+
+                        this.state.cookies['other'].push(cookie);
                     }
-                });
 
-                this.updateEssential();
+                });
             },
 
             /**
@@ -243,21 +325,6 @@
                 }
             },
 
-            /**
-             *
-             *  @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]
@@ -274,15 +341,16 @@
 
                 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]
+             *
+             *
+             *  @param  {object} event
+             *
              */
             handleReject(event, cookie, index) {
                 event.preventDefault();
@@ -295,43 +363,41 @@
 
                 data[cookie.id] = false;
                 Cookie.set(this.state.options.cookie_name, data);
-                this.props.cookies[index].hasConsent = true;
 
                 this.update();
             },
 
             /**
+             *  setting default cookies
              *
-             *  @param  {[type]} event [description]
-             *  @return {[type]}       [description]
+             *  @param  {object} event
              */
-            handleOk(event) {
+            handleDefault(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;
-                    }
+                this.state.cookies.default.forEach((cookie, index) => {
+                    data[cookie.id] = true;
                 });
 
                 Cookie.set(this.state.options.cookie_name, data);
-                this.updateEssential();
 
                 this.update();
             },
 
             /**
+             *  change to open
+             *
+             *  @param  {object} event
              *
-             *  @param  {[type]} event
-             *  @return {[type]}
              */
-            handleClose(event) {
+            handleClose(event)
+            {
                 event.preventDefault();
 
-                this.state.isOpen = false;
+                this.root.firstChild.style.bottom = this.root.firstChild.style.bottom = -(this.root.firstChild.offsetHeight) + 'px';
                 this.update();
             }
         }