adding

demo.js

@@ -6,8 +6,8 @@ riot.register('tiny-consent', TinyConsent);
 riot.register('tiny-consent-button', TinyConsentButton);
 
 const data = {
-    text: {
-        content: undefined
+    options: {
+        force: true
     },
     cookies: [{
         title: 'Matomo',
@@ -23,6 +23,20 @@ const data = {
         handleReject: function() {
             console.log('reject');
         }
+    },{
+        title: 'Matomo',
+        name: 'matamo_',
+        id: 'matamo2',
+        content: 'Cookie from Matamo for Website-Analytics. Creates statiscial Data how the User uses this Website',
+        provider: 'Tentakelfabrik.de',
+        duration: '1 Year',
+        privacy_policy: 'https://tentakelfabrik.de/datenschutzerklarung',
+        handleAgree: function() {
+            console.log('agree');
+        },
+        handleReject: function() {
+            console.log('reject');
+        }
     },{
         title: 'Tiny Consent',
         id: 'tiny_consent',

package.json

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

src/TinyConsent.riot

@@ -6,19 +6,22 @@
                     { 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 if={ state.options.force } class="button tiny-consent__button" onclick={ handleAcceptAll }>
+                        { state.options.text.button__accept_all }
+                    </button>
+                    <button class="button tiny-consent__button" onclick={ handleClose }>
+                        <span if={ !state.options.force && state.hasInitiated === false }>{ state.options.text.button__roger }</span>
+                        <span if={ (state.options.force && state.hasInitiated === false) || 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' } onclick={ () => { handleToogle() }}>
-                            { state.options.text.title__default } ({ group[1].length }) <span class="tiny-consent__cookie-accordion-header-icon">&#9650;</span>
+                        <header class="tiny-consent__cookie-accordion-header" if={ group[0] === 'default' || (group[0] === 'other' && group[0].length > 1) } onclick={ () => { handleToogle() }}>
+                            { state.options.text['title__' + group[0]] } ({ group[1].length }) <span class="tiny-consent__cookie-accordion-header-icon">&#9650;</span>
                         </header>
-                        <div class="tiny-consent__cookie-accordion{ group[0] === 'default' ? ' tiny-consent__cookie-accordion--active' : '' }">
+                        <div class="tiny-consent__cookie-accordion{ group[0] === 'default' || (group[0] === 'other' && group[0].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">
@@ -64,7 +67,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
@@ -85,17 +88,21 @@
                     text: {
                         content : 'We are using Cookies and display that was we use, also there are cookies you can accept or reject',
                         title__default : 'Essential',
+                        title__other : 'Optional',
                         button__agree : 'Yes',
                         button__reject : 'No',
                         button__ok : 'Ok',
                         button__roger : 'Roger that',
                         button__close : 'Close',
+                        button__accept_all: 'Accept all',
                         footer__name: 'Cookie Name',
                         footer__provider: 'Provider',
                         footer__duration: 'Cookie Duration',
                         footer__privacy_policy: 'Privacy Policy'
                     },
-                    offsetLineHeight: 1.15
+                    offsetLineHeight: 1.15,
+                    expires: 180,
+                    force: false
                 },
                 hasChanged: false,
                 hasInitiated: false,
@@ -352,7 +359,7 @@
                 }
 
                 data[cookie.id] = true;
-                Cookie.set(this.state.options.cookie_name, data);
+                Cookie.set(this.state.options.cookie_name, data, { expires: this.state.options.expires });
 
                 this.beforeUpdate();
                 this.update();
@@ -372,7 +379,7 @@
                 }
 
                 data[cookie.id] = false;
-                Cookie.set(this.state.options.cookie_name, data);
+                Cookie.set(this.state.options.cookie_name, data, { expires: this.state.options.expires });
 
                 this.beforeUpdate();
                 this.update();
@@ -391,7 +398,7 @@
                     data[cookie.id] = true;
                 });
 
-                Cookie.set(this.state.options.cookie_name, data);
+                Cookie.set(this.state.options.cookie_name, data, { expires: this.state.options.expires });
 
                 this.beforeUpdate();
                 this.update();
@@ -406,6 +413,26 @@
                 this.root.firstChild.style.bottom = this.root.firstChild.style.bottom = -(this.root.firstChild.offsetHeight) + 'px';
             },
 
+            /**
+             *
+             *
+             *  @return {object} event
+             */
+            handleAcceptAll()
+            {
+                if (this.state.cookies.other) {
+                    this.state.cookies.other.forEach((cookie) => {
+                        this.handleAgree(cookie);
+                    });
+                }
+
+                this.state.hasInitiated = true;
+                this.handleDefault();
+
+                this.close();
+                this.update();
+            },
+
             /**
              *  change to open
              *