j1-template 2022.0.9 → 2022.0.13

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

@@ -37,15 +37,16 @@ regenerate:                             true
 -------------------------------------------------------------------------------- {% endcomment %}
 {% assign cookie_defaults     = modules.defaults.cookies.defaults %}
 {% assign cookie_settings     = modules.cookies.settings %}
-
 {% assign translator_defaults = modules.defaults.translator.defaults %}
 {% assign translator_settings = modules.translator.settings %}
-{% assign tracking_enabled    = template_config.analytics.enabled %}
 
 {% comment %} Set config options
 -------------------------------------------------------------------------------- {% endcomment %}
-{% assign translator_options  = translator_defaults | merge: translator_settings %}
 {% assign cookie_options      = cookie_defaults | merge: cookie_settings %}
+{% assign translator_options  = translator_defaults | merge: translator_settings %}
+
+{% comment %} Set variables
+-------------------------------------------------------------------------------- {% endcomment %}
 
 {% assign production = false %}
 {% if environment == 'prod' or environment == 'production' %}
@@ -81,12 +82,8 @@ regenerate:                             true
 // https://www.marghoobsuleman.com/image-dropdown/advanced-help
 'use strict';
 
-{% comment %} Main
--------------------------------------------------------------------------------- {% endcomment %}
-j1.adapter['translator'] = (function (j1, window) {
-
+j1.adapter.translator = (function (j1, window) {
   var environment       = '{{environment}}';
-  var tracking_enabled  = ('{{tracking_enabled}}' === 'true') ? true: false;    // Analytics/GA enabled?
   var moduleOptions     = {};
   var user_translate    = {};
   var _this;
@@ -106,69 +103,11 @@ j1.adapter['translator'] = (function (j1, window) {
   var translation_language;
   var ddSourceLanguage;
   var head;
-  var script;
+  var gtTranslateScript;
+  var gtCallbackScript;
   var languageList;
   var domainAttribute;
 
-  // ---------------------------------------------------------------------------
-  // helper functions
-  // ---------------------------------------------------------------------------
-
-  // ---------------------------------------------------------------------------
-  // setCookie()
-  // writes a FLAT cookie (not using an encoded JSON string)
-  // ---------------------------------------------------------------------------
-//   function setCookie(options /*cName, cValue, expDays*/) {
-//     var date            = new Date();
-//     var timestamp_now   = date.toISOString()
-//     var url             = new liteURL(window.location.href);
-//     var baseUrl         = url.origin;;
-//     var hostname        = url.hostname;
-//     var domain          = hostname.substring(hostname.lastIndexOf('.', hostname.lastIndexOf('.') - 1) + 1);
-//     var domain_enabled  = '{{cookie_options.domain}}';
-//     var defaults        = {};
-//     var settings;
-//     var document_cookie;
-//     var stringifiedAttributes = '';
-//
-//     defaults = {
-//         name: '',
-//         path: '/',
-//         expires: 0,
-//         domain: true,
-//         samesite: 'Lax',
-//         http_only: false,
-//         secure: false
-//     };
-//     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();
-//     }
-//
-//     if (domain != hostname) {
-// //    settings.domain = domain_enabled ? '.' + domain : hostname;
-//       settings.domain = domain_enabled ? domain : hostname;
-//     } else {
-//       settings.domain = hostname;
-//     }
-//     stringifiedAttributes += '; ' + 'domain=' + settings.domain;
-//
-//     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;
-//   };
-
   // ---------------------------------------------------------------------------
   // Main object
   // ---------------------------------------------------------------------------
@@ -180,7 +119,15 @@ j1.adapter['translator'] = (function (j1, window) {
     init: function (options) {
 
       // -----------------------------------------------------------------------
-      // globals
+      // Default module settings
+      // -----------------------------------------------------------------------
+      var settings = $.extend({
+        module_name: 'j1.adapter.translator',
+        generated:   '{{site.time}}'
+      }, options);
+
+      // -----------------------------------------------------------------------
+      // Global variable settings
       // -----------------------------------------------------------------------
       _this                 = j1.adapter.translator;
       logger                = log4javascript.getLogger('j1.adapter.translator');
@@ -193,9 +140,11 @@ j1.adapter['translator'] = (function (j1, window) {
       translation_language  = navigator_language.split('-')[0];
       cookie_names          = j1.getCookieNames();
       head                  = document.getElementsByTagName('head')[0];
-      script                = document.createElement('script');
-      script.id             = 'google-translate';
-      script.src            = '//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit';
+      gtTranslateScript     = document.createElement('script');
+      gtTranslateScript.id  = 'gt-translate';
+      gtTranslateScript.src = '//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit';
+      gtCallbackScript      = document.createElement('script');
+      gtCallbackScript.id   = 'gt-callback';
 
       user_translate = {
         'translatorName':           'google',
@@ -210,14 +159,6 @@ j1.adapter['translator'] = (function (j1, window) {
       // initialize state flag
       _this.state = 'pending';
 
-      // -----------------------------------------------------------------------
-      // Default module settings
-      // -----------------------------------------------------------------------
-      var settings = $.extend({
-        module_name: 'j1.adapter.translator',
-        generated:   '{{site.time}}'
-      }, options);
-
       {% comment %} Load module config from yml data
       -------------------------------------------------------------------------- {% endcomment %}
       // Load  module DEFAULTS|CONFIG
@@ -229,6 +170,19 @@ j1.adapter['translator'] = (function (j1, window) {
         moduleOptions = j1.mergeData(moduleOptions, settings);
       }
 
+      // add GT callback script dynamically in the head section
+      // -----------------------------------------------------------------------
+      gtCallbackScript.text  = '\n';
+      gtCallbackScript.text += 'function googleTranslateElementInit() {' + '\n';
+      gtCallbackScript.text += '  var gtAPI = new google.translate.TranslateElement({' + '\n';
+      gtCallbackScript.text += '    pageLanguage: "{{translator_options.contentLanguage}}",' + '\n';
+      gtCallbackScript.text += '    layout:       google.translate.TranslateElement.FloatPosition.TOP_LEFT' + '\n';
+      gtCallbackScript.text += '  },' + '\n';
+      gtCallbackScript.text += '  "google_translate_element");' + '\n';
+      gtCallbackScript.text += '  j1.adapter.translator.postTranslateElementInit(gtAPI);' + '\n';
+      gtCallbackScript.text += '}' + '\n';
+      document.head.appendChild(gtCallbackScript);
+
       // -----------------------------------------------------------------------
       // initializer
       // -----------------------------------------------------------------------
@@ -246,25 +200,25 @@ j1.adapter['translator'] = (function (j1, window) {
           domainAttribute = '';
         }
 
-        // load|initialize user translate cookie
-        if (j1.existsCookie(cookie_names.user_translate)) {
-          user_translate = j1.readCookie(cookie_names.user_translate);
-        } else {
-          logger.debug('\n' + 'write to cookie : ' + cookie_names.user_translate);
-          cookie_written = j1.writeCookie({
-            name:     cookie_names.user_translate,
-            data:     user_translate,
-            samesite: same_site,
-            secure:   secure,
-            expires:  expires
-          });
-        }
-
         if ( j1.getState() === 'finished' ) {
           _this.setState('started');
           logger.info('\n' + 'state: ' + _this.getState());
           logger.info('\n' + 'module is being initialized');
 
+          // load|initialize user translate cookie
+          if (j1.existsCookie(cookie_names.user_translate)) {
+            user_translate = j1.readCookie(cookie_names.user_translate);
+          } else {
+            logger.debug('\n' + 'write to cookie : ' + cookie_names.user_translate);
+            cookie_written = j1.writeCookie({
+              name:     cookie_names.user_translate,
+              data:     user_translate,
+              samesite: same_site,
+              secure:   secure,
+              expires:  expires
+            });
+          }
+
           // hide the google translate element if exists
           if ($('google_translate_element')) {
             $('google_translate_element').hide();
@@ -335,7 +289,7 @@ j1.adapter['translator'] = (function (j1, window) {
           // enable|disable translation (after callback)
           if (user_translate.analysis && user_translate.personalization && user_translate.translationEnabled) {
             if (moduleOptions.translatorName === 'google') {
-              head.appendChild(script);
+              head.appendChild(gtTranslateScript);
               if ($('google_translate_element')) {
                 $('google_translate_element').hide();
               }
@@ -359,7 +313,7 @@ j1.adapter['translator'] = (function (j1, window) {
 
           clearInterval(dependencies_met_page_ready);
         }
-      });
+      }, 25);
     }, // END init
 
     // -------------------------------------------------------------------------

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

@@ -19278,6 +19278,12 @@ a.timeline-list-unstyled:hover {
 .hide {
   display: none; }
 
+.border--solid {
+  border: 1px solid #616161; }
+
+.border--dotted {
+  border: 1px dotted #616161; }
+
 .g-color-white-opacity-0_6, .g-color-white-opacity-0_6--hover:hover {
   color: rgba(255, 255, 255, 0.6) !important; }