adding

demo.scss

@@ -29,12 +29,17 @@
 
     &__header {
         position: relative;
+
+        p {
+            margin: 10px 0 30px;
+        }
     }
 
     &__close {
         position: absolute;
         top: 0;
         right: 0;
+        margin: -8px 0 0 0;
     }
 
     &__cookies {
@@ -50,17 +55,11 @@
             list-style: none;
             margin: 0;
             padding: 0;
-            border: 2px white solid;
+            border: 1px white solid;
             padding: 15px 18px;
             margin-bottom: 10px;
         }
 
-        &-title {
-            display: inline-block;
-            margin-right: 10px;
-            font-weight: bold;
-        }
-
         &-content {
             max-width: 80%;
 
@@ -141,7 +140,7 @@
 
     .button {
         background: black;
-        border: 2px solid white;
+        border: 1px solid white;
         padding: .5em 1.8em;
         color: white;
         font-size: 0.9rem;

dist/css/demo.css

@@ -1 +1 @@
-.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}
+.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__header p{margin:10px 0 30px}.tiny-consent__close{position:absolute;top:0;right:0;margin:-8px 0 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:1px solid #fff;padding:15px 18px;margin:0 0 10px}.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:1px 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.1.4",
+    "version": "1.1.5",
     "description": "Consent Banner for GDPR with RiotJS, part of Tiny-Components",
     "scripts": {
         "dev": "npm run development",

src/TinyConsent.riot

@@ -1,62 +1,59 @@
 <tiny-consent>
     <div id="tiny-consent" class="tiny-consent">
         <div class="tiny-consent__inner">
-        <div class="tiny-consent__header">
-            <h3 class="tiny_consent__title">
-                { state.options.text.title }
-            </h3>
-            <p if={ state.options.text.content } >
-                { state.options.text.content }
-            </p>
-            <div class="tiny-consent__close">
-                <button class="button button--submit tiny-consent__button" onclick={ handleClose }>
-                    <span if={ state.hasInitiated === false }>{ state.options.text.button__ok }</span>
-                    <span if={ state.hasInitiated === true }>{ state.options.text.button__close }</span>
-                </button>
+            <div class="tiny-consent__header">
+                <p if={ state.options.text.content } >
+                    { state.options.text.content }
+                </p>
+                <div class="tiny-consent__close">
+                    <button class="button button--submit tiny-consent__button" onclick={ handleClose }>
+                        <span if={ state.hasInitiated === false }>{ state.options.text.button__roger }</span>
+                        <span if={ state.hasInitiated === true }>{ state.options.text.button__close }</span>
+                    </button>
+                </div>
             </div>
-        </div>
-        <div class="tiny-consent__main">
-            <ul class="tiny-consent__cookies">
-                <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={ () => { handleToogle() }}>
-                        { 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 target="_blank" href="{ cookie.privacy_policy }">{ state.options.text.footer__privacy_policy }</a></li>
-                                        </ul>
+            <div class="tiny-consent__main">
+                <ul class="tiny-consent__cookies">
+                    <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={ () => { handleToogle() }}>
+                            { 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 target="_blank" href="{ cookie.privacy_policy }">{ state.options.text.footer__privacy_policy }</a></li>
+                                            </ul>
+                                        </div>
+                                    </div>
+                                    <div if={ group[0] === 'other' } class="tiny-consent__cookie-decision">
+                                        <button  class={ getAgreeClasses(cookie) } onclick={ () => { handleAgree(cookie) } }>
+                                            { state.options.text.button__agree }
+                                        </button>
+                                        <button if={ group[0] === 'other' } class={ getRejectClasses(cookie) } onclick={ () => { handleReject(cookie) } }>
+                                            { 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(cookies) }}>
+                                            { state.options.text.button__ok }
+                                        </button>
                                     </div>
-                                </div>
-                                <div if={ group[0] === 'other' } class="tiny-consent__cookie-decision">
-                                    <button  class={ getAgreeClasses(cookie) } onclick={ () => { handleAgree(cookie) } }>
-                                        { state.options.text.button__agree }
-                                    </button>
-                                    <button if={ group[0] === 'other' } class={ getRejectClasses(cookie) } onclick={ () => { handleReject(cookie) } }>
-                                        { 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(cookies) }}>
-                                        { state.options.text.button__ok }
-                                    </button>
                                 </div>
                             </div>
                         </div>
-                    </div>
-                </li>
-            </ul>
-        </div>
+                    </li>
+                </ul>
+            </div>
         </div>
     </div>
 
@@ -86,12 +83,12 @@
                 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',
                         title__default : 'Essential',
                         button__agree : 'Yes',
                         button__reject : 'No',
                         button__ok : 'Ok',
+                        button__roger : 'Roger that',
                         button__close : 'Close',
                         footer__name: 'Cookie Name',
                         footer__provider: 'Provider',
@@ -126,8 +123,8 @@
             /**
              *
              *
-             *  @param  {Object} cookie
-             *  @return {String}
+             *  @param  {object} cookie
+             *  @return {string}
              */
             getAgreeClasses(cookie)
             {
@@ -147,8 +144,9 @@
 
             /**
              *
-             *  @param  {[type]} cookie [description]
-             *  @return {[type]}        [description]
+             *
+             *  @param  {object} cookie
+             *  @return {string}
              */
             getRejectClasses(cookie)
             {
@@ -167,9 +165,10 @@
             },
 
             /**
+             *  get classes of button is active or not
              *
-             *  @param  {[type]} cookie [description]
-             *  @return {[type]}        [description]
+             *  @param  {object} cookie
+             *  @return {string}
              */
             getWrapperClasses(cookie)
             {
@@ -188,7 +187,7 @@
              *  handle accordion, open and close
              *
              *
-             *  @param  {object} event
+             *  @param {object} event
              *
              */
             handleToogle()
@@ -210,8 +209,9 @@
             },
 
             /**
+             *  check if default cookie is set in data
              *
-             *  @return {Boolean} [description]
+             *  @return {Boolean}
              */
             isOk()
             {
@@ -302,18 +302,30 @@
             },
 
             /**
+             *  check if
+             *
              *
-             *  @return {[type]}
              */
             beforeUpdate() {
-                if (this.state.hasInitiated === false && this.state.cookies.other.length > 0) {
+                if (this.state.hasInitiated === false) {
 
+                    // if it has to closing
                     let hasClosing = true;
 
+                    // data
                     let data = this.getData();
 
-                    this.state.cookies.other.forEach((cookie) => {
-                        if (data[cookie.id] === false) {
+                    // cookies
+                    let cookies = [];
+
+                    if (this.state.cookies.other && this.state.cookies.other.length > 0) {
+                        cookies = this.state.cookies.other;
+                    } else if (!this.state.cookies.other && this.state.cookies.default && this.state.cookies.default.length > 0) {
+                        cookies = this.state.cookies.default;
+                    }
+
+                    cookies.forEach((cookie) => {
+                        if (data[cookie.id] === undefined) {
                             hasClosing = false;
                         }
                     });
@@ -327,9 +339,10 @@
             },
 
             /**
+             *  handle if user agree cookie
+             *
+             *  @param  {object} event
              *
-             *  @param  {[type]} event [description]
-             *  @return {[type]}       [description]
              */
             handleAgree(cookie, index) {
                 let data = this.getData();
@@ -346,8 +359,7 @@
             },
 
             /**
-             *
-             *
+             *  handle if user reject cookie
              *
              *  @param  {object} event
              *
@@ -370,9 +382,9 @@
              *  setting default cookies
              *
              *  @param  {object} event
+             *
              */
             handleDefault() {
-
                 let data = this.getData();
 
                 this.state.cookies.default.forEach((cookie, index) => {
@@ -381,6 +393,7 @@
 
                 Cookie.set(this.state.options.cookie_name, data);
 
+                this.beforeUpdate();
                 this.update();
             },
 
@@ -396,17 +409,21 @@
             /**
              *  change to open
              *
+             *
              *  @param  {object} event
              *
              */
             handleClose()
             {
                 if (this.state.hasInitiated === false) {
-                    this.state.cookies.other.forEach((cookie) => {
-                        this.handleReject(cookie);
-                        this.handleDefault();
-                        this.state.hasInitiated = true;
-                    });
+                    if (this.state.cookies.other) {
+                        this.state.cookies.other.forEach((cookie) => {
+                            this.handleReject(cookie);
+                        });
+                    }
+
+                    this.state.hasInitiated = true;
+                    this.handleDefault();
                 }
 
                 this.close();