Merge pull request #263 from tjek/mr/incito_carousel

Incito: Add carousel layout
tjek · Nov 29, 2024 · 32bac7b · 32bac7b
2 parents fa05f75 + a3ce865
commit 32bac7b
Show file tree

Hide file tree

Showing 4 changed files with 89 additions and 8 deletions.
diff --git a/esbuild.mjs b/esbuild.mjs
@@ -7,7 +7,7 @@ import path from 'path';
 import stylus from 'stylus';
 import ts from 'typescript';
 import * as url from 'url';
-import packageJson from './package.json' assert {type: 'json'};
+import packageJson from './package.json' with {type: 'json'};
 
 const __dirname = url.fileURLToPath(new URL('.', import.meta.url));
 

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('incito__carousel-layout-view');
+
             break;
         }
     }
@@ -788,13 +793,61 @@ export default class Incito extends MicroEvent<{
 
     start() {
         this.el.addEventListener('click', (e) => {
-            const el = closest(
-                e.target as HTMLElement,
-                '.incito__view [data-link]'
+            if (!(e.target instanceof HTMLElement)) {
+                return;
+            }
+
+            const linkEl = closest(e.target, '.incito__view [data-link]');
+            const carouselEl = closest(
+                e.target,
+                '.incito__carousel-layout-view'
+            );
+            const carouselPrevEl = closest(
+                e.target,
+                '[data-role=carousel-prev]'
+            );
+            const carouselNextEl = closest(
+                e.target,
+                '[data-role=carousel-next]'
             );
-            const link = el ? el.dataset.link : null;
+            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) {

diff --git a/upload-s3.mjs b/upload-s3.mjs
@@ -6,7 +6,7 @@ import {PutObjectCommand, S3Client} from '@aws-sdk/client-s3';
 import {readFile} from 'fs/promises';
 import path from 'path';
 import * as url from 'url';
-import pkg from './dist/shopgun-sdk/package.json' assert {type: 'json'};
+import pkg from './dist/shopgun-sdk/package.json' with {type: 'json'};
 const __dirname = url.fileURLToPath(new URL('.', import.meta.url));
 
 const s3Client = new S3Client({region: 'eu-west-1'});