j1-template 2023.9.0 → 2023.9.2

data/_includes/themes/j1/procedures/posts/pager.proc

@@ -42,61 +42,30 @@
 -------------------------------------------------------------------------------- {% endcomment %}
 {% assign blog_navigator_options        = blog_navigator_defaults | merge: blog_navigator_settings %}
 
-
-{% comment %} Language detection
--------------------------------------------------------------------------------- {% endcomment %}
-{% if {{site.language}} == "en" %}
-  {% assign language = "en" %}
-{% elsif  {{site.language}} == "de"%}
-  {% assign language = "de" %}
-{% else %}
-  {% assign language = "en" %}
-{% endif %}
-
-{% comment %} Set language specific button text
+{% comment %} Set button text
 -------------------------------------------------------------------------------- {% endcomment %}
-{% if language == "en" %}
-  {% assign pager_previous_button_text  = blog_navigator_options.button_text.pager.previous.en %}
-  {% assign pager_next_button_text      = blog_navigator_options.button_text.pager.next.en %}
-  {% assign pager_back_button_text      = blog_navigator_options.button_text.pager.back.en %}
-  {% assign pager_first_button_text     = blog_navigator_options.button_text.pager.first.en %}
-  {% assign pager_last_button_text      = blog_navigator_options.button_text.pager.last.en %}
-{% endif %}
-
-{% if language == "de" %}
-  {% assign pager_previous_button_text  = blog_navigator_options.button_text.pager.previous.de %}
-  {% assign pager_next_button_text      = blog_navigator_options.button_text.pager.next.de %}
-  {% assign pager_back_button_text      = blog_navigator_options.button_text.pager.back.de %}
-  {% assign pager_first_button_text     = blog_navigator_options.button_text.pager.first.de %}
-  {% assign pager_last_button_text      = blog_navigator_options.button_text.pager.last.de %}
-{% endif %}
+{% assign pager_home_button_text      = blog_navigator_options.button_text.post_pager.home %}
+{% assign pager_series_button_text    = blog_navigator_options.button_text.post_pager.series %}
+{% assign pager_back_button_text      = blog_navigator_options.button_text.post_pager.back %}
+{% assign pager_previous_button_text  = blog_navigator_options.button_text.post_pager.previous %}
+{% assign pager_next_button_text      = blog_navigator_options.button_text.post_pager.next %}
+{% assign pager_first_button_text     = blog_navigator_options.button_text.post_pager.first %}
+{% assign pager_last_button_text      = blog_navigator_options.button_text.post_pager.last %}
 
 
 {% comment %} Main
 -------------------------------------------------------------------------------- {% endcomment %}
 
 <div class="paginator" data-speak2me-ignore>
-  <ul class="pagination raised-z0">
 
-    {% comment %} Set HOME page BUTTON (always)
-    ---------------------------------------------------------------------------- {% endcomment %}
-      <li class="page-item"><a class="page-link" href="/" title="Home">Home</a></li>
+  {% comment %} Generate posts pager
+  ------------------------------------------------------------------------------ {% endcomment %}
 
-    {% comment %} Set PREVIOUS page BUTTON
-    ---------------------------------------------------------------------------- {% endcomment %}
-    {% if page.previous %}
-      <li class="page-item"><a class="page-link" href="{{page.previous.url | absolute_url}}" title="{{page.previous.title}}">{{pager_previous_button_text}}</a></li>
-    {% else %}
-      <li class="page-item disabled"><a class="page-link">{{pager_first_button_text}}</a></li>
-    {% endif %}
+  <ul class="pagination raised-z0">
 
-    {% comment %} Set NEXT page BUTTON
+    {% comment %} Set HOME page BUTTON (always)
     ---------------------------------------------------------------------------- {% endcomment %}
-    {% if page.next %}
-      <li class="page-item"><a class="page-link" href="{{page.next.url | absolute_url}}" title="{{page.next.title}}">{{pager_next_button_text}}</a></li>
-    {% else %}
-      <li class="page-item disabled"><a class="page-link" href="#void">{{pager_last_button_text}}</a></li>
-    {% endif %}
+    <li class="page-item"><a class="page-link" href="/" title="Back to {{pager_home_button_text}}">{{pager_home_button_text}}</a></li>
 
     {% comment %} Set BACK page (PagerURL) BUTTON
     ---------------------------------------------------------------------------- {% endcomment %}
@@ -111,15 +80,39 @@
 
       <!-- [INFO   ] [procedures.global.pager.proc          ] [Calculate BackURL from User State Cookie for page: {{page.title}}] -->
       if (re.test(last_pager)) {
-        last_pager_url = '<li class="page-item"><a class="page-link" href="' + last_pager + '" title="Back to {{pager_back_button_text}}">{{pager_back_button_text}}</a></li>';
+        last_pager_url = '<li class="page-item"><a class="page-link" href="' + last_pager + '"title="Back to {{pager_back_button_text}}">{{pager_back_button_text}}</a></li>';
       } else {
-        last_pager_url = '<li class="page-item disabled"><a class="page-link" title="Back to {{pager_back_button_text}}">{{pager_back_button_text}}</a></li>';
+        last_pager_url = '<li class="page-item"><a class="page-link disabled" title="Back to {{pager_back_button_text}}">{{pager_back_button_text}}</a></li>';
       }
+
       document.write( last_pager_url );
       j1.writeCookie({
         name: user_state_cookie_name,
         data: user_state
       });
     </script>
+
+    {% comment %} Set SERIES Button
+    ---------------------------------------------------------------------------- {% endcomment %}
+    {% if page.series %}
+      <a class="page-link" href="#offcanvasPostSeriesNavigation" title="Show Article {{pager_series_button_text}}" data-bs-toggle="offcanvas">{{pager_series_button_text}}</a>
+    {% endif %}
+
+    {% comment %} Set PREVIOUS page BUTTON
+    ---------------------------------------------------------------------------- {% endcomment %}
+    {% if page.previous %}
+      <li class="page-item"><a class="page-link" href="{{page.previous.url}}" title="Show {{pager_previous_button_text}} Article">{{pager_previous_button_text}}</a></li>
+    {% else %}
+      <li class="page-item"><a class="page-link disabled">{{pager_first_button_text}}</a></li>
+    {% endif %}
+
+    {% comment %} Set NEXT page BUTTON
+    ---------------------------------------------------------------------------- {% endcomment %}
+    {% if page.next %}
+      <li class="page-item"><a class="page-link" href="{{page.next.url}}" title="Show Next Article">{{pager_next_button_text}}</a></li>
+    {% else %}
+      <li class="page-item"><a class="page-link disabled" href="#" title="{{pager_last_button_text}} Article">{{pager_last_button_text}}</a></li>
+    {% endif %}
+
   </ul>
 </div>

data/assets/data/speak2me.html

@@ -146,7 +146,7 @@ exclude_from_search:                    true
             <button type="button"
               id="speak_button"
               class="btn btn-{{speak2me_options.modal.settings.speak_button_style}} btn-sm"
-              style="min-width: 180px"
+              style="min-width: 180px;"
               onclick="j1.adapter.speak2me.speak('{{speak2me_options.speechSelector}}')"
               data-bs-dismiss="modal">
               <i class="mdib mdib-speaker mdib-sm mr-2"></i>
@@ -157,7 +157,7 @@ exclude_from_search:                    true
             <button type="button"
               id="stop_button"
               class="btn btn-{{speak2me_options.modal.settings.stop_button_style}} btn-sm"
-              style="min-width: 180px"
+              style="min-width: 180px; display: none;"
               onclick="j1.adapter.speak2me.stop()"
               data-bs-dismiss="modal">
               <i class="mdib mdib-speaker-off mdib-sm mr-2"></i>
@@ -168,8 +168,9 @@ exclude_from_search:                    true
             <button type="button"
               id="pause_button"
               class="btn btn-{{speak2me_options.modal.settings.pause_button_style}} btn-sm"
-              style="min-width: 180px"
-              onclick="j1.adapter.speak2me.pause()">
+              style="min-width: 180px; display: none;"
+              onclick="j1.adapter.speak2me.pause()"
+              data-bs-dismiss="modal">
               <i class="mdib mdib-pause mdib-sm mr-2"></i>
               {{speak2me_options.modal.settings.pause_button_text}}
             </button>
@@ -178,8 +179,9 @@ exclude_from_search:                    true
             <button type="button"
               id="resume_button"
               class="btn btn-{{speak2me_options.modal.settings.resume_button_style}} btn-sm"
-              style="min-width: 180px"
-              onclick="j1.adapter.speak2me.resume()">
+              style="min-width: 180px; display: none;"
+              onclick="j1.adapter.speak2me.resume()"
+              data-bs-dismiss="modal">
               <i class="mdib mdib-play-pause mdib-sm mr-2"></i>
               {{speak2me_options.modal.settings.resume_button_text}}
             </button>
@@ -188,7 +190,7 @@ exclude_from_search:                    true
             <button type="button"
               id="exit_button"
               class="btn btn-{{speak2me_options.modal.settings.exit_button_style}}  btn-sm"
-              style="min-width: 180px"
+              style="min-width: 180px;"
               data-bs-dismiss="modal">
               <i class="mdib mdib-close mdib-sm mr-2"></i>
               {{speak2me_options.modal.settings.exit_button_text}}

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

@@ -877,7 +877,9 @@ j1.adapter.navigator = (function (j1, window) {
       // jadams, 2023-02-26: navicon settings
       style  = '<style>';
       style += '  .nav-icon {';
-      style += '    color: ' + navQuicklinksOptions.icon_color + ' !important;';
+//    style += '    color: ' + navQuicklinksOptions.icon_color + ' !important;';
+      style += '    color: ' + navQuicklinksOptions.icon_color + ';';
+      quicklinks
       style += '  }';
       style += '</style>';
       $('head').append(style);
@@ -885,7 +887,8 @@ j1.adapter.navigator = (function (j1, window) {
       // jadams, 2023-02-26: navicon settings
       style  = '<style>';
       style += '  .nav-icon:hover {';
-      style += '    color: ' + navQuicklinksOptions.icon_color_hover + ' !important;';
+//    style += '    color: ' + navQuicklinksOptions.icon_color_hover + ' !important;';
+      style += '    color: ' + navQuicklinksOptions.icon_color_hover + ';';
       style += '  }';
       style += '</style>';
       $('head').append(style);

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

@@ -78,6 +78,11 @@ regenerate:                             true
  # -----------------------------------------------------------------------------
 */
 
+/* Further reading
+  https://dev.to/jankapunkt/cross-browser-speech-synthesis-the-hard-way-and-the-easy-way-353
+  https://github.com/jankapunkt/easy-speech
+*/
+
 // -----------------------------------------------------------------------------
 // ESLint shimming
 // -----------------------------------------------------------------------------
@@ -99,9 +104,16 @@ var isOpera           = /OPR/i.test(navigator.userAgent);
 var isAvast           = /Avast/i.test(navigator.userAgent);
 var isChrome          = ((chrome) && (!isEdge));
 var ttsDisabled       = false;
+var mobilesDisabled   = false;
+var browsersDisabled  = [];
 var isMobile          = (window.orientation !== undefined) ? true :false;       // NOTE: window.orientation is DEPRECATED
 // var isMobile       = (screen.orientation.type == 'portrait-secondary') ? true : false;
 
+// synthetic puase
+var isPaused            = false;
+var lastSpokenChunk     = false;
+var lastScrollPosition  = false;
+
 var frontmatterOptions;
 var speak2meDefaults;
 var speak2meSettings;
@@ -110,10 +122,21 @@ var speak2meModal;
 var _this;
 var logger;
 var logText;
+var chromeWorkaround;
+var chromeWorkaroundPause
+var chromeWorkaroundResume;
+var $buttonPause;
+var $buttonResume;
+
+let isRunning = true;
+let intervalId;
 
-// -------------------------------------------------------------------------
+const scrollBehavior      = 'smooth';
+
+
+// -----------------------------------------------------------------------------
 // global event handler
-// -------------------------------------------------------------------------
+// -----------------------------------------------------------------------------
 var Events = {
   documentReady: function (onDocumentReady) {
     if (document.readyState !== 'loading') {
@@ -149,7 +172,7 @@ var Events = {
 
       // create settings object from frontmatter
       //
-      frontmatterOptions  = options != null ? $.extend({}, options) : {};
+      frontmatterOptions = options != null ? $.extend({}, options) : {};
 
       // create settings object from module options
       //
@@ -158,6 +181,8 @@ var Events = {
       speak2meOptions  = $.extend(true, {}, speak2meDefaults, speak2meSettings, frontmatterOptions);
 
       ttsDisabled      = (speak2meOptions.tts == "false") ? true : false;
+      mobilesDisabled  = (speak2meOptions.mobilesDisabled == "false") ? true : false;
+      browsersDisabled = speak2meOptions.browsersDisabled;
 
       _this  = j1.adapter.speak2me;
       logger = log4javascript.getLogger('j1.adapter.speak2me');
@@ -176,43 +201,38 @@ var Events = {
 
         if (j1.getState() === 'finished' && pageVisible && atticFinished) {
 
-          if (isMobile) {
-            console.log('module speak2me is currently not supported for the Opera browser');
+          if (mobilesDisabled && isMobile) {
+            console.log('speak: module speak2me is disabled for mobile browsers');
             $('#quickLinksSpeakButton').hide();
             clearInterval(dependencies_met_page_ready);
             return;
           }
 
-          if (isOpera) {
-            console.log('module speak2me is currently not supported for the Firefox browser');
+          var operaDisabled = (browsersDisabled.includes('Opera')) ? true : false;
+          if (operaDisabled && isOpera) {
+            console.log('speak: module speak2me is disabled for the Opera browser');
             $('#quickLinksSpeakButton').hide();
             clearInterval(dependencies_met_page_ready);
             return;
           }
 
-          if (isAvast) {
-            console.log('module speak2me is currently not supported for the Avast Secure browser');
+          var firefoxDisabled = (browsersDisabled.includes('Firefox')) ? true : false;
+          if (firefoxDisabled && isFirefox) {
+            console.log('speak: module speak2me is disabled for the Firefox browser');
             $('#quickLinksSpeakButton').hide();
             clearInterval(dependencies_met_page_ready);
             return;
           }
 
-          if (isFirefox) {
-            console.log('module speak2me is currently not supported on mobile devices');
+          // Avast Secure Browser always disabled
+          //
+          if (isAvast) {
+            console.log('module speak2me is not supported for the Avast Secure browser');
             $('#quickLinksSpeakButton').hide();
             clearInterval(dependencies_met_page_ready);
             return;
           }
 
-          if (isChrome) {
-            var chromeWorkaround = setInterval(function () {
-              if ($().speak2me('isSpeaking')) {
-                $().speak2me('pause').speak2me('resume');
-                logger.debug('\n' + 'speak: send pause-resumed');
-              }
-            }, 10000);
-          }
-
           if (ttsDisabled) {
             logger.warn('\n' + 'tts detected: disabled');
             $('#quickLinksSpeakButton').hide();
@@ -245,21 +265,66 @@ var Events = {
           // on 'show'
           // -------------------------------------------------------------------
           $('#speak2me_container').on('show.bs.modal', function () {
-            if (isChrome || isEdge) {
-              logger.warn('\n' + 'chromium browser detected: pause|resume buttons disabled');
-              $('#pause_button').hide();
-              $('#resume_button').hide();
-            }
             _this.create('#voiceSelector');
           }); // END modal on 'show'
 
           // -------------------------------------------------------------------
           // on 'shown'
           // -------------------------------------------------------------------
-          // $('#speak2me_container').on('shown.bs.modal', function () {
-          //     // do something here
-          //     return;
-          // }); // END modal on 'shown'
+          $('#speak2me_container').on('shown.bs.modal', function () {
+            this.$buttonSpeak = $('#speak_button');
+            this.$buttonStop  = $('#stop_button');
+
+            // setup workaround for chromium based browsers
+            // to enable infinite speech output
+            //
+            this.$buttonSpeak.click(function () {
+              if (isChrome) {
+                logger.info('\n' + 'speak: setup pause workaround for chromium based browsers');
+                chromeWorkaround = setInterval(function () {
+                  var isSpeaking  = $().speak2me('isSpeaking');
+
+                  logger.info('\n' + 'speak: isSpeaking|isPaused: ' + isSpeaking + '|' + isPaused);
+                  if (isSpeaking) {
+                    $().speak2me('pause').speak2me('resume');
+                    logger.info('\n' + 'speak: send pause-resumed');
+                  } else {
+                    $().speak2me('resume');
+                    logger.info('\n' + 'speak: send resumed');
+                  }
+
+                }, speak2meOptions.chrome_pause_resume_cycle);
+              }
+            });
+
+            // stop workaround for chromium based browsers
+            //
+            this.$buttonStop.click(function () {
+              logger.info('\n' + 'speak: remove pause workaround for chromium based browsers');
+              // wait 3 sec to make sure speech output is stopped
+              setTimeout (function() {
+                var isSpeaking  = $().speak2me('isSpeaking');
+                var isPaused    = $().speak2me('isPaused');
+
+                // remove pause indication
+                $('.mdib-speaker').removeClass('md-orange');
+
+                if (!isSpeaking && !isPaused) {
+                  clearInterval(chromeWorkaround);
+                }
+              }, 3000);
+            });
+
+          }); // END modal on 'shown'
+
+          // -------------------------------------------------------------------
+          // on 'hidden' (close)
+          // -------------------------------------------------------------------
+          $('#speak2me_container').on('hidden.bs.modal', function () {
+            //
+            // do something here
+            //
+          }); // END modal on 'hidden'
 
           _this.setState('finished');
           logger.debug('\n' + 'state: ' + _this.getState());
@@ -316,7 +381,7 @@ var Events = {
 
     // -------------------------------------------------------------------------
     // speak()
-    // calls the 'speak' functiion of the screen reader
+    // calls the 'speak' functiion of the converter
     // -------------------------------------------------------------------------
     speak: function (obj) {
       // Get the parameter values from the input sliders
@@ -329,45 +394,115 @@ var Events = {
       // chained together as demonstrated below
       //
       $(obj).speak2me('rate', rate).speak2me('pitch', pitch).speak2me('volume', volume);
+
       // $(obj).speak2me('ignore', 'h2','h3');
-      var speaker = $(obj).speak2me('speak');
-      $(".mdib-speaker").addClass("mdib-spin");
 
-      // just for debugging completeness, no errors seem to be thrown though
-      speaker.addEventListener('error', (event) => {
-        console.log('speak2me error:', event);
+      var paused;
+      if (!lastSpokenChunk) {
+        paused = false;
+      } else {
+        paused = true;
+      }
+
+      var speaker = $(obj).speak2me('speak', {
+        isPaused: paused,
+        lastChunk: lastSpokenChunk,
+        lastScrollPosition: lastScrollPosition,
       });
 
+      // set speak indication;
+      $('.mdib-speaker').addClass('mdib-spin');
+
+      $('#stop_button').show();
+      $('#pause_button').show();
+
+      // hide buttons NOT needed
+      //
+      $('#speak_button').hide();
+      $('#resume_button').hide();
+
+      // just for debugging completeness, no errors seem to be thrown though
+      // speaker.addEventListener('error', (event) => {
+      //   console.log('speak2me error:', event);
+      // });
+
     }, // END speak
 
     // -------------------------------------------------------------------------
     // pause()
-    // Calls the 'pause' function of rge screen reader
+    // Calls the 'pause' function of the converter
     // -------------------------------------------------------------------------
     pause: function () {
-      $().speak2me('pause');
-      $(".mdib-speaker").removeClass("mdib-spin");
+      // remove speak indication;
+      $('.mdib-speaker').removeClass('mdib-spin');
+
+      // set pause indication
+      $('.mdib-speaker').addClass('md-orange');
+
+      if (!isChrome) {
+        $().speak2me('pause');
+      } else {
+        // synthetic pause-resume for chromium-based browsers
+        //
+        lastSpokenChunk     = $().speak2me('isSpoken');
+        lastScrollPosition  = $().speak2me('isScrolled');
+        $().speak2me('stop');
+      }
+
+      $('#resume_button').show();
+
+      // hide buttons NOT needed
+      //
+      $('#pause_button').hide();
+
     }, // END pause
 
     // -------------------------------------------------------------------------
     // resume()
-    // Calls the 'resume' function of rge screen reader
+    // Calls the 'resume' function of the converter
     // -------------------------------------------------------------------------
     resume: function () {
-      $().speak2me('resume');
-      $(".mdib-speaker").addClass("mdib-spin");
+      $('.mdib-speaker').addClass('mdib-spin');
+      if (!isChrome) {
+        $().speak2me('resume');
+      } else {
+        // synthetic pause-resume for chromium-based browsers
+        //
+        _this.speak('{{speak2me_options.speechSelector}}');
+      }
+
+      $('#pause_button').show();
+
+      // hide buttons NOT needed
+      //
+      $('#resume_button').hide();
+
+      // remove pause indication
+      $('.mdib-speaker').removeClass('md-orange');
+
     }, // END resume
 
     // -------------------------------------------------------------------------
     // stop()
-    // Calls the 'stop' function of rge screen reader
+    // Calls the 'stop' function of the converter
     // -------------------------------------------------------------------------
     stop: function () {
-      $().speak2me('stop');
-      $(".mdib-speaker").removeClass("mdib-spin");
-      // potential workaround, when selected language in voice
+      $().speak2me('stop')
+      // remove speak indication;
+      $('.mdib-speaker').removeClass('mdib-spin');
+      // remove pause indication
+      $('.mdib-speaker').removeClass('md-orange');
+
+      $('#speak_button').show();
+
+      // jadams, 2023-09-28;
+      // workaroud: reload page to reset TTS dialog (buttons)
+      location.reload();
+
+      // jadams, 2023-09-28;
+      // solution required, when selected language in voice
       // selector (dialog) has NOT changed if translation was changed
-      // location.reload();
+
     }, // END stop
 
     // -------------------------------------------------------------------------

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

@@ -12733,6 +12733,9 @@ li > a:hover {
   text-decoration: none;
   color: rgba(0, 0, 0, 0.8) !important; }
 
+.page-link.disabled {
+  background-color: #e0e0e0; }
+
 .page-link:hover, .page-link:focus {
   border: 1px solid !important;
   background-color: #757575 !important;