j1-template 2024.3.13 → 2024.3.14

data/assets/data/banner.html

@@ -243,11 +243,11 @@ exclude_from_search:                    true
             <p>
               <span>
                 <a class="image" href="https://badge.fury.io/rb/j1-template" target="_blank" rel="noopener noreferrer">
-                  <img src="https://badge.fury.io/rb/j1-template.svg" alt="Current Gem Version">
+                  <img class="lazy" data-src="https://badge.fury.io/rb/j1-template.svg" src="" alt="Current Gem Version">
                 </a>
                 </span>
               <span>
-                <img src="https://img.shields.io/gem/dt/j1-template" alt="Current Gem Downloads">
+                <img class="lazy" data-src="https://img.shields.io/gem/dt/j1-template" src="" alt="Current Gem Downloads">
               </span>
             </p>
           </div>
@@ -268,8 +268,9 @@ exclude_from_search:                    true
               		  target="blank"
               		  rel="noopener noreferrer">
               		<img
-              			class="sticker-image"
-              			src="/assets/image/sticker/600x600/sticker-new-version.png"
+              			class="lazy sticker-image"
+              			data-src="/assets/image/sticker/600x600/sticker-new-version.png"
+                    src=""
               			alt="Get new version 2023.3.2"
               			title="Get new version 2023.3.2"
               			style="width: 140px; height: 120px;"
@@ -438,7 +439,8 @@ exclude_from_search:                    true
             {% comment %} Add individual STYLE tags
             ------------------------------------------------------------------ {% endcomment %}
             <!-- [INFO   ] [~/assets/data/banner.html                 ] [ Add individual styles for the parallax banner ] -->
-            <style>
+            <div class="lazy parallaxBg" alt="{{banner_settings.id}}_parallaxBg">
+              <style>
                 .{{banner_settings.id}}-parallaxBg{background:url("{{background_image}}"); min-height: {{size_y}}px; background-attachment: fixed; background-position: center;  background-repeat: no-repeat; background-size: cover; }
                 .{{banner_settings.id}}-parallax-quote{color:#fff;padding:100px 0;position:relative;text-align:center}
                 .{{banner_settings.id}}-parallax-quote:before{top:0;left:0;width:100%;height:100%;content:" ";position:absolute;{% if gridify == true %}background: url("{{gridifier}}") repeat;{% endif %}}
@@ -448,8 +450,8 @@ exclude_from_search:                    true
                 {% if card_text and card_cite_text_quotes %}
                 .{{banner_settings.id}}-parallax-quote-in p:after,.{{banner_settings.id}}-parallax-quote-in p:before{content:' " ';}
                 {% endif %}
-
-            </style>
+              </style>
+            </div>
 
             <div class="panel-fluid {{banner_settings.properties}}">
               <div class="row no-gutters {{banner_settings.id}}-parallax-quote {{banner_settings.id}}-parallaxBg parallax-quoteblock">

data/assets/data/masterslider.html

@@ -44,12 +44,22 @@ exclude_from_search:                    true
 {% assign slider_settings     = modules.masterslider.settings %}
 
 {% comment %} Set config options
-module_version:               {{module_version | debug}}
+slider_options: {{slider_options.options | debug}}
+module_version: {{module_version | debug}}
 -------------------------------------------------------------------------------- {% endcomment %}
 {% assign slider_options      = slider_defaults | merge: slider_settings %}
 {% assign sliders             = slider_settings.sliders %}
 {% assign module_version      = slider_options.module_version %}
 
+{% comment %} Detect slider modes
+--------------------------------------------------------------------------------
+slider_mode:  {{slider_mode | debug}}
+video_mode:   {{video_mode | debug}}
+
+{% assign slider_mode         = slider_options.options.sliderMode %}
+{% assign video_mode          = slider_options.options.videoMode %}
+-------------------------------------------------------------------------------- {% endcomment %}
+
 
 {% comment %} Configure permalink settings
 -------------------------------------------------------------------------------- {% endcomment %}
@@ -143,12 +153,15 @@ module_version:               {{module_version | debug}}
     ---------------------------------------------------------------------------- {% endcomment %}
     <!-- [INFO   ] [~/assets/data/masterslider.html               ]  [Place 'LightGallery' data for id: {{slider.id}}] -->
     <div id="lightgallery_{{slider.id}}" class="lightgallery-container" style="display: none;">
+
       {% for slide in slider.slides %}
+      {% if slide.type == 'image' %}
       <img
         id="{{slider.id}}_{{forloop.index}}"
         src="{{slide.foreground_image}}"
         alt="{{slide.alt}}" title="{{slide.title}}"
       />
+      {% endif %}
       {% endfor %}
     </div>
 
@@ -167,27 +180,136 @@ module_version:               {{module_version | debug}}
           aria-label="Show Lightbox"
           rel="alternate"
           data-lightbox="{{slider.id}}"
-          data-title="{{slide.title}}"
-        >
+          data-title="{{slide.title}}">
           <i class="mdib mdib-image mdib-2x md-gray-600"></i>
         </a>
       </div>
       {% endif %}
 
-      {% comment %} Place images
+      {% comment %} Place slides (image|video)
+      slide.type:  {{slide.type}}
       -------------------------------------------------------------------------- {% endcomment %}
+      {% if slide.type == 'image' %}
       <img
         class="{{slider.id}}-lg-item"
         src="{{slide.background_image}}"
         alt="{{slide.alt}}" title="{{slide.title}}"
         data-src="{{slide.foreground_image}}"
-      >
+      />
+      {% endif %}
+
+      {% if slide.type == 'video' %}
+      <!-- img
+        class="{{slider.id}}-lg-item"
+        alt="{{slide.alt}}" title="{{slide.title}}"
+        data-src="{{slide.poster_image}}"
+      / -->
+			<a
+        class="ms-slide-video"
+        href="{{slide.video_url}}">
+      </a>
+      {% endif %}
+
+      {% comment %}
+      --------------------------------------------------------------------------
+      {% if slide.type == 'video' %}
+      <video
+        id="{{slider.id}}"
+        class="video-js vjs-theme-uno"
+        controls
+        width="640" height="360"
+        poster="{{poster_image}}"
+        alt="{{slide.alt}}"
+        aria-label="{{slide.alt}}"
+        data-setup='{
+          "fluid" : true,
+          "techOrder": [
+        	"youtube", "html5"
+          ],
+          "sources": [{
+        	"type": "video/youtube",
+        	"src": "{{slide.video_url}}"
+          }],
+          "controlBar": {
+        	"pictureInPictureToggle": false,
+        	"volumePanel": {
+        	  "inline": false
+        	}
+        }
+      }'>
+      </video>
+      {% endif %}
+      -------------------------------------------------------------------------- {% endcomment %}
+
+      {% comment %}
+      --------------------------------------------------------------------------
+      {% if slide.type == 'video' %}
+      <div>
+      	<div class="youtube-player bottom">
+      	  <div class="video-title"> <i class="mdib mdi-bs-primary mdib-youtube-tv mdib-18px mr-1"></i> Fortnight (feat. Post Malone, Official Music Video) · Taylor Swift </div>
+      	  <video id="cDv6v6LwLqL" class="video-js vjs-theme-uno" controls width="640" height="360" poster="//img.youtube.com/vi/q3zqJs7JUCQ/maxresdefault.jpg" alt="Fortnight (feat. Post Malone, Official Music Video) · Taylor Swift" aria-label="Fortnight (feat. Post Malone, Official Music Video) · Taylor Swift" data-setup='{
+      	  "fluid" : true,
+      	  "techOrder": [
+      		  "youtube", "html5"
+      	  ],
+      	  "sources": [{
+        		"type": "video/youtube",
+        		"src": "//youtube.com/watch?v=q3zqJs7JUCQ"
+      	  }],
+      	  "controlBar": {
+        		"pictureInPictureToggle": false,
+        		"volumePanel": {
+        		  "inline": false
+        		}
+      	  }
+      	}'> </video>
+      	</div>
+      	<script>
+      	  $(function() {
+        		function addCaptionAfterImage(imageSrc) {
+        		  const image = document.querySelector(`img[src="${imageSrc}"]`);
+        		  if (image) {
+        			// create div|caption container
+        			const newDiv = document.createElement('div');
+        			newDiv.classList.add('caption');
+        			newDiv.textContent = 'Fortnight (feat. Post Malone, Official Music Video) · Taylor Swift';
+        			// insert div|caption container AFTER the image
+        			image.parentNode.insertBefore(newDiv, image.nextSibling);
+        		  } else {
+        			console.error(`Kein Bild mit src="${imageSrc}" gefunden.`);
+        		  }
+        		}
+        		var dependencies_met_page_ready = setInterval (function (options) {
+        		  var pageState      = $('#content').css("display");
+        		  var pageVisible    = (pageState == 'block') ? true : false;
+        		  var j1CoreFinished = (j1.getState() === 'finished') ? true : false;
+        		  if (j1CoreFinished && pageVisible) {
+        			addCaptionAfterImage('//img.youtube.com/vi/q3zqJs7JUCQ/maxresdefault.jpg');
+        			// scroll to player top position
+        			// -------------------------------------------------------------
+        			var vjs_player = document.getElementById("cDv6v6LwLqL");
+        			vjs_player.addEventListener('click', function(event) {
+        			  var scrollOffset = (window.innerWidth >= 720) ? -130 : -110;
+        			  // scroll player to top position
+        			  const targetDiv         = document.getElementById("cDv6v6LwLqL");
+        			  const targetDivPosition = targetDiv.offsetTop;
+        			  window.scrollTo(0, targetDivPosition + scrollOffset);
+        			}); // END EventListener 'click'
+
+        			clearInterval(dependencies_met_page_ready);
+        		  }
+      		  }, 10);
+      	  });
+      	</script>
+      </div>
+      {% endif %}
+      -------------------------------------------------------------------------- {% endcomment %}
 
       {% if slide.thumb_image %}
       <img
         class="ms-thumb" src="{{slide.thumb_image}}"
         alt="thumb_image_{{slider.id}}"
-      >
+      />
       {% endif %}
 
       {% comment %} Place Thumb Info
@@ -214,7 +336,6 @@ module_version:               {{module_version | debug}}
       </div>
       {% endif %}
 
-
       {% comment %} Place Slide Info
       -------------------------------------------------------------------------- {% endcomment %}
       {% assign slideinfo = slide.slideinfo %}

data/assets/data/panel.html

@@ -191,20 +191,6 @@ exclude_from_search:                    true
             {% assign icon_family = 'mdi' %}
           {% endif %}
 
-          {% comment %} generate the HTML portion for the TOP wave element
-          ---------------------------------------------------------------------- {% endcomment %}
-          {% if wave_properties.top.enabled %}
-            {% include {{get_wave}} position="top" wave=wave_properties.top %}
-            {% assign panel_wave_top = _wave %}
-          {% endif %}
-
-          {% comment %} generate the HTML portion for the BOTTOM wave element
-          ---------------------------------------------------------------------- {% endcomment %}
-          {% if wave_properties.bottom.enabled %}
-            {% include {{get_wave}} position="bottom" wave=wave_properties.bottom %}
-            {% assign panel_wave_bottom = _wave %}
-          {% endif %}
-
           {% comment %} process current panel
           ---------------------------------------------------------------------- {% endcomment %}
           {% if panel_settings.enabled %}
@@ -212,17 +198,13 @@ exclude_from_search:                    true
             {% case panel_settings.type %}
 
             {% comment %} Collect INTRO panel
-            -------------------------------------------------------------------- {% endcomment %}
+            ==================================================================== {% endcomment %}
             {% when 'intro' %}
             {% assign panel_options = panel_config_defaults.intro | merge: panel_settings %}
 
             <!-- Panel {{panel_settings.id}} -->
             <div id="{{panel_settings.id}}_content">
 
-              {% if wave_properties.top.enabled %}
-                {{panel_wave_top}}
-              {% endif %}
-
               <!-- Main Container -->
               <div class="container {{panel_settings.properties}}">
 
@@ -296,7 +278,7 @@ exclude_from_search:                    true
                         {% if key == 'text' %}            {% assign card_text             = value | strip_newlines %}  {% endif %}
                         {% if key == 'buttons' %}         {% assign card_buttons          = value %}                   {% endif %}
                       {% endfor %}
-                      {% if card_enabled == false %} {% assign card_items = card_items|minus:1 %} {% assign card_enabled = false%} {% endif %}
+                      {% if card_enabled == false %} {% assign card_items = card_items|minus:1 %} {% assign card_enabled = false %} {% endif %}
                     {% endfor %}
                     {% assign col_size = 12|divided_by:card_items %}
 
@@ -392,22 +374,18 @@ exclude_from_search:                    true
               </div>
               <!-- END main container -->
 
-              {% if wave_properties.bottom.enabled %}
-                {{panel_wave_bottom}}
-              {% endif %}
-
             </div>
 
             <!-- END Panel {{panel_settings.id}} -->
 
             {% comment %} Reset element variables (already processed)
             -------------------------------------------------------------------- {% endcomment %}
-            {% assign panel_settings = false%}
-            {% assign card_enabled   = false%}
+            {% assign panel_settings = false %}
+            {% assign card_enabled   = false %}
 
 
             {% comment %} Collect PLAN panel
-            -------------------------------------------------------------------- {% endcomment %}
+            ==================================================================== {% endcomment %}
             {% when 'plan' %}
             {% assign panel_options     = panel_config_defaults.plan | merge: panel_settings %}
             {% assign plan_details_page = panel_options.plan_details_page %}
@@ -442,10 +420,6 @@ exclude_from_search:                    true
             <!-- Panel {{panel_settings.id}} -->
             <div id="{{panel_settings.id}}_content">
 
-              {% if wave_properties.top.enabled %}
-                {{panel_wave_top}}
-              {% endif %}
-
               <!-- Main Container -->
               <div class="container {{panel_settings.properties}}">
 
@@ -487,7 +461,7 @@ exclude_from_search:                    true
                       {% if key == 'enabled' %} {% assign card_enabled = value %} {% endif %}
                     {% endfor %}
                     {% if card_enabled == false %}
-                    {% assign card_items = card_items|minus:1 %} {% assign card_enabled = false%} {% endif %}
+                    {% assign card_items = card_items|minus:1 %} {% assign card_enabled = false %} {% endif %}
                   {% endfor %}
                 {% endfor %}
 
@@ -591,25 +565,18 @@ exclude_from_search:                    true
 
               </div> <!-- END main container -->
 
-              {% if wave_properties.bottom.enabled %}
-                {{panel_wave_bottom}}
-              {% endif %}
-
             </div> <!-- END Panel {{panel_settings.id}} -->
 
             {% comment %} Reset element variables (already processed)
             -------------------------------------------------------------------- {% endcomment %}
-            {% assign panel_settings = false%}
+            {% assign panel_settings = false %}
 
             {% comment %} END PLAN panel
             -------------------------------------------------------------------- {% endcomment %}
 
 
             {% comment %} Collect SERVICE panel
-            panel_defaults:  {{panel_config_defaults.service}}
-            panel_settings:  {{panel_settings}}
-             panel_options:  {{panel_options}}
-            -------------------------------------------------------------------- {% endcomment %}
+            ==================================================================== {% endcomment %}
             {% when 'service' %}
             {% assign panel_options = panel_config_defaults.service | merge: panel_settings %}
 
@@ -636,10 +603,6 @@ exclude_from_search:                    true
             <!-- Panel {{panel_settings.id}} -->
             <div id="{{panel_settings.id}}_content">
 
-              {% if wave_properties.top.enabled %}
-                {{panel_wave_top}}
-              {% endif %}
-
               <!-- Main Container -->
               <div class="container {{panel_settings.properties}}">
 
@@ -680,7 +643,7 @@ exclude_from_search:                    true
                       {% if key == 'enabled' %} {% assign card_enabled = value %} {% endif %}
                     {% endfor %}
                     {% if card_enabled == false %}
-                    {% assign card_items = card_items|minus:1 %} {% assign card_enabled = false%} {% endif %}
+                    {% assign card_items = card_items|minus:1 %} {% assign card_enabled = false %} {% endif %}
                   {% endfor %}
                 {% endfor %}
 
@@ -792,23 +755,19 @@ exclude_from_search:                    true
               </div>
               <!-- End Main Container -->
 
-              {% if wave_properties.bottom.enabled %}
-                {{panel_wave_bottom}}
-              {% endif %}
-
             </div>
             <!-- END Panel {{panel_settings.id}} -->
 
             {% comment %} Reset element variables (already processed)
             -------------------------------------------------------------------- {% endcomment %}
-            {% assign panel_settings = false%}
+            {% assign panel_settings = false %}
 
             {% comment %} END SERVICES panel
             -------------------------------------------------------------------- {% endcomment %}
 
 
             {% comment %} Collect NEWS panel
-            -------------------------------------------------------------------- {% endcomment %}
+            ==================================================================== {% endcomment %}
             {% when 'news' %}
 
             {% assign panel_options = panel_config_defaults.news|merge: panel_settings %}
@@ -836,10 +795,6 @@ exclude_from_search:                    true
             <!-- Panel {{panel_settings.id}} -->
             <div id="{{panel_settings.id}}_content">
 
-              {% if wave_properties.top.enabled %}
-                {{panel_wave_top}}
-              {% endif %}
-
               <!-- Main Container -->
               <div class="container {{panel_settings.properties}}">
 
@@ -896,9 +851,9 @@ exclude_from_search:                    true
                     {% assign card_block = "card-deck" %}
                   {% endif %}
 
-                  <div class="previewer-headline">
+                  <div id="previewer" class="previewer-headline">
                     <div class="post-headline">
-                  	<h2 id="post-headline" class="notoc mt-4">Preview</h2>
+                  	<h2 id="post-headline" class="notoc notranslate mt-3">Vorschau</h2>
                     </div>
                   </div>
 
@@ -1055,23 +1010,19 @@ exclude_from_search:                    true
               </div>
               <!-- End Main Container -->
 
-              {% if wave_properties.bottom.enabled %}
-                {{panel_wave_bottom}}
-              {% endif %}
-
             </div>
             <!-- End news panel: {{panel_settings.id}} -->
 
             {% comment %} Reset element variables (already processed)
             -------------------------------------------------------------------- {% endcomment %}
-            {% assign panel_settings = false%}
+            {% assign panel_settings = false %}
 
             {% comment %} END NEWS panel
             -------------------------------------------------------------------- {% endcomment %}
 
             {% else %}
             {% comment %} Collect EXCEPTION panel: given type NOT found
-            -------------------------------------------------------------------- {% endcomment %}
+            ==================================================================== {% endcomment %}
             {% unless panel_settings.id == 'exception_container' %}
             <div id="{{panel_settings.id}}_content">
               <div class="container-fluid no-padding">
@@ -1102,7 +1053,7 @@ exclude_from_search:                    true
 
             {% comment %} Reset element variables (already processed)
             -------------------------------------------------------------------- {% endcomment %}
-            {% assign panel_settings = false%}
+            {% assign panel_settings = false %}
 
             {% comment %} END EXEPTION panel
             -------------------------------------------------------------------- {% endcomment %}