adding

package.json

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

src/TinyConsent.riot

@@ -10,14 +10,15 @@
             </p>
             <div class="tiny-consent__close">
                 <button class="button button--submit tiny-consent__button" onclick={ handleClose }>
-                    { state.options.text.button__close }
+                    <span if={ state.hasInitiated === false }>{ state.options.text.button__ok }</span>
+                    <span if={ state.hasInitiated === true }>{ state.options.text.button__close }</span>
                 </button>
             </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={ (event) => { handleToogle(event) }}>
+                    <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' : '' }">
@@ -33,20 +34,20 @@
                                             <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>
+                                            <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={ (event) => {  handleAgree(event, cookie, index) }}>
+                                    <button  class={ getAgreeClasses(cookie) } onclick={ () => { handleAgree(cookie) } }>
                                         { state.options.text.button__agree }
                                     </button>
-                                    <button if={ group[0] === 'other' } class={ getRejectClasses(cookie) } onclick={ (event) => { handleReject(event, cookie, index) }}>
+                                    <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(event, cookies) }}>
+                                    <button disabled={ isOk() } class="button button--ok tiny-consent__button" onclick={ (event) => { handleDefault(cookies) }}>
                                         { state.options.text.button__ok }
                                     </button>
                                 </div>
@@ -99,16 +100,17 @@
                     },
                     offsetLineHeight: 1.15
                 },
-                isOpen: false,
                 hasChanged: false,
+                hasInitiated: false,
                 cookies: {
 
                 }
             },
 
             /**
+             *  getting cookie data as object
              *
-             *  @return {[type]} [description]
+             *  @return {object}
              */
             getData()
             {
@@ -189,10 +191,8 @@
              *  @param  {object} event
              *
              */
-            handleToogle(event)
+            handleToogle()
             {
-                event.preventDefault();
-
                 let target = event.target;
 
                 if (!event.target.nextElementSibling) {
@@ -248,12 +248,6 @@
                         this.root.firstChild.style.bottom = '0px';
                     }
                 });
-
-                const essential = this.$('.button--ok.tiny-consent__button:not([disabled])');
-
-                if (essential) {
-                    essential.click();
-                }
             },
 
             /**
@@ -269,8 +263,8 @@
                 }
 
                 // check if consent already has set
-                if (Object.entries(data).length === 0) {
-                    this.state.hasChanged = true;
+                if (Object.entries(data).length > 0) {
+                    this.state.hasInitiated = true;
                 }
 
                 this.props.cookies.forEach((cookie, index) => {
@@ -295,6 +289,7 @@
                         }
 
                         this.state.cookies['default'].push(cookie);
+
                     } else {
                         if (!this.state.cookies['other']) {
                             this.state.cookies['other'] = [];
@@ -310,20 +305,23 @@
              *
              *  @return {[type]}
              */
-            onBeforeUpdate() {
+            beforeUpdate() {
+                if (this.state.hasInitiated === false && this.state.cookies.other.length > 0) {
 
-                // state
-                if (this.state.hasChanged === true) {
-                    let hasToClose = true;
+                    let hasClosing = true;
 
-                    this.props.cookies.forEach((cookie) => {
-                        if (cookie.hasConsent !== true) {
-                            hasToClose = false;
+                    let data = this.getData();
+
+                    this.state.cookies.other.forEach((cookie) => {
+                        if (data[cookie.id] === false) {
+                            hasClosing = false;
                         }
                     });
 
-                    if (hasToClose === true) {
-                        this.state.isOpen = false;
+                    if (hasClosing === true) {
+                        this.state.hasInitiated = true;
+                        this.handleDefault();
+                        this.close();
                     }
                 }
             },
@@ -333,9 +331,7 @@
              *  @param  {[type]} event [description]
              *  @return {[type]}       [description]
              */
-            handleAgree(event, cookie, index) {
-                event.preventDefault();
-
+            handleAgree(cookie, index) {
                 let data = this.getData();
 
                 if (cookie.handleAgree) {
@@ -345,6 +341,7 @@
                 data[cookie.id] = true;
                 Cookie.set(this.state.options.cookie_name, data);
 
+                this.beforeUpdate();
                 this.update();
             },
 
@@ -355,9 +352,7 @@
              *  @param  {object} event
              *
              */
-            handleReject(event, cookie, index) {
-                event.preventDefault();
-
+            handleReject(cookie) {
                 let data = this.getData();
 
                 if (cookie.handleReject) {
@@ -367,6 +362,7 @@
                 data[cookie.id] = false;
                 Cookie.set(this.state.options.cookie_name, data);
 
+                this.beforeUpdate();
                 this.update();
             },
 
@@ -375,9 +371,7 @@
              *
              *  @param  {object} event
              */
-            handleDefault(event)
-            {
-                event.preventDefault();
+            handleDefault() {
 
                 let data = this.getData();
 
@@ -390,17 +384,32 @@
                 this.update();
             },
 
+            /**
+             *
+             *
+             */
+            close()
+            {
+                this.root.firstChild.style.bottom = this.root.firstChild.style.bottom = -(this.root.firstChild.offsetHeight) + 'px';
+            },
+
             /**
              *  change to open
              *
              *  @param  {object} event
              *
              */
-            handleClose(event)
+            handleClose()
             {
-                event.preventDefault();
+                if (this.state.hasInitiated === false) {
+                    this.state.cookies.other.forEach((cookie) => {
+                        this.handleReject(cookie);
+                        this.handleDefault();
+                        this.state.hasInitiated = true;
+                    });
+                }
 
-                this.root.firstChild.style.bottom = this.root.firstChild.style.bottom = -(this.root.firstChild.offsetHeight) + 'px';
+                this.close();
                 this.update();
             }
         }