j1-template 2021.2.5 → 2021.2.9

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

@@ -87,6 +87,7 @@ j1.adapter['translator'] = (function (j1, window) {
   var user_translate    = {};
   var _this;
   var $modal;
+  var domain;
   var cookie_names;
   var user_consent;
   var logger;
@@ -94,7 +95,7 @@ j1.adapter['translator'] = (function (j1, window) {
   var baseUrl;
   var hostname;
   var domain;
-  var cookie_domain;
+  var cookie_sub_domains;
   var secure;
   var logText;
   var cookie_written;
@@ -109,21 +110,45 @@ j1.adapter['translator'] = (function (j1, window) {
   // ---------------------------------------------------------------------------
   // helper functions
   // ---------------------------------------------------------------------------
+
+  // ---------------------------------------------------------------------------
+  // setCookie()
+  // writes a flat cookie (not using an encoded JSON string)
+  // ---------------------------------------------------------------------------
   function setCookie(options /*cName, cValue, expDays*/) {
-    var defaults = {
+    var defaults = {};
+    var settings;
+    var document_cookie;
+    var stringifiedAttributes = '';
+
+    defaults = {
         name: '',
         path: '/',
         expires: 0,
-        domain: 'localhost'
+        domain: 'localhost',
+        samesite: 'Strict',
+        http_only: false,
+        secure: false
     };
-    var settings = $.extend(defaults, options);
-
-    var date = new Date();
-    date.setTime(date.getTime() + (settings.expires * 24 * 60 * 60 * 1000));
-    const expires = "expires=" + date.toUTCString();
-    // document.cookie = cName + "=" + cValue + "; " + expires + "; path=/";
-    // document.cookie = settings.name + "=" + settings.data  + "; " + expires + "; path=/";
-    document.cookie = settings.name + "=" + settings.data  + "; path=/";
+    settings = $.extend(defaults, options);
+
+    stringifiedAttributes += '; ' + 'path=' + settings.path;
+
+    if (settings.expires > 0) {
+      date.setTime(date.getTime() + (settings.expires * 24 * 60 * 60 * 1000));
+      stringifiedAttributes += '; ' + 'expires=' + date.toUTCString();
+    }
+
+    stringifiedAttributes += '; ' + 'SameSite=' + settings.samesite;
+
+    if (settings.secure) {
+      stringifiedAttributes += '; ' + 'secure=' + settings.secure;
+    }
+
+    // document_cookie = settings.name + '=' + settings.data  + '; path=' + settings.path + '; ' + 'domain=' + settings.domain + '; ' + 'SameSite=' + settings.samesite + ';';
+    document_cookie = settings.name + '=' + settings.data + stringifiedAttributes;
+
+    document.cookie = document_cookie;
   };
 
   // ---------------------------------------------------------------------------
@@ -165,6 +190,14 @@ j1.adapter['translator'] = (function (j1, window) {
         'translationLanguage':      translation_language,
       };
 
+      // set sub domain settings for cookies
+      if(domain !== 'localhost') {
+        cookie_sub_domains = '.' + hostname;
+      } else {
+        cookie_sub_domains = hostname;
+      }
+
+      // load|initialize user translate cookie
       if (j1.existsCookie(cookie_names.user_translate)) {
         user_translate = j1.readCookie(cookie_names.user_translate);
       } else {
@@ -177,13 +210,6 @@ j1.adapter['translator'] = (function (j1, window) {
         });
       }
 
-      // set domain used by cookies
-      if(domain !== 'localhost') {
-        cookie_domain = '.' + hostname;
-      } else {
-        cookie_domain = hostname;
-      }
-
       // initialize state flag
       _this.state = 'pending';
       // _this.settings.languageList = '/assets/data/ms_select.json';
@@ -218,6 +244,7 @@ j1.adapter['translator'] = (function (j1, window) {
           logger.info('\n' + 'state: ' + _this.getState());
           logger.info('\n' + 'module is being initialized');
 
+          // hide the google translate element if exists
           if ($('google_translate_element')) {
             $('google_translate_element').hide();
           }
@@ -249,31 +276,32 @@ j1.adapter['translator'] = (function (j1, window) {
           });
 
           j1.translator = new Translator({
-            contentURL:             moduleOptions.contentURL,                   // dialog content (modals) for all supported languages
-            cookieName:             moduleOptions.cookieName,                   // the name of the User State Cookie (primary data)
-            cookieConsentName:      moduleOptions.cookieConsentName,            // the name of the Cookie Consent Cookie (secondary data)
-            dialogContainerID:      moduleOptions.dialogContainerID,            // dest container, the dialog modal is loaded (dynamically)
-            dialogLanguage:         moduleOptions.dialogLanguage,               // language for the dialog (modal)
-            translationLanguage:    translation_language,                       // language for translation
-            translationEnabled:     moduleOptions.translationEnabled,           // run translation enabled|disabled
-            translatorName:         moduleOptions.translatorName,               // translator for translation
-            translationLanguage:    moduleOptions.translationLanguage,          // language for translation
-            xhrDataElement:         moduleOptions.xhrDataElement,               // container for all language-specific dialogs (modals)
-            postSelectionCallback:  function () {j1.adapter.translator.cb()}
+            contentURL:               moduleOptions.contentURL,                 // dialog content (modals) for all supported languages
+            cookieName:               moduleOptions.cookieName,                 // the name of the User State Cookie (primary data)
+            cookieConsentName:        moduleOptions.cookieConsentName,          // the name of the Cookie Consent Cookie (secondary data)
+            disableLanguageSelector:  moduleOptions.disableLanguageSelector,    // disable language dropdown for translation in dialog (modal)
+            dialogContainerID:        moduleOptions.dialogContainerID,          // dest container, the dialog modal is loaded (dynamically)
+            dialogLanguage:           moduleOptions.dialogLanguage,             // language for the dialog (modal)
+            translationLanguage:      moduleOptions.translationLanguage,        // default language for translation
+            translationLanguages:     moduleOptions.google.translationLanguages,// supported languages for translation
+            translationEnabled:       moduleOptions.translationEnabled,         // run translation enabled|disabled
+            translatorName:           moduleOptions.translatorName,             // translator used for translation
+            xhrDataElement:           moduleOptions.xhrDataElement,             // container for all language-specific dialogs (modals)
+            postSelectionCallback:    moduleOptions.google.postSelectionCallback
           });
 
+          // enable|disable translation (after callback)
           if (user_consent.analysis && user_consent.personalization && user_translate.translationEnabled) {
             if (moduleOptions.translatorName === 'google') {
               head.appendChild(script);
-              $('google_translate_element').hide();
+              if ($('google_translate_element')) {
+                $('google_translate_element').hide();
+              }
             }
           } else {
             if (moduleOptions.translatorName === 'google') {
-              j1.removeCookie({name: 'googtrans'});
-              // j1.removeCookie({name: 'CONSENT'});
-              // j1.removeCookie({name: 'NID'});
-              // j1.removeCookie({name: 'OTZ'});
-           }
+              j1.removeCookie({name: 'googtrans', domain: domain});
+            }
           }
 
           _this.setState('finished');
@@ -328,29 +356,40 @@ j1.adapter['translator'] = (function (j1, window) {
     }, // END getState
 
     // -------------------------------------------------------------------------
-    // cb()
-    // Called by the translator CORE module after the user has
-    // made his selection (callback)
+    // postTranslateElementInit()
+    // ???
+    // -------------------------------------------------------------------------
+    postTranslateElementInit: function (response) {
+      // code for post processing
+      logger.info('\n' + 'postTranslateElementInit entered');
+      logger.info('\n' + response.T.Dh);
+      return;
+    }, // END postTranslateElementInit
+
+    // -------------------------------------------------------------------------
+    // cbGoogle()
+    // Called by the translator CORE module after the user made the
+    // selection for a translation|language
     // -------------------------------------------------------------------------
-    cb: function () {
+    cbGoogle: function () {
+      var logger         = log4javascript.getLogger('j1.adapter.translator.cbGoogle');
       var cookie_names   = j1.getCookieNames();
       var user_state     = j1.readCookie(cookie_names.user_state);
       var user_consent   = j1.readCookie(cookie_names.user_consent);
       var user_translate = j1.readCookie(cookie_names.user_translate);
-      var head;
-      var script;
+      var msDropdown     = document.getElementById('dropdownJSON').msDropdown;
+      var selectedTranslationLanguage;
       var srcLang;
       var destLang;
       var transCode;
-      var cookie_written;
 
-      logger.info('\n' + 'entered post selection callback from google_translate');
-      logger.debug('\n' + 'current values from cookie consent: ' + JSON.stringify(user_consent));
-      logger.debug('\n' + 'current values from user state: ' + JSON.stringify(user_state));
+      selectedTranslationLanguage = msDropdown.value;
+      logger.info('\n' + 'selected translation language: ' + selectedTranslationLanguage);
 
       // update cookie consent settings
-      user_consent.analysis = user_translate.analysis;
-      user_consent.personalization = user_translate.personalization;
+      user_consent.analysis         = user_translate.analysis;
+      user_consent.personalization  = user_translate.personalization;
+
       cookie_written = j1.writeCookie({
         name:     cookie_names.user_consent,
         data:     user_consent,
@@ -359,130 +398,30 @@ j1.adapter['translator'] = (function (j1, window) {
         expires:  0
       });
 
-      if (user_consent.analysis && user_consent.personalization)  {
-
-        // detect changes on the last element on your page, cause then
-        // you know all elements above is translated.
-        // $('#j1_footer').bind('DOMSubtreeModified', function() {
-        //       var val = $(this);
-        //       var strlang = "" + val[0].innerText + "";
-        //       console.log(strlang); // print your selected language in console
-        // });
-
-        // $('#google_translate_element').bind('DOMSubtreeModified', function() {
-        //     var val = $(this);
-        //     var strlang = "" + val[0].innerText + "";
-        //     console.log(strlang); // print your selected language in console
-        // });
-
-        // remove class dropcap
-//      $('.dropcap').children('span').removeClass('j1-dropcap');
-
-        // remove span dropcap !!!
-//      $('.dropcap').children('span').remove();
+      // set transCode settings
+      srcLang   = "{{site.language}}";
+      destLang  = translation_language;
+      transCode = '/' + srcLang + '/' + selectedTranslationLanguage;
 
-        // $('.dropcap').children('span').removeClass('j1-dropcap');
-        // $('.paragraph.dropcap').parent().find('p').removeClass('j1-dropcap');
-
-        head       = document.getElementsByTagName('head')[0];
-        script     = document.createElement('script');
-        script.id  = 'google-translate';
-        script.src = '//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit';
-
-        if (user_translate.translationEnabled && moduleOptions.translatorName === 'google') {
-          head.appendChild(script);
-
-          if ($('google_translate_element')) {
-            $('google_translate_element').hide();
-          }
-
-          srcLang   = "{{site.language}}";
-          destLang  = translation_language;
-          transCode = '/' + srcLang + '/' + destLang;
-
-          // set language
-          setCookie({
-            name: 'googtrans',
-            data: transCode
-          });
-
-          // enable google transalate button if not visible
-          if ($('#quickLinksTranslateButton').css('display') === 'none')  {
-            $('#quickLinksTranslateButton').css('display', 'block');
-          }
-
-        } else {
-
-          user_translate.translationEnabled = false;
-          cookie_written = j1.writeCookie({
-            name:     cookie_names.user_translate,
-            data:     user_translate,
-            samesite: 'Strict',
-            secure:   secure
-          });
-
-          var el = document.getElementById(script.id);
-
-          if (el) { el.remove(); }
-
-          el = document.getElementById('google_translate_element');
-          if (el) { el.remove(); }
-
-          j1.removeCookie({name: 'googtrans'});
-          // j1.removeCookie({name: '1P_JAR'});
-          // j1.removeCookie({name: 'CONSENT'});
-          // j1.removeCookie({name: 'NID'});
-        }
-
-      }
-
-      if (!user_translate.analysis || !user_translate.personalization) {
-        head       = document.getElementsByTagName('head')[0];
-        script     = document.createElement('script');
-        script.id  = 'google-translate';
-        // script.src = '//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit';
-
-        var el = document.getElementById(script.id);
-
-        // update cookie consent settings
-        user_consent.analysis = user_translate.analysis;
-        user_consent.personalization = user_translate.personalization;
-        cookie_written = j1.writeCookie({
-          name:     cookie_names.user_consent,
-          data:     user_consent,
-          samesite: 'Strict',
-          secure:   secure,
-          expires:  0
-        });
-
-        user_translate.translationEnabled = false;
-        cookie_written = j1.writeCookie({
-          name:     cookie_names.user_translate,
-          data:     user_consent,
-          samesite: 'Strict',
-          secure:   secure,
-          expires:  0
-        });
-
-        if (el) { el.remove(); }
-
-        el = document.getElementById('google_translate_element');
-        if (el) { el.remove(); }
-
-        j1.removeCookie({name: 'googtrans'});
-      }
-
-      if (moduleOptions.reloadPageOnChange) {
-        // reload current page (skip cache)
-        location.reload(true);
-      }
+      // write the googtrans cookie
+      setCookie({
+        name: 'googtrans',
+        data: transCode
+      });
 
-      // disable google translate button if visible
-      if ($('#quickLinksTranslateButton').css('display') === 'block')  {
-        $('#quickLinksTranslateButton').css('display', 'none');
-      }
+      // reload current page (skip cache)
+      location.reload(true);
+    }, // END cbGoogle
 
-    } // END cbCookie
+    // -------------------------------------------------------------------------
+    // cbDeepl()
+    // Called by the translator CORE module after the user made the
+    // selection for a translation language
+    // -------------------------------------------------------------------------
+    cbDeepl: function () {
+      var logger     = log4javascript.getLogger('j1.adapter.translator.cbDeepl');
+      // code for post processing
+    } // END cbDeepl
 
   }; // END return
 })(j1, window);

data/assets/themes/j1/core/css/themes/bootstrap/bootstrap.css

@@ -13,7 +13,7 @@
  # -----------------------------------------------------------------------------
 */
 /*!
- * Bootstrap v4.6.0 (https://getbootstrap.com/)
+ * Bootstrap v4.6.1 (https://getbootstrap.com/)
  * Copyright 2011-2021 The Bootstrap Authors
  * Copyright 2011-2021 Twitter, Inc.
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
@@ -1414,9 +1414,6 @@ pre {
   .form-control::-ms-expand {
     background-color: transparent;
     border: 0; }
-  .form-control:-moz-focusring {
-    color: transparent;
-    text-shadow: 0 0 0 #495057; }
   .form-control:focus {
     color: #495057;
     background-color: #fff;
@@ -1436,6 +1433,10 @@ input[type="datetime-local"].form-control,
 input[type="month"].form-control {
   appearance: none; }
 
+select.form-control:-moz-focusring {
+  color: transparent;
+  text-shadow: 0 0 0 #495057; }
+
 select.form-control:focus::-ms-value {
   color: #495057;
   background-color: #fff; }
@@ -1576,7 +1577,7 @@ textarea.form-control {
 
 .was-validated .form-control:valid, .form-control.is-valid {
   border-color: #28a745;
-  padding-right: calc(1.5em + 0.75rem);
+  padding-right: calc(1.5em + 0.75rem) !important;
   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%2328a745' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
   background-repeat: no-repeat;
   background-position: right calc(0.375em + 0.1875rem) center;
@@ -1585,13 +1586,17 @@ textarea.form-control {
     border-color: #28a745;
     box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25); }
 
+.was-validated select.form-control:valid, select.form-control.is-valid {
+  padding-right: 3rem !important;
+  background-position: right 1.5rem center; }
+
 .was-validated textarea.form-control:valid, textarea.form-control.is-valid {
   padding-right: calc(1.5em + 0.75rem);
   background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem); }
 
 .was-validated .custom-select:valid, .custom-select.is-valid {
   border-color: #28a745;
-  padding-right: calc(0.75em + 2.3125rem);
+  padding-right: calc(0.75em + 2.3125rem) !important;
   background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") right 0.75rem center/8px 10px no-repeat, #fff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%2328a745' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e") center right 1.75rem/calc(0.75em + 0.375rem) calc(0.75em + 0.375rem) no-repeat; }
   .was-validated .custom-select:valid:focus, .custom-select.is-valid:focus {
     border-color: #28a745;
@@ -1660,7 +1665,7 @@ textarea.form-control {
 
 .was-validated .form-control:invalid, .form-control.is-invalid {
   border-color: #dc3545;
-  padding-right: calc(1.5em + 0.75rem);
+  padding-right: calc(1.5em + 0.75rem) !important;
   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23dc3545' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
   background-repeat: no-repeat;
   background-position: right calc(0.375em + 0.1875rem) center;
@@ -1669,13 +1674,17 @@ textarea.form-control {
     border-color: #dc3545;
     box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25); }
 
+.was-validated select.form-control:invalid, select.form-control.is-invalid {
+  padding-right: 3rem !important;
+  background-position: right 1.5rem center; }
+
 .was-validated textarea.form-control:invalid, textarea.form-control.is-invalid {
   padding-right: calc(1.5em + 0.75rem);
   background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem); }
 
 .was-validated .custom-select:invalid, .custom-select.is-invalid {
   border-color: #dc3545;
-  padding-right: calc(0.75em + 2.3125rem);
+  padding-right: calc(0.75em + 2.3125rem) !important;
   background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") right 0.75rem center/8px 10px no-repeat, #fff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23dc3545' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e") center right 1.75rem/calc(0.75em + 0.375rem) calc(0.75em + 0.375rem) no-repeat; }
   .was-validated .custom-select:invalid:focus, .custom-select.is-invalid:focus {
     border-color: #dc3545;
@@ -2551,16 +2560,21 @@ input[type="button"].btn-block {
     display: flex;
     align-items: center; }
     .input-group > .custom-file:not(:last-child) .custom-file-label,
+    .input-group > .custom-file:not(:last-child) .custom-file-label::after {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0; }
     .input-group > .custom-file:not(:first-child) .custom-file-label {
       border-top-left-radius: 0;
       border-bottom-left-radius: 0; }
   .input-group:not(.has-validation) > .form-control:not(:last-child),
   .input-group:not(.has-validation) > .custom-select:not(:last-child),
+  .input-group:not(.has-validation) > .custom-file:not(:last-child) .custom-file-label,
   .input-group:not(.has-validation) > .custom-file:not(:last-child) .custom-file-label::after {
     border-top-right-radius: 0;
     border-bottom-right-radius: 0; }
   .input-group.has-validation > .form-control:nth-last-child(n + 3),
   .input-group.has-validation > .custom-select:nth-last-child(n + 3),
+  .input-group.has-validation > .custom-file:nth-last-child(n + 3) .custom-file-label,
   .input-group.has-validation > .custom-file:nth-last-child(n + 3) .custom-file-label::after {
     border-top-right-radius: 0;
     border-bottom-right-radius: 0; }
@@ -4581,8 +4595,11 @@ a.close.disabled {
   align-items: center;
   justify-content: center;
   width: 15%;
+  padding: 0;
   color: #fff;
   text-align: center;
+  background: none;
+  border: 0;
   opacity: 0.5;
   transition: opacity 0.15s ease; }
   @media (prefers-reduced-motion: reduce) {
@@ -4668,7 +4685,7 @@ a.close.disabled {
   display: inline-block;
   width: 2rem;
   height: 2rem;
-  vertical-align: text-bottom;
+  vertical-align: -0.125em;
   border: 0.25em solid currentColor;
   border-right-color: transparent;
   border-radius: 50%;
@@ -4690,7 +4707,7 @@ a.close.disabled {
   display: inline-block;
   width: 2rem;
   height: 2rem;
-  vertical-align: text-bottom;
+  vertical-align: -0.125em;
   background-color: currentColor;
   border-radius: 50%;
   opacity: 0;
@@ -7158,8 +7175,6 @@ a.text-dark:hover, a.text-dark:focus {
   blockquote {
     border: 1px solid #adb5bd;
     page-break-inside: avoid; }
-  thead {
-    display: table-header-group; }
   tr,
   img {
     page-break-inside: avoid; }