j1-template 2024.3.23 → 2024.3.25

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
@@ -705,18 +711,18 @@ settings:
         - video:
           name:                         Planet Earth II
           type:                         youtube
+          api:                          videojs                                 # jadams !!!
           size:                         1280-720
-          source:                       //youtu.be/IUN664s7N-c
+          source:                       //youtube.com/IUN664s7N-c
           pinterest_prefix:             Pin video
           tweet_prefix:                 Try video
           description: >
-                                        <h5>Beauty of Nature</h5>
-                                        <h6>
+                                        <h2>Beauty of Nature</h2>
+                                        <h3>
                                           The BBC America presents breathtaking landscapes of
                                           amazing habitats from their Planet Earth II series
                                           on YouTube
-                                        </h6>
-                                        <br>
+                                        </h3>
           poster:
             style:                      img-responsive
             source:                     //img.youtube.com/vi/IUN664s7N-c/maxresdefault.jpg
@@ -733,9 +739,11 @@ settings:
           pinterest_prefix:             Pin video
           tweet_prefix:                 Try video
           description: >
-                                        <h5>Amazing Nature</h5>
-                                        <h6>Video by <a target='_blank' href='//vimeo.com/charliekaye'>Charlie Kaye.</a> on Vimeo</h6>
-                                        <br>
+                                        <h2>Amazing Nature</h2>
+                                        <h3>
+                                          Video by <a target='_blank' href='//vimeo.com/charliekaye'>Charlie Kaye.</a>
+                                          on Vimeo
+                                        </h3>
           poster:
             style:                      img-responsive
             source:                     /assets/video/poster/vimeo/amazing_nature.jpg
@@ -752,9 +760,8 @@ settings:
           pinterest_prefix:             Pin video
           tweet_prefix:                 Try video
           description: >
-                                        <h5>SELF Channel</h5>
-                                        <h6>Beginner Mat Pilates</h6>
-                                        <br>
+                                        <h2>SELF Channel</h2>
+                                        <h3>Beginner Mat Pilates</h3>
           poster:
             style:                      img-responsive
             source:                     /assets/video/poster/dailymotion/pilates.jpg
@@ -772,9 +779,24 @@ settings:
           pinterest_prefix:             Pin video
           tweet_prefix:                 Try video
           description: >
-                                        <h5>Peck Pocketed by Kevin Herron</h5>
-                                        <h6>Student Academy Award winning cartoon clip on VideoJS</h6>
-                                        <br>
+                                        <h2>Peck Pocketed by Kevin Herron</h2>
+                                        <h3>Student Academy Award winning cartoon clip on VideoJS</h3>
+
+          tracks:
+            - track:
+              default:                  true                                    # Indicates that the track is to be enabled if the user's preferences do not indicate that another track would be more appropriate
+              kind:                     captions
+              srclang:                  en                                      # Code for the language of the text track
+              label:                    English                                 # Descriptive text for the track that will used in the user interface (player)
+              src:                      /assets/video/tracks/html5/peck_pocketed/captions/video.vtt
+
+            - track:
+              default:                  true                                    # Indicates that the track is to be enabled if the user's preferences do not indicate that another track would be more appropriate
+              kind:                     chapters
+              srclang:                  en                                      # Code for the language of the text track
+              label:                    Chapters                                # Descriptive text for the track that will used in the user interface (player)
+              src:                      /assets/video/tracks/html5/peck_pocketed/chapters/video.vtt
+
           poster:
             style:                      img-responsive
             source:                     peck_pocketed.jpg

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

@@ -217,4 +217,4 @@ settings:
                       target:           none
 
 # ------------------------------------------------------------------------------
-# END config
+# END config

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

@@ -814,18 +814,22 @@
 #
 - item:                                 About
   sublevel:
-    - title:                            Starter
+
+    - title:                            This Site
       icon:                             home-variant-outline
       href:                             /pages/public/about/starter/
-    - title:                            Issues
-      icon:                             bug
-      href:                             /pages/public/about/reporting_issues/
+
+    - title:                            Privacy
+      icon:                             heart
+      href:                             /pages/public/legal/en/privacy/      
+
     - title:                            Features
       icon:                             wrench
       href:                             /pages/public/about/features/
-    - title:                            Privacy
-      icon:                             heart
-      href:                             /pages/public/legal/en/privacy/
+
+    - title:                            Issues
+      icon:                             bug
+      href:                             /pages/public/about/reporting_issues/
 
 # ------------------------------------------------------------------------------
-# END config
+# END config

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.23</template_version>
+  <template_version>2024.3.25</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/dailymotion-block.rb

@@ -37,35 +37,60 @@ Asciidoctor::Extensions.register do
     use_dsl
 
     named :dailymotion
-    name_positional_attributes 'caption', 'theme', 'role'
+    name_positional_attributes 'caption', 'start','poster', 'theme', 'custom_buttons', 'role'
     default_attrs 'caption' => 'true',
+                  'start' => '00:00:00',
+                  'poster' => '/assets/image/icon/videojs/videojs-poster.png',
                   'theme' => 'uno',
-                  'role' => 'mt-3 mb-3'
+                  'custom_buttons' => true,
+                  'role' => 'mt-4 mb-5'
+
 
     def process parent, target, attributes
 
+      # ========================================================================
+      # load VideoJS configuration data
+      # ------------------------------------------------------------------------
+      # NOTE:
+      # Settings folder _data is NOT available in the website
+      #-------------------------------------------------------------------------
+      #
+      current_path                = File.expand_path(Dir.getwd)
+      default_config_path         = File.join(current_path, '/_data/modules/defaults')
+      user_config_path            = File.join(current_path, '/_data/modules')
+
+      videojs_config_file_name    = 'videojs.yml'
+      videojs_default_config_file = File.join(default_config_path, videojs_config_file_name)
+      videojs_user_config_file    = File.join(user_config_path, videojs_config_file_name)
+
+      videojsDefaultSettings      = YAML::load(File.open(videojs_default_config_file))
+      videojsUserSettings         = YAML::load(File.open(videojs_user_config_file))
+      videojsDefaultSettingsJson  = videojsDefaultSettings.to_json;
+      videojsUserSettingsJson     = videojsUserSettings.to_json;
+
+      # ========================================================================
+      # set plugin specific data
+      # ------------------------------------------------------------------------
+      #
       chars           = [('a'..'z'), ('A'..'Z'), ('0'..'9')].map(&:to_a).flatten
       video_id        = (0...11).map { chars[rand(chars.length)] }.join
 
       title_html      = (attributes.has_key? 'title') ? %(<div class="video-title"> <i class="mdib mdib-video mdib-24px mr-2"></i> #{attributes['title']} </div>\n) : nil
       poster_image    = (poster = attributes['poster']) ? %(#{poster}) : nil
-      theme_name      = (theme = attributes['theme'])  ? %(#{theme}) : nil
-      caption_enabled = (caption  = attributes['caption'])  ? true : false
-
-      poster_attr     = %(poster="#{poster_image}")
-      if attributes['poster'] == 'auto'
-        poster_attr = ''
-      end
+      theme_name      = (theme  = attributes['theme'])  ? %(#{theme}) : nil
+      custom_buttons  = (custom_buttons = attributes['custom_buttons']) ? %(#{custom_buttons}) : nil
+      caption_enabled = (caption = attributes['caption'])  ? true : false
 
       html = %(
-        <div class="dailymotion-player bottom #{attributes['role']}">
+        <div class="youtube-player bottom #{attributes['role']}">
           #{title_html}
           <video
             id="#{video_id}"
             class="video-js vjs-theme-#{theme_name}"
             controls
             width="640" height="360"
-            #{poster_attr}
+            poster="#{poster_image}"
+            alt="#{attributes['title']}"
             aria-label="#{attributes['title']}"
             data-setup='{
               "fluid" : true,
@@ -74,7 +99,7 @@ Asciidoctor::Extensions.register do
               ],
               "sources": [{
                 "type": "video/dailymotion",
-                "src": "//dailymotion.com/video/#{target}"
+                "src": "//dailymotion.com/video/#{target}"  
               }],
               "controlBar": {
                 "pictureInPictureToggle": false,
@@ -89,6 +114,38 @@ Asciidoctor::Extensions.register do
         <script>
           $(function() {
 
+            // =================================================================
+            // take over VideoJS configuration data (JSON data from Ruby)
+            // -----------------------------------------------------------------            
+            var videojsDefaultConfigJson = '#{videojsDefaultSettingsJson}';
+            var videojsUserConfigJson    = '#{videojsUserSettingsJson}';
+
+            // =================================================================
+            // create config objects from JSON data
+            // -----------------------------------------------------------------             
+            var videojsDefaultSettings   = JSON.parse(videojsDefaultConfigJson);
+            var videojsUserSettings      = JSON.parse(videojsUserConfigJson);
+
+            // merge config objects (jQuery)
+            var videojsConfig = $.extend(true, {}, videojsDefaultSettings.defaults, videojsUserSettings.settings);
+
+            // =================================================================
+            // VideoJS player settings
+            // -----------------------------------------------------------------
+            const vjsPlayerType     = 'ytp';
+            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;
+
+            // =================================================================
+            // helper functions
+            // -----------------------------------------------------------------            
             function addCaptionAfterImage(imageSrc) {
               const image = document.querySelector(`img[src="${imageSrc}"]`);
 
@@ -101,41 +158,166 @@ 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;
 
               if (j1CoreFinished && pageVisible) {
+                var vjs_player   = document.getElementById("#{video_id}");
+                var appliedOnce  = false;
 
-                if ('#{caption_enabled}' === 'true' &&  '#{poster_image}' !== 'auto') {
+                // add|skip captions (on poster image)
+                if ('#{caption_enabled}' === 'true') {
                   addCaptionAfterImage('#{poster_image}');
                 }
 
-                // scroll to player top position
+                // scroll page to the players top position
                 // -------------------------------------------------------------
-                var vjs_player = document.getElementById("#{video_id}");
-
                 vjs_player.addEventListener('click', function(event) {
-                  event.preventDefault();
-                  event.stopPropagation();
-
-                  var scrollOffset = (window.innerWidth >= 720) ? -130 : -110;
-
-                  // scroll player to top position
                   const targetDiv         = document.getElementById("#{video_id}");
                   const targetDivPosition = targetDiv.offsetTop;
+                  var scrollOffset        = (window.innerWidth >= 720) ? -130 : -110;
+
+                  // scroll player to top position
                   window.scrollTo(0, targetDivPosition + scrollOffset);
                 }); // END EventListener 'click'
 
                 clearInterval(dependencies_met_page_ready);
               }
             }, 10);
-          });
+
+            // customize the yt player (already) created
+            // -----------------------------------------------------------------
+            var dependencies_met_vjs_player_exist = setInterval (function (options) {
+              var vjsPlayerExist          = document.getElementById("#{video_id}") ? true : false;
+              var vjsPlayerCustomButtons  = ("#{custom_buttons}" === 'true') ? true : false;
+
+              if (vjsPlayerExist && vjsPlayerCustomButtons) {
+
+                // apply player customization on 'player ready'
+                // -------------------------------------------------------------
+                videojs("#{video_id}").ready(function() {
+                  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);
+                  }
+
+                  // add|skip hotKeys plugin
+                  //
+                  if (piHotKeys.enabled) {
+                    vjsPlayer.hotKeys({
+                      volumeStep:                         piHotKeys.volumeStep,
+                      seekStep:                           piHotKeys.seekStep,
+                      enableMute:                         piHotKeys.enableMute,
+                      enableFullscreen:                   piHotKeys.enableFullscreen,
+                      enableNumbers:                      piHotKeys.enableNumbers,
+                      enableVolumeScroll:                 piHotKeys.enableVolumeScroll,
+                      enableHoverScroll:                  piHotKeys.enableHoverScroll,
+                      alwaysCaptureHotkeys:               piHotKeys.alwaysCaptureHotkeys,
+                      captureDocumentHotkeys:             piHotKeys.captureDocumentHotkeys,
+                      documentHotkeysFocusElementFilter:  e => e.tagName.toLowerCase() === "body",
+
+                      // Mimic VLC seek behavior (default to: 15)
+                      seekStep: function(e) {
+                        if (e.ctrlKey && e.altKey) {
+                          return 5*60;
+                        } else if (e.ctrlKey) {
+                          return 60;
+                        } else if (e.altKey) {
+                          return 10;
+                        } else {
+                          return 15;
+                        }
+                      },
+
+                      // Enhance existing simple hotkey by complex hotkeys
+                      fullscreenKey: function(e) {
+                        // fullscreen with the F key or Ctrl+Enter
+                        return ((e.which === 70) || (e.ctrlKey && e.which === 13));
+                      },  
+
+                    }); // END VideoJS hotKeys plugin
+                  }
+
+                  // add|skip skipButtons plugin
+                  // -----------------------------------------------------------
+                  if (piSkipButtons.enabled) {
+                    var backwardIndex = piSkipButtons.backward;
+                    var forwardIndex  = piSkipButtons.forwardIndex;
+
+                    // property 'surroundPlayButton' takes precendence
+                    //
+                    if (piSkipButtons.surroundPlayButton) {
+                      var backwardIndex = 0;
+                      var forwardIndex  = 1;
+                    }
+
+                    vjsPlayer.skipButtons({
+                      backwardIndex:  backwardIndex,
+                      forwardIndex:   forwardIndex,
+                      backward:       piSkipButtons.backward,
+                      forward:        piSkipButtons.forward,
+                    });
+                  }
+
+                  // set start position of current video (on play)
+                  // -----------------------------------------------------------
+                  var appliedOnce = false;
+                  vjsPlayer.on("play", function() {
+                    var startFromSecond = new Date('1970-01-01T' + "#{attributes['start']}" + 'Z').getTime() / 1000;
+                    if (!appliedOnce) {
+                      vjsPlayer.currentTime(startFromSecond);
+                      appliedOnce = true;
+                    }
+                  });
+
+                }); // END yt player ready (set custom controls)
+
+                clearInterval(dependencies_met_vjs_player_exist);
+              } // END if 'vjsPlayerExist'
+
+            }, 10); // END 'dependencies_met_vjs_player_exist'
+
+          }); // END 'document ready'
         </script>
       )
 

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

@@ -394,6 +394,6 @@ end
 
 module Jekyll
   module J1LunrSearch
-    VERSION = '2024.3.23'
+    VERSION = '2024.3.25'
   end
 end

data/lib/starter_web/collections/posts/public/featured/_posts/0000-00-00-welcome-to-j1.adoc.erb

@@ -31,7 +31,7 @@ fab_menu_id:                            open_toc
 comments:                               false
 regenerate:                             false
 
-resources:                              [ animate ]
+resources:                              [ ]
 resource_options:
   - attic:
       opacity:                          0.5

data/lib/starter_web/collections/posts/public/featured/_posts/2022-02-01-about-j1.adoc

@@ -10,7 +10,7 @@ categories:                             [ Jekyll ]
 tags:                                   [ Theme ]
 
 image:
-  path:                                 /assets/image/module/attic/1920x1280/j1-starter-mockup-1.jpg
+  path:                                 /assets/image/module/attic/1920x1280/j1-mockup.jpg
   width:                                1920
   height:                               1280
   alt:                                  J1 Template Mockup
@@ -28,7 +28,7 @@ resource_options:
   - attic:
       padding_top:                      630
       slides:
-        - url:                          /assets/image/module/attic/1920x1280/j1-starter-mockup-1.jpg
+        - url:                          /assets/image/module/attic/1920x1280/j1-mockup.jpg
           alt:                          J1 Template Mockup
 ---
 

data/lib/starter_web/collections/posts/public/featured/_posts/2023-10-18-url-types.adoc

@@ -10,7 +10,7 @@ categories:                             [ Web ]
 tags:                                   [ Protocols ]
 
 image:
-  path:                                 /assets/image/module/attic/1920x1280/j1-starter-mockup-1.jpg
+  path:                                 /assets/image/module/attic/1920x1280/j1-mockup.jpg
   width:                                1920
   height:                               1280
   alt:                                  J1 Template Mockup
@@ -27,7 +27,7 @@ resource_options:
   - attic:
       padding_top:                      630
       slides:
-        - url:                          /assets/image/module/attic/1920x1280/j1-starter-mockup-1.jpg
+        - url:                          /assets/image/module/attic/1920x1280/j1-mockup.jpg
           alt:                          J1 Template Mockup
 ---
 

data/lib/starter_web/config.ru

@@ -20,4 +20,4 @@ require 'j1_app'
 
 # run the app
 # ------------------------------------------------------------------------------
-run J1App.site
+run J1App.site

data/lib/starter_web/dot.gitattributes

@@ -13,4 +13,4 @@
 
 # Enforce Unix newlines, all text files
 # ------------------------------------------------------------------------------
-* text=auto eol=lf
+* text=auto eol=lf