Incito: Add carousel layout

tjek · Nov 28, 2024 · 397ef3c · 397ef3c
1 parent fa05f75
commit 397ef3c
Show file tree

Hide file tree

Showing 2 changed files with 85 additions and 5 deletions.
diff --git a/lib/incito-browser/incito.styl b/lib/incito-browser/incito.styl
@@ -66,4 +66,32 @@
     position relative
 
     > *
-        position absolute
+        position absolute
+
+.tjek-incito__carousel-layout-view
+    display flex
+    flex-direction row
+    justify-content flex-start
+    align-items center
+    overflow-x auto
+    overflow-y hidden
+    scroll-snap-type x mandatory
+    -webkit-overflow-scrolling touch
+
+.tjek-incito__carousel-layout-view > *
+    flex 0 0 auto
+    scroll-snap-align start
+    display flex
+    justify-content center
+    align-items center
+    box-sizing border-box
+
+.tjek-incito__carousel-layout-view::-webkit-scrollbar
+    opacity 0
+    display none
+
+.tjek-incito__carousel-layout-view::-webkit-scrollbar-track
+    opacity 0
+
+.tjek-incito__carousel-layout-view::-webkit-scrollbar-thumb
+    opacity 0
diff --git a/lib/incito-browser/incito.ts b/lib/incito-browser/incito.ts
@@ -401,6 +401,11 @@ function renderView(view, canLazyload: boolean) {
                     view.layout_flex_direction;
             }
 
+            break;
+        }
+        case 'CarouselLayout': {
+            classNames.push('tjek-incito__carousel-layout-view');
+
             break;
         }
     }
@@ -788,13 +793,60 @@ export default class Incito extends MicroEvent<{
 
     start() {
         this.el.addEventListener('click', (e) => {
-            const el = closest(
+            const linkEl = closest(
+                e.target as HTMLElement,
+                '.tjek-incito__view [data-link]'
+            );
+            const carouselEl = closest(
+                e.target as HTMLElement,
+                '.tjek-incito__carousel-layout-view'
+            );
+            const carouselPrevEl = closest(
                 e.target as HTMLElement,
-                '.incito__view [data-link]'
+                '[data-role=carousel-prev]'
             );
-            const link = el ? el.dataset.link : null;
+            const carouselNextEl = closest(
+                e.target as HTMLElement,
+                '[data-role=carousel-next]'
+            );
+            const link = linkEl ? linkEl.dataset.link : null;
+
+            if (isDefinedStr(link)) {
+                window.open(link!, '_blank');
+            }
 
-            if (isDefinedStr(link)) window.open(link!, '_blank');
+            if (carouselEl) {
+                const scrollWidth = carouselEl.scrollWidth;
+                const clientWidth = carouselEl.clientWidth;
+                const scrollLeft = carouselEl.scrollLeft;
+
+                if (carouselPrevEl) {
+                    const newScrollLeft = scrollLeft - clientWidth;
+
+                    if (newScrollLeft < 0) {
+                        carouselEl.scrollTo({
+                            left: scrollWidth - clientWidth,
+                            behavior: 'smooth'
+                        });
+                    } else {
+                        carouselEl.scrollTo({
+                            left: newScrollLeft,
+                            behavior: 'smooth'
+                        });
+                    }
+                } else if (carouselNextEl) {
+                    const newScrollLeft = scrollLeft + clientWidth;
+
+                    if (newScrollLeft >= scrollWidth) {
+                        carouselEl.scrollTo({left: 0, behavior: 'smooth'});
+                    } else {
+                        carouselEl.scrollTo({
+                            left: newScrollLeft,
+                            behavior: 'smooth'
+                        });
+                    }
+                }
+            }
         });
 
         if (this.canLazyload) {