j1-template 2024.3.19 → 2024.3.20

data/assets/theme/j1/modules/swiperjs/js/modules/layoutThumbs.js

@@ -14,9 +14,7 @@
  # -----------------------------------------------------------------------------
 */
 "use strict";
-
 function LayoutThumbs(_ref) {
-
   var {
     swiper,
     extendParams,
@@ -24,18 +22,42 @@ function LayoutThumbs(_ref) {
     on
   } = _ref;
 
+  var paramsPagination, settingsPagination, paramsThumbs, renderBullet;
+
   // set (module) options
-  const commonParams  = params.thumbs;
-  const thumbSpeed    = commonParams.speed/2;
-  const mainSpeed     = commonParams.speed;
+  // ---------------------------------------------------------------------------
+  if (params.pagination.enabled && params.pagination.nunbered) {
+    renderBullet = (index, className) => { return `<span class="${className}"> ${++index} </span>`; };
+  } else {
+    renderBullet = false;
+  }
+
+  settingsPagination  = {
+    el: '.swiper-pagination-outer',
+    type: 'bullets',
+    clickable: true,
+    renderBullet: renderBullet
+  };
+
+  if (params.pagination.enabled) {
+    paramsPagination = settingsPagination;
+  } else {
+    paramsPagination = false;
+  }
+
+  paramsThumbs      = params.thumbs;
+
+  const thumbSpeed        = paramsThumbs.speed/2;
+  const mainSpeed         = paramsThumbs.speed;
+
 
   // ---------------------------------------------------------------------------
-  // effect initializer
+  // layout initializer
   // ---------------------------------------------------------------------------
 
   // main swiper
   //
-  const mainSwiper    = document.querySelector(`#${commonParams.swiper_id}`);
+  const mainSwiper    = document.querySelector(`#${paramsThumbs.swiper_id}`);
   const mainSwiperEl  = mainSwiper.querySelector('.swiper');
 
   // create thmubs swiper (duplicate from main)
@@ -47,24 +69,24 @@ function LayoutThumbs(_ref) {
   const swiperThumbSlides      = swiperThumbEl.querySelectorAll('.swiper-slide');
   const swiperThumbLastSlideEl = swiperThumbSlides[swiperThumbSlides.length - 1];
 
-  if (commonParams.placement === 'bottom') {
+  if (paramsThumbs.placement === 'bottom') {
     // place thumbs slider AFTER the main swiper (place at botton)
-    // ---------------------------------------------------------------------
+    // -------------------------------------------------------------------------
     mainSwiper.appendChild(swiperThumbEl);
-    mainSwiperEl.classList.add('mb-1');
+    // mainSwiperEl.classList.add('mb-1');
     swiperThumbEl.classList.add('thumbs-slider--bottom');
-  } else if (commonParams.placement === 'top') {
+  } else if (paramsThumbs.placement === 'top') {
     // place thumbs slider BEFORE the main swiper (place on top)
-    // ---------------------------------------------------------------------
+    // -------------------------------------------------------------------------
     swiperThumbEl
       .querySelector('.swiper-wrapper')
       .insertBefore(swiperThumbLastSlideEl, swiperThumbLastSlideEl[0]);
 
-      mainSwiperEl.classList.add('mt-1');
+      // mainSwiperEl.classList.add('mt-1');
       swiperThumbEl.classList.add('thumbs-slider--top');
   } else {
     // place thumbs at botton (default)
-    // ---------------------------------------------------------------------
+    // -------------------------------------------------------------------------
     mainSwiper.appendChild(swiperThumbEl);
     mainSwiperEl.classList.add('mb-1');
     swiperThumbEl.classList.add('thumbs-slider--bottom');
@@ -76,29 +98,52 @@ function LayoutThumbs(_ref) {
   // ---------------------------------------------------------------------------
 
   const thumbSlider = new Swiper(swiperThumbEl, {
-//  autoHeight:     commonParams.autoHeight,
-    grabCursor:     commonParams.grabCursor,
-    speed:          commonParams.speed * .5,
-    spaceBetween:   commonParams.spaceBetween,
-    slidesPerView:  commonParams.slidesPerView,
+    grabCursor:     paramsThumbs.grabCursor,
+    speed:          paramsThumbs.speed * .5,
+    spaceBetween:   paramsThumbs.spaceBetween,
+    slidesPerView:  paramsThumbs.slidesPerView,
   });
 
   const mainSlider = new Swiper(mainSwiperEl, {
-    grabCursor:     commonParams.grabCursor,
-    speed:          commonParams.speed,
+    grabCursor:     paramsThumbs.grabCursor,
+    speed:          paramsThumbs.speed,
+    pagination:     paramsPagination,
     thumbs: {
       swiper:       thumbSlider,
     },
   });
 
+  // if (paramsPagination.enabled) {
+  //   const mainSlider = new Swiper(mainSwiperEl, {
+  //     grabCursor:     paramsThumbs.grabCursor,
+  //     speed:          paramsThumbs.speed,
+  //     pagination:     paramsPagination,
+  //     thumbs: {
+  //       swiper:       thumbSlider,
+  //     },
+  //   });
+  // } else {
+  //   const mainSlider = new Swiper(mainSwiperEl, {
+  //     grabCursor:     paramsThumbs.grabCursor,
+  //     speed:          paramsThumbs.speed,
+  //     pagination:     paramsPagination,
+  //     thumbs: {
+  //       swiper:       thumbSlider,
+  //     },
+  //   });    
+  // }
+
+
 
   // ---------------------------------------------------------------------------
-  // events
+  // slider events
   // ---------------------------------------------------------------------------   
 
+  // MAIN
+  //
   mainSlider.on('init', function (swiper) {
-    if (commonParams.slideHeight !== 'auto') {
-      swiper.slides.forEach(slide => { slide.style.height = `${commonParams.slideHeight}px`; });
+    if (paramsThumbs.slideHeight !== 'auto') {
+      swiper.slides.forEach(slide => { slide.style.height = `${paramsThumbs.slideHeight}px`; });
     }
   });
 
@@ -106,8 +151,14 @@ function LayoutThumbs(_ref) {
     thumbSlider.slideTo(swiper.activeIndex);
   });
 
+  mainSlider.on('paginationUpdate', function (swiper) {
+    thumbSlider.slideTo(swiper.activeIndex);
+  });
+
+  // THUMBS
+  //
   thumbSlider.on('transitionStart', function (swiper) {
     mainSlider.slideTo(swiper.activeIndex);
   });
 
-} // END LayoutThumbs
+} // END LayoutThumbs

data/assets/theme/j1/modules/swiperjs/js/modules/layoutThumbs.min.js

@@ -13,21 +13,5 @@
  # See: https://github.com/jekyll-one-org/j1-template/blob/main/LICENSE
  # -----------------------------------------------------------------------------
 */
-"use strict";
 
-function LayoutThumbs(_ref) {
-
-    var {
-        swiper,
-        extendParams,
-        on
-    } = _ref;
-
-    extendParams({
-      panoramaEffect: {
-        depth: 200,
-        rotate: 30,
-      },
-    });
-
-} // END LayoutThumbs
+"use strict";function LayoutThumbs(e){var{swiper:s,extendParams:t,params:i,on:r}=e;const d=i.thumbs,a=(d.speed,d.speed,document.querySelector(`#${d.swiper_id}`)),o=a.querySelector(".swiper"),n=o.cloneNode(!0);n.classList.add("thumbs-slider"),a.insertBefore(n,o);const l=n.querySelectorAll(".swiper-slide"),c=l[l.length-1];"bottom"===d.placement?(a.appendChild(n),o.classList.add("mb-1"),n.classList.add("thumbs-slider--bottom")):"top"===d.placement?(n.querySelector(".swiper-wrapper").insertBefore(c,c[0]),o.classList.add("mt-1"),n.classList.add("thumbs-slider--top")):(a.appendChild(n),o.classList.add("mb-1"),n.classList.add("thumbs-slider--bottom"));const p=new Swiper(n,{grabCursor:d.grabCursor,speed:.5*d.speed,spaceBetween:d.spaceBetween,slidesPerView:d.slidesPerView}),u=new Swiper(o,{grabCursor:d.grabCursor,speed:d.speed,thumbs:{swiper:p}});u.on("init",(function(e){"auto"!==d.slideHeight&&e.slides.forEach((e=>{e.style.height=`${d.slideHeight}px`}))})),u.on("slideChangeTransitionStart",(function(e){p.slideTo(e.activeIndex)})),p.on("transitionStart",(function(e){u.slideTo(e.activeIndex)}))}