Merge branch 'release/1.0.2'

michnhokn · Sep 15, 2020 · 46bc8de · 46bc8de
2 parents 1d0ff02 + 721f471
commit 46bc8de
Show file tree

Hide file tree

Showing 9 changed files with 114 additions and 59 deletions.
diff --git a/assets/cookie-banner.css b/assets/cookie-banner.css
diff --git a/assets/cookie-banner.js b/assets/cookie-banner.js
diff --git a/composer.json b/composer.json
@@ -2,7 +2,7 @@
     "name": "michnhokn/kirby3-cookie-banner",
     "description": "Add a cookie modal to your Kirby3 website",
     "type": "kirby-plugin",
-    "version": "1.0.1",
+    "version": "1.0.2",
     "license": "MIT",
     "authors": [
         {

diff --git a/index.php b/index.php
@@ -5,20 +5,21 @@
 
 Kirby::plugin('michnhokn/cookie-banner', [
     'snippets' => [
-        'cookie-banner' => __DIR__ . '/snippets/cookie-banner.php'
+        'cookie-banner' => __DIR__ . '/snippets/cookie-banner.php',
+        'cookie-banner-option' => __DIR__ . '/snippets/cookie-banner-option.php',
     ],
     'translations' => [
         'de' => [
             'michnhokn.cookie-banner.title' => 'Cookie Einstellungen',
-            'michnhokn.cookie-banner.text' => 'Wir nutzen Cookies um Dir die bestmögliche Erfahrung zu bieten. Außerdem können wir damit das Verhalten der Benutzer analysieren um die Webseite stetig für Dich zu verbessern.',
+            'michnhokn.cookie-banner.text' => 'Wir nutzen Cookies um Dir die bestmögliche Erfahrung zu bieten. Außerdem können wir damit das Verhalten der Benutzer analysieren um die Webseite stetig für Dich zu verbessern. (link: datenschutz text: Datenschutz)',
             'michnhokn.cookie-banner.essentialText' => 'Essentiell',
             'michnhokn.cookie-banner.denyAll' => 'Alle ablehnen',
             'michnhokn.cookie-banner.acceptAll' => 'Alle annehmen',
             'michnhokn.cookie-banner.save' => 'Einstellung speichern',
         ],
         'en' => [
             'michnhokn.cookie-banner.title' => 'Cookie settings',
-            'michnhokn.cookie-banner.text' => 'We use cookies to provide you with the best possible experience. They also allow us to analyze user behavior in order to constantly improve the website for you.',
+            'michnhokn.cookie-banner.text' => 'We use cookies to provide you with the best possible experience. They also allow us to analyze user behavior in order to constantly improve the website for you. (link: privacy-policy text: Privacy Policy)',
             'michnhokn.cookie-banner.essentialText' => 'Essential',
             'michnhokn.cookie-banner.denyAll' => 'Reject All',
             'michnhokn.cookie-banner.acceptAll' => 'Accept All',

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "kirby3-cookie-banner",
-  "version": "0.9.0",
+  "version": "1.0.2",
   "description": "",
   "author": "Michael Scheurich <contact@michaelscheurich.dev>",
   "scripts": {

diff --git a/snippets/cookie-banner-option.php b/snippets/cookie-banner-option.php
@@ -0,0 +1,12 @@
+<?php $checked = $checked ?? ''; ?>
+<?php $disabled = $disabled ?? false; ?>
+<label class="cookie-banner__option <?php e($disabled, 'disabled'); ?>" data-cookie-id="<?= $key ?>">
+    <input class="cookie-banner__checkbox" type="checkbox" <?php e($checked, 'checked'); ?> <?php e($disabled,
+        'disabled'); ?>>
+    <span class="cookie-banner__check">
+        <svg width="12" height="10" viewBox="0 0 12 10" xmlns="http://www.w3.org/2000/svg">
+            <path d="M1 5l3.3 3L11 1" stroke-width="2" fill="none" fill-rule="evenodd"></path>
+        </svg>
+    </span>
+    <span class="cookie-banner__label"><?= $title ?></span>
+</label>
diff --git a/snippets/cookie-banner.php b/snippets/cookie-banner.php
@@ -3,17 +3,20 @@
     <div class="cookie-banner">
         <div class="cookie-banner__content">
             <p class="cookie-banner__title"><?= t('michnhokn.cookie-banner.title') ?></p>
-            <p class="cookie-banner__text"><?= t('michnhokn.cookie-banner.text') ?></p>
+            <p class="cookie-banner__text"><?= kti(t('michnhokn.cookie-banner.text')) ?></p>
             <div class="cookie-banner__options">
-                <label class="cookie-banner__option disabled" data-cookie-id="essential">
-                    <input type="checkbox" checked disabled>
-                    <span><?= t('michnhokn.cookie-banner.essentialText') ?></span>
-                </label>
-                <?php foreach (option('michnhokn.cookie-banner.features') as $key => $cookie): ?>
-                    <label class="cookie-banner__option" data-cookie-id="<?= h($key) ?>">
-                        <input type="checkbox">
-                        <span><?= h($cookie) ?></span>
-                    </label>
+                <?php snippet('cookie-banner-option', [
+                    'disabled' => true,
+                    'checked' => true,
+                    'key' => 'essential',
+                    'title' => t('michnhokn.cookie-banner.essentialText')
+                ]) ?>
+                <?php foreach (option('michnhokn.cookie-banner.features') as $key => $title): ?>
+                    <?php snippet('cookie-banner-option', [
+                        'disabled' => false,
+                        'key' => $key,
+                        'title' => h($title)
+                    ]) ?>
                 <?php endforeach; ?>
             </div>
             <div class="cookie-banner__buttons">

diff --git a/src/js/cookie-banner.js b/src/js/cookie-banner.js
@@ -26,7 +26,7 @@ class CookieBanner {
       $denyButton = document.querySelector(_this.SELECTOS.denyButton),
       $saveButton = document.querySelector(_this.SELECTOS.saveButton);
     $options.forEach(option => {
-      option.addEventListener('change', event => {
+      option.addEventListener('change', _ => {
         _this.checkOptions();
       });
     });
@@ -62,7 +62,8 @@ class CookieBanner {
       _this.addClass(_this.SELECTOS.acceptButton, _this.CLASSES.buttonHide);
       _this.addClass(_this.SELECTOS.denyButton, _this.CLASSES.buttonHide);
       _this.removeClass(_this.SELECTOS.saveButton, _this.CLASSES.buttonHide);
-    } else {
+    }
+    else {
       _this.removeClass(_this.SELECTOS.acceptButton, _this.CLASSES.buttonHide);
       _this.removeClass(_this.SELECTOS.denyButton, _this.CLASSES.buttonHide);
       _this.addClass(_this.SELECTOS.saveButton, _this.CLASSES.buttonHide);
@@ -83,14 +84,16 @@ class CookieBanner {
 
   getOptions(status) {
     let _this = this, optionsString = '';
-    document.querySelectorAll(_this.SELECTOS.options).forEach(option => {
+    document.querySelectorAll(_this.SELECTOS.options).forEach((option, i) => {
       switch (status) {
         case 'all':
-          optionsString += option.dataset.cookieId + ',';
+          optionsString += i > 0 ? ',' : '';
+          optionsString += option.dataset.cookieId;
           break;
         case 'custom':
           if (option.querySelector('input').checked) {
-            optionsString += option.dataset.cookieId + ',';
+            optionsString += i > 0 ? ',' : '';
+            optionsString += option.dataset.cookieId;
           }
           break;
         default: