j1-template 2022.5.0 → 2022.5.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: e09378225f1f91761c92ffb1177e27ad8966045cf4cfa7b6910e221eb9e43b5b
-  data.tar.gz: a3000917da1944d58dae36b8e4332304e0f18e1c36c208bd5ed8cd3cda4dbff6
+  metadata.gz: 0ef4b1dbda764736d62ba61752746e3556f0ca171bff05f9b1964824b675b2f1
+  data.tar.gz: b397b53c6f6d548bfe8206e78db1ae33bdd012d17b152bceb5fba4fa240e9e89
 SHA512:
-  metadata.gz: 5cef08eed1679611ffa60b0415c720ec7c2d4ddfdbb6ca3aa1aebe8d2f3b004acffe295cfdb4a372967c4e6ae56c6bc1ba31e41ce0c29573d671d4027d60b297
-  data.tar.gz: 636d7eb254ce23b50d383d2c7e95056107181fde9aa1c97f417ae71f6f43e5e75a100e985c67c4926b4f8e46bd67cae7f46ec96a3e2a05e35838acc0cb860d8f
+  metadata.gz: b217e14299dc897f28674e66cb1ac8105e2568ada1387531f66071855730c8e54126131257b888c30bad3f58275007e1403f01fa112219f52a7eb849091b9ff8
+  data.tar.gz: 438f464c775ae27d0b55ca42e978dd7e8a14c87fc8484094568cc09a1ded533a9dd45eb3f9edbb34f644702b38691393164ee66657003d9a5517979e6c3c9159

data/_includes/themes/j1/modules/attics/generator.html

@@ -126,24 +126,16 @@
   <!-- [INFO   ] [~/_includes/themes/j1/modules/attics/generator.html ] [ attic enabled for layout: {{page.layout}} ] -->
   <!-- [INFO   ] [~/_includes/themes/j1/modules/attics/generator.html ] [ place attic detected: {{attic}} ] -->
 
- {% comment %} Place attic detected
+ {% comment %} Place Attic detected
  ------------------------------------------------------------------------------- {% endcomment %}
-  <div id="{{attic}}" class="attic notranslate">
-    <div class="container">
+  <!-- div id="{{attic}}" class="attic notranslate" -->
+  <div id="{{attic}}" class="attic ">
+    <div class="container textOverlay" style="display: none">
       {% if logo_enabled %}
       <div class="{{imageAnimate}}"> <h2 class="home-title"><img src="{{imageName}}" height="{{imageHeigth}}px" alt="{{imageAlt}}"></h2></div>
       {% endif %}
-      <div id="head-title" class="head-title animate__animated "> <h2 id="head-title-text" class="notoc">{{page.title}}</h2></div>
-      <div id="head-tagline" class="head-tagline animate__animated "> <h3 id="head-tagline-tagline" class="notoc">{{page.tagline}}</h3></div>
-      {% if action_enabled %}
-      <div class="{{action_button}}">
-        <a href="{{action_url}}"><i class="{{icon-family}}"></i> {{action_text}}</a>
-      </div>
-      {% endif %}
-      <!-- Image caption container (display: none per default) -->
-      <!-- div class="attic-caption text-emphasis-{{text_emphasis}}"></div -->
-      <div class="attic-caption"></div>
     </div>
+    <div class="attic-caption" style="display: none"></div>
   </div>
 
 {% else %}

data/_includes/themes/j1/procedures/global/date-german.proc

@@ -0,0 +1,67 @@
+{% comment %}
+ # -----------------------------------------------------------------------------
+ #  ~/_includes/themes/j1/procedures/global/date-german.proc
+ #  Liquid PROCEDURE to calculate a GERMAN date string
+ #
+ #  https://jekyll.one
+ #
+ #  Copyright (C) 2022 Juergen Adams
+ #
+ #  J1 Template is licensed under the MIT License.
+ #  See: https://github.com/jekyll-one-org/J1 Template/blob/master/LICENSE
+ #
+ # -----------------------------------------------------------------------------
+ #   Global procedure. Calculates the absolute path of the current page
+ #   relative to the web root. The path is resturned by the liquid variable
+ #   page_url.
+ #
+ #    Usage:
+ #
+ #      1)  include the get_page_url.proc procedure
+ #      2)  assign|use the page_url variable
+ #
+ #    Example:
+ #
+ #    {% capture date-german %}themes/{{site.template.name}}/procedures/global/date-german.proc{% endcapture %}
+ #
+ #    {% include {{date-german}} %}
+ #    {% assign my_date_de = date-german date=post.date %}
+ #
+ # -----------------------------------------------------------------------------
+ # Test data:
+ #  liquid_var:  {{ liquid_var | debug }}
+ #
+ # -----------------------------------------------------------------------------
+{% endcomment %}
+
+{% comment %} Ruby implementaion for i18n date
+See: https://github.com/uwolf/jekyll-i18n-date
+NOTE already implemented as an plugin: ~/_plugins/date-i18n.rb
+-------------------------------------------------------------------------------- {% endcomment %}
+
+
+{% comment %} Variables
+-------------------------------------------------------------------------------- {% endcomment %}
+
+
+
+{% comment %} Liquid procedures
+-------------------------------------------------------------------------------- {% endcomment %}
+
+
+
+{% comment %} Main
+-------------------------------------------------------------------------------- {% endcomment %}
+
+{% assign formattedDate = '' %}
+
+{% if include.showDay %}
+    {% assign formattedDate = include.date | date: '%-d' | append: '. '%}
+{% endif %}
+
+{% assign monthNames = 'Januar,Februar,März,April,Mai,Juni,Juli,August,September,Oktober,November,Dezember' %}
+{% assign monthNames = monthNames | split: ',' %}
+{% assign month = include.date | date: '%-m' | minus: 1 %}
+
+{% assign formattedDate = formattedDate | append: monthNames[month] %}
+{% assign formattedDate = include.date | date: '%Y' | prepend: ' ' | prepend: formattedDate %}

data/assets/data/banner.html

@@ -234,8 +234,8 @@ exclude_from_search:                    true
                 		<img
                 			class="sticker-image"
                 			src="/assets/images/sticker/600x600/sticker-new-version.png"
-                			alt="Get new version 2022.5.0"
-                			title="Get new version 2022.5.0"
+                			alt="Get new version 2022.5.1"
+                			title="Get new version 2022.5.1"
                 			style="width: 140px; height: 120px;"
                 		>
                   </a>

data/assets/data/menu.html

@@ -425,7 +425,7 @@ See: https://stackoverflow.com/questions/39935447/is-there-any-way-to-exclude-ma
           {% when 'theme_select' %}
           {% if themer_options.enabled %}
             <!-- [INFO   ] [~/assets/data/menu.html         ][found menu-type: theme_select] -->
-            <li id="themes_menu" class="dropdown nav-item">
+            <li id="themes_menu" class="dropdown nav-item" style="display: block">
               <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown" data-hover="dropdown">{{menu.item}} </a>
               {% if nav_menu_animation %}
               <ul class="dropdown-menu raised-z{{raised_level}}">

data/assets/data/mmenu.html

@@ -129,9 +129,9 @@ See: https://stackoverflow.com/questions/39935447/is-there-any-way-to-exclude-ma
       <!-- [INFO   ] [~/assets/data/mmenu.html              ] [submenu level 1 detected] -->
       <li>
         {% if menu.icon == null %}
-          <a href="#">{{menu.item}}</a>
+          <span>{{menu.item}}</span>
         {% else %}
-          <a href="#"> <i class="{{icon_style}} {{icon_family}}-{{menu.icon}} {{icon_size}} {{icon_color}} mr-2"></i>{{menu.item}}</a>
+          <span><i class="{{icon_style}} {{icon_family}}-{{menu.icon}} {{icon_size}} {{icon_color}} mr-2"></i>{{menu.item}}</span>
         {% endif %}
 
         <ul>
@@ -139,15 +139,15 @@ See: https://stackoverflow.com/questions/39935447/is-there-any-way-to-exclude-ma
           {% if level_1.dropdown == null %}
             {% if level_1.icon == null %}
               {% if level_1.target == null %}
-                <li><a href="{{level_1.href}}{{ext}}">{{level_1.title}}</a></li>
+                <li><a class="link-no-decoration" href="{{level_1.href}}{{ext}}">{{level_1.title}}</a></li>
               {% else %}
-                <li><a href="{{level_1.href}}{{ext}}" target="{{level_1.target}}">{{level_1.title}}</a></li>
+                <li><a class="link-no-decoration" href="{{level_1.href}}{{ext}}" target="{{level_1.target}}">{{level_1.title}}</a></li>
               {% endif %}
             {% else %}
               {% if level_1.target == null %}
-                <li><a href="{{level_1.href}}{{ext}}"><i class="{{icon_style}} {{icon_family}}-{{level_1.icon}} {{icon_size}} {{icon_color}} mr-2"></i> {{level_1.title}}</a></li>
+                <li><a class="link-no-decoration" href="{{level_1.href}}{{ext}}"><i class="{{icon_style}} {{icon_family}}-{{level_1.icon}} {{icon_size}} {{icon_color}} mr-2"></i> {{level_1.title}}</a></li>
               {% else %}
-                <li><a href="{{level_1.href}}{{ext}}" target="{{level_1.target}}"><i class="{{icon_style}} {{icon_family}}-{{level_1.icon}} {{icon_size}} {{icon_color}} mr-2"></i> {{level_1.title}}</a></li>
+                <li><a class="link-no-decoration" href="{{level_1.href}}{{ext}}" target="{{level_1.target}}"><i class="{{icon_style}} {{icon_family}}-{{level_1.icon}} {{icon_size}} {{icon_color}} mr-2"></i> {{level_1.title}}</a></li>
               {% endif %}
             {% endif %}
           {% endif %}
@@ -156,9 +156,9 @@ See: https://stackoverflow.com/questions/39935447/is-there-any-way-to-exclude-ma
             <!-- [INFO   ] [~/assets/data/mmenu.html              ] [submenu level 2 (dropdown) detected] -->
             <li>
               {% if level_1.icon == null %}
-                <a href="#">{{level_1.title}}</a>
+                <span>{{level_1.title}}</span>
               {% else %}
-                <a href="#"><i class="{{icon_style}} {{icon_family}}-{{level_1.icon}} {{icon_size}} {{icon_color}} mr-2"></i> {{level_1.title}}</a>
+                <span><i class="{{icon_style}} {{icon_family}}-{{level_1.icon}} {{icon_size}} {{icon_color}} mr-2"></i> {{level_1.title}}</span>
               {% endif %}
 
               <ul>
@@ -166,15 +166,15 @@ See: https://stackoverflow.com/questions/39935447/is-there-any-way-to-exclude-ma
                   {% if level_2.dropdown == null %}
                     {% if level_2.icon == null %}
                       {% if level_2.target == null %}
-                        <li><a href="{{level_2.href}}{{ext}}">{{level_2.title}}</a></li>
+                        <li><a class="link-no-decoration" href="{{level_2.href}}{{ext}}">{{level_2.title}}</a></li>
                       {% else %}
-                        <li><a href="{{level_2.href}}{{ext}}" target="{{level_2.target}}">{{level_2.title}}</a></li>
+                        <li><a class="link-no-decoration" href="{{level_2.href}}{{ext}}" target="{{level_2.target}}">{{level_2.title}}</a></li>
                       {% endif %}
                     {% else %}
                       {% if level_2.target == null %}
-                        <li><a href="{{level_2.href}}{{ext}}"><i class="{{icon_style}} {{icon_family}}-{{level_2.icon}} {{icon_size}} {{icon_color}} mr-2"></i> {{level_2.title}}</a></li>
+                        <li><a class="link-no-decoration" href="{{level_2.href}}{{ext}}"><i class="{{icon_style}} {{icon_family}}-{{level_2.icon}} {{icon_size}} {{icon_color}} mr-2"></i> {{level_2.title}}</a></li>
                       {% else %}
-                        <li><a href="{{level_2.href}}{{ext}}" target="{{level_2.target}}"><i class="{{icon_style}} {{icon_family}}-{{level_2.icon}} {{icon_size}} {{icon_color}} mr-2"></i> {{level_2.title}}</a></li>
+                        <li><a class="link-no-decoration" href="{{level_2.href}}{{ext}}" target="{{level_2.target}}"><i class="{{icon_style}} {{icon_family}}-{{level_2.icon}} {{icon_size}} {{icon_color}} mr-2"></i> {{level_2.title}}</a></li>
                       {% endif %}
                     {% endif %}
                   {% endif %}
@@ -182,24 +182,24 @@ See: https://stackoverflow.com/questions/39935447/is-there-any-way-to-exclude-ma
                     <!-- [INFO   ] [~/assets/data/mmenu.html              ] [submenu level 3 detected (last level supported)] -->
                     <li>
                       {% if level_2.icon == null %}
-                        <a href="#" >{{level_2.title}}</a>
+                        <span>{{level_2.title}}</span>
                       {% else %}
-                        <a href="#" ><i class="{{icon_style}} {{icon_family}}-{{level_2.icon}} {{icon_size}} {{icon_color}} mr-2"></i> {{level_2.title}}</a>
+                        <span><i class="{{icon_style}} {{icon_family}}-{{level_2.icon}} {{icon_size}} {{icon_color}} mr-2"></i> {{level_2.title}}</span>
                       {% endif %}
 
                       <ul>
                       {% for level_3 in level_2.dropdown %}
                         {% if level_2.icon == null %}
                           {% if level_3.target == null %}
-                            <li><a href="{{level_3.href}}{{ext}}">{{level_3.title}}</a></li>
+                            <li><a class="link-no-decoration" href="{{level_3.href}}{{ext}}">{{level_3.title}}</a></li>
                           {% else %}
-                            <li><a href="{{level_3.href}}{{ext}}" target="{{level_3.target}}">{{level_3.title}}</a></li>
+                            <li><a class="link-no-decoration" href="{{level_3.href}}{{ext}}" target="{{level_3.target}}">{{level_3.title}}</a></li>
                           {% endif %}
                         {% else %}
                           {% if level_3.target == null %}
-                            <li><a href="{{level_3.href}}{{ext}}"><i class="{{icon_style}} {{icon_family}}-{{level_3.icon}} {{icon_size}} {{icon_color}} mr-2"></i> {{level_3.title}}</a></li>
+                            <li><a class="link-no-decoration" href="{{level_3.href}}{{ext}}"><i class="{{icon_style}} {{icon_family}}-{{level_3.icon}} {{icon_size}} {{icon_color}} mr-2"></i> {{level_3.title}}</a></li>
                           {% else %}
-                            <li><a href="{{level_3.href}}{{ext}}" target="{{level_3.target}}"><i class="{{icon_style}} {{icon_family}}-{{level_3.icon}} {{icon_size}} {{icon_color}} mr-2"></i> {{level_3.title}}</a></li>
+                            <li><a class="link-no-decoration" href="{{level_3.href}}{{ext}}" target="{{level_3.target}}"><i class="{{icon_style}} {{icon_family}}-{{level_3.icon}} {{icon_size}} {{icon_color}} mr-2"></i> {{level_3.title}}</a></li>
                           {% endif %}
                         {% endif %}
                         {% if level_3.divider %} <li class="divider"></li> {% endif %}
@@ -228,7 +228,7 @@ See: https://stackoverflow.com/questions/39935447/is-there-any-way-to-exclude-ma
       <!-- [INFO   ] [~/assets/data/mmenu.html              ] [Calculated size of mm_columns: {{columns_width_md}}] -->
 
       <li>
-        <a href="#" >{{menu.item}} </a>
+        <a class="link-no-decoration" href="#" >{{menu.item}} </a>
         <ul>
           <li>
             <div class="row">
@@ -247,9 +247,9 @@ See: https://stackoverflow.com/questions/39935447/is-there-any-way-to-exclude-ma
                 <ul class="menu-col">
                 {% for links in megabox.column %}
                   {% if links.icon == null %}
-                    <li class="dropdown-megamenu-item"><a href="{{links.href}}{{ext}}" target="{{links.target}}">{{links.title}}</a></li>
+                    <li class="dropdown-megamenu-item"><a class="link-no-decoration" href="{{links.href}}{{ext}}" target="{{links.target}}">{{links.title}}</a></li>
                   {% else %}
-                    <li class="dropdown-megamenu-item"><a href="{{links.href}}{{ext}}" target="{{links.target}}"><i class="{{icon_style}} {{icon_family}}-{{links.icon}} {{icon_size}} {{icon_color}} mr-2"></i> {{links.title}}</a></li>
+                    <li class="dropdown-megamenu-item"><a class="link-no-decoration" href="{{links.href}}{{ext}}" target="{{links.target}}"><i class="{{icon_style}} {{icon_family}}-{{links.icon}} {{icon_size}} {{icon_color}} mr-2"></i> {{links.title}}</a></li>
                   {% endif %}
                 {% endfor %}
                 </ul>
@@ -273,16 +273,16 @@ See: https://stackoverflow.com/questions/39935447/is-there-any-way-to-exclude-ma
         {% if menu.icon == null %}
           <!-- [INFO   ] [~/assets/data/mmenu.html              ] [no icon for menu-item found -->
           {% if menu.target == null %}
-            <li> <a href="{{menu.href}}{{ext}}">{{menu.item}}</a> </li>
+            <li> <a class="link-no-decoration" href="{{menu.href}}{{ext}}">{{menu.item}}</a> </li>
           {% else %}
-            <li> <a href="{{menu.href}}{{ext}}" target="{{menu.target}}">{{menu.item}}</a> </li>
+            <li> <a class="link-no-decoration" href="{{menu.href}}{{ext}}" target="{{menu.target}}">{{menu.item}}</a> </li>
           {% endif %}
         {% elsif menu.icon %}
           <!-- [INFO   ] [~/assets/data/mmenu.html              ] [no icon for menu-item found -->
           {% if menu.target == null %}
-            <li> <a href="{{menu.href}}{{ext}}"><i class="{{icon_style}} {{icon_family}}-{{menu.icon}} {{icon_size}}"></i> {{menu.item}}</a> </li>
+            <li> <a class="link-no-decoration" href="{{menu.href}}{{ext}}"><i class="{{icon_style}} {{icon_family}}-{{menu.icon}} {{icon_size}}"></i> {{menu.item}}</a> </li>
           {% else %}
-            <li> <a href="{{menu.href}}{{ext}}" target="{{menu.target}}"><i class="{{icon_style}} {{icon_family}}-{{menu.icon}} {{icon_size}}"></i> {{menu.item}}</a> </li>
+            <li> <a class="link-no-decoration" href="{{menu.href}}{{ext}}" target="{{menu.target}}"><i class="{{icon_style}} {{icon_family}}-{{menu.icon}} {{icon_size}}"></i> {{menu.item}}</a> </li>
           {% endif %}
         {% else %}
           <!-- [FATAL ] [nav_menu.menu-top-level-only       ] [processing menu item failed] -->
@@ -297,7 +297,7 @@ See: https://stackoverflow.com/questions/39935447/is-there-any-way-to-exclude-ma
         {% when 'auth_client' %}
           <!-- [INFO   ] [~/assets/data/mmenu.html              ] [found menu-type: auth_client] -->
           <li id="menuBarSignInOut" class="dropdown nav-item">
-            <a href="#">{{menu.item}} </a>
+            <span>{{menu.item}}</span>
 
             <ul>
               {% assign item_found = 'false' %}
@@ -306,7 +306,7 @@ See: https://stackoverflow.com/questions/39935447/is-there-any-way-to-exclude-ma
                 <!-- [INFO   ] [~/assets/data/mmenu.html              ] [START: check signin] -->
                 {% if item.mode == 'signin' %}
                   <li>
-                    <a href="#" data-bs-toggle="modal" data-bs-target="#modalOmniSignIn"><i class="{{icon_style}} {{icon_family}}-{{item.icon}} {{icon_size}}"></i>{{item.title}}</a>
+                    <a class="link-no-decoration" href="#" data-bs-toggle="modal" data-bs-target="#modalOmniSignIn"><i class="{{icon_style}} {{icon_family}}-{{item.icon}} {{icon_size}}"></i>{{item.title}}</a>
                   </li>
                   {% assign item_found = 'true' %}
                 {% endif %}
@@ -315,7 +315,7 @@ See: https://stackoverflow.com/questions/39935447/is-there-any-way-to-exclude-ma
                 <!-- [INFO   ] [~/assets/data/mmenu.html              ] [START: check signout] -->
                 {% if item.mode == 'signout' %}
                   <li>
-                    <a href="#" data-bs-toggle="modal" data-bs-target="#modalOmniSignOut"><i class="{{icon_style}} {{icon_family}}-{{item.icon}} {{icon_size}}"></i>{{item.title}}</a>
+                    <a class="link-no-decoration" href="#" data-bs-toggle="modal" data-bs-target="#modalOmniSignOut"><i class="{{icon_style}} {{icon_family}}-{{item.icon}} {{icon_size}}"></i>{{item.title}}</a>
                   </li>
                   {% assign item_found = 'true' %}
                 {% endif %}
@@ -325,9 +325,9 @@ See: https://stackoverflow.com/questions/39935447/is-there-any-way-to-exclude-ma
                 <!-- [FATAL  ] [~/assets/data/mmenu.html              ] [no valid menu item config found] -->
                   <li>
                     {% if item.title %}
-                      <a href="#" >Invalid: {{item.title}}</a>
+                      <a class="link-no-decoration" href="#" >Invalid: {{item.title}}</a>
                     {% else %}
-                      <a href="#" >Item invalid</a>
+                      <a class="link-no-decoration" href="#" >Item invalid</a>
                     {% endif %}
                   </li>
                 {% endif %}
@@ -345,7 +345,7 @@ See: https://stackoverflow.com/questions/39935447/is-there-any-way-to-exclude-ma
           {% if themer_options.enabled %}
             <!-- [INFO   ] [~/assets/data/mmenu.html              ] [found menu-type: theme_select] -->
             <li>
-              <a href="#">{{menu.item}} </a>
+              <span id="themes_mmenu" style="display: block">{{menu.item}}</span>
               {% if nav_menu_animation %}
               <ul>
               <!-- ul class="dropdown-menu data-in="{{nav_menu_animation}}" data-out="{{nav_menu_animation}}" -->
@@ -357,7 +357,7 @@ See: https://stackoverflow.com/questions/39935447/is-there-any-way-to-exclude-ma
                   <!-- check for locally loaded J1 Themes -->
                   {% if item.local_themes and item.local_themes == 'enabled' %}
                     <li>
-                      <a href="#"><i class="{{icon_family}} {{icon_family}}-{{item.icon}} {{icon_size}} {{icon_color}} mr-2"></i> {{item.title}}</a>
+                      <span><i class="{{icon_family}} {{icon_family}}-{{item.icon}} {{icon_size}} {{icon_color}} mr-2"></i> {{item.title}}</span>
                       <ul id="local_themes_mmenu"></ul>
                     </li>
                     {% assign item_found = 'true' %}
@@ -365,14 +365,14 @@ See: https://stackoverflow.com/questions/39935447/is-there-any-way-to-exclude-ma
                   <!-- check for remotely loaded (BootSwatch) Themes -->
                   {% if item.bootswatch_themes and item.bootswatch_themes == 'enabled' %}
                     <li>
-                      <a href="#"><i class="{{icon_family}} {{icon_family}}-{{item.icon}} {{icon_size}} {{icon_color}} mr-2"></i> {{item.title}}</a>
+                      <span><i class="{{icon_family}} {{icon_family}}-{{item.icon}} {{icon_size}} {{icon_color}} mr-2"></i> {{item.title}}</span>
                       <ul id="remote_themes_mmenu"></ul>
                     </li>
                     {% assign item_found = 'true' %}
                   {% endif %} <!-- end BootSwatch theme selector -->
                   {% if item.preview and item.preview == 'enabled' %}
                     <li>
-                      <a href="{{theme_preview}}" ><i class="{{icon_family}} {{icon_family}}-{{item.icon}} {{icon_size}} {{icon_color}} mr-2"></i> {{item.title}}</a>
+                      <a class="link-no-decoration" href="{{theme_preview}}" ><i class="{{icon_family}} {{icon_family}}-{{item.icon}} {{icon_size}} {{icon_color}} mr-2"></i> {{item.title}}</a>
                     </li>
                     {% assign item_found = 'true' %}
                     {% endif %} <!-- end theme preview -->
@@ -380,9 +380,9 @@ See: https://stackoverflow.com/questions/39935447/is-there-any-way-to-exclude-ma
                     {% if item_found == 'false' %}
                     <li>
                       {% if item.title %}
-                        <a href="#" >Invalid: {{item.title}}</a>
+                        <span>Invalid: {{item.title}}</span>
                       {% else %}
-                        <a href="#" >Item invalid</a>
+                        <span>Item invalid</span>
                       {% endif %}
                     </li>
                   {% endif %} <!-- end fallback -->

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

@@ -120,27 +120,38 @@ j1.adapter.attic = (function (j1, window) {
       // initialize state flag
       _this.state = 'pending';
 
-      // create settings object from frontmatter options
+      // create settings object from frontmatter
       var frontmatterOptions  = options != null ? $.extend({}, options) : {};
+
       // create settings object from attic options
-      var atticOptions         = $.extend({}, {{attic_options | replace: 'nil', 'null' | replace: '=>', ':' }});
+      var atticDefaults = $.extend({}, {{attic_defaults | replace: 'nil', 'null' | replace: '=>', ':' }});
+      var atticSettings = $.extend({}, {{attic_settings | replace: 'nil', 'null' | replace: '=>', ':' }});
+
+//    merge all attic options
+      var atticOptions = $.extend({}, atticDefaults, atticSettings, frontmatterOptions);
 
-      // Save frontmatterOptions in the j1 namespace
+      // Save frontmatterOptions and atticOptions in the j1 namespace
       // to be used later by j1.template.init() to load the header
+      //
       _this['frontmatterOptions'] = frontmatterOptions;
+      _this['atticOptions']       = atticOptions;
 
       _this.setState('started');
       logger.debug('\n' + 'state: ' + _this.getState());
       logger.info('\n' + 'module is being initialized');
 
-      _this.loadHeader(frontmatterOptions);
+      _this.loadHeader();
+
     }, // END init
 
     // -------------------------------------------------------------------------
     // Initialize all header supported
     // -------------------------------------------------------------------------
     loadHeader: function () {
-      var frontmatterOptions = _this.frontmatterOptions;
+      var frontmatterOptions  = _this.frontmatterOptions;
+      // merge all attic options
+      var atticOptions = $.extend({}, _this.atticOptions, _this.frontmatterOptions);
+
 
       {% comment %} Load data from header config (yaml data file)
       -------------------------------------------------------------------------- {% endcomment %}
@@ -184,57 +195,89 @@ j1.adapter.attic = (function (j1, window) {
               $('.backstretch').addClass(atticOptions.spinner);
             }
 
-            // if (atticOptions.spinner) {
-            //   $('.backstretch').addClass(atticOptions.spinner);
-            // }
-
             // Collect backstretch instance data for Backstretch callbacks
             var backstretch_instance_data = $('#{{attic_id}}').data('backstretch');
 
+            // Add event for pauseOnHover
+            //
+            if (atticOptions.pauseOnHover) {
+              $('#attic_home').hover (
+                function() {
+                  $('#{{attic_id}}').backstretch('pause'); },
+                function() {
+                  $('#{{attic_id}}').backstretch('resume'); }
+              );
+            }
+
             {% comment %} Set the headerLoaded flag (page NOT visible)
             -------------------------------------------------------------------- {% endcomment %}
            $(window).on('backstretch.before', function (e, instance, index) {
-              var evt     = e;
-              var inst    = instance;
-              var idx     = index;
-//            logger.debug('\n' + 'state: ' + _this.getState());
-              console.log('module attic - entered: backstretch.before');
+              var evt                 = e;
+              var inst                = instance;
+              var idx                 = index;
+              var atticOptions        = _this.atticOptions;
+              var textOverlayTitle    = instance.images[index].title
+              var textOverlayTagline  = instance.images[index].tagline;
+              var textOverlayHTML;
+
+              console.log('module attic - set state: backstretch_before');
+              _this.setState('backstretch_before');
 
+              if (index === backstretch_instance_data.images.length -1) {
+                if (atticOptions.circuit == false) {
+                  // Stop the slideshow after reached the last image
+                  $('#{{attic_id}}').backstretch('pause');
+                }
+                // remove class for the backstretch_intro background
+                $('.backstretch').removeClass(atticOptions.spinner);
+              }
+
+              console.log('module attic - entered: backstretch.before');
               console.log('module attic - apply: CSS filters');
+
               $('.backstretch').css('filter', 'sepia(1) brightness(0.9) contrast(0.6)');
-//            $('.backstretch').css('filter', 'sepia(1) brightness(0.9) contrast(0.6)');
               $('.backstretch').css('filter', 'grayscale(1) contrast(1) brightness(1)');
 
-              _this.setState('backstretch_before');
-//             console.log('module attic - set state: backstretch_before');
-            });
+              // mute the overlay content while sliding
+              $('.textOverlay').css('opacity', '0');
+
+              // mute the badge while sliding
+              $('.attic-caption').css('opacity', '0');
+
+            }); // END on('backstretch.before')
 
             {% comment %} Add a caption (c) or badge (b) if configured
             See: https://github.com/jquery-backstretch/jquery-backstretch/issues/194
             -------------------------------------------------------------------- {% endcomment %}
             $(window).on('backstretch.after', function (e, instance, index) {
-              logText ='add caption text';
+              var textOverlayTitle    = instance.images[index].title
+              var textOverlayTagline  = instance.images[index].tagline;
+              var atticOptions        = _this.atticOptions;
+              var frontmatterOptions  = _this.frontmatterOptions;
+              var textOverlayHTML;
+
+              if (typeof instance.images[index].badge != 'undefined') {
+                var bType               = instance.images[index].badge.type;
+                var bAuthor             = instance.images[index].badge.author;
+                var bLink               = instance.images[index].badge.href;
+              }
+
               _this.setState('backstretch_after');
-//            logger.debug('\n' + 'state: ' + status);
-              // logger.debug(logText);
 
-              if (typeof atticOptions.slides[index].caption != 'undefined') {
-                var cText = atticOptions.slides[index].caption.text;
-                var cLink = atticOptions.slides[index].caption.href;
+              if (typeof instance.images[index].caption != 'undefined') {
+                var cText = instance.images[index].caption.text;
+                var cLink = instance.images[index].caption.href;
 
                 if (cLink) {
-                  $('.attic-caption').html('<a class="j1-masthead-caption-anchor" href="' +cLink+ '" target="_blank">'+cText+'</a>').show(); //.addClass('animated fadeInUp');
+                  $('.attic-caption').html('<a class="j1-masthead-caption-anchor" href="' + cLink + '" target="_blank">'+cText+'</a>').show();
                 } else {
-                  $('.attic-caption').text(cText).show(); //.addClass('animated fadeInUp');
+                  $('.attic-caption').text(cText).show();
                 }
-              } else if (typeof atticOptions.slides[index].badge != 'undefined') {
-                var bType   = atticOptions.slides[index].badge.type;
-                var bAuthor = atticOptions.slides[index].badge.author;
-                var bLink   = atticOptions.slides[index].badge.href;
+              } else if (typeof instance.images[index].badge != 'undefined') {
 
                 if (bType === 'unsplash') {
                   var badgeHTML = ''
-                      + '<div class="attic__badge">'
+                      + '<div class="attic__badge animate__animated animate__fadeIn animate__slower">'
                       + ' <a class="attic__badge_unsplash link-no-decoration"'
                       + '  href="' +bLink+ '?utm_medium=referral&amp;utm_campaign=photographer-credit&amp;utm_content=creditBadge"'
                       + '  target="_blank"'
@@ -244,52 +287,53 @@ j1.adapter.attic = (function (j1, window) {
                       + '    <svg xmlns="http://www.w3.org/2000/svg"'
                       + '	   class="attic__badge_unsplash_icon-size"'
                       + '      viewBox="0 0 32 32">'
-//                    + '      <title>search unsplash</title>'
                       + '      <path d="M10 9V0h12v9H10zm12 5h10v18H0V14h10v9h12v-9z"></path>'
                       + '    </svg>'
                       + '  </span>'
                       + '  <span class="attic__badge_unsplash_text">' +bAuthor+ '</span>'
                       + ' </a>'
                       + '</div>';
-
-                  $('.attic-caption').html(badgeHTML).show();
+                      $('.attic-caption').html(badgeHTML).hide();
                 }
               }
+
+              textOverlayHTML = ''
+                + '<div id="head-title" class="head-title animate__animated ">'
+                + '  <h2 id="head-title-text" class="notoc text-emphasis-stronger">' + textOverlayTitle + '</h2>'
+                + '</div>'
+                + '<div id="head-tagline" class="head-tagline animate__animated ">'
+                + '  <h3 id="head-tagline-tagline" class="notoc">' + textOverlayTagline + '</h3>'
+                + '</div>';
+               $('.textOverlay').html(textOverlayHTML).hide();
+
+              $('#head-title').addClass(atticOptions.title_animate);
+              $('#head-title').addClass(atticOptions.title_animate_delay);
+              $('#head-title').addClass(atticOptions.title_animate_duration);
+              $('#head-tagline').addClass(atticOptions.tagline_animate);
+              $('#head-tagline').addClass(atticOptions.tagline_animate_duration);
+
+              $('.textOverlay').show();
+              $('.textOverlay').css('opacity', '1');
+              $('.attic-caption').show();
+              $('.attic-caption').css('opacity', '1');
+
+              // jadams, 2022-08-09:
+              // resize the (background-)image to make sure the 'attic'
+              // container is changed in size (heigth) if title/tagline
+              // expands 'multiline' on small viewports
+              // e.g. on mobile devices
+              //
+              $('#{{attic_id}}').backstretch('resize');
+
               _this.setState('finished');
               logger.debug('\n' + 'state: ' + _this.getState());
               logger.info('\n' + 'module initialized successfully');
-            });
-
-            {% comment %} Detect how show should run (only once|infinite loop)
-            -------------------------------------------------------------------- {% endcomment %}
-            {% if image_loop %}
-            $(window).on('backstretch.before', function (e, instance, index) {
-              _this.setState('backstretch_before_image_loop');
-              logger.debug('\n' + 'state: ' + _this.getState());
-              // remove class for the backstretch_intro background
-              if (index === backstretch_instance_data.images.length -1) {
-                $('.backstretch').removeClass(atticOptions.spinner);
-              }
-            });
-            {% else %}
-            $(window).on('backstretch.before', function (e, instance, index) {
-              _this.setState('backstretch_before_image_once');
-              logger.debug('\n' + 'state: ' + _this.getState());
-              // Stop the slideshow after reached the last image
-              if (index === backstretch_instance_data.images.length -1) {
-                $('#{{attic_id}}').backstretch('pause');
-                // remove class for the backstretch_intro background
-                $('.backstretch').removeClass(atticOptions.spinner);
-              }
-            });
-            {% endif %}
+            }); // END on('backstretch.after')
 
           } // END if attic_id exists
 
           // Initialize the header found in page
           if ($('#{{attic_id}}').length) {
-            // Load  Attic OPTIONS
-            var atticOptions = $.extend({}, {{attic_options | replace:'=>',':' }});
 
             {% comment %} Load data from header config file
             -------------------------------------------------------------------- {% endcomment %}
@@ -457,13 +501,21 @@ j1.adapter.attic = (function (j1, window) {
             var raised_level = 'raised-z' +atticOptions.raised_level;
             $('#{{attic_id}}').addClass(raised_level);
             $('#head-title').addClass(atticOptions.title_animate);
+            $('#head-title').addClass(atticOptions.title_animate_delay);
+            $('#head-title').addClass(atticOptions.title_animate_duration);
             $('#head-tagline').addClass(atticOptions.tagline_animate);
+            $('#head-tagline').addClass(atticOptions.tagline_animate_duration);
 
             var text_emphasis = 'text-emphasis-' +atticOptions.text_emphasis;
             $('#head-title-text').addClass(text_emphasis);
-            // $('#head-title-text').addClass(notranslate);
             $('#head-tagline-text').addClass(text_emphasis);
 
+            // check if attic should be translated
+            //
+            if (atticOptions.notranslate) {
+              $('#{{attic_id}}').addClass('notranslate');
+            }
+
             {% comment %} Add header CSS styles to <HEAD>
             -------------------------------------------------------------------- {% endcomment %}
             var attic_style = '';