j1-template 2024.3.22 → 2024.3.24

data/lib/starter_web/_data/modules/masonry.yml

@@ -622,6 +622,8 @@ settings:
           # --------------------------------------------------------------------
           vimeoPlayer:
             enabled:                    true
+            api:                        native                                  # native|videojs
+
             options:
               autoPlay:                 true
               muted:                    true
@@ -634,6 +636,8 @@ settings:
           # --------------------------------------------------------------------
           wistiaPlayer:
             enabled:                    true
+            api:                        native                                  # native|videojs
+
             options:
               autoPlay:                 true
               fullscreenButton:         true
@@ -644,6 +648,8 @@ settings:
           # --------------------------------------------------------------------
           youTubePlayer:
             enabled:                    true
+            api:                        videojs                                 # native|videojs
+
             options:
               autoPlay:                 true
               muted:                    true

data/lib/starter_web/_data/modules/navigator_menu.yml

@@ -24,13 +24,13 @@
   sublevel:
 
     - title:                            Image
-      href:                             /pages/public/tour/present_images/
+      href:                             /pages/public/tour/image_data/
       icon:                             image
     - title:                            Audio
-      href:                             /pages/public/tour/present_audio/
+      href:                             /pages/public/tour/audio_data/
       icon:                             volume-high
     - title:                            Video
-      href:                             /pages/public/tour/present_video/
+      href:                             /pages/public/tour/video_data/
       icon:                             video
 
     - title:                            Typography

data/lib/starter_web/_data/resources.yml

@@ -1320,9 +1320,9 @@ resources:
 
       data:
         css:                            [
-                                          modules/lightGallery/css/lightgallery-bundle,
                                           modules/lightGallery/css/lg-transitions,
-                                          modules/lightGallery/css/themes/uno/uno
+                                          modules/lightGallery/css/lightgallery-bundle,
+                                          modules/lightGallery/css/theme/uno/uno
                                         ]
         files:                          []
         js:                             [
@@ -1362,24 +1362,28 @@ resources:
       data:
         css:                            [
                                           modules/videojs/css/videojs,
-                                          modules/videojs/css/plugins/controls/skipbuttons,
-                                          modules/videojs/css/plugins/controls/zoom,
                                           modules/videojs/css/themes/city,
                                           modules/videojs/css/themes/fantasy,
                                           modules/videojs/css/themes/forest,
                                           modules/videojs/css/themes/sea,
-                                          modules/videojs/css/themes/uno
+                                          modules/videojs/css/themes/uno,
+                                          modules/videojs/plugins/controls/aspect-ratio-panel/css/aspect-ratio-panel,
+                                          modules/videojs/plugins/controls/skipbuttons/css/skipbuttons,
+                                          modules/videojs/plugins/controls/zoom/css/zoom
                                         ]
         files:                          [ adapter/js/videojs.js ]
         js:                             [
                                           modules/videojs/js/video,
-                                          modules/videojs/js/plugins/controls/hotkeys/hotkeys,
-                                          modules/videojs/js/plugins/controls/skipbuttons/skipbuttons,
-                                          modules/videojs/js/plugins/controls/zoom/zoom,
-                                          modules/videojs/js/plugins/players/dm/dailymotion,
-                                          modules/videojs/js/plugins/players/vm/vimeo,
-                                          modules/videojs/js/plugins/players/wt/wistia,
-                                          modules/videojs/js/plugins/players/yt/youtube
+                                          modules/videojs/plugins/controls/aspect-ratio-panel/js/aspect-ratio-panel,
+                                          modules/videojs/plugins/controls/hotkeys/js/hotkeys,
+                                          modules/videojs/plugins/controls/skipbuttons/js/skipbuttons,
+                                          modules/videojs/plugins/controls/persist-settings/js/videojs-persist,
+                                          modules/videojs/plugins/controls/playbackrate-adjuster/js/playbackrate-adjuster,
+                                          modules/videojs/plugins/controls/zoom/js/zoom,
+                                          modules/videojs/plugins/players/dm/js/dailymotion,
+                                          modules/videojs/plugins/players/vm/js/vimeo,
+                                          modules/videojs/plugins/players/wt/js/wistia,
+                                          modules/videojs/plugins/players/yt/js/youtube
                                         ]
         init_function:                  [ j1.adapter.videojs.init ]
 

data/lib/starter_web/_data/templates/feed.xml

@@ -57,7 +57,7 @@
   <id>{{ page.url | absolute_url | xml_escape }}</id>
   <post_limited>{{ limit_posts }}</post_limited>
   <template_name>J1 Theme</template_name>
-  <template_version>2024.3.22</template_version>
+  <template_version>2024.3.24</template_version>
 
   {% assign title = site.title | default: site.name %}
   {% if page.collection != "posts" %}

data/lib/starter_web/_includes/attributes.asciidoc

@@ -597,6 +597,13 @@ tag::data[]
 :data-images-lightbox--standalone:                "assets/image/module/gallery/old_time/image/grand_pa/image-2.jpg, GrandPa's 80th Birthday"
 :data-images-lightbox--group:                     "assets/image/module/gallery/old_time/image/grand_pa/image-3.jpg, GrandPa's annual journey, assets/image/module/gallery/old_time/image/grand_pa/image-4.jpg, GrandPa's annual journey"
 
+:data-images--themes-menu:                        "assets/image/page/tour/bootswatch-themes.jpg, Bootswatch Themes"
+:data-images--bootswatch-themes:                  "assets/image/page/tour/themes-1920x1280.jpg, Themes menu (Bootswatch)"
+
+:data-quicksearch--icon:                          "assets/image/page/tour/600_quicksearch/quicksearch_icon.jpg, Search button (magnifier) in the quick access area"
+:data-quicksearch--input:                         "assets/image/page/tour/600_quicksearch/quicksearch_input.jpg, Input bar for a QuickSearch"
+:data-quicksearch--results:                       "assets/image/page/tour/600_quicksearch/quicksearch_results.jpg, Results for a QuickSearch"
+
 end::data[]
 
 

data/lib/starter_web/_plugins/asciidoctor/videojs-block.rb

@@ -107,30 +107,30 @@ Asciidoctor::Extensions.register do
 
             // =================================================================
             // take over VideoJS configuration data (JSON data from Ruby)
-            // -----------------------------------------------------------------            
-            var videojsDefaultConfigJson = '#{videojsDefaultSettingsJson}';
-            var videojsUserConfigJson    = '#{videojsUserSettingsJson}';
+            // -----------------------------------------------------------------
+            var videojsDefaultConfigJson  = '#{videojsDefaultSettingsJson}';
+            var videojsUserConfigJson     = '#{videojsUserSettingsJson}';
 
             // create config objects from JSON data
-            var videojsDefaultSettings   = JSON.parse(videojsDefaultConfigJson);
-            var videojsUserSettings      = JSON.parse(videojsUserConfigJson);
+            var videojsDefaultSettings    = JSON.parse(videojsDefaultConfigJson);
+            var videojsUserSettings       = JSON.parse(videojsUserConfigJson);
 
             // merge config objects (jQuery)
-            var videojsConfig = $.extend(true, {}, videojsDefaultSettings.defaults, videojsUserSettings.settings);
+            var videojsConfig             = $.extend(true, {}, videojsDefaultSettings.defaults, videojsUserSettings.settings);
 
             // =================================================================
             // VideoJS player settings
             // -----------------------------------------------------------------
-            const vjsPlayerType     = 'native';
-            const vjsPlaybackRates  = videojsConfig.playbackRates.values;
+            const vjsPlayerType           = 'native';
+            const vjsPlaybackRates        = videojsConfig.playbackRates.values;
 
             // =================================================================
             // VideoJS plugin settings
-            // -----------------------------------------------------------------   
-            const piAutoCaption     = videojsConfig.plugins.autoCaption;
-            const piHotKeys         = videojsConfig.plugins.hotKeys;
-            const piSkipButtons     = videojsConfig.plugins.skipButtons;
-            const piZoomButtons     = videojsConfig.plugins.zoomButtons;
+            // -----------------------------------------------------------------
+            const piAutoCaption           = videojsConfig.plugins.autoCaption;
+            const piHotKeys               = videojsConfig.plugins.hotKeys;
+            const piSkipButtons           = videojsConfig.plugins.skipButtons;
+            const piZoomButtons           = videojsConfig.plugins.zoomButtons;
 
             // =================================================================
             // helper functions
@@ -147,21 +147,21 @@ Asciidoctor::Extensions.register do
                 // insert div|caption container AFTER the image
                 image.parentNode.insertBefore(newDiv, image.nextSibling);
               } else {
-                console.error(`Kein Bild mit src="${imageSrc}" gefunden.`);
+                console.error(`No image found at: '${imageSrc}'`);
               }
             }
 
             // =================================================================
             // initialize the VideoJS player (on page ready)
-            // -----------------------------------------------------------------   
+            // -----------------------------------------------------------------
             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;
+              var pageState       = $('#content').css("display");
+              var pageVisible     = (pageState == 'block') ? true : false;
+              var j1CoreFinished  = (j1.getState() === 'finished') ? true : false;
 
               if (j1CoreFinished && pageVisible) {
-                var vjs_player  = document.getElementById("#{video_id}");
-                var appliedOnce = false;
+                var vjs_player    = document.getElementById("#{video_id}");
+                var appliedOnce   = false;
 
                 // add|skip captions (on poster image)
                 if ('#{caption_enabled}' === 'true') {
@@ -172,6 +172,34 @@ Asciidoctor::Extensions.register do
                 videojs("#{video_id}").ready(function() {
                   var vjsPlayer = this;
 
+                  // add custom progressControlSilder
+                  // -----------------------------------------------------------
+
+                  // create customControlContainer for progressControlSilder|time (display) elements
+                  const customProgressContainer = vjsPlayer.controlBar.addChild('Component', {
+                    el: videojs.dom.createEl('div', {
+                      className: 'vjs-theme-uno custom-progressbar-container'
+                    })
+                  });
+
+                  // move progressControlSlider into customControlContainer
+                  const progressControlSlider = vjsPlayer.controlBar.progressControl;
+                  if (progressControlSlider) {
+                    customProgressContainer.el().appendChild(progressControlSlider.el());
+                  }
+
+                  // move currentTimeDisplay BEFORE the progressControlSilder
+                  const currentTimeDisplay = vjsPlayer.controlBar.currentTimeDisplay;
+                  if (currentTimeDisplay) {
+                    customProgressContainer.el().insertBefore(currentTimeDisplay.el(), progressControlSlider.el());
+                  }
+
+                  // move the durationDisplay AFTER the progressControlSilder
+                  const durationDisplay = vjsPlayer.controlBar.durationDisplay;
+                  if (durationDisplay) {
+                    customProgressContainer.el().appendChild(durationDisplay.el());
+                  }
+
                   // add|skip playbackRates
                   //
                   if (videojsConfig.playbackRates.enabled) {
@@ -234,15 +262,7 @@ Asciidoctor::Extensions.register do
                       forward:        piSkipButtons.forward,
                     });
                   }
-
-
-                  // TODO:
-                  // -----------------------------------------------------------
-                  // Check if plugin ZoomButtons possible to be used for 
-                  // this extension. Disabled for now.
-                  // ------------------------------------------------------------
-                  piZoomButtons.enabled = false; 
-                  
+                                 
                   // add|skip zoomButtons plugin
                   //
                   if (piZoomButtons.enabled && vjsPlayerType === 'native') {
@@ -276,7 +296,7 @@ Asciidoctor::Extensions.register do
                   var scrollOffset        = (window.innerWidth >= 720) ? -130 : -110;
 
                   // scroll page to the players top position
-                  // -------------------------------------------------------------                  
+                  // ------------------------------------------------------------
                   window.scrollTo(0, targetDivPosition + scrollOffset);
 
                 }); // END EventListener 'click'

data/lib/starter_web/_plugins/asciidoctor/youtube-block.rb

@@ -170,7 +170,7 @@ Asciidoctor::Extensions.register do
                 // insert div|caption container AFTER the image
                 image.parentNode.insertBefore(newDiv, image.nextSibling);
               } else {
-                console.error(`Kein Bild mit src="${imageSrc}" gefunden.`);
+                console.error(`No image found at: '${imageSrc}'`);
               }
             }
 
@@ -183,7 +183,8 @@ Asciidoctor::Extensions.register do
               var j1CoreFinished = (j1.getState() === 'finished') ? true : false;
 
               if (j1CoreFinished && pageVisible) {
-                var vjs_player  = document.getElementById("#{video_id}");
+                var vjs_player   = document.getElementById("#{video_id}");
+                var appliedOnce  = false;
 
                 // add|skip captions (on poster image)
                 if ('#{caption_enabled}' === 'true') {
@@ -212,12 +213,42 @@ Asciidoctor::Extensions.register do
               var vjsPlayerCustomButtons  = ("#{custom_buttons}" === 'true') ? true : false;
 
               if (vjsPlayerExist && vjsPlayerCustomButtons) {
+
                 // apply player customization on 'player ready'
+                // -------------------------------------------------------------
                 videojs("#{video_id}").ready(function() {
-                  var vjsPlayer = this;
+                  const vjsPlayer   = this;               
+
+                  // add custom progressControlSilder
+                  // -----------------------------------------------------------
+
+                  // create customControlContainer for progressControlSilder|time (display) elements
+                  const customProgressContainer = vjsPlayer.controlBar.addChild('Component', {
+                    el: videojs.dom.createEl('div', {
+                      className: 'vjs-theme-uno custom-progressbar-container'
+                    })
+                  });
+
+                  // move progressControlSlider into customControlContainer
+                  const progressControlSlider = vjsPlayer.controlBar.progressControl;
+                  if (progressControlSlider) {
+                    customProgressContainer.el().appendChild(progressControlSlider.el());
+                  }
+
+                  // move currentTimeDisplay BEFORE the progressControlSilder
+                  const currentTimeDisplay = vjsPlayer.controlBar.currentTimeDisplay;
+                  if (currentTimeDisplay) {
+                    customProgressContainer.el().insertBefore(currentTimeDisplay.el(), progressControlSlider.el());
+                  }
+
+                  // move the durationDisplay AFTER the progressControlSilder
+                  const durationDisplay = vjsPlayer.controlBar.durationDisplay;
+                  if (durationDisplay) {
+                    customProgressContainer.el().appendChild(durationDisplay.el());
+                  }
 
                   // add|skip playbackRates
-                  //
+                  // -----------------------------------------------------------
                   if (videojsConfig.playbackRates.enabled) {
                     vjsPlayer.playbackRates(vjsPlaybackRates);
                   }
@@ -260,6 +291,7 @@ Asciidoctor::Extensions.register do
                   }
 
                   // add|skip skipButtons plugin
+                  // -----------------------------------------------------------
                   if (piSkipButtons.enabled) {
                     var backwardIndex = piSkipButtons.backward;
                     var forwardIndex  = piSkipButtons.forwardIndex;
@@ -279,23 +311,6 @@ Asciidoctor::Extensions.register do
                     });
                   }
 
-                  // TODO:
-                  // -----------------------------------------------------------
-                  // Check if plugin ZoomButtons possible to be used for 
-                  // this extension. Disabled for now.
-                  // ------------------------------------------------------------
-                  piZoomButtons.enabled = false;                  
-
-                  // add|skip zoomButtons plugin
-                  if (piZoomButtons.enabled && vjsPlayerType === 'native') {
-                    vjsPlayer.zoomButtons({
-                      moveX:  piZoomButtons.moveX,
-                      moveY:  piZoomButtons.moveY,
-                      rotate: piZoomButtons.rotate,
-                      zoom:   piZoomButtons.zoom
-                    });                    
-                  }
-
                   // set start position of current video (on play)
                   // -----------------------------------------------------------
                   var appliedOnce = false;
@@ -315,7 +330,6 @@ Asciidoctor::Extensions.register do
             }, 10); // END 'dependencies_met_vjs_player_exist'
 
           }); // END 'document ready'
-
         </script>
       )
 
@@ -324,4 +338,4 @@ Asciidoctor::Extensions.register do
   end
 
   block_macro YouTubeBlockMacro
-end
+end

data/lib/starter_web/_plugins/index/lunr.rb

@@ -394,6 +394,6 @@ end
 
 module Jekyll
   module J1LunrSearch
-    VERSION = '2024.3.22'
+    VERSION = '2024.3.24'
   end
 end

data/lib/starter_web/index.html

@@ -27,7 +27,7 @@ robots:
   follow:                               true
 
 image:
-  path:                                 /assets/image/module/attic/ideas-start-here-1920x1280.jpg
+  path:                                 //assets.trainingindustry.com/content/uploads/2019/06/Company-Culture_Zappos-6.5.19-928x522.jpg
   width:                                1920
   height:                               1200
 
@@ -96,7 +96,8 @@ resources:                             [ animate, scroller ]
 resource_options:
   - attic:
       slides:
-        - url:                          /assets/image/module/attic/ideas-start-here-1920x1280.jpg
+#       - url:                          /assets/image/module/attic/1920x1280/ideas-start-here-1920x1280.jpg
+        - url:                          //assets.trainingindustry.com/content/uploads/2019/06/Company-Culture_Zappos-6.5.19-928x522.jpg
           alt:                          ideas-start-here-1920x1280.jpg
 #         badge:
 #           type:                       unsplash

data/lib/starter_web/package.json

@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "j1",
-  "version": "2024.3.22",
+  "version": "2024.3.24",
   "description": "J1 Template",
   "homepage": "https://your.site",
   "author": {

data/lib/starter_web/pages/public/panels/intro_panel/_includes/attributes.asciidoc

@@ -29,7 +29,7 @@ tag::data[]
 :data-images-standalone:                          "assets/image/module/gallery/old_times/image_02.jpg, GrandPa's 80th Birthday"
 :data-images-group:                               "assets/image/module/gallery/old_times/image_03.jpg, GrandPa's annual journey, assets/image/module/gallery/old_times/image_04.jpg, GrandPa's annual journey"
 
-:data-images--themes-menu:                        "assets/image/page/tour/themes-1920x1280.jpg, Themes menu (Bootswatch)"
+:data-images--bootswatch-themes:                  "assets/image/page/tour/bootswatch-themes.jpg, Bootswatch Themes"
 
 :data-quicksearch--icon:                          "assets/image/page/tour/600_quicksearch/quicksearch_icon.jpg, Search button (magnifier) in the quick access area"
 :data-quicksearch--input:                         "assets/image/page/tour/600_quicksearch/quicksearch_input.jpg, Input bar for a QuickSearch"

data/lib/starter_web/pages/public/tools/previewer/preview_bootstrap_theme.adoc

@@ -21,7 +21,7 @@ categories:                             [ Previewer ]
 tags:                                   [ Theme, Bootstrap ]
 
 image:
-  path:                                 /assets/image/module/attic/themes-1920x1280-bw.jpg
+  path:                                 /assets/image/module/attic/1920x1280/stories-ink-tattoo-care.jpg
   width:                                1920
   height:                               1280
 
@@ -35,12 +35,12 @@ resource_options:
       collapseDepth:                    4
   - attic:
       slides:
-        - url:                          /assets/image/module/attic/themes-1920x1280-bw.jpg
-          alt:                          Photo by Clem Onojeghuo on Unsplash
+        - url:                          /assets/image/module/attic/1920x1280/stories-ink-tattoo-care.jpg
+          alt:                          Photo by Stories & Ink Tattoo Care on Unsplash
           badge:
             type:                       unsplash
-            author:                     Clem Onojeghuo
-            href:                       //unsplash.com/@clemono
+            author:                     Stories & Ink Tattoo Care
+            href:                       https://unsplash.com/de/@storiesandink
 ---
 
 // Page Initializer

data/lib/starter_web/pages/public/tools/tester/app_tester_amplitudejs_yt.adoc

@@ -20,7 +20,7 @@ categories:                             [ Tester ]
 tags:                                   [ Audio, Amplitude App, YouTube ]
 
 image:
-  path:                                 /assets/image/module/attic/markus-spiske-1920x1280.jpg
+  path:                                 /assets/image/module/attic/1920x1280/markus-spiske.jpg
   width:                                1920
   height:                               1280
 
@@ -33,8 +33,12 @@ resources:                              [ amplitudejs ]
 resource_options:
   - attic:
       slides:
-        - url:                          /assets/image/module/attic/markus-spiske-1920x1280.jpg
-          alt:                          Video Tester
+        - url:                          /assets/image/module/attic/1920x1280/markus-spiske.jpg
+          alt:                          Photo by Markus Spiske on Unsplash
+          badge:
+            type:                       unsplash
+            author:                     Markus Spiske
+            href:                       https://unsplash.com/de/@markusspiske/ 
 ---
 
 // Page Initializer

data/lib/starter_web/pages/public/tools/tester/app_tester_swiperjs.adoc

@@ -22,7 +22,7 @@ categories:                             [ Tester ]
 tags:                                   [ Swiper App ]
 
 image:
-  path:                                 /assets/image/module/attic/markus-spiske-1920x1280.jpg
+  path:                                 /assets/image/module/attic/1920x1280/markus-spiske.jpg
   width:                                1920
   height:                               1280
 
@@ -37,8 +37,12 @@ resource_options:
       collapseDepth:                    3
   - attic:
       slides:
-        - url:                          /assets/image/module/attic/markus-spiske-1920x1280.jpg
-          alt:                          Swiper Tester
+        - url:                          /assets/image/module/attic/1920x1280/markus-spiske.jpg
+          alt:                          Photo by Markus Spiske on Unsplash
+          badge:
+            type:                       unsplash
+            author:                     Markus Spiske
+            href:                       https://unsplash.com/de/@markusspiske/ 
 ---
 
 // Page Initializer