j1-template 2021.1.0 → 2021.1.5

data/assets/themes/j1/adapter/js/{cookiebar.js → cookieConsent.js}

@@ -6,8 +6,8 @@ regenerate:                             true
 
 {% comment %}
  # -----------------------------------------------------------------------------
- # ~/assets/themes/j1/adapter/js/cookiebar.js
- # Liquid template to create the Template Adapter for J1 Cookiebar
+ # ~/assets/themes/j1/adapter/js/cookieConsent.js
+ # Liquid template to create the Template Adapter for J1 CookieConsent
  #
  # Product/Info:
  # http://jekyll.one
@@ -27,17 +27,18 @@ regenerate:                             true
 
 {% comment %} Set config files
 -------------------------------------------------------------------------------- {% endcomment %}
-{% assign environment           = site.environment %}
-{% assign modules               = site.data.modules %}
+{% assign environment         = site.environment %}
+{% assign modules             = site.data.modules %}
 
 {% comment %} Set config data
 -------------------------------------------------------------------------------- {% endcomment %}
-{% assign cookiebar_settings    = modules.cookiebar.settings %}
-{% assign cookiebar_defaults    = modules.defaults.cookiebar.defaults %}
+{% assign consent_defaults    = modules.defaults.cookieconsent.defaults %}
+{% assign consent_settings    = modules.cookieconsent.settings %}
+{% assign tracking_id         = site.data.j1_config.analytics.google.tracking_id %}
 
 {% comment %} Set config options
 -------------------------------------------------------------------------------- {% endcomment %}
-{% assign cookiebar_options     = cookiebar_defaults | merge: cookiebar_settings %}
+{% assign consent_options     = consent_defaults | merge: consent_settings %}
 
 {% assign production = false %}
 {% if environment == 'prod' or environment == 'production' %}
@@ -46,21 +47,20 @@ regenerate:                             true
 
 /*
  # -----------------------------------------------------------------------------
- # ~/assets/themes/j1/adapter/js/cookiebar.js
- # JS Adapter for Cookiebar
+ # ~/assets/themes/j1/adapter/js/cookieConsent.js
+ # JS Adapter for J1 CookieConsent
  #
- # Product/Info:
- # http://jekyll.one
- # http://www.primebox.co.uk/projects/jquery-cookiebar/
+ #  Product/Info:
+ #  https://shaack.com
+ #  http://jekyll.one
  #
- # Copyright (C) 2021 Juergen Adams
- # Copyright (C) 2016 Ant Parsons (primebox.co.uk)
- #
- # J1 Template is licensed under the MIT License.
- # For details, see https://jekyll.one
- # jQuery Cookibar is licensed under Creative Commons Attribution 3.0 Unported License.
- # For details, see http://www.primebox.co.uk/projects/jquery-cookiebar/
+ #  Copyright (C) 2020 Stefan Haack
+ #  Copyright (C) 2021 Juergen Adams
  #
+ #  bootstrap-cookie-banner is licensed under MIT License.
+ #  See: https://github.com/shaack/bootstrap-cookie-banner/blob/master/LICENSE
+ #  J1 Template is licensed under MIT License.
+ #  See: https://github.com/jekyll-one/J1 Template/blob/master/LICENSE
  # -----------------------------------------------------------------------------
  #  Adapter generated: {{site.time}}
  # -----------------------------------------------------------------------------
@@ -76,14 +76,15 @@ regenerate:                             true
 
 {% comment %} Main
 --------------------------------------------------------------- {% endcomment %}
-j1.adapter['cookiebar'] = (function (j1, window) {
+j1.adapter['cookieConsent'] = (function (j1, window) {
 
   var environment   = '{{environment}}';
   var moduleOptions = {};
   var _this;
+  var $modal;
+  var user_cookie;
   var logger;
   var logText;
-
   // ---------------------------------------------------------------------------
   // Helper functions
   // ---------------------------------------------------------------------------
@@ -98,11 +99,20 @@ j1.adapter['cookiebar'] = (function (j1, window) {
     // -------------------------------------------------------------------------
     init: function (options) {
 
+      // -----------------------------------------------------------------------
+      // globals
+      // -----------------------------------------------------------------------
+      _this   = j1.adapter.cookieConsent;
+      logger  = log4javascript.getLogger('j1.adapter.cookieConsent');
+
+      // initialize state flag
+      _this.state = 'pending';
+
       // -----------------------------------------------------------------------
       // Default module settings
       // -----------------------------------------------------------------------
       var settings = $.extend({
-        module_name: 'j1.adapter.algolia',
+        module_name: 'j1.adapter.cookieConsent',
         generated:   '{{site.time}}'
       }, options);
 
@@ -110,7 +120,7 @@ j1.adapter['cookiebar'] = (function (j1, window) {
       -------------------------------------------------------------------------- {% endcomment %}
       // Load  module DEFAULTS|CONFIG
       /* eslint-disable */
-      moduleOptions = $.extend({}, {{cookiebar_options | replace: '=>', ':' | replace: 'nil', '""'}});
+      moduleOptions = $.extend({}, {{consent_options | replace: '=>', ':' | replace: 'nil', '""'}});
       /* eslint-enable */
 
       if (typeof settings !== 'undefined') {
@@ -120,46 +130,32 @@ j1.adapter['cookiebar'] = (function (j1, window) {
       // -----------------------------------------------------------------------
       // initializer
       // -----------------------------------------------------------------------
-      _this   = j1.adapter.cookiebar;
-      logger  = log4javascript.getLogger('j1.adapter.cookiebar');
-
       _this.setState('started');
       logger.info('state: ' + _this.getState());
       logger.info('module is being initialized');
 
-      j1.core.cookiebar.init({
-        expireDays:             {{ cookiebar_options.expireDays | json }},
-        renewOnVisit:           {{ cookiebar_options.renewOnVisit | json }},
-        forceShow:              {{ cookiebar_options.forceShow | json }},
-        domain:                 {{ cookiebar_options.domain | json }},
-        referrer:               {{ cookiebar_options.referrer | json }}
+      j1.cookieConsent = new BootstrapCookieConsent({
+        contentURL:             moduleOptions.contentURL,
+        cookieName:             moduleOptions.cookieName,
+        language:               moduleOptions.language,
+        whitelisted:            moduleOptions.whitelisted,
+        reloadPageOnChange:     moduleOptions.reloadCurrentPage,
+        xhr_data_element:       moduleOptions.xhr_data_element + '-' + moduleOptions.language,
+        postSelectionCallback:  function () {
+            j1.adapter.cookieConsent.cbCookie()
+        }
       });
 
-      j1.xhrData(moduleOptions, 'j1.adapter.cookiebar', 'data_loaded');
-
-      // ---------------------------------------------------------------------
-      // Initialize events if all modals loaded
-      // ---------------------------------------------------------------------
-      var dependencies_met_modals_loaded = setInterval (function () {
-        if (j1.xhrDataState['#{{cookiebar_options.xhr_container_id}}'] == 'success') {
-          logger.info('load HTML data (AJAX): finished');
-          j1.core.cookiebar.eventHandler(moduleOptions);
+      var dependencies_met_page_ready = setInterval (function (options) {
+        if ( j1.cookieConsent && j1.getState() === 'finished' ) {
           _this.setState('finished');
           logger.info('state: ' + _this.getState());
-          logger.info('initializing module finished');
-          clearInterval(dependencies_met_modals_loaded);
-          logger.info('met dependencies for: xhrData');
+          logger.debug('module initialized successfully');
+          clearInterval(dependencies_met_page_ready);
         }
-        if (j1.xhrDataState['#{{cookiebar_options.xhr_container_id}}'] == 'not loaded') {
-          logger.error('load HTML data (AJAX): failed');
-          _this.setState('finished');
-          logger.info('state: ' + _this.getState());
-          logger.info('initializing module finished');
-          clearInterval(dependencies_met_modals_loaded);
-        }
-      }, 25); // END dependencies_met_modals_loaded
-    }, // END init
+      });
 
+    }, // END init
 
     // -------------------------------------------------------------------------
     // messageHandler: MessageHandler for J1 CookieConsent module
@@ -202,7 +198,59 @@ j1.adapter['cookiebar'] = (function (j1, window) {
     // -------------------------------------------------------------------------
     getState: function () {
       return _this.state;
-    } // END getState
+    }, // END getState
+
+    // -------------------------------------------------------------------------
+    // cbCookie()
+    // Callback function called by CookieConsent module after the user has
+    // made his selection
+    // -------------------------------------------------------------------------
+    // TODO:
+    // If ONLY required setting selected, make j1.user.consent
+    // a SESSION cookie!!!
+    // -------------------------------------------------------------------------
+    cbCookie: function () {
+      var gaCookies     = j1.findCookie('_ga');
+      var user_cookie   = j1.readCookie('j1.user.consent');
+      var json          = JSON.stringify(user_cookie);
+
+      logger.info('Entered post selection callback from CookieConsent');
+      logger.info('Current values from CookieConsent: ' + json);
+
+      // gaCookies.forEach(item => console.log('cookieConsent: ' + item));
+
+      // Manage Google Analytics OptIn/Out
+      // See: https://github.com/luciomartinez/gtag-opt-in/wiki
+      //
+      GTagOptIn.register('{{tracking_id}}');
+      if (user_cookie.analyses)  {
+        logger.info('Enable: GA');
+        GTagOptIn.optIn();
+      } else {
+        logger.warn('Disable: GA');
+        GTagOptIn.optOut();
+        var gaCookies = j1.findCookie('_ga');
+        gaCookies.forEach(function (item) {
+          logger.warn('Delete GA cookie: ' + item);
+          j1.removeCookie({
+            name: item,
+            path: '/'
+          });
+        });
+      }
+
+      // enable cookie button if not visible
+      //
+      if ($('#quickLinksCookieButton').css('display') === 'none')  {
+        $('#quickLinksCookieButton').css('display', 'block');
+      }
+
+      // reload page after selection
+      //
+      // $('#no_flicker').css('display', 'none');
+      location.reload();
+
+    } // END cbCookie
 
   }; // END return
 })(j1, window);

data/assets/themes/j1/adapter/js/j1.js

@@ -23,7 +23,7 @@ regenerate:                             true
 {% endcomment %}
 
 {% comment %} Liquid procedures
--------------------------------------------------------------------------------- {% endcomment %}
+------------------------------------------------------------------------------- {% endcomment %}
 
 {% comment %} Set global settings
 -------------------------------------------------------------------------------- {% endcomment %}
@@ -132,12 +132,14 @@ var j1 = (function () {
   var user_session_detected;
 
   // Connector settings
-  var translation_enabled = {{template_config.translation.enabled}};
+  var translation_enabled       = {{template_config.translation.enabled}};
 
   // Theme information
   var themeName;
   var themeCss;
-  var themeExtensionCss = environment === 'production' ? '/assets/themes/j1/core/css/themes/theme-extensions.min.css' : '/assets/themes/j1/core/css/themes/theme-extensions.css';
+  var themeExtensionCss         = environment === 'production'
+                                  ? '/assets/themes/j1/core/css/themes/theme-extensions.min.css'
+                                  : '/assets/themes/j1/core/css/themes/theme-extensions.css';
 
   // Pathes of J1 data files
   var colors_data_path          = '{{template_config.colors_data_path}}';
@@ -162,12 +164,13 @@ var j1 = (function () {
   // var default_theme_name          = 'uno-light';
   // var default_theme_author        = 'J1 Team';
   // var default_theme_link          = 'https://jekyll.one/';
-  var default_white_listed_pages  = [];
+  // var default_white_listed_pages  = [];
 
   var cookie_names = {
     'app_session':  '{{template_config.cookies.app_session}}',
     'user_session': '{{template_config.cookies.user_session}}',
-    'user_state':   '{{template_config.cookies.user_state}}'
+    'user_state':   '{{template_config.cookies.user_state}}',
+    'user_consent': 'j1.user.consent'
   };
 
   // user SESSION cookie (initial values)
@@ -190,19 +193,29 @@ var j1 = (function () {
   };
 
   // user STATE cookie (initial values)
+  // var user_state = {
+  //   'theme_css':            "",
+  //   'theme_name':           "",
+  //   'theme_author':         "",
+  //   'theme_version':        '{{site.version}}',
+  //   'cookies_accepted':     'pending',
+  //   'whitelistedPages':     default_white_listed_pages,
+  //   'deleteOnDecline':      false,
+  //   'showConsentOnPending': false,
+  //   'stopScrolling':        true,
+  //   'session_active':       false,
+  //   'last_session_ts':      '',
+  //   'cc_authenticated':     false
+  // };
+
   var user_state = {
     'theme_css':            "",
     'theme_name':           "",
     'theme_author':         "",
     'theme_version':        '{{site.version}}',
-    'cookies_accepted':     'pending',
-    'whitelistedPages':     default_white_listed_pages,
-    'deleteOnDecline':      false,
-    'showConsentOnPending': false,
     'stopScrolling':        true,
     'session_active':       false,
-    'last_session_ts':      '',
-    'cc_authenticated':     false
+    'last_session_ts':      ''
   };
 
   // ---------------------------------------------------------------------------
@@ -586,7 +599,8 @@ var j1 = (function () {
           if (selector.length) {
             logText = 'loading banner on id: ' +banner[i];
             logger.info(logText);
-            var banner_data_path = '{{banner_data_path}} ' + id + ' > *';
+//          var banner_data_path = '{{banner_data_path}} ' + id + ' > *';
+            var banner_data_path = '{{banner_data_path}} ' + id;
             selector.load(banner_data_path, cb_load_closure(id));
           }
         } // END for
@@ -689,7 +703,8 @@ var j1 = (function () {
           if ( selector.length ) {
             logText = 'loading panel on id: ' +panel[i];
             logger.info(logText);
-            var panel_data_path = '{{panel_data_path}} ' + id + ' > *';
+//          var panel_data_path = '{{panel_data_path}} ' + id + ' > *';
+            var panel_data_path = '{{panel_data_path}} ' + id;
             selector.load(panel_data_path, cb_load_closure(id));
           }
         } // END for
@@ -749,7 +764,8 @@ var j1 = (function () {
       var id = '#' + '{{footer_id}}';
       var selector = $(id);
       if ( selector.length ) {
-        var footer_data_path = '{{footer_data_path}}';
+//      var footer_data_path = '{{footer_data_path}} ' + id + ' > *';
+        var footer_data_path = '{{footer_data_path}} ' + id;
         selector.load(footer_data_path, cb_load_closure(id));
       } else {
         logText = 'data not loaded';
@@ -835,7 +851,7 @@ var j1 = (function () {
             $('#no_flicker').css('display', 'block');
 
             // show|hide cookie icon (should MOVED to Cookiebar ???)
-            if (user_state.cookies_accepted === 'accepted') {
+            if (j1.existsCookie(cookie_names.user_consent)) {
               // Display cookie icon
               logText = 'show cookie icon';
               logger.info(logText);
@@ -929,7 +945,7 @@ var j1 = (function () {
           }
 
           // show|hide cookie icon (should MOVED to Cookiebar ???)
-          if (user_state.cookies_accepted === 'accepted') {
+          if (j1.existsCookie(cookie_names.user_consent)) {
             // Display cookie icon
             logText = 'show cookie icon';
             logger.info(logText);
@@ -1161,15 +1177,20 @@ var j1 = (function () {
           }
         };
       };
+
       // see: https://stackoverflow.com/questions/20420577/detect-added-element-to-dom-with-mutation-observer
+      //
       var html_data_path;
       var id        = '#' + options.xhr_container_id;
+      var container = '#' + options.xhr_container_id + '_container';
       var $selector = $(id);
 
       if ( $selector.length ) {
         if (options.xhr_data_element) {
-          html_data_path = options.xhr_data_path + ' #' + options.xhr_data_element + ' > *';
+          html_data_path = options.xhr_data_path + ' #' + options.xhr_data_element;
+          logger.info('XHR data element found: ' + options.xhr_data_element);
         } else  {
+          logger.warn('no XHR data element found. HTML data loaded full page.');
           html_data_path = options.xhr_data_path + ' > *';
         }
         $selector.load( html_data_path, cb_load_closure( mod, id ) );
@@ -1234,6 +1255,19 @@ var j1 = (function () {
       }
     }, // END readCookie
 
+    // -------------------------------------------------------------------------
+    // findCookie()
+    // Search for cookies (names) in the page header that matches
+    // a given regex string. Returns all names found as an array.
+    // -------------------------------------------------------------------------
+    // See: https://stackoverflow.com/questions/52287989/javascript-cookie-remove-or-delete-with-regex-regular-expression
+    // -------------------------------------------------------------------------
+    findCookie: function (regex) {
+      var r=[];
+      document.cookie.replace(new RegExp(regex + "[^= ]*", "g"), function(a){ r.push(a.trim()); });
+      return r;
+    }, // END findCookie
+
     // -------------------------------------------------------------------------
     // writeCookie()
     // Write 'data' to a cookie 'name'. If not exists, the cookie gets
@@ -1268,7 +1302,7 @@ var j1 = (function () {
           expires: 0,
           path: '/',
 //        SameSite: 'Strict',
-          SameSite: 'Lax',
+//        SameSite: 'Lax',
           http_only: false,
           secure: false
       };
@@ -1349,8 +1383,7 @@ var j1 = (function () {
     // by the browser if the last session (browser window) is closed.
     // See: https://stackoverflow.com/questions/179355/clearing-all-cookies-with-javascript
     // -------------------------------------------------------------------------
-    deleteCookie: function (options) {
-      var name        = options;
+    deleteCookie: function (name) {
       var all_cookies = document.cookie.split('; ');
 
       if ( name === 'all' ) {

data/assets/themes/j1/adapter/js/justifiedGalleryCustomizer.js

@@ -152,8 +152,9 @@ j1.adapter['justifiedGalleryCustomizer'] = (function (j1, window) {
       // data loader
       // ---------------------------------------------------------------------
       j1.xhrData ({
-        xhr_container_id: customizerOptions.xhr_container_id,
-        xhr_data_path:    customizerOptions.xhr_data_path },
+        xhr_container_id:   customizerOptions.xhr_container_id,
+        xhr_data_path:      customizerOptions.xhr_data_path,
+        xhr_data_element:   customizerOptions.xhr_data_element },
         'j1.adapter.gallery_customizer',
         'null'
       );

data/assets/themes/j1/adapter/js/mmenu.js

@@ -209,13 +209,17 @@ j1.adapter['mmenu'] = (function (j1, window) {
       to
         {% if forloop.last %}'data_loaded'{% else %}'data_loaded'{% endif %}){% if forloop.last %}{% else %},{% endif %}
       -------------------------------------------------------------------------- {% endcomment %}
+
       {% for item in nav_mmenu_options.menus %} {% if item.menu.enabled %}
-      {% assign menu_id       = item.menu.xhr_container_id %}
-      {% assign xhr_data_path = item.menu.xhr_data_path %}
+
+      {% assign menu_id           = item.menu.xhr_container_id %}
+      {% assign xhr_data_path     = item.menu.xhr_data_path %}
+      {% assign xhr_data_element  = item.menu.xhr_data_element %}
 
       j1.xhrData ({
-        xhr_container_id: '{{menu_id}}',
-        xhr_data_path:    '{{xhr_data_path}}'},
+        xhr_container_id:   '{{menu_id}}',
+        xhr_data_path:      '{{xhr_data_path}}',
+        xhr_data_element:   '{{xhr_data_element}}' },
         'j1.adapter.mmenu',
         {% if forloop.last %}'data_loaded'{% else %}'null'{% endif %}){% if forloop.last %};{% else %};{% endif %}