j1-template 2024.3.15 → 2024.3.17

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

@@ -557,6 +557,8 @@ settings:
         player:
           enabled:                      true
 
+          # VideoJS
+          # --------------------------------------------------------------------
           videojsPlayer:
             enabled:                    true
 
@@ -580,6 +582,12 @@ settings:
                 options:
                   volumeStep:           0.2
 
+              skipButtonsPlugin:
+                enabled:                  true
+                options:
+                  forward:                15
+                  backward:               15
+
               zoomPlugin:
                 enabled:                true
                 options:
@@ -588,6 +596,8 @@ settings:
                   rotate:               0
                   zoom:                 1
 
+          # Vimeo
+          # --------------------------------------------------------------------
           vimeoPlayer:
             enabled:                    true
             options:
@@ -597,6 +607,9 @@ settings:
 #             portrait:                 0
 #             color:                    var(--md-gray-100)
 
+
+          # Wistia
+          # --------------------------------------------------------------------
           wistiaPlayer:
             enabled:                    true
             options:
@@ -605,6 +618,8 @@ settings:
               muted:                    false
               qualityControl:           false
 
+          # Youtube
+          # --------------------------------------------------------------------
           youTubePlayer:
             enabled:                    true
             options:

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

@@ -0,0 +1,227 @@
+# ------------------------------------------------------------------------------
+# ~/_data/modules/swiper.yml
+# User configuration settings for J1 Swiper module
+#
+# Product/Info:
+# https://jekyll.one
+#
+# Copyright (C) 2023, 2024 Juergen Adams
+#
+# J1 Template is licensed under the MIT License.
+# See: https://github.com/jekyll-one-org/j1-template/blob/main/LICENSE
+# -----------------------------------------------------------------------------
+
+# ------------------------------------------------------------------------------
+# Description
+#
+description:
+  title:                                J1 Swiper
+  scope:                                User settings
+  location:                             _data/modules/swiper.yml
+
+# ------------------------------------------------------------------------------
+# User configuration settings
+#
+settings:
+  enabled:                              true
+
+  # ----------------------------------------------------------------------------
+  # Global Lightbox options
+  #
+  lightbox:
+    enabled:                            false
+    caption:                            caption
+    background:                         false
+
+  # ----------------------------------------------------------------------------
+  # Caption options (Carousel)
+  #
+  captions:
+    enabled:                            true
+
+  # ----------------------------------------------------------------------------
+  # Carousel settings
+  # ----------------------------------------------------------------------------
+  carousels:
+
+    # --------------------------------------------------------------------------
+    # IMAGE Carousel
+    # --------------------------------------------------------------------------
+    #
+    - carousel:
+      enabled:                          true
+
+      id:                               image_carousel_simple
+      type:                             image
+      template:                         standard
+      gutters:                          0                                       # 0 .. 5
+      image_base_path:                  /assets/image/modules/gallery/mega_cities
+      image_styles:                     img-fluid img-object--cover
+      image_height:                     300px
+
+      # ------------------------------------------------------------------------
+      # Lightbox options
+      #
+      lightbox:
+        enabled:                        false
+
+      # ------------------------------------------------------------------------
+      # Caption options
+      #
+      captions:
+        enabled:                        false
+        position:                       bottom                                  # top|bottom|center
+
+      # ------------------------------------------------------------------------
+      # Carousel options
+      #
+      options:
+        autoplay:                       false
+        arrows:                         false
+        dots:                           false
+        speed:                          300
+        slidesToShow:                   2
+        slidesToScroll:                 2
+        responsive:                     true
+
+      # ------------------------------------------------------------------------
+      # Reponsive options
+      #
+      responsive:
+        - breakpoint:
+          settings:
+            breakOn:                    1024
+            slidesToShow:               2
+            slidesToScroll:             2
+        - breakpoint:
+          settings:
+            breakOn:                    800
+            slidesToShow:               1
+            slidesToScroll:             1
+        - breakpoint:
+          settings:
+            breakOn:                    480
+            dots:                       false
+            slidesToShow:               1
+            slidesToScroll:             1
+
+      # ------------------------------------------------------------------------
+      # Slides
+      #
+      slides:
+
+        - slide:                        # slide 1
+          image:                        denys-nevozhai-1_b.jpg
+          caption:                      Man posing at the rooftop of Jin Mao Tower Shanghai - China
+
+        - slide:                        # slide 2
+          image:                        thomas-tucker_b.jpg
+          caption:                      Sunset over Taipei City - Taiwan
+
+        - slide:                        # slide 3
+          image:                        emmad-mazhari_b.jpg
+          caption:                      Chicago - United States
+
+        - slide:                        # slide 4
+          image:                        johan-mouchet_b.jpg
+          caption:                      The Queen Bee at the Eureka Tower - Melbourne Southbank Australia
+
+        - slide:                        # slide 5
+          image:                        federico-rizzarelli_b.jpg
+          caption:                      Shanghai - China
+
+        - slide:                        # slide 6
+          image:                        gints-gailis_b.jpg
+          caption:                      Shangri-La Hotel Jakarta - Indonesia
+
+
+    # --------------------------------------------------------------------------
+    # IMAGE Carousel + Captions + Lightbox
+    # --------------------------------------------------------------------------
+    #
+    - carousel:
+      enabled:                          false
+
+      id:                               image_carousel_full
+      type:                             image
+      gutters:                          1                                       # 0 .. 5
+      image_base_path:                  /assets/image/modules/gallery/mega_cities
+      image_styles:                     img-fluid img-object--cover
+      image_height:                     300px
+
+      # ------------------------------------------------------------------------
+      # Lightbox options
+      #
+      lightbox:
+        enabled:                        true
+
+      # ------------------------------------------------------------------------
+      # Caption options
+      #
+      captions:
+        enabled:                        true
+        position:                       bottom                                  # top|bottom|center
+
+      # ------------------------------------------------------------------------
+      # Carousel options
+      #
+      options:
+        autoplay:                       false
+        arrows:                         true
+        dots:                           true
+        speed:                          300
+        slidesToShow:                   2
+        slidesToScroll:                 2
+        responsive:                     true
+
+      # ------------------------------------------------------------------------
+      # Reponsive options
+      #
+      responsive:
+        - breakpoint:
+          settings:
+            breakOn:                    1024
+            slidesToShow:               2
+            slidesToScroll:             2
+        - breakpoint:
+          settings:
+            breakOn:                    800
+            slidesToShow:               1
+            slidesToScroll:             1
+        - breakpoint:
+          settings:
+            breakOn:                    480
+            slidesToShow:               1
+            slidesToScroll:             1
+
+      # ------------------------------------------------------------------------
+      # Slides
+      #
+      slides:
+
+        - slide:                        # slide 1
+          image:                        denys-nevozhai-1_b.jpg
+          caption:                      Man posing at the rooftop of Jin Mao Tower Shanghai - China
+
+        - slide:                        # slide 2
+          image:                        thomas-tucker_b.jpg
+          caption:                      Sunset over Taipei City - Taiwan
+
+        - slide:                        # slide 3
+          image:                        emmad-mazhari_b.jpg
+          caption:                      Chicago - United States
+
+        - slide:                        # slide 4
+          image:                        johan-mouchet_b.jpg
+          caption:                      The Queen Bee at the Eureka Tower - Melbourne Southbank Australia
+
+        - slide:                        # slide 5
+          image:                        federico-rizzarelli_b.jpg
+          caption:                      Shanghai - China
+
+        - slide:                        # slide 6
+          image:                        gints-gailis_b.jpg
+          caption:                      Shangri-La Hotel Jakarta - Indonesia
+
+# ------------------------------------------------------------------------------
+# END config

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

@@ -0,0 +1,57 @@
+# ------------------------------------------------------------------------------
+# ~/_data/modules/videojs.yml
+# User configuration settings for J1 VideoJS module
+#
+# Product/Info:
+# https://jekyll.one
+#
+# Copyright (C) 2023, 2024 Juergen Adams
+#
+# J1 Template is licensed under the MIT License.
+# See: https://github.com/jekyll-one-org/j1-template/blob/main/LICENSE
+# -----------------------------------------------------------------------------
+
+# ------------------------------------------------------------------------------
+# Description
+#
+description:
+  title:                                J1 VideoJS
+  scope:                                User settings
+  location:                             _data/modules/videojs.yml
+
+# ------------------------------------------------------------------------------
+# User configuration settings
+#
+settings:
+
+  # ----------------------------------------------------------------------------
+  # VideoJS settings
+  # ----------------------------------------------------------------------------
+  playbackRates:
+    enabled:                            true
+ 
+  # ----------------------------------------------------------------------------
+  # VideoJS Plugin settings
+  # ----------------------------------------------------------------------------
+  plugins:
+
+    hotKeys:
+      enabled:                          true
+
+      # Plugin options
+      # ------------------------------------------------------------------------
+      enableInactiveFocus:              false                                   # mutiple players on same page: reassign focus to the player when the control bar fades out
+#     hotkeysFocusElementFilter:        'e => e.tagName.toLowerCase() === "body"'      
+
+    skipButtons:
+      enabled:                          true
+
+      # Plugin options
+      # ------------------------------------------------------------------------      
+      surroundPlayButton:               true                                    # surround buttons side-by-side the play button
+
+    zoomButtons:
+      enabled:                          true
+
+# ------------------------------------------------------------------------------
+# END config

data/lib/starter_web/_data/resources.yml

@@ -356,8 +356,9 @@ resources:
       data:
         css:                            [
                                           core/css/themes/unolight/bootstrap,
-                                          core/css/icon-fonts/mdib,
                                           core/css/icon-fonts/fontawesome,
+                                          core/css/icon-fonts/mdib,
+                                          
                                           core/css/vendor
                                         ]
         files:                          [ adapter/js/j1.js ]
@@ -806,7 +807,7 @@ resources:
       pass_init_data:                   false
 
       data:
-        css:                            []
+        css:                            [ modules/rtable/css/theme/uno/rtable ]
         files:                          [ adapter/js/rtable.js ]
         js:                             [ modules/rtable/js/rtable ]
         init_function:                  [ j1.adapter.rtable.init ]
@@ -1320,6 +1321,7 @@ 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,
@@ -1327,18 +1329,19 @@ resources:
                                           modules/videojs/css/themes/sea,
                                           modules/videojs/css/themes/uno
                                         ]
-        files:                          []
+        files:                          [ adapter/js/videojs.js ]
         js:                             [
                                           modules/videojs/js/video,
+                                          modules/videojs/js/plugins/controls/autocaption/autocaption,
                                           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/wt/wistia,
                                           modules/videojs/js/plugins/players/vm/vimeo,
                                           modules/videojs/js/plugins/players/yt/youtube
-
-
                                         ]
-        init_function:                  []
+        init_function:                  [ j1.adapter.videojs.init]
 
   # ----------------------------------------------------------------------------
   # TikToc Player, Version v1.0.11
@@ -1919,25 +1922,56 @@ resources:
         init_function:                  [ j1.adapter.amplitude.init ]
 
   # ----------------------------------------------------------------------------
-  # jqueryScrollbar
+  # Swiper
   #
-  - name:                               J1 jqueryScrollbar
+  - name:                               SwiperJS
     resource:
-      enabled:                          false
+      enabled:                          true
 
-      id:                               scrollbars
-      comment:                          Module jqueryScrollbar
+      id:                               swiper
+      comment:                          Module Swiper
       region:                           body-footer
       layout:                           [ home, page, post ]
-      required:                         always
+      required:                         ondemand
       script_load:                      defer
       pass_init_data:                   false
 
       data:
-        css:                            [ modules/jqueryScrollbar/css/scrollbar ]
-        files:                          []
-        js:                             [ modules/jqueryScrollbar/js/scrollbar ]
+        css:                            [
+                                          modules/swiper/css/theme/uno,
+                                          modules/swiper/css/swiper-bundle
+                                        ]
+        files:                          [ adapter/js/swiper.js ]
+        js:                             [ modules/swiper/js/swiper-bundle ]
+        init_function:                  [ j1.adapter.swiper.init ]
+
+  # ----------------------------------------------------------------------------
+  # Photoswipe Lightbox
+  #
+  - name:                               Photoswipe
+    resource:
+      enabled:                          true
+
+      id:                               photoswipe
+      comment:                          Module Photoswipe
+      region:                           body-footer
+      layout:                           [ home, page, post ]
+      required:                         ondemand
+      script_load:                      defer
+      pass_init_data:                   false
+
+      data:
+        css:                            [
+                                          modules/photoswipe/css/photoswipe,
+                                          modules/photoswipe/css/photoswipe-caption-plugin,
+                                        ]
+        files:                          [
+                                          modules/photoswipe/js/photoswipe-core.min.js,
+                                          modules/photoswipe/js/photoswipe-lightbox.min.js,
+                                          modules/photoswipe/js/photoswipe-caption-plugin.min.js
+                                        ]
+        js:                             []
         init_function:                  []
 
 # ------------------------------------------------------------------------------
-# 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.15</template_version>
+  <template_version>2024.3.17</template_version>
 
   {% assign title = site.title | default: site.name %}
   {% if page.collection != "posts" %}

data/lib/starter_web/_includes/tables/jekyll_variables.asciidoc

@@ -1,3 +1,4 @@
+
 .Jekyll variables (Liquid)
 [cols="3,3a,6a", subs=+macros, options="header", width="100%", role="rtable mt-3"]
 |===

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

@@ -44,6 +44,7 @@ Asciidoctor::Extensions.register do
         <div class="audioblock #{attributes['role']}">
           #{title_html}
           <div id="#{target}_parent" class="amplitude-player"></div>
+          <div id="#{target}_video" class="yt-player"></div>
         </div>
       )
 

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

@@ -47,7 +47,7 @@ Asciidoctor::Extensions.register do
       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-youtube-tv mdib-24px mr-2"></i> #{attributes['title']} </div>\n) : nil
+      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
@@ -121,6 +121,9 @@ Asciidoctor::Extensions.register do
                 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