j1-template 2024.3.19 → 2024.3.21

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

@@ -144,6 +144,73 @@ settings:
                                           console.log ('\n' + 'Entered event: afterInit');
                                         }
 
+    # --------------------------------------------------------------------------
+    # IMAGE Swiper|Layout Base, Tester
+    # --------------------------------------------------------------------------
+    #
+    - swiper:
+
+      # ------------------------------------------------------------------------
+      # GENERAL Options
+      # ------------------------------------------------------------------------
+      #
+      enabled:                          true
+      id:                               attic_swiper
+      layout:                           image/base
+      playlist:                         attic_swiper_base
+      swiper_classes:                   false
+      container_classes:                false
+      wrapper_styles:                   false
+
+      # ------------------------------------------------------------------------
+      # CAPTION Options
+      # ------------------------------------------------------------------------
+      #
+      captions:                             
+        enabled:                        false
+        css_class:                      swp-caption-content
+
+      # ------------------------------------------------------------------------
+      # CORE Options
+      # ------------------------------------------------------------------------
+      #
+      parameters:
+        grabCursor:                     false
+        loop:                           false
+
+      # ------------------------------------------------------------------------
+      # MODULE Options
+      # ------------------------------------------------------------------------
+      #
+      module_settings:
+        # navigation:
+        #   nextEl:                       .swiper-button-next
+        #   prevEl:                       .swiper-button-prev
+        # pagination:
+        #   el:                           .swiper-pagination-outer
+        #   clickable:                    true
+        # renderBullet:                 function (index, className) { return `<span class="${className}"> ${++index} </span>`; }
+
+      # ------------------------------------------------------------------------
+      # EVENT Options
+      # ------------------------------------------------------------------------
+      #
+      events:
+        enabled:                        false
+        init: >
+                                        function (swiper) { var slideHeight = 300; swiper.slides.forEach(slide => { slide.style.height = `${slideHeight}px`; }); }
+
+      # ------------------------------------------------------------------------
+      # LIGHTBOX Options
+      # ------------------------------------------------------------------------
+      #
+      lightbox:
+
+        # ----------------------------------------------------------------------
+        # GENERAL Options
+        # ----------------------------------------------------------------------
+        #
+        enabled:                        false
 
     # --------------------------------------------------------------------------
     # IMAGE Swiper
@@ -180,7 +247,6 @@ settings:
       # ------------------------------------------------------------------------
       #
       parameters:
-      # direction:                        horizontal
         grabCursor:                       true
         loop:                             true
 
@@ -189,13 +255,13 @@ settings:
       # ------------------------------------------------------------------------
       #
       module_settings:
-        pagination:
-          el:                           .swiper-pagination
-          type:                         bullets
-          clickable:                    true
         navigation:
           nextEl:                       .swiper-button-next
           prevEl:                       .swiper-button-prev
+        pagination:
+          el:                           .swiper-pagination-outer
+          clickable:                    true
+        # renderBullet:                 function (index, className) { return `<span class="${className}"> ${++index} </span>`; }
 
       # ------------------------------------------------------------------------
       # EVENT Options
@@ -218,46 +284,6 @@ settings:
         #
         enabled:                        false
 
-        # ----------------------------------------------------------------------
-        # CAPTION Options
-        # ----------------------------------------------------------------------
-        #
-        captions:
-          enabled:                      true
-          css_class:                    pswp-caption-content
-
-        # ----------------------------------------------------------------------
-        # CORE Options
-        # ----------------------------------------------------------------------
-        #
-        parameters:
-          children:                     a
-          bgOpacity:                    1
-          showHideOpacity:              true
-          loop:                         true
-          wheelToZoom:                  true
-          showHideAnimationType:        zoom
-          imageClickAction:             next
-          tapAction:                    next
-          padding:                      { top: 0, bottom: 0, left: 80, right: 80 }
-
-        # ----------------------------------------------------------------------
-        # USER INTERFACE Options
-        # ----------------------------------------------------------------------
-        #
-        ui_controls:
-          zoom:                         false
-          close:                        true
-          counter:                      true
-          arrowKeys:                    false
-
-        # ----------------------------------------------------------------------
-        # KEYBOARD Options
-        # ----------------------------------------------------------------------
-        #
-        kbd_controls:
-          escKey:                       true
- 
     # --------------------------------------------------------------------------
     # IMAGE Swiper|Layout Base, Captions
     # --------------------------------------------------------------------------
@@ -265,19 +291,19 @@ settings:
     - swiper:
 
       # ------------------------------------------------------------------------
-      # GENERAL Options
+      # GENERAL options
       # ------------------------------------------------------------------------
       #
       enabled:                          true
-      id:                               swiper_image_base_captions
+      id:                               swiper_image_base_navigation_pagination
       layout:                           image/base
-      playlist:                         mega_cities_1
+      playlist:                         free_animal
       swiper_classes:                   false
       container_classes:                false
       wrapper_styles:                   false
 
       # ------------------------------------------------------------------------
-      # CAPTION Options
+      # CAPTION options
       # ------------------------------------------------------------------------
       #
       captions:                             
@@ -289,7 +315,6 @@ settings:
       # ------------------------------------------------------------------------
       #
       parameters:
-        autoHeight:                     true
         grabCursor:                     true
         slidesPerView:                  2
         slidesPerGroup:                 2
@@ -300,9 +325,13 @@ settings:
       # ------------------------------------------------------------------------
       #
       module_settings:
+        navigation:
+          nextEl:                       .swiper-button-next
+          prevEl:                       .swiper-button-prev      
         pagination:
-          el:                           .swiper-pagination
           type:                         bullets
+          el:                           .swiper-pagination-outer
+          dynamicBullets:               false
           clickable:                    true
 
       # ------------------------------------------------------------------------
@@ -324,7 +353,7 @@ settings:
         # GENERAL Options
         # ----------------------------------------------------------------------
         #
-        enabled:                        true
+        enabled:                        false
 
         # ----------------------------------------------------------------------
         # CAPTION Options
@@ -365,27 +394,27 @@ settings:
         #
         kbd_controls:
           escKey:                       true
- 
+
     # --------------------------------------------------------------------------
-    # IMAGE Swiper|Layout Base, Captions + Lightbox
+    # IMAGE Swiper|Layout Base, Captions
     # --------------------------------------------------------------------------
     #
     - swiper:
 
       # ------------------------------------------------------------------------
-      # GENERAL options
+      # GENERAL Options
       # ------------------------------------------------------------------------
       #
       enabled:                          true
-      id:                               swiper_image_base_navigation_pagination_lightbox
+      id:                               swiper_image_base_captions
       layout:                           image/base
-      playlist:                         free_animal
+      playlist:                         mega_cities_1
       swiper_classes:                   false
       container_classes:                false
       wrapper_styles:                   false
 
       # ------------------------------------------------------------------------
-      # CAPTION options
+      # CAPTION Options
       # ------------------------------------------------------------------------
       #
       captions:                             
@@ -397,7 +426,6 @@ settings:
       # ------------------------------------------------------------------------
       #
       parameters:
-        autoHeight:                     true
         grabCursor:                     true
         slidesPerView:                  2
         slidesPerGroup:                 2
@@ -409,12 +437,10 @@ settings:
       #
       module_settings:
         pagination:
-          el:                           .swiper-pagination
           type:                         bullets
+          el:                           .swiper-pagination-outer
+          dynamicBullets:               false
           clickable:                    true
-        navigation:
-          nextEl:                       .swiper-button-next
-          prevEl:                       .swiper-button-prev
 
       # ------------------------------------------------------------------------
       # EVENT Options
@@ -435,7 +461,7 @@ settings:
         # GENERAL Options
         # ----------------------------------------------------------------------
         #
-        enabled:                        false
+        enabled:                        true
 
         # ----------------------------------------------------------------------
         # CAPTION Options
@@ -476,9 +502,10 @@ settings:
         #
         kbd_controls:
           escKey:                       true
+ 
+     # --------------------------------------------------------------------------
 
-    # --------------------------------------------------------------------------
-    # IMAGE Swiper|Layout Panorama
+    # IMAGE Swiper|Layout Thumbs
     # --------------------------------------------------------------------------
     #
     - swiper:
@@ -486,14 +513,14 @@ settings:
       # ------------------------------------------------------------------------
       # GENERAL Options
       # ------------------------------------------------------------------------
-      # 
+      #
       enabled:                          true
-      id:                               swiper_image_panorama
-      layout:                           image/panorama
-      playlist:                         panorama
-      swiper_classes:                   panorama-slider
+      id:                               thumb_slider_top
+      layout:                           image/thumbs
+      playlist:                         free_animal
+      swiper_classes:                   false
       container_classes:                false
-      wrapper_styles:                   "height: 240px; padding: 14px 0;"
+      wrapper_styles:                   false
 
       # ------------------------------------------------------------------------
       # CAPTION Options
@@ -508,64 +535,39 @@ settings:
       # ------------------------------------------------------------------------
       #
       parameters:
-        effect:                         panorama
-        slidesPerView:                  1.5
-        loop:                           true
-
-        loopAdditionalSlides:           1
-        centeredSlides:                 true
-        grabCursor:                     true
-        breakpoints: {
-                                        480: {
-                                          slidesPerView: 2,
-                                          panoramaEffect: {
-                                            rotate: 35,
-                                            depth: 150,
-                                          },
-                                        },
-                                        640: {
-                                          slidesPerView: 3,
-                                          panoramaEffect: {
-                                            rotate: 30,
-                                            depth: 150,
-                                          },
-                                        },
-                                        1024: {
-                                          slidesPerView: 4,
-                                          panoramaEffect: {
-                                            rotate: 30,
-                                            depth: 200,
-                                          },
-                                        },
-                                        1200: {
-                                          slidesPerView: 4,
-                                          panoramaEffect: {
-                                            rotate: 25,
-                                            depth: 250,
-                                          },
-                                        }
-        }
+        direction:                      horizontal       
 
       # ------------------------------------------------------------------------
       # MODULE Options
       # ------------------------------------------------------------------------
       #
       module_settings:
-        modules:                        [ LayoutPanorama ]
-        panorama:
-          on_click:                     next                                    # false | next
-          depth:                        200
-          rotate:                       30
+        pagination:
+          enabled:                      true
+          nunbered:                     true       
+        thumbs:
+          swiper_id:                    thumb_slider_top
+          speed:                        1000
+          grabCursor:                   true
+          loop:                         true
+          placement:                    top
+          spaceBetween:                 5
+          slidesPerView:                3
 
       # ------------------------------------------------------------------------
       # EVENT Options
       # ------------------------------------------------------------------------
       #
       events:
-        enabled:                        false
+        enabled:                        false      
+        init: >
+                                        function (swiper) { var slideHeight = 550; swiper.slides.forEach(slide => { slide.style.height = `${slideHeight}px`; }); }
+        slideChangeTransitionStart: >
+                                        function (swiper) { thumbSlider.slideTo(swiper.activeIndex); }
 
       # ------------------------------------------------------------------------
-      # LIGHTBOX Options
+      # LIGHTBOX options
+      # ------------------------------------------------------------------------
       #
       lightbox:
 
@@ -581,6 +583,7 @@ settings:
         #
         captions:
           enabled:                      true
+
           css_class:                    pswp-caption-content
 
         # ----------------------------------------------------------------------
@@ -591,9 +594,7 @@ settings:
           children:                     a
           bgOpacity:                    1
           showHideOpacity:              true
-          loop:                         true          
-          effect:                       fade
-          fadeEffect:                   { crossFade: true }
+          loop:                         true
           wheelToZoom:                  true
           showHideAnimationType:        zoom
           imageClickAction:             next
@@ -648,11 +649,7 @@ settings:
       # ------------------------------------------------------------------------
       #
       parameters:
-        effect:                         neighbor
-      # slidesPerView:                  1.3                                     # slidesPerView NOT supported by EffectNeighbor
-        loop:                           true
-        loopAdditionalSlides:           1
-        centeredSlides:                 true
+        direction:                      horizontal
         grabCursor:                     true
 
       # ------------------------------------------------------------------------
@@ -660,11 +657,12 @@ settings:
       # ------------------------------------------------------------------------
       #
       module_settings:
-        modules:                        [ LayoutNeighbor ]
         neighbor:
-          swiper_id:                    neighbor_slider                         # should ALWAYS an id (NOT a class)
-          speed:                        800
+          centeredSlides:               true
           loop:                         true
+          loopAdditionalSlides:         1
+          speed:                        800
+          swiper_id:                    neighbor_slider
 
       # ------------------------------------------------------------------------
       # EVENT Options
@@ -725,8 +723,9 @@ settings:
         kbd_controls:
           escKey:                       true
  
-    # --------------------------------------------------------------------------
-    # IMAGE Swiper|Layout Thumbs
+     # --------------------------------------------------------------------------
+
+    # IMAGE Swiper|Layout Panorama
     # --------------------------------------------------------------------------
     #
     - swiper:
@@ -734,14 +733,14 @@ settings:
       # ------------------------------------------------------------------------
       # GENERAL Options
       # ------------------------------------------------------------------------
-      #
+      # 
       enabled:                          true
-      id:                               thumb_slider_top
-      layout:                           image/thumb
-      playlist:                         free_animal
-      swiper_classes:                   false
+      id:                               swiper_image_panorama
+      layout:                           image/panorama
+      playlist:                         panorama
+      swiper_classes:                   panorama-slider
       container_classes:                false
-      wrapper_styles:                   false
+      wrapper_styles:                   "height: 240px; padding: 14px 0;"
 
       # ------------------------------------------------------------------------
       # CAPTION Options
@@ -756,24 +755,58 @@ settings:
       # ------------------------------------------------------------------------
       #
       parameters:
-        effect:                         thumbs
-      # layout:                         thumbs
+        centeredSlides:                 true
+        effect:                         panorama
+        grabCursor:                     true
+        loop:                           true
+      # loopAdditionalSlides:           1
+      # slidesPerView:                  1.5
+
+        breakpoints: {
+                                        480: {
+                                          slidesPerView: 2,
+                                          panoramaEffect: {
+                                            rotate: 35,
+                                            depth: 150,
+                                          },
+                                        },
+                                        640: {
+                                          slidesPerView: 3,
+                                          panoramaEffect: {
+                                            rotate: 30,
+                                            depth: 150,
+                                          },
+                                        },
+                                        1024: {
+                                          slidesPerView: 4,
+                                          panoramaEffect: {
+                                            rotate: 30,
+                                            depth: 200,
+                                          },
+                                        },
+                                        1200: {
+                                          slidesPerView: 4,
+                                          panoramaEffect: {
+                                            rotate: 25,
+                                            depth: 250,
+                                          },
+                                        }
+        }
 
       # ------------------------------------------------------------------------
       # MODULE Options
       # ------------------------------------------------------------------------
       #
       module_settings:
-        modules:                        [ LayoutThumbs ]                        # Swiper modules for J1 are to specied (to be loaded)
-        thumbs:
-          swiper_id:                    thumb_slider_top                        # should be moved to CORE Options (parameters)
-          speed:                        1000                                    # should be moved to CORE Options (parameters)
-        # autoHeight:                   true                                    # should be moved to CORE Options (parameters)
-          grabCursor:                   true                                    # should be moved to CORE Options (parameters)
-          loop:                         true                                    # should be moved to CORE Options (parameters)                                 
-          placement:                    top
-          spaceBetween:                 5
-          slidesPerView:                3
+        panorama:
+          on_click:                     next                                    # false | next
+          depth:                        200
+          rotate:                       30
+        pagination:
+          type:                         bullets
+          el:                           .swiper-pagination-outer
+          dynamicBullets:               false
+          clickable:                    true
 
       # ------------------------------------------------------------------------
       # EVENT Options
@@ -781,14 +814,9 @@ settings:
       #
       events:
         enabled:                        false
-      # init: >
-      #                                 function (swiper) { var slideHeight = 550; swiper.slides.forEach(slide => { slide.style.height = `${slideHeight}px`; }); }
-      # slideChangeTransitionStart: >
-      #                                 function (swiper) { thumbSlider.slideTo(swiper.activeIndex); }
 
       # ------------------------------------------------------------------------
-      # LIGHTBOX options
-      # ------------------------------------------------------------------------
+      # LIGHTBOX Options
       #
       lightbox:
 
@@ -804,7 +832,6 @@ settings:
         #
         captions:
           enabled:                      true
-
           css_class:                    pswp-caption-content
 
         # ----------------------------------------------------------------------
@@ -815,7 +842,9 @@ settings:
           children:                     a
           bgOpacity:                    1
           showHideOpacity:              true
-          loop:                         true
+          loop:                         true          
+          effect:                       fade
+          fadeEffect:                   { crossFade: true }
           wheelToZoom:                  true
           showHideAnimationType:        zoom
           imageClickAction:             next
@@ -839,6 +868,178 @@ settings:
         kbd_controls:
           escKey:                       true
 
+    # IMAGE Swiper|Layout Stacked (old)
+    # --------------------------------------------------------------------------
+    #
+    - swiper:
+
+      # ------------------------------------------------------------------------
+      # GENERAL Options
+      # ------------------------------------------------------------------------
+      # 
+      enabled:                          false
+      id:                               swiper_image_stacked
+      layout:                           image/stacked
+      playlist:                         game_posters
+      swiper_classes:                   stacked-slider
+      container_classes:                false
+      wrapper_styles:                   false
+
+      # ------------------------------------------------------------------------
+      # CAPTION Options
+      # ------------------------------------------------------------------------
+      #
+      captions:
+        enabled:                        false
+        css_class:                      swp-caption-content
+
+      # ------------------------------------------------------------------------
+      # CORE Options
+      # ------------------------------------------------------------------------
+      #
+      parameters:
+        grabCursor:                     true
+        loop:                           false
+        speed:                          600
+
+      # ------------------------------------------------------------------------
+      # MODULE Options
+      # ------------------------------------------------------------------------
+      #
+      module_settings:
+        creativeEffect:
+          enabled:                      true
+          limitProgress:                3
+          perspective:                  true
+          shadowPerProgress:            true
+          prev:
+            shadow:                     true
+            # set `translateX(-15%)` and translateZ(-200)` on PREVIOUS slides
+            translate:                  [ '-15%', 0, -200 ]
+          next:
+            # set `translateX to calcNextOffset on NEXT slides
+            translate:                  [ calcNextOffset(), 0, 0 ]      
+        pagination:
+          clickable:                    true
+          dynamicBullets:               false
+          el:                           .swiper-pagination-inner
+          type:                         bullets
+        parallax:
+          enabled:                      true
+          parallax_data_elements:       [ data-swiper-parallax-scale="1.1" ]
+        stacked:
+          effect:                       creative
+          swiper_id:                    swiper_image_stacked
+          resistanceRatio:              0
+
+      # ------------------------------------------------------------------------
+      # EVENT Options
+      # ------------------------------------------------------------------------
+      #
+      events:
+        enabled:                        true      
+        init: >
+                                        function (swiper) { var slideHeight = 600; swiper.slides.forEach(slide => { slide.style.height = `${slideHeight}px`; }); }
+        reachEnd: >
+                                        function (swiper) { onLastSlide(swiper) }
+
+      # ------------------------------------------------------------------------
+      # LIGHTBOX Options
+      #
+      lightbox:
+
+        # ----------------------------------------------------------------------
+        # GENERAL Options
+        # ----------------------------------------------------------------------
+        #
+        enabled:                        false
+
+
+    # IMAGE Swiper|Layout Stacked (new)
+    # --------------------------------------------------------------------------
+    #
+    - swiper:
+
+      # ------------------------------------------------------------------------
+      # GENERAL Options
+      # ------------------------------------------------------------------------
+      # 
+      enabled:                          true
+      id:                               swiper_image_stacked
+      layout:                           image/stacked
+      playlist:                         game_posters
+      swiper_classes:                   stacked-slider
+      container_classes:                false
+      wrapper_styles:                   false
+
+      # ------------------------------------------------------------------------
+      # CAPTION Options
+      # ------------------------------------------------------------------------
+      #
+      captions:
+        enabled:                        false
+        css_class:                      swp-caption-content
+
+      # ------------------------------------------------------------------------
+      # CORE Options
+      # ------------------------------------------------------------------------
+      #
+      parameters:
+        grabCursor:                     true
+        loop:                           false
+        speed:                          600
+
+      # ------------------------------------------------------------------------
+      # MODULE Options
+      # ------------------------------------------------------------------------
+      #
+      module_settings:
+        creativeEffect:
+          enabled:                      true
+          limitProgress:                3
+          perspective:                  true
+          shadowPerProgress:            true
+          prev:
+            shadow:                     true
+            # set `translateX(-15%)` and translateZ(-200)` on PREVIOUS slides
+            translate:                  [ '-15%', 0, -200 ]
+          next:
+            # set `translateX to calcNextOffset on NEXT slides
+            translate:                  [ calcNextOffset(), 0, 0 ]      
+        pagination:
+          clickable:                    true
+          dynamicBullets:               false
+          el:                           .swiper-pagination-inner
+          type:                         bullets
+        parallax:
+          enabled:                      true
+          parallax_data_elements:       [ data-swiper-parallax-scale="1.1" ]
+        stacked:
+          effect:                       creative
+          swiper_id:                    swiper_image_stacked
+          resistanceRatio:              0
+
+      # ------------------------------------------------------------------------
+      # EVENT Options
+      # ------------------------------------------------------------------------
+      #
+      events:
+        enabled:                        true      
+        init: >
+                                        function (swiper) { var slideHeight = 600; swiper.slides.forEach(slide => { slide.style.height = `${slideHeight}px`; }); }
+        reachEnd: >
+                                        function (swiper) { onLastSlide(swiper) }
+
+      # ------------------------------------------------------------------------
+      # LIGHTBOX Options
+      #
+      lightbox:
+
+        # ----------------------------------------------------------------------
+        # GENERAL Options
+        # ----------------------------------------------------------------------
+        #
+        enabled:                        false
 
     # --------------------------------------------------------------------------
     # AUDIO Swiper