j1-template 2022.5.0 → 2022.5.1.rc0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: e09378225f1f91761c92ffb1177e27ad8966045cf4cfa7b6910e221eb9e43b5b
-  data.tar.gz: a3000917da1944d58dae36b8e4332304e0f18e1c36c208bd5ed8cd3cda4dbff6
+  metadata.gz: cc6b1bae7e41cf1ddc933e1ad72ad6a312125885e206e6498ed2554066897fc3
+  data.tar.gz: 8cf324b8e112b8a028fbda2c8b4c40dca5484a0fc7c597464c4aa54b9b0e59bd
 SHA512:
-  metadata.gz: 5cef08eed1679611ffa60b0415c720ec7c2d4ddfdbb6ca3aa1aebe8d2f3b004acffe295cfdb4a372967c4e6ae56c6bc1ba31e41ce0c29573d671d4027d60b297
-  data.tar.gz: 636d7eb254ce23b50d383d2c7e95056107181fde9aa1c97f417ae71f6f43e5e75a100e985c67c4926b4f8e46bd67cae7f46ec96a3e2a05e35838acc0cb860d8f
+  metadata.gz: 5b6f8a76e10e97367a0847d786219db6f1498cfc1ce78b18f8b59e52f5411a620b4f119517bae1ddeeb06a5475290fcc3e9b03b6e761130213b9760ba7e9e381
+  data.tar.gz: 3c1da92c7667cf1502ece25ba9e0c2a8ebbcaf48e1d457dcea1ab8f690f03e281c4eeada6d92b3c8f21fffbf8ade122081a3cbcdd9bbcf0ba668b4ecd5f87310

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/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.rc0"
+                			title="Get new version 2022.5.1.rc0"
                 			style="width: 140px; height: 120px;"
                 		>
                   </a>

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,45 @@ 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');
+
               _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 +493,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 = '';

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

@@ -14992,7 +14992,7 @@ table.tableblock > .title {
   text-shadow: 0 4px 0 rgba(0, 0, 0, 0.2) !important; }
 
 .attic__badge {
-  background-color: rgba(0, 0, 0, 0.3);
+  background-color: rgba(0, 0, 0, 0.5);
   padding: 4px 6px;
   display: inline-block;
   border-radius: 3px; }
@@ -19435,6 +19435,31 @@ a.timeline-list-unstyled:hover {
   .timeline > li.timeline-inverted > .timeline-badge {
     left: -11px; } }
 
+/*
+ # -----------------------------------------------------------------------------
+ # ~/scss/theme_uno/extensions/transitions.scss
+ #
+ # Product/Info:
+ # 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
+ # -----------------------------------------------------------------------------
+ # NOTE: Util styles added on button elements to create an PULSED animation
+ # -----------------------------------------------------------------------------
+*/
+.cssFadeIn {
+  visibility: visible;
+  opacity: 1;
+  transition: opacity 2s linear; }
+
+.cssFadeOut {
+  visibility: hidden;
+  opacity: 0;
+  transition: visibility 0s 2s, opacity 2s linear; }
+
 /*
  # -----------------------------------------------------------------------------
  # ~/scss/theme_uno/bootstrap/extensions/mde/_transparency.scss