diff --git a/esbuild.mjs b/esbuild.mjs index 229feddf..1bd82dcd 100644 --- 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 index c0096d1e..ca4b4f86 100644 --- a/lib/incito-browser/incito.styl +++ b/lib/incito-browser/incito.styl @@ -66,4 +66,32 @@ position relative > * - position absolute \ No newline at end of file + 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 index 3ac0f209..8ccc87a1 100644 --- 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 index 1e1ccb10..93e4cae2 100644 --- 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'});