From cbecafd587b606df128e0a377c364cdd9bc65959 Mon Sep 17 00:00:00 2001 From: jack shelton Date: Thu, 18 Jul 2024 08:53:05 -0500 Subject: [PATCH 01/86] refactor: setup initial carousel testsw --- package.json | 2 +- .../carousel/carousel-container.tsx | 1 + .../src/components/carousel/carousel.css | 0 .../components/carousel/carousel.driver.ts | 47 +++++++++++++++++++ .../src/components/carousel/carousel.test.ts | 23 +++++++++ .../src/components/carousel/next-button.tsx | 1 + .../src/components/carousel/prev-button.tsx | 1 + .../src/components/carousel/slide.tsx | 1 + 8 files changed, 75 insertions(+), 1 deletion(-) create mode 100644 packages/kit-headless/src/components/carousel/carousel.css create mode 100644 packages/kit-headless/src/components/carousel/carousel.driver.ts create mode 100644 packages/kit-headless/src/components/carousel/carousel.test.ts diff --git a/package.json b/package.json index 1ae34eeac..f9d20b78e 100644 --- a/package.json +++ b/package.json @@ -14,7 +14,7 @@ "build.headless": "nx build headless", "change": "changeset", "changeset.version": "changeset version && pnpm install --no-frozen-lockfile && git add --all", - "dev": "nx serve website", + "dev": "nx serve website --host", "dev.ct": "nx serve component-tests", "format.all": "prettier --write \"**/*.{js,jsx,ts,tsx,json,html,css,scss}\"", "format.fix": "pretty-quick --staged", diff --git a/packages/kit-headless/src/components/carousel/carousel-container.tsx b/packages/kit-headless/src/components/carousel/carousel-container.tsx index c2ac651d3..fab50dfd8 100644 --- a/packages/kit-headless/src/components/carousel/carousel-container.tsx +++ b/packages/kit-headless/src/components/carousel/carousel-container.tsx @@ -14,6 +14,7 @@ export const HCarouselContainer = component$((props: CarouselContainerProps) => transitionDuration: `${context.transitionDurationSig.value}ms`, transitionDelay: '0ms', }} + data-qui-carousel-container {...props} > diff --git a/packages/kit-headless/src/components/carousel/carousel.css b/packages/kit-headless/src/components/carousel/carousel.css new file mode 100644 index 000000000..e69de29bb diff --git a/packages/kit-headless/src/components/carousel/carousel.driver.ts b/packages/kit-headless/src/components/carousel/carousel.driver.ts new file mode 100644 index 000000000..1b4eaf416 --- /dev/null +++ b/packages/kit-headless/src/components/carousel/carousel.driver.ts @@ -0,0 +1,47 @@ +import { Locator, Page } from '@playwright/test'; +export type DriverLocator = Locator | Page; + +export function createTestDriver(rootLocator: T) { + const getRoot = () => { + return rootLocator.locator('[data-qui-carousel]'); + }; + + const getNextButton = () => { + return getRoot().locator('[data-qui-carousel-next]'); + }; + + const getPrevButton = () => { + return getRoot().locator('[data-qui-carousel-prev]'); + }; + + const getContainer = () => { + return getRoot().locator('[data-qui-carousel-container]'); + }; + + const getSlideAt = (index: number) => { + return getContainer().locator(`[data-qui-carousel-slide]`).nth(index); + }; + + /** + * Wait for all animations within the given element and subtrees to finish + * See: https://github.com/microsoft/playwright/issues/15660#issuecomment-1184911658 + */ + function waitForAnimationEnd(selector: string) { + return getRoot() + .locator(selector) + .evaluate((element) => + Promise.all(element.getAnimations().map((animation) => animation.finished)), + ); + } + + return { + ...rootLocator, + locator: rootLocator, + getRoot, + getNextButton, + getPrevButton, + getContainer, + getSlideAt, + waitForAnimationEnd, + }; +} diff --git a/packages/kit-headless/src/components/carousel/carousel.test.ts b/packages/kit-headless/src/components/carousel/carousel.test.ts new file mode 100644 index 000000000..6100fe473 --- /dev/null +++ b/packages/kit-headless/src/components/carousel/carousel.test.ts @@ -0,0 +1,23 @@ +import { test, type Page } from '@playwright/test'; +import { createTestDriver } from './carousel.driver'; + +async function setup(page: Page, exampleName: string) { + await page.goto(`headless/carousel/${exampleName}`); + + const driver = createTestDriver(page); + + return { + driver, + }; +} + +test.describe('Mouse Behavior', () => { + test(`GIVEN a carousel + WHEN clicking on the next button + THEN it should move to the next slide + `, async ({ page }) => { + const { driver: d } = await setup(page, 'hero'); + + await d.getNextButton().click(); + }); +}); diff --git a/packages/kit-headless/src/components/carousel/next-button.tsx b/packages/kit-headless/src/components/carousel/next-button.tsx index 23e975dc1..1745bab96 100644 --- a/packages/kit-headless/src/components/carousel/next-button.tsx +++ b/packages/kit-headless/src/components/carousel/next-button.tsx @@ -16,6 +16,7 @@ export const HCarouselNext = component$((props: CarouselButtonProps) => { context.transitionDurationSig.value = 625; }} + data-qui-carousel-next > next slide diff --git a/packages/kit-headless/src/components/carousel/prev-button.tsx b/packages/kit-headless/src/components/carousel/prev-button.tsx index 30e6247fe..b082e5737 100644 --- a/packages/kit-headless/src/components/carousel/prev-button.tsx +++ b/packages/kit-headless/src/components/carousel/prev-button.tsx @@ -14,6 +14,7 @@ export const HCarouselPrev = component$((props: CarouselButtonProps) => { context.currentIndexSig.value--; context.transitionDurationSig.value = 625; }} + data-qui-carousel-prev > previous slide diff --git a/packages/kit-headless/src/components/carousel/slide.tsx b/packages/kit-headless/src/components/carousel/slide.tsx index dca53fb1b..91169b087 100644 --- a/packages/kit-headless/src/components/carousel/slide.tsx +++ b/packages/kit-headless/src/components/carousel/slide.tsx @@ -111,6 +111,7 @@ export const HCarouselSlide = component$(({ ...props }: CarouselSlideProps) => { data-slide-num={localIndexSig.value} style={{ marginRight: `${context.spaceBetweenSlides}px` }} ref={slideRef} + data-qui-carousel-slide {...props} > From 13f28629655ea26a09f9be60e99022b16bc0824d Mon Sep 17 00:00:00 2001 From: jack shelton Date: Thu, 18 Jul 2024 09:17:34 -0500 Subject: [PATCH 02/86] fix: carousel in CSR --- .../docs/headless/carousel/examples/csr.tsx | 58 +++++++++++++++++++ .../routes/docs/headless/carousel/index.mdx | 4 ++ .../components/carousel/carousel-viewport.tsx | 24 +------- 3 files changed, 63 insertions(+), 23 deletions(-) create mode 100644 apps/website/src/routes/docs/headless/carousel/examples/csr.tsx diff --git a/apps/website/src/routes/docs/headless/carousel/examples/csr.tsx b/apps/website/src/routes/docs/headless/carousel/examples/csr.tsx new file mode 100644 index 000000000..f0451f539 --- /dev/null +++ b/apps/website/src/routes/docs/headless/carousel/examples/csr.tsx @@ -0,0 +1,58 @@ +import { $, component$, useSignal, useStyles$ } from '@builder.io/qwik'; + +import { Carousel } from '@qwik-ui/headless'; +import carouselStyles from './carousel.css?inline'; + +export default component$(() => { + /* TODO: document this to always have initial state to null. + Use defaultSlide instead for setting a slide on page load */ + const currentIndexSig = useSignal(0); + const renderCarousel = useSignal(false); + useStyles$(carouselStyles); + + const nums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; + + return ( + <> + + {renderCarousel.value && ( + +
+ Prev + Next +
+ + + {nums.map((num, index) => ( + + {index} + + ))} + + +
+ { + return ( +
(currentIndexSig.value = i)} + > + {i} +
+ ); + })} + /> +
+ + )} + + ); +}); diff --git a/apps/website/src/routes/docs/headless/carousel/index.mdx b/apps/website/src/routes/docs/headless/carousel/index.mdx index 8ecda9571..3fd815402 100644 --- a/apps/website/src/routes/docs/headless/carousel/index.mdx +++ b/apps/website/src/routes/docs/headless/carousel/index.mdx @@ -1,5 +1,7 @@ import { statusByComponent } from '~/_state/component-statuses'; + import { FeatureList } from '~/components/feature-list/feature-list'; + import { Note } from '~/components/note/note'; @@ -43,3 +45,5 @@ This component also intends to be more accessible with a powerful API. The component itself does include headless logic, but also uses the flex layout algorithm, and is in sort of a "gray" zone betweeen styled / unstyled. In the future, we would prefer a polished headless component (devoid of styles for most part). + + diff --git a/packages/kit-headless/src/components/carousel/carousel-viewport.tsx b/packages/kit-headless/src/components/carousel/carousel-viewport.tsx index 3925c7e67..4d479cd74 100644 --- a/packages/kit-headless/src/components/carousel/carousel-viewport.tsx +++ b/packages/kit-headless/src/components/carousel/carousel-viewport.tsx @@ -1,33 +1,11 @@ -import { - component$, - type PropsOf, - Slot, - useContext, - $, - useSignal, - useTask$, -} from '@builder.io/qwik'; +import { component$, type PropsOf, Slot, useContext, $ } from '@builder.io/qwik'; import CarouselContextId from './carousel-context-id'; -import { isBrowser } from '@builder.io/qwik/build'; type CarouselViewportProps = PropsOf<'div'>; export const HCarouselView = component$((props: CarouselViewportProps) => { const context = useContext(CarouselContextId); - const totalWidthSig = useSignal(0); - - useTask$(({ track }) => { - track(() => context.isDraggingSig.value); - - if (isBrowser) { - totalWidthSig.value = - context.numSlidesSig.value * - context.slideRefsArray.value[0].value.offsetWidth * - -1; - } - }); - const handlePointerMove$ = $((e: PointerEvent) => { if (context.isDraggingSig.value) { if (!context.containerRef.value) { From 7650e9755743039fae31b5a1d5bb76656d4a1f5c Mon Sep 17 00:00:00 2001 From: jack shelton Date: Thu, 18 Jul 2024 12:32:03 -0500 Subject: [PATCH 03/86] add expectation --- .../kit-headless/src/components/carousel/carousel.test.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/kit-headless/src/components/carousel/carousel.test.ts b/packages/kit-headless/src/components/carousel/carousel.test.ts index 6100fe473..0649f58b4 100644 --- a/packages/kit-headless/src/components/carousel/carousel.test.ts +++ b/packages/kit-headless/src/components/carousel/carousel.test.ts @@ -1,4 +1,4 @@ -import { test, type Page } from '@playwright/test'; +import { test, type Page, expect } from '@playwright/test'; import { createTestDriver } from './carousel.driver'; async function setup(page: Page, exampleName: string) { @@ -19,5 +19,7 @@ test.describe('Mouse Behavior', () => { const { driver: d } = await setup(page, 'hero'); await d.getNextButton().click(); + + await expect(d.getSlideAt(1)).toBeVisible(); }); }); From 8248ff84e73e43465cdb246163cce4b27d352d6f Mon Sep 17 00:00:00 2001 From: jack shelton Date: Thu, 18 Jul 2024 16:21:43 -0500 Subject: [PATCH 04/86] test: added test cases --- .../src/components/carousel/carousel.test.ts | 254 ++++++++++++++++++ .../src/components/carousel/carousel.tsx | 2 +- 2 files changed, 255 insertions(+), 1 deletion(-) diff --git a/packages/kit-headless/src/components/carousel/carousel.test.ts b/packages/kit-headless/src/components/carousel/carousel.test.ts index 0649f58b4..835137665 100644 --- a/packages/kit-headless/src/components/carousel/carousel.test.ts +++ b/packages/kit-headless/src/components/carousel/carousel.test.ts @@ -1,5 +1,6 @@ import { test, type Page, expect } from '@playwright/test'; import { createTestDriver } from './carousel.driver'; +import { AxeBuilder } from '@axe-core/playwright'; async function setup(page: Page, exampleName: string) { await page.goto(`headless/carousel/${exampleName}`); @@ -16,10 +17,263 @@ test.describe('Mouse Behavior', () => { WHEN clicking on the next button THEN it should move to the next slide `, async ({ page }) => { + /* + example that gets used goes here. In this case it's hero from: + apps/website/src/routes/docs/headless/carousel/examples/hero.tsx + + If you type in 'test' in the setup parameter it will look for the test.tsx file + */ const { driver: d } = await setup(page, 'hero'); await d.getNextButton().click(); await expect(d.getSlideAt(1)).toBeVisible(); }); + + test(`GIVEN a carousel + WHEN clicking on the previous button + THEN it should move to the previous slide + `, async ({ page }) => { + const { driver: d } = await setup(page, 'hero'); + + // initial setup (if this gets used often we can make it a function in dthe drriver) + await d.getNextButton().click(); + await expect(d.getSlideAt(1)).toBeVisible(); + + // test previous work + }); + + test(`GIVEN a carousel with dragging enabled + WHEN using a pointer device and dragging to the left + THEN it should move to the next slide + `, async ({ page }) => { + const { driver: d } = await setup(page, 'hero'); + + // remove this (there so that TS doesn't complain) + d; + + // TODO + }); + + test(`GIVEN a carousel with dragging enabled + WHEN using a pointer device and dragging to the right + THEN it should move to the previous slide +`, async ({ page }) => { + const { driver: d } = await setup(page, 'hero'); + + // remove this (there so that TS doesn't complain) + d; + + // TODO + }); + + test(`GIVEN a carousel with a pagination control + WHEN clicking on the pagination bullets + THEN it should move to the corresponding slide +`, async ({ page }) => { + const { driver: d } = await setup(page, 'hero'); + + // remove this (there so that TS doesn't complain) + d; + + // TODO + }); +}); + +test.describe('Keyboard Behavior', () => { + test(`GIVEN a carousel + WHEN the enter key is pressed on the focused next button + THEN it should move to the next slide + `, async ({ page }) => { + const { driver: d } = await setup(page, 'hero'); + + await d.getNextButton().press('Enter'); + + await expect(d.getSlideAt(1)).toBeVisible(); + }); + + test(`GIVEN a carousel + WHEN the enter key is pressed on the focused previous button + THEN it should move to the previous slide + `, async ({ page }) => { + const { driver: d } = await setup(page, 'hero'); + + // remove this (there so that TS doesn't complain) + d; + + // TODO + }); + + test(`GIVEN a carousel with a pagination control + WHEN the first bullet is focused and the right arrow key is pressed + THEN focus should move to the next bullet +`, async ({ page }) => { + const { driver: d } = await setup(page, 'hero'); + + // remove this (there so that TS doesn't complain) + d; + + // TODO + }); + + test(`GIVEN a carousel with a pagination control + WHEN the 2nd bullet is focused and the left arrow key is pressed + THEN focus should move to the previous bullet +`, async ({ page }) => { + const { driver: d } = await setup(page, 'hero'); + + // remove this (there so that TS doesn't complain) + d; + + // TODO + }); +}); + +test.describe('Mobile / Touch Behavior', () => { + test(`GIVEN a carousel with dragging enabled + WHEN swiping to the left + THEN it should move to the next slide +`, async ({ page }) => { + const { driver: d } = await setup(page, 'hero'); + + // remove this (there so that TS doesn't complain) + d; + + // TODO + }); + + test(`GIVEN a carousel with dragging enabled + WHEN swiping to the right + THEN it should move to the previous slide +`, async ({ page }) => { + const { driver: d } = await setup(page, 'hero'); + + // remove this (there so that TS doesn't complain) + d; + + // TODO + }); + + test(`GIVEN a carousel with a pagination control + WHEN tapping on the pagination bullets + THEN it should move to the corresponding slide +`, async ({ page }) => { + const { driver: d } = await setup(page, 'hero'); + + // remove this (there so that TS doesn't complain) + d; + + // TODO + }); }); + +test.describe('Accessibility', () => { + test('Axe Validation Test', async ({ page }) => { + await setup(page, 'hero'); + + const initialResults = await new AxeBuilder({ page }) + .include('[data-qui-carousel]') + .analyze(); + + expect(initialResults.violations).toEqual([]); + }); + + test(`GIVEN a carousel + WHEN it is rendered + THEN it should have an accessible name +`, async ({ page }) => { + const { driver: d } = await setup(page, 'hero'); + + // remove this (there so that TS doesn't complain) + d; + + // TODO + }); + + test(`GIVEN a carousel + WHEN it is rendered + THEN the carousel container should have the role of group +`, async ({ page }) => { + const { driver: d } = await setup(page, 'hero'); + + // remove this (there so that TS doesn't complain) + d; + + // TODO + }); + + test(`GIVEN a carousel + WHEN it is rendered + THEN the items should have a posinset of its current index +`, async ({ page }) => { + const { driver: d } = await setup(page, 'hero'); + + // remove this (there so that TS doesn't complain) + d; + + // TODO + }); + + test(`GIVEN a carousel with a pagination control + WHEN it is rendered + THEN the control should have the role of navigation +`, async ({ page }) => { + const { driver: d } = await setup(page, 'hero'); + + // remove this (there so that TS doesn't complain) + d; + + // TODO + }); + + test(`GIVEN a carousel with a pagination control + WHEN it is rendered + THEN each bullet should have the role of tab +`, async ({ page }) => { + const { driver: d } = await setup(page, 'hero'); + + // remove this (there so that TS doesn't complain) + d; + + // TODO + }); + + // it should also have aria-live polite and announce the current slide + + test(`GIVEN a carousel + WHEN a slide is not the current slide + THEN it should be inert +`, async ({ page }) => { + const { driver: d } = await setup(page, 'hero'); + + // remove this (there so that TS doesn't complain) + d; + + // TODO + }); + + test(`GIVEN a carousel + WHEN on the current slide + THEN items inside the slide should be the only focusable items +`, async ({ page }) => { + const { driver: d } = await setup(page, 'hero'); + + // remove this (there so that TS doesn't complain) + d; + + // TODO + }); +}); + +// TODO: finish test cases, create new ones based on the expected behavior in Figma. + +// Getting a failing test when the test is expected to work helps us find bugs. + +// https://www.w3.org/WAI/ARIA/apg/patterns/carousel/ <-- another good resource for what functionality is expected + +/** + * + * When there is a use case that the default hero.tsx example doesn't cover, add a new test file in the docs headless/carousel/examples folder. + * + * + */ diff --git a/packages/kit-headless/src/components/carousel/carousel.tsx b/packages/kit-headless/src/components/carousel/carousel.tsx index c4ece9c04..2ce0cd43a 100644 --- a/packages/kit-headless/src/components/carousel/carousel.tsx +++ b/packages/kit-headless/src/components/carousel/carousel.tsx @@ -51,7 +51,7 @@ export const HCarousel = component$( useContextProvider(CarouselContextId, context); return ( -
+
Slide {context.currentIndexSig.value} of {context.numSlidesSig.value} From f1d02fb7dfae723dc7899682dde155588f7490c7 Mon Sep 17 00:00:00 2001 From: jack shelton Date: Thu, 18 Jul 2024 21:43:40 -0500 Subject: [PATCH 05/86] test: some additional test cases --- .../src/components/carousel/carousel.test.ts | 74 +++++++++++++++++++ 1 file changed, 74 insertions(+) diff --git a/packages/kit-headless/src/components/carousel/carousel.test.ts b/packages/kit-headless/src/components/carousel/carousel.test.ts index 835137665..34acd154e 100644 --- a/packages/kit-headless/src/components/carousel/carousel.test.ts +++ b/packages/kit-headless/src/components/carousel/carousel.test.ts @@ -263,6 +263,80 @@ test.describe('Accessibility', () => { // TODO }); + + test(`GIVEN a carousel with loop disabled + WHEN on the last slide + THEN the previous button should be focused +`, async ({ page }) => { + const { driver: d } = await setup(page, 'hero'); + + // remove this (there so that TS doesn't complain) + d; + + // TODO + }); + + test(`GIVEN a carousel with loop disabled + WHEN on the first slide + THEN the next button should be focused +`, async ({ page }) => { + const { driver: d } = await setup(page, 'hero'); + + // remove this (there so that TS doesn't complain) + d; + + // TODO + }); +}); + +test.describe('Behavior', () => { + test(`GIVEN a carousel with loop disabled + WHEN on the last slide + THEN the next button should be disabled +`, async ({ page }) => { + const { driver: d } = await setup(page, 'hero'); + + // remove this (there so that TS doesn't complain) + d; + + // TODO + }); + + test(`GIVEN a carousel with loop disabled + WHEN on the first slide + THEN the previous button should be disabled +`, async ({ page }) => { + const { driver: d } = await setup(page, 'hero'); + + // remove this (there so that TS doesn't complain) + d; + + // TODO + }); + + test(`GIVEN a carousel with loop enabled + WHEN on the last slide and the next button is clicked + THEN it should move to the first slide +`, async ({ page }) => { + const { driver: d } = await setup(page, 'hero'); + + // remove this (there so that TS doesn't complain) + d; + + // TODO + }); + + test(`GIVEN a carousel with loop enabled + WHEN on the first slide and the previous button is clicked + THEN it should move to the first slide +`, async ({ page }) => { + const { driver: d } = await setup(page, 'hero'); + + // remove this (there so that TS doesn't complain) + d; + + // TODO + }); }); // TODO: finish test cases, create new ones based on the expected behavior in Figma. From 5a652167772086a9f9b022ea4194853f0b10e225 Mon Sep 17 00:00:00 2001 From: jack shelton Date: Thu, 18 Jul 2024 21:57:23 -0500 Subject: [PATCH 06/86] not draggable --- .../src/routes/docs/headless/carousel/examples/hero.tsx | 1 + .../src/components/carousel/carousel-context.type.ts | 4 +++- .../src/components/carousel/carousel-viewport.tsx | 6 ++++-- .../kit-headless/src/components/carousel/carousel.css | 8 ++++++++ .../kit-headless/src/components/carousel/carousel.tsx | 7 +++++-- packages/kit-headless/src/components/carousel/slide.tsx | 6 +++--- 6 files changed, 24 insertions(+), 8 deletions(-) diff --git a/apps/website/src/routes/docs/headless/carousel/examples/hero.tsx b/apps/website/src/routes/docs/headless/carousel/examples/hero.tsx index 0eaa8a7bf..96eeaaeba 100644 --- a/apps/website/src/routes/docs/headless/carousel/examples/hero.tsx +++ b/apps/website/src/routes/docs/headless/carousel/examples/hero.tsx @@ -97,6 +97,7 @@ export default component$(() => { bind:currSlideIndex={currentIndexSig} spaceBetweenSlides={30} class="carousel" + draggable={false} >
Prev diff --git a/packages/kit-headless/src/components/carousel/carousel-context.type.ts b/packages/kit-headless/src/components/carousel/carousel-context.type.ts index 49982f158..c5317604e 100644 --- a/packages/kit-headless/src/components/carousel/carousel-context.type.ts +++ b/packages/kit-headless/src/components/carousel/carousel-context.type.ts @@ -1,6 +1,8 @@ import { type Signal } from '@builder.io/qwik'; export interface CarouselContext { + draggable: boolean; + // source of truth slideOffsetSig: Signal; numSlidesSig: Signal; @@ -22,7 +24,7 @@ export interface CarouselContext { currentIndexSig: Signal; // dragging - isDraggingSig: Signal; + isMouseDraggingSig: Signal; initialX: Signal; initialTransformX: Signal; } diff --git a/packages/kit-headless/src/components/carousel/carousel-viewport.tsx b/packages/kit-headless/src/components/carousel/carousel-viewport.tsx index 4d479cd74..7fae59c03 100644 --- a/packages/kit-headless/src/components/carousel/carousel-viewport.tsx +++ b/packages/kit-headless/src/components/carousel/carousel-viewport.tsx @@ -7,7 +7,7 @@ export const HCarouselView = component$((props: CarouselViewportProps) => { const context = useContext(CarouselContextId); const handlePointerMove$ = $((e: PointerEvent) => { - if (context.isDraggingSig.value) { + if (context.isMouseDraggingSig.value) { if (!context.containerRef.value) { return; } @@ -78,6 +78,8 @@ export const HCarouselView = component$((props: CarouselViewportProps) => { return (
{ + if (!context.draggable) return; + // Do nothing if this is not the primary button (e.g., right click). if (e.pointerType === 'mouse' && e.button !== 0) { return; @@ -89,7 +91,7 @@ export const HCarouselView = component$((props: CarouselViewportProps) => { const matrix = new DOMMatrix(style.transform); context.initialTransformX.value = matrix.m41; - context.isDraggingSig.value = true; + context.isMouseDraggingSig.value = true; } window.addEventListener('pointermove', handlePointerMove$); diff --git a/packages/kit-headless/src/components/carousel/carousel.css b/packages/kit-headless/src/components/carousel/carousel.css index e69de29bb..a7abf0b23 100644 --- a/packages/kit-headless/src/components/carousel/carousel.css +++ b/packages/kit-headless/src/components/carousel/carousel.css @@ -0,0 +1,8 @@ +@layer qwik-ui { + @media (pointer: coarse) { + [data-qui-carousel-container][data-draggable] { + scroll-snap-type: x mandatory; + overflow: scroll; + } + } +} diff --git a/packages/kit-headless/src/components/carousel/carousel.tsx b/packages/kit-headless/src/components/carousel/carousel.tsx index 2ce0cd43a..28e92ff50 100644 --- a/packages/kit-headless/src/components/carousel/carousel.tsx +++ b/packages/kit-headless/src/components/carousel/carousel.tsx @@ -13,12 +13,14 @@ import { VisuallyHidden } from '../../utils/visually-hidden'; export type CarouselRootProps = PropsOf<'section'> & { spaceBetweenSlides?: number; 'bind:currSlideIndex'?: Signal; + draggable?: boolean; }; export const HCarousel = component$( ({ spaceBetweenSlides = 0, 'bind:currSlideIndex': givenSlideIndexSig, + draggable = true, ...props }: CarouselRootProps) => { const defaultIndexSig = useSignal(0); @@ -29,12 +31,13 @@ export const HCarousel = component$( const transitionDurationSig = useSignal(0); const viewportRef = useSignal(); const containerRef = useSignal(); - const isDraggingSig = useSignal(false); + const isMouseDraggingSig = useSignal(false); const initialX = useSignal(0); const initialTransformX = useSignal(0); const slideRefsArray = useSignal>([]); const context: CarouselContext = { + draggable, slideOffsetSig, currentIndexSig, numSlidesSig, @@ -42,7 +45,7 @@ export const HCarousel = component$( viewportRef, containerRef, spaceBetweenSlides, - isDraggingSig, + isMouseDraggingSig, initialX, initialTransformX, slideRefsArray, diff --git a/packages/kit-headless/src/components/carousel/slide.tsx b/packages/kit-headless/src/components/carousel/slide.tsx index 91169b087..b927dbe19 100644 --- a/packages/kit-headless/src/components/carousel/slide.tsx +++ b/packages/kit-headless/src/components/carousel/slide.tsx @@ -18,7 +18,7 @@ export const HCarouselSlide = component$(({ ...props }: CarouselSlideProps) => { const localIndexSig = useSignal(null); const handlePointerUp$ = $(() => { - context.isDraggingSig.value = false; + context.isMouseDraggingSig.value = false; if (!context.containerRef.value || !slideRef.value) { return; @@ -78,11 +78,11 @@ export const HCarouselSlide = component$(({ ...props }: CarouselSlideProps) => { }); useTask$(({ track }) => { - track(() => context.isDraggingSig.value); + track(() => context.isMouseDraggingSig.value); if (isServer) return; - context.isDraggingSig.value + context.isMouseDraggingSig.value ? window.addEventListener('pointerup', handlePointerUp$) : window.removeEventListener('pointerup', handlePointerUp$); }); From 7308a7c744dbabbb78c184efca1f58f4cb09eaa2 Mon Sep 17 00:00:00 2001 From: jack shelton Date: Thu, 18 Jul 2024 22:17:32 -0500 Subject: [PATCH 07/86] CSS scroll snapping on mobile --- .../routes/docs/headless/carousel/examples/carousel.css | 2 -- .../src/routes/docs/headless/carousel/examples/hero.tsx | 1 - .../src/components/carousel/carousel-container.tsx | 4 ++++ .../src/components/carousel/carousel-context.type.ts | 2 +- .../src/components/carousel/carousel-viewport.tsx | 6 +++--- .../kit-headless/src/components/carousel/carousel.css | 6 +++++- .../kit-headless/src/components/carousel/carousel.tsx | 9 ++++++--- 7 files changed, 19 insertions(+), 11 deletions(-) diff --git a/apps/website/src/routes/docs/headless/carousel/examples/carousel.css b/apps/website/src/routes/docs/headless/carousel/examples/carousel.css index b280c8e79..446f9ecd9 100644 --- a/apps/website/src/routes/docs/headless/carousel/examples/carousel.css +++ b/apps/website/src/routes/docs/headless/carousel/examples/carousel.css @@ -9,11 +9,9 @@ .carousel-container { backface-visibility: hidden; display: flex; - touch-action: pan-y; margin-left: calc(var(--slide-spacing) * -1); transition-property: transform; transition-timing-function: ease; - overflow-x: visible; padding-block: 0.5rem; } diff --git a/apps/website/src/routes/docs/headless/carousel/examples/hero.tsx b/apps/website/src/routes/docs/headless/carousel/examples/hero.tsx index 96eeaaeba..0eaa8a7bf 100644 --- a/apps/website/src/routes/docs/headless/carousel/examples/hero.tsx +++ b/apps/website/src/routes/docs/headless/carousel/examples/hero.tsx @@ -97,7 +97,6 @@ export default component$(() => { bind:currSlideIndex={currentIndexSig} spaceBetweenSlides={30} class="carousel" - draggable={false} >
Prev diff --git a/packages/kit-headless/src/components/carousel/carousel-container.tsx b/packages/kit-headless/src/components/carousel/carousel-container.tsx index fab50dfd8..38ec937bc 100644 --- a/packages/kit-headless/src/components/carousel/carousel-container.tsx +++ b/packages/kit-headless/src/components/carousel/carousel-container.tsx @@ -1,10 +1,13 @@ import { component$, type PropsOf, Slot, useContext } from '@builder.io/qwik'; import CarouselContextId from './carousel-context-id'; +import { useStyles$ } from '@builder.io/qwik'; +import styles from './carousel.css?inline'; type CarouselContainerProps = PropsOf<'div'>; export const HCarouselContainer = component$((props: CarouselContainerProps) => { const context = useContext(CarouselContextId); + useStyles$(styles); return (
transitionDuration: `${context.transitionDurationSig.value}ms`, transitionDelay: '0ms', }} + data-draggable={context.isDraggableSig.value ? '' : undefined} data-qui-carousel-container {...props} > diff --git a/packages/kit-headless/src/components/carousel/carousel-context.type.ts b/packages/kit-headless/src/components/carousel/carousel-context.type.ts index c5317604e..a2eb64046 100644 --- a/packages/kit-headless/src/components/carousel/carousel-context.type.ts +++ b/packages/kit-headless/src/components/carousel/carousel-context.type.ts @@ -1,7 +1,7 @@ import { type Signal } from '@builder.io/qwik'; export interface CarouselContext { - draggable: boolean; + isDraggableSig: Signal; // source of truth slideOffsetSig: Signal; diff --git a/packages/kit-headless/src/components/carousel/carousel-viewport.tsx b/packages/kit-headless/src/components/carousel/carousel-viewport.tsx index 7fae59c03..b92315e12 100644 --- a/packages/kit-headless/src/components/carousel/carousel-viewport.tsx +++ b/packages/kit-headless/src/components/carousel/carousel-viewport.tsx @@ -78,10 +78,10 @@ export const HCarouselView = component$((props: CarouselViewportProps) => { return (
{ - if (!context.draggable) return; + if (!context.isDraggableSig.value) return; - // Do nothing if this is not the primary button (e.g., right click). - if (e.pointerType === 'mouse' && e.button !== 0) { + // Check if the device is a pointer device + if (e.pointerType !== 'mouse' && e.pointerType !== 'pen') { return; } diff --git a/packages/kit-headless/src/components/carousel/carousel.css b/packages/kit-headless/src/components/carousel/carousel.css index a7abf0b23..fd23a9e2e 100644 --- a/packages/kit-headless/src/components/carousel/carousel.css +++ b/packages/kit-headless/src/components/carousel/carousel.css @@ -2,7 +2,11 @@ @media (pointer: coarse) { [data-qui-carousel-container][data-draggable] { scroll-snap-type: x mandatory; - overflow: scroll; + overflow-x: scroll; + } + + [data-draggable] [data-qui-carousel-slide] { + scroll-snap-align: start; } } } diff --git a/packages/kit-headless/src/components/carousel/carousel.tsx b/packages/kit-headless/src/components/carousel/carousel.tsx index 28e92ff50..58129e37d 100644 --- a/packages/kit-headless/src/components/carousel/carousel.tsx +++ b/packages/kit-headless/src/components/carousel/carousel.tsx @@ -5,6 +5,7 @@ import { component$, useContextProvider, useSignal, + useComputed$, } from '@builder.io/qwik'; import { type CarouselContext } from './carousel-context.type'; import CarouselContextId from './carousel-context-id'; @@ -20,7 +21,6 @@ export const HCarousel = component$( ({ spaceBetweenSlides = 0, 'bind:currSlideIndex': givenSlideIndexSig, - draggable = true, ...props }: CarouselRootProps) => { const defaultIndexSig = useSignal(0); @@ -35,9 +35,13 @@ export const HCarousel = component$( const initialX = useSignal(0); const initialTransformX = useSignal(0); const slideRefsArray = useSignal>([]); + const isDraggableSig = useComputed$(() => { + return props.draggable ?? true; + }); const context: CarouselContext = { - draggable, + isDraggableSig, + isMouseDraggingSig, slideOffsetSig, currentIndexSig, numSlidesSig, @@ -45,7 +49,6 @@ export const HCarousel = component$( viewportRef, containerRef, spaceBetweenSlides, - isMouseDraggingSig, initialX, initialTransformX, slideRefsArray, From aa2785de826d21ee5914fe1f432b3557866c95bf Mon Sep 17 00:00:00 2001 From: jack shelton Date: Thu, 18 Jul 2024 22:23:19 -0500 Subject: [PATCH 08/86] threshold tests --- .../src/components/carousel/carousel.test.ts | 50 +++++++++++++++++++ 1 file changed, 50 insertions(+) diff --git a/packages/kit-headless/src/components/carousel/carousel.test.ts b/packages/kit-headless/src/components/carousel/carousel.test.ts index 34acd154e..4ad054284 100644 --- a/packages/kit-headless/src/components/carousel/carousel.test.ts +++ b/packages/kit-headless/src/components/carousel/carousel.test.ts @@ -337,6 +337,56 @@ test.describe('Behavior', () => { // TODO }); + + test.describe('Threshold', () => { + test(`GIVEN a carousel with dragging enabled + WHEN on the first slide and the mouse is moved far right + THEN it should stay snapped on the first slide +`, async ({ page }) => { + const { driver: d } = await setup(page, 'hero'); + + // remove this (there so that TS doesn't complain) + d; + + // TODO + }); + + test(`GIVEN a carousel with dragging enabled + WHEN on the last slide and the mouse is moved far left + THEN it should stay snapped on the last slide +`, async ({ page }) => { + const { driver: d } = await setup(page, 'hero'); + + // remove this (there so that TS doesn't complain) + d; + + // TODO + }); + + test(`GIVEN a carousel with dragging enabled + WHEN on the first slide and is swiped far left + THEN it should stay snapped on the last slide +`, async ({ page }) => { + const { driver: d } = await setup(page, 'hero'); + + // remove this (there so that TS doesn't complain) + d; + + // TODO + }); + + test(`GIVEN a carousel with dragging enabled + WHEN on the last slide and is swiped far right + THEN it should stay snapped on the first slide +`, async ({ page }) => { + const { driver: d } = await setup(page, 'hero'); + + // remove this (there so that TS doesn't complain) + d; + + // TODO + }); + }); }); // TODO: finish test cases, create new ones based on the expected behavior in Figma. From f03f0c8905c694721e58d9a798ce9c156e1a1d27 Mon Sep 17 00:00:00 2001 From: jack shelton Date: Thu, 18 Jul 2024 22:46:32 -0500 Subject: [PATCH 09/86] try simpler code refactor --- .../headless/carousel/examples/carousel.css | 4 + .../docs/headless/carousel/examples/csr.tsx | 50 ++----- .../docs/headless/carousel/examples/hero.tsx | 131 ++---------------- .../headless/carousel/examples/images.tsx | 116 ++++++++++++++++ .../src/components/carousel/bullet.tsx | 15 ++ .../carousel/carousel-context-id.ts | 6 - .../src/components/carousel/carousel.test.ts | 2 +- .../{carousel-container.tsx => container.tsx} | 6 +- .../{carousel-context.type.ts => context.ts} | 4 + .../{carousel.driver.ts => driver.ts} | 0 .../src/components/carousel/index.ts | 14 +- .../carousel/{next-button.tsx => next.tsx} | 9 +- .../src/components/carousel/pagination.tsx | 41 ++---- .../{prev-button.tsx => previous.tsx} | 9 +- .../carousel/{carousel.tsx => root.tsx} | 7 +- .../src/components/carousel/slide.tsx | 6 +- .../src/components/carousel/types.ts | 3 - .../{carousel-viewport.tsx => viewport.tsx} | 6 +- packages/kit-headless/tsconfig.editor.json | 7 +- packages/kit-headless/tsconfig.lib.json | 8 +- 20 files changed, 213 insertions(+), 231 deletions(-) create mode 100644 apps/website/src/routes/docs/headless/carousel/examples/images.tsx create mode 100644 packages/kit-headless/src/components/carousel/bullet.tsx delete mode 100644 packages/kit-headless/src/components/carousel/carousel-context-id.ts rename packages/kit-headless/src/components/carousel/{carousel-container.tsx => container.tsx} (78%) rename packages/kit-headless/src/components/carousel/{carousel-context.type.ts => context.ts} (83%) rename packages/kit-headless/src/components/carousel/{carousel.driver.ts => driver.ts} (100%) rename packages/kit-headless/src/components/carousel/{next-button.tsx => next.tsx} (63%) rename packages/kit-headless/src/components/carousel/{prev-button.tsx => previous.tsx} (61%) rename packages/kit-headless/src/components/carousel/{carousel.tsx => root.tsx} (89%) delete mode 100644 packages/kit-headless/src/components/carousel/types.ts rename packages/kit-headless/src/components/carousel/{carousel-viewport.tsx => viewport.tsx} (95%) diff --git a/apps/website/src/routes/docs/headless/carousel/examples/carousel.css b/apps/website/src/routes/docs/headless/carousel/examples/carousel.css index 446f9ecd9..d400b78f1 100644 --- a/apps/website/src/routes/docs/headless/carousel/examples/carousel.css +++ b/apps/website/src/routes/docs/headless/carousel/examples/carousel.css @@ -23,6 +23,10 @@ transition-property: transform; border: 2px dotted hsl(var(--primary)); pointer-events: none; + min-height: 10rem; + display: flex; + justify-content: center; + align-items: center; } .carousel-pagination { diff --git a/apps/website/src/routes/docs/headless/carousel/examples/csr.tsx b/apps/website/src/routes/docs/headless/carousel/examples/csr.tsx index f0451f539..039c5834e 100644 --- a/apps/website/src/routes/docs/headless/carousel/examples/csr.tsx +++ b/apps/website/src/routes/docs/headless/carousel/examples/csr.tsx @@ -1,58 +1,36 @@ -import { $, component$, useSignal, useStyles$ } from '@builder.io/qwik'; - +import { component$, useSignal, useStyles$ } from '@builder.io/qwik'; import { Carousel } from '@qwik-ui/headless'; -import carouselStyles from './carousel.css?inline'; export default component$(() => { - /* TODO: document this to always have initial state to null. - Use defaultSlide instead for setting a slide on page load */ - const currentIndexSig = useSignal(0); - const renderCarousel = useSignal(false); - useStyles$(carouselStyles); + useStyles$(styles); - const nums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; + const colors = ['red', 'green', 'blue', 'yellow', 'purple', 'orange', 'pink']; + const renderCarousel = useSignal(false); return ( <> - + {renderCarousel.value && ( - +
- Prev + Prev Next
- {nums.map((num, index) => ( - - {index} + {colors.map((color) => ( + + {color} ))} -
- { - return ( -
(currentIndexSig.value = i)} - > - {i} -
- ); - })} - /> -
)} ); }); +// internal +import styles from './carousel.css?inline'; diff --git a/apps/website/src/routes/docs/headless/carousel/examples/hero.tsx b/apps/website/src/routes/docs/headless/carousel/examples/hero.tsx index 0eaa8a7bf..b08dd8092 100644 --- a/apps/website/src/routes/docs/headless/carousel/examples/hero.tsx +++ b/apps/website/src/routes/docs/headless/carousel/examples/hero.tsx @@ -1,139 +1,28 @@ -import { $, component$, useSignal, useStyles$ } from '@builder.io/qwik'; - +import { component$, useStyles$ } from '@builder.io/qwik'; import { Carousel } from '@qwik-ui/headless'; -import carouselStyles from './carousel.css?inline'; export default component$(() => { - /* TODO: document this to always have initial state to null. - Use defaultSlide instead for setting a slide on page load */ - const currentIndexSig = useSignal(0); - useStyles$(carouselStyles); + useStyles$(styles); - const slideImageMetadata = [ - { - id: '10', - author: 'Paul Jarvis', - width: 2500, - height: 1667, - url: 'https://unsplash.com/photos/6J--NXulQCs', - download_url: 'https://picsum.photos/id/10/2500/1667', - }, - { - id: '11', - author: 'Paul Jarvis', - width: 2500, - height: 1667, - url: 'https://unsplash.com/photos/Cm7oKel-X2Q', - download_url: 'https://picsum.photos/id/11/2500/1667', - }, - { - id: '12', - author: 'Paul Jarvis', - width: 2500, - height: 1667, - url: 'https://unsplash.com/photos/I_9ILwtsl_k', - download_url: 'https://picsum.photos/id/12/2500/1667', - }, - { - id: '13', - author: 'Paul Jarvis', - width: 2500, - height: 1667, - url: 'https://unsplash.com/photos/3MtiSMdnoCo', - download_url: 'https://picsum.photos/id/13/2500/1667', - }, - { - id: '14', - author: 'Paul Jarvis', - width: 2500, - height: 1667, - url: 'https://unsplash.com/photos/IQ1kOQTJrOQ', - download_url: 'https://picsum.photos/id/14/2500/1667', - }, - { - id: '15', - author: 'Paul Jarvis', - width: 2500, - height: 1667, - url: 'https://unsplash.com/photos/NYDo21ssGao', - download_url: 'https://picsum.photos/id/15/2500/1667', - }, - { - id: '16', - author: 'Paul Jarvis', - width: 2500, - height: 1667, - url: 'https://unsplash.com/photos/gkT4FfgHO5o', - download_url: 'https://picsum.photos/id/16/2500/1667', - }, - { - id: '17', - author: 'Paul Jarvis', - width: 2500, - height: 1667, - url: 'https://unsplash.com/photos/Ven2CV8IJ5A', - download_url: 'https://picsum.photos/id/17/2500/1667', - }, - { - id: '18', - author: 'Paul Jarvis', - width: 2500, - height: 1667, - url: 'https://unsplash.com/photos/Ps2n0rShqaM', - download_url: 'https://picsum.photos/id/18/2500/1667', - }, - { - id: '19', - author: 'Paul Jarvis', - width: 2500, - height: 1667, - url: 'https://unsplash.com/photos/P7Lh0usGcuk', - download_url: 'https://picsum.photos/id/19/2500/1667', - }, - ]; + const colors = ['red', 'green', 'blue', 'yellow', 'purple', 'orange', 'pink']; return ( - +
- Prev + Prev Next
- {slideImageMetadata.map((data) => ( - - {data.author} + {colors.map((color) => ( + + {color} ))} -
- { - return ( -
(currentIndexSig.value = i)} - > - {i} -
- ); - })} - /> -
); }); +// internal +import styles from './carousel.css?inline'; diff --git a/apps/website/src/routes/docs/headless/carousel/examples/images.tsx b/apps/website/src/routes/docs/headless/carousel/examples/images.tsx new file mode 100644 index 000000000..63c78abbd --- /dev/null +++ b/apps/website/src/routes/docs/headless/carousel/examples/images.tsx @@ -0,0 +1,116 @@ +import { component$, useStyles$ } from '@builder.io/qwik'; +import { Carousel } from '@qwik-ui/headless'; + +export default component$(() => { + useStyles$(styles); + + return ( + +
+ Prev + Next +
+ + + {slideImageMetadata.map((data) => ( + + {data.author} + + ))} + + + + ); +}); + +const slideImageMetadata = [ + { + id: '10', + author: 'Paul Jarvis', + width: 2500, + height: 1667, + url: 'https://unsplash.com/photos/6J--NXulQCs', + download_url: 'https://picsum.photos/id/10/2500/1667', + }, + { + id: '11', + author: 'Paul Jarvis', + width: 2500, + height: 1667, + url: 'https://unsplash.com/photos/Cm7oKel-X2Q', + download_url: 'https://picsum.photos/id/11/2500/1667', + }, + { + id: '12', + author: 'Paul Jarvis', + width: 2500, + height: 1667, + url: 'https://unsplash.com/photos/I_9ILwtsl_k', + download_url: 'https://picsum.photos/id/12/2500/1667', + }, + { + id: '13', + author: 'Paul Jarvis', + width: 2500, + height: 1667, + url: 'https://unsplash.com/photos/3MtiSMdnoCo', + download_url: 'https://picsum.photos/id/13/2500/1667', + }, + { + id: '14', + author: 'Paul Jarvis', + width: 2500, + height: 1667, + url: 'https://unsplash.com/photos/IQ1kOQTJrOQ', + download_url: 'https://picsum.photos/id/14/2500/1667', + }, + { + id: '15', + author: 'Paul Jarvis', + width: 2500, + height: 1667, + url: 'https://unsplash.com/photos/NYDo21ssGao', + download_url: 'https://picsum.photos/id/15/2500/1667', + }, + { + id: '16', + author: 'Paul Jarvis', + width: 2500, + height: 1667, + url: 'https://unsplash.com/photos/gkT4FfgHO5o', + download_url: 'https://picsum.photos/id/16/2500/1667', + }, + { + id: '17', + author: 'Paul Jarvis', + width: 2500, + height: 1667, + url: 'https://unsplash.com/photos/Ven2CV8IJ5A', + download_url: 'https://picsum.photos/id/17/2500/1667', + }, + { + id: '18', + author: 'Paul Jarvis', + width: 2500, + height: 1667, + url: 'https://unsplash.com/photos/Ps2n0rShqaM', + download_url: 'https://picsum.photos/id/18/2500/1667', + }, + { + id: '19', + author: 'Paul Jarvis', + width: 2500, + height: 1667, + url: 'https://unsplash.com/photos/P7Lh0usGcuk', + download_url: 'https://picsum.photos/id/19/2500/1667', + }, +]; + +// internal +import styles from './carousel.css?inline'; diff --git a/packages/kit-headless/src/components/carousel/bullet.tsx b/packages/kit-headless/src/components/carousel/bullet.tsx new file mode 100644 index 000000000..e04fd716c --- /dev/null +++ b/packages/kit-headless/src/components/carousel/bullet.tsx @@ -0,0 +1,15 @@ +import { PropsOf, Slot, component$ } from '@builder.io/qwik'; + +export const PaginationBullet = component$((props: PropsOf<'div'>) => { + // const context = useContext(carouselContextId); + + return ( +
+ +
+ ); +}); diff --git a/packages/kit-headless/src/components/carousel/carousel-context-id.ts b/packages/kit-headless/src/components/carousel/carousel-context-id.ts deleted file mode 100644 index b63a3db52..000000000 --- a/packages/kit-headless/src/components/carousel/carousel-context-id.ts +++ /dev/null @@ -1,6 +0,0 @@ -import { createContextId } from '@builder.io/qwik'; -import { type CarouselContext } from './carousel-context.type'; - -const CarouselContextId = createContextId('carousel-context'); - -export default CarouselContextId; diff --git a/packages/kit-headless/src/components/carousel/carousel.test.ts b/packages/kit-headless/src/components/carousel/carousel.test.ts index 4ad054284..7999ccdf9 100644 --- a/packages/kit-headless/src/components/carousel/carousel.test.ts +++ b/packages/kit-headless/src/components/carousel/carousel.test.ts @@ -1,5 +1,5 @@ import { test, type Page, expect } from '@playwright/test'; -import { createTestDriver } from './carousel.driver'; +import { createTestDriver } from './driver'; import { AxeBuilder } from '@axe-core/playwright'; async function setup(page: Page, exampleName: string) { diff --git a/packages/kit-headless/src/components/carousel/carousel-container.tsx b/packages/kit-headless/src/components/carousel/container.tsx similarity index 78% rename from packages/kit-headless/src/components/carousel/carousel-container.tsx rename to packages/kit-headless/src/components/carousel/container.tsx index 38ec937bc..b2e2c9e39 100644 --- a/packages/kit-headless/src/components/carousel/carousel-container.tsx +++ b/packages/kit-headless/src/components/carousel/container.tsx @@ -1,12 +1,12 @@ import { component$, type PropsOf, Slot, useContext } from '@builder.io/qwik'; -import CarouselContextId from './carousel-context-id'; +import { carouselContextId } from './context'; import { useStyles$ } from '@builder.io/qwik'; import styles from './carousel.css?inline'; type CarouselContainerProps = PropsOf<'div'>; -export const HCarouselContainer = component$((props: CarouselContainerProps) => { - const context = useContext(CarouselContextId); +export const CarouselContainer = component$((props: CarouselContainerProps) => { + const context = useContext(carouselContextId); useStyles$(styles); return ( diff --git a/packages/kit-headless/src/components/carousel/carousel-context.type.ts b/packages/kit-headless/src/components/carousel/context.ts similarity index 83% rename from packages/kit-headless/src/components/carousel/carousel-context.type.ts rename to packages/kit-headless/src/components/carousel/context.ts index a2eb64046..23a7dcbe7 100644 --- a/packages/kit-headless/src/components/carousel/carousel-context.type.ts +++ b/packages/kit-headless/src/components/carousel/context.ts @@ -1,3 +1,7 @@ +import { createContextId } from '@builder.io/qwik'; + +export const carouselContextId = createContextId('carousel-context'); + import { type Signal } from '@builder.io/qwik'; export interface CarouselContext { diff --git a/packages/kit-headless/src/components/carousel/carousel.driver.ts b/packages/kit-headless/src/components/carousel/driver.ts similarity index 100% rename from packages/kit-headless/src/components/carousel/carousel.driver.ts rename to packages/kit-headless/src/components/carousel/driver.ts diff --git a/packages/kit-headless/src/components/carousel/index.ts b/packages/kit-headless/src/components/carousel/index.ts index 77f643715..f5b0ca488 100644 --- a/packages/kit-headless/src/components/carousel/index.ts +++ b/packages/kit-headless/src/components/carousel/index.ts @@ -1,7 +1,7 @@ -export { HCarousel as Root } from './carousel'; -export { HCarouselView as View } from './carousel-viewport'; -export { HCarouselContainer as Container } from './carousel-container'; -export { HCarouselSlide as Slide } from './slide'; -export { HCarouselPrev as Prev } from './prev-button'; -export { HCarouselNext as Next } from './next-button'; -export { HCarouselPagination as Pagination } from './pagination'; +export { CarouselRoot as Root } from './root'; +export { CarouselView as View } from './viewport'; +export { CarouselContainer as Container } from './container'; +export { CarouselSlide as Slide } from './slide'; +export { CarouselPrevious as Previous } from './previous'; +export { CarouselNext as Next } from './next'; +export { CarouselPagination as Pagination } from './pagination'; diff --git a/packages/kit-headless/src/components/carousel/next-button.tsx b/packages/kit-headless/src/components/carousel/next.tsx similarity index 63% rename from packages/kit-headless/src/components/carousel/next-button.tsx rename to packages/kit-headless/src/components/carousel/next.tsx index 1745bab96..252654cff 100644 --- a/packages/kit-headless/src/components/carousel/next-button.tsx +++ b/packages/kit-headless/src/components/carousel/next.tsx @@ -1,10 +1,9 @@ -import { Slot, component$, useContext } from '@builder.io/qwik'; -import { type CarouselButtonProps } from './types'; -import CarouselContextId from './carousel-context-id'; +import { PropsOf, Slot, component$, useContext } from '@builder.io/qwik'; +import { carouselContextId } from './context'; import { VisuallyHidden } from '../../utils/visually-hidden'; -export const HCarouselNext = component$((props: CarouselButtonProps) => { - const context = useContext(CarouselContextId); +export const CarouselNext = component$((props: PropsOf<'button'>) => { + const context = useContext(carouselContextId); return ( {renderCarousel.value && ( - +
Prev Next diff --git a/apps/website/src/routes/docs/headless/carousel/examples/hero.tsx b/apps/website/src/routes/docs/headless/carousel/examples/hero.tsx index b08dd8092..813ca40b5 100644 --- a/apps/website/src/routes/docs/headless/carousel/examples/hero.tsx +++ b/apps/website/src/routes/docs/headless/carousel/examples/hero.tsx @@ -7,7 +7,7 @@ export default component$(() => { const colors = ['red', 'green', 'blue', 'yellow', 'purple', 'orange', 'pink']; return ( - +
Prev Next diff --git a/apps/website/src/routes/docs/headless/carousel/examples/images.tsx b/apps/website/src/routes/docs/headless/carousel/examples/images.tsx index 63c78abbd..535415537 100644 --- a/apps/website/src/routes/docs/headless/carousel/examples/images.tsx +++ b/apps/website/src/routes/docs/headless/carousel/examples/images.tsx @@ -5,7 +5,7 @@ export default component$(() => { useStyles$(styles); return ( - +
Prev Next diff --git a/packages/kit-headless/src/components/carousel/viewport.tsx b/packages/kit-headless/src/components/carousel/viewport.tsx index 1caf12637..15eef7603 100644 --- a/packages/kit-headless/src/components/carousel/viewport.tsx +++ b/packages/kit-headless/src/components/carousel/viewport.tsx @@ -75,34 +75,39 @@ export const CarouselView = component$((props: CarouselViewportProps) => { } }); - return ( -
{ - if (!context.isDraggableSig.value) return; + const handlePointerDown$ = $((e: PointerEvent) => { + if (!context.isDraggableSig.value) return; - // Check if the device is a pointer device - if (e.pointerType !== 'mouse' && e.pointerType !== 'pen') { - return; - } + // check if the device is a pointer device + if (e.pointerType !== 'mouse' && e.pointerType !== 'pen') { + return; + } - context.initialX.value = e.clientX; - if (context.containerRef.value) { - const style = window.getComputedStyle(context.containerRef.value); - const matrix = new DOMMatrix(style.transform); - context.initialTransformX.value = matrix.m41; + context.initialX.value = e.clientX; + if (context.containerRef.value) { + const style = window.getComputedStyle(context.containerRef.value); + const matrix = new DOMMatrix(style.transform); + context.initialTransformX.value = matrix.m41; - context.isMouseDraggingSig.value = true; - } + context.isMouseDraggingSig.value = true; + } - window.addEventListener('pointermove', handlePointerMove$); - }} - /* removes pointer move event from pointer up created in slide.tsx */ - window:onPointerUp$={() => - window.removeEventListener('pointermove', handlePointerMove$) - } + window.addEventListener('pointermove', handlePointerMove$); + }); + + const handleWindowPointerUp$ = $(() => { + /* removes pointer move event from pointer up created in slide.tsx */ + window.removeEventListener('pointermove', handlePointerMove$); + }); + + const handleTransitionEnd$ = $(() => (context.transitionDurationSig.value = 0)); + + return ( +
(context.transitionDurationSig.value = 0)} + onPointerDown$={[handlePointerDown$, props.onPointerDown$]} + window:onPointerUp$={[handleWindowPointerUp$, props['window:onPointerUp$']]} + onTransitionEnd$={[handleTransitionEnd$, props.onTransitionEnd$]} {...props} > From e2090ecd57a278b05f3406a057fd4ce5da052c72 Mon Sep 17 00:00:00 2001 From: jack shelton Date: Sat, 20 Jul 2024 20:10:42 -0500 Subject: [PATCH 13/86] use scorllLeft instead --- .../headless/carousel/examples/carousel.css | 9 -- .../src/components/carousel/carousel.css | 4 + .../src/components/carousel/container.tsx | 48 +++++++- .../src/components/carousel/viewport.tsx | 106 +----------------- 4 files changed, 48 insertions(+), 119 deletions(-) diff --git a/apps/website/src/routes/docs/headless/carousel/examples/carousel.css b/apps/website/src/routes/docs/headless/carousel/examples/carousel.css index a68b9ceef..4c0b02a39 100644 --- a/apps/website/src/routes/docs/headless/carousel/examples/carousel.css +++ b/apps/website/src/routes/docs/headless/carousel/examples/carousel.css @@ -2,17 +2,12 @@ --slide-size: 100%; --slide-height: 5rem; height: 100%; - max-width: 500px; - overflow: hidden; width: 100%; } .carousel-container { backface-visibility: hidden; display: flex; - margin-left: calc(var(--slide-spacing) * -1); - transition-property: transform; - transition-timing-function: ease; padding-block: 0.5rem; } @@ -21,13 +16,9 @@ min-width: 0; position: relative; user-select: none; - transition-property: transform; border: 2px dotted hsl(var(--primary)); pointer-events: none; min-height: 10rem; - display: flex; - justify-content: center; - align-items: center; } .carousel-pagination { diff --git a/packages/kit-headless/src/components/carousel/carousel.css b/packages/kit-headless/src/components/carousel/carousel.css index fd23a9e2e..4015d7dae 100644 --- a/packages/kit-headless/src/components/carousel/carousel.css +++ b/packages/kit-headless/src/components/carousel/carousel.css @@ -9,4 +9,8 @@ scroll-snap-align: start; } } + + [data-qui-carousel-container] { + overflow: hidden; + } } diff --git a/packages/kit-headless/src/components/carousel/container.tsx b/packages/kit-headless/src/components/carousel/container.tsx index b2e2c9e39..30bc5232d 100644 --- a/packages/kit-headless/src/components/carousel/container.tsx +++ b/packages/kit-headless/src/components/carousel/container.tsx @@ -1,4 +1,11 @@ -import { component$, type PropsOf, Slot, useContext } from '@builder.io/qwik'; +import { + component$, + type PropsOf, + Slot, + useContext, + useSignal, + $, +} from '@builder.io/qwik'; import { carouselContextId } from './context'; import { useStyles$ } from '@builder.io/qwik'; import styles from './carousel.css?inline'; @@ -8,17 +15,46 @@ type CarouselContainerProps = PropsOf<'div'>; export const CarouselContainer = component$((props: CarouselContainerProps) => { const context = useContext(carouselContextId); useStyles$(styles); + const isMouseDownSig = useSignal(false); + const startXSig = useSignal(); + const scrollLeftSig = useSignal(0); + + const handleMouseMove$ = $((e: MouseEvent) => { + if (!isMouseDownSig.value) return; + const x = e.pageX - context.containerRef.value.offsetLeft; + console.log('x', x); + const SCROLL_SPEED = 3; + const walk = (x - startXSig.value) * SCROLL_SPEED; + console.log('walk', walk); + context.containerRef.value.scrollLeft = scrollLeftSig.value - walk; + + console.log('carousel container', context.containerRef.value); + + console.log('scroll left', context.containerRef.value.scrollLeft); + console.log('move'); + }); + + const handleMouseDown$ = $((e: MouseEvent) => { + if (!context.isDraggableSig.value) return; + isMouseDownSig.value = true; + startXSig.value = e.pageX - context.containerRef.value.offsetLeft; + scrollLeftSig.value = context.containerRef.value.scrollLeft; + window.addEventListener('mousemove', handleMouseMove$); + }); + + const handleWindowMouseUp$ = $(() => { + isMouseDownSig.value = false; + window.removeEventListener('mousemove', handleMouseMove$); + }); return (
diff --git a/packages/kit-headless/src/components/carousel/viewport.tsx b/packages/kit-headless/src/components/carousel/viewport.tsx index 15eef7603..9cac33db2 100644 --- a/packages/kit-headless/src/components/carousel/viewport.tsx +++ b/packages/kit-headless/src/components/carousel/viewport.tsx @@ -1,4 +1,4 @@ -import { component$, type PropsOf, Slot, useContext, $ } from '@builder.io/qwik'; +import { component$, type PropsOf, Slot, useContext } from '@builder.io/qwik'; import { carouselContextId } from './context'; type CarouselViewportProps = PropsOf<'div'>; @@ -6,110 +6,8 @@ type CarouselViewportProps = PropsOf<'div'>; export const CarouselView = component$((props: CarouselViewportProps) => { const context = useContext(carouselContextId); - const handlePointerMove$ = $((e: PointerEvent) => { - if (context.isMouseDraggingSig.value) { - if (!context.containerRef.value) { - return; - } - - context.transitionDurationSig.value = 0; - - const deltaX = e.clientX - context.initialX.value; - - // const containerWidth = context.containerRef.value.scrollWidth; - const containerLeftOffset = context.initialTransformX.value + deltaX; - - if (containerLeftOffset > 50) { - return; - } - - // TODO: fix bug where pointer down before the animation ends (slow move) - - context.slideOffsetSig.value = containerLeftOffset; - - /* --- */ - - /* TODO: Optimize this by checking prev and next of current slides first */ - for (let i = 0; i < context.slideRefsArray.value.length; i++) { - const slideRef = context.slideRefsArray.value[i]; - - if (!context.containerRef.value || !slideRef.value) { - return; - } - - /* - TODO: figure out why a separate DOMMatrix is why dragging and the buttons work properly. - */ - const style = window.getComputedStyle(context.containerRef.value); - const matrix = new DOMMatrix(style.transform); - - const containerTranslateX = matrix.m41; - // How far to the left the slides container is shifted. - const absContainerTranslateX = Math.abs(containerTranslateX); - - if (!context.viewportRef.value) { - return; - } - - // How far the left edge of this slide is from the left of the slides container. - const slideSlideContainerLeftOffset = slideRef.value.offsetLeft; - // How far the right edge of this slide is from the left of the slides container - // (includes space between slide). - const slideRightEdgePos = - slideSlideContainerLeftOffset + - slideRef.value.offsetWidth + - context.spaceBetweenSlides; - - const carouselViewportWidth = context.viewportRef.value.offsetWidth; - const halfViewportWidth = carouselViewportWidth / 2; - - const isWithinBounds = - absContainerTranslateX > slideSlideContainerLeftOffset - halfViewportWidth && - absContainerTranslateX < slideRightEdgePos - halfViewportWidth; - - if (isWithinBounds) { - context.currentIndexSig.value = i || 0; - break; - } - } - } - }); - - const handlePointerDown$ = $((e: PointerEvent) => { - if (!context.isDraggableSig.value) return; - - // check if the device is a pointer device - if (e.pointerType !== 'mouse' && e.pointerType !== 'pen') { - return; - } - - context.initialX.value = e.clientX; - if (context.containerRef.value) { - const style = window.getComputedStyle(context.containerRef.value); - const matrix = new DOMMatrix(style.transform); - context.initialTransformX.value = matrix.m41; - - context.isMouseDraggingSig.value = true; - } - - window.addEventListener('pointermove', handlePointerMove$); - }); - - const handleWindowPointerUp$ = $(() => { - /* removes pointer move event from pointer up created in slide.tsx */ - window.removeEventListener('pointermove', handlePointerMove$); - }); - - const handleTransitionEnd$ = $(() => (context.transitionDurationSig.value = 0)); - return ( -
+
); From 282d572becd4a44e30678299472c2c7ea0ae0757 Mon Sep 17 00:00:00 2001 From: jack shelton Date: Sat, 20 Jul 2024 20:30:50 -0500 Subject: [PATCH 14/86] hacky impl --- .../docs/headless/carousel/examples/csr.tsx | 16 ++++----- .../docs/headless/carousel/examples/hero.tsx | 16 ++++----- .../src/components/carousel/index.ts | 2 +- .../carousel/{container.tsx => scroller.tsx} | 33 ++++++++++++++----- 4 files changed, 39 insertions(+), 28 deletions(-) rename packages/kit-headless/src/components/carousel/{container.tsx => scroller.tsx} (65%) diff --git a/apps/website/src/routes/docs/headless/carousel/examples/csr.tsx b/apps/website/src/routes/docs/headless/carousel/examples/csr.tsx index a4ba4ec7a..6bcfcb152 100644 --- a/apps/website/src/routes/docs/headless/carousel/examples/csr.tsx +++ b/apps/website/src/routes/docs/headless/carousel/examples/csr.tsx @@ -18,15 +18,13 @@ export default component$(() => { Prev Next
- - - {colors.map((color) => ( - - {color} - - ))} - - + + {colors.map((color) => ( + + {color} + + ))} + )} diff --git a/apps/website/src/routes/docs/headless/carousel/examples/hero.tsx b/apps/website/src/routes/docs/headless/carousel/examples/hero.tsx index 813ca40b5..cf3d308fb 100644 --- a/apps/website/src/routes/docs/headless/carousel/examples/hero.tsx +++ b/apps/website/src/routes/docs/headless/carousel/examples/hero.tsx @@ -12,15 +12,13 @@ export default component$(() => { Prev Next
- - - {colors.map((color) => ( - - {color} - - ))} - - + + {colors.map((color) => ( + + {color} + + ))} + ); }); diff --git a/packages/kit-headless/src/components/carousel/index.ts b/packages/kit-headless/src/components/carousel/index.ts index 1ad77841a..b53cf95ab 100644 --- a/packages/kit-headless/src/components/carousel/index.ts +++ b/packages/kit-headless/src/components/carousel/index.ts @@ -1,6 +1,6 @@ export { CarouselRoot as Root } from './inline'; export { CarouselView as View } from './viewport'; -export { CarouselContainer as Container } from './container'; +export { CarouselScroller as Scroller } from './scroller'; export { CarouselSlide as Slide } from './slide'; export { CarouselPrevious as Previous } from './previous'; export { CarouselNext as Next } from './next'; diff --git a/packages/kit-headless/src/components/carousel/container.tsx b/packages/kit-headless/src/components/carousel/scroller.tsx similarity index 65% rename from packages/kit-headless/src/components/carousel/container.tsx rename to packages/kit-headless/src/components/carousel/scroller.tsx index 30bc5232d..364ae1ccb 100644 --- a/packages/kit-headless/src/components/carousel/container.tsx +++ b/packages/kit-headless/src/components/carousel/scroller.tsx @@ -12,7 +12,7 @@ import styles from './carousel.css?inline'; type CarouselContainerProps = PropsOf<'div'>; -export const CarouselContainer = component$((props: CarouselContainerProps) => { +export const CarouselScroller = component$((props: CarouselContainerProps) => { const context = useContext(carouselContextId); useStyles$(styles); const isMouseDownSig = useSignal(false); @@ -20,18 +20,11 @@ export const CarouselContainer = component$((props: CarouselContainerProps) => { const scrollLeftSig = useSignal(0); const handleMouseMove$ = $((e: MouseEvent) => { - if (!isMouseDownSig.value) return; + if (!isMouseDownSig.value || startXSig.value === undefined) return; const x = e.pageX - context.containerRef.value.offsetLeft; - console.log('x', x); const SCROLL_SPEED = 3; const walk = (x - startXSig.value) * SCROLL_SPEED; - console.log('walk', walk); context.containerRef.value.scrollLeft = scrollLeftSig.value - walk; - - console.log('carousel container', context.containerRef.value); - - console.log('scroll left', context.containerRef.value.scrollLeft); - console.log('move'); }); const handleMouseDown$ = $((e: MouseEvent) => { @@ -43,8 +36,30 @@ export const CarouselContainer = component$((props: CarouselContainerProps) => { }); const handleWindowMouseUp$ = $(() => { + if (!context.containerRef.value) return; isMouseDownSig.value = false; window.removeEventListener('mousemove', handleMouseMove$); + + // snapping logic + const container = context.containerRef.value; + const slides = context.slideRefsArray.value; + const containerScrollLeft = container.scrollLeft; + let closestSlide = slides[0].value; + let minDistance = Math.abs(containerScrollLeft - closestSlide.offsetLeft); + + slides.forEach((slideRef) => { + if (!slideRef.value) return; + const distance = Math.abs(containerScrollLeft - slideRef.value.offsetLeft); + if (distance < minDistance) { + closestSlide = slideRef.value; + minDistance = distance; + } + }); + + container.scrollTo({ + left: closestSlide.offsetLeft, + behavior: 'smooth', + }); }); return ( From 585ad61579b3924cc317830a113ac75ae8611542 Mon Sep 17 00:00:00 2001 From: jack shelton Date: Sun, 21 Jul 2024 09:09:55 -0500 Subject: [PATCH 15/86] fix: slide snapping --- .../src/components/carousel/scroller.tsx | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) diff --git a/packages/kit-headless/src/components/carousel/scroller.tsx b/packages/kit-headless/src/components/carousel/scroller.tsx index 364ae1ccb..3bfc0ee44 100644 --- a/packages/kit-headless/src/components/carousel/scroller.tsx +++ b/packages/kit-headless/src/components/carousel/scroller.tsx @@ -16,19 +16,21 @@ export const CarouselScroller = component$((props: CarouselContainerProps) => { const context = useContext(carouselContextId); useStyles$(styles); const isMouseDownSig = useSignal(false); - const startXSig = useSignal(); + const startXSig = useSignal(); const scrollLeftSig = useSignal(0); const handleMouseMove$ = $((e: MouseEvent) => { if (!isMouseDownSig.value || startXSig.value === undefined) return; + if (!context.containerRef.value) return; const x = e.pageX - context.containerRef.value.offsetLeft; - const SCROLL_SPEED = 3; + const SCROLL_SPEED = 1.75; const walk = (x - startXSig.value) * SCROLL_SPEED; context.containerRef.value.scrollLeft = scrollLeftSig.value - walk; }); const handleMouseDown$ = $((e: MouseEvent) => { if (!context.isDraggableSig.value) return; + if (!context.containerRef.value) return; isMouseDownSig.value = true; startXSig.value = e.pageX - context.containerRef.value.offsetLeft; scrollLeftSig.value = context.containerRef.value.scrollLeft; @@ -44,6 +46,7 @@ export const CarouselScroller = component$((props: CarouselContainerProps) => { const container = context.containerRef.value; const slides = context.slideRefsArray.value; const containerScrollLeft = container.scrollLeft; + let closestSlide = slides[0].value; let minDistance = Math.abs(containerScrollLeft - closestSlide.offsetLeft); @@ -56,8 +59,12 @@ export const CarouselScroller = component$((props: CarouselContainerProps) => { } }); + // Ensure snapping to the closest full slide width + const slideWidth = closestSlide.getBoundingClientRect().width; + const snapPosition = Math.round(containerScrollLeft / slideWidth) * slideWidth; + container.scrollTo({ - left: closestSlide.offsetLeft, + left: snapPosition, behavior: 'smooth', }); }); From c81fbfe117bede346aebaafa9f6e4d25aa9da6c4 Mon Sep 17 00:00:00 2001 From: jack shelton Date: Sun, 21 Jul 2024 09:14:35 -0500 Subject: [PATCH 16/86] better naming --- packages/kit-headless/src/components/carousel/scroller.tsx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/packages/kit-headless/src/components/carousel/scroller.tsx b/packages/kit-headless/src/components/carousel/scroller.tsx index 3bfc0ee44..f57d7a1fc 100644 --- a/packages/kit-headless/src/components/carousel/scroller.tsx +++ b/packages/kit-headless/src/components/carousel/scroller.tsx @@ -37,12 +37,11 @@ export const CarouselScroller = component$((props: CarouselContainerProps) => { window.addEventListener('mousemove', handleMouseMove$); }); - const handleWindowMouseUp$ = $(() => { + const handleSnap$ = $(() => { if (!context.containerRef.value) return; isMouseDownSig.value = false; window.removeEventListener('mousemove', handleMouseMove$); - // snapping logic const container = context.containerRef.value; const slides = context.slideRefsArray.value; const containerScrollLeft = container.scrollLeft; @@ -73,7 +72,7 @@ export const CarouselScroller = component$((props: CarouselContainerProps) => {
Date: Sun, 21 Jul 2024 09:38:57 -0500 Subject: [PATCH 17/86] much simpler carousel --- .../src/components/carousel/index.ts | 1 - .../src/components/carousel/next.tsx | 2 - .../src/components/carousel/previous.tsx | 1 - .../src/components/carousel/slide.tsx | 96 ++----------------- .../src/components/carousel/utils.ts | 8 -- .../src/components/carousel/viewport.tsx | 14 --- 6 files changed, 6 insertions(+), 116 deletions(-) delete mode 100644 packages/kit-headless/src/components/carousel/utils.ts delete mode 100644 packages/kit-headless/src/components/carousel/viewport.tsx diff --git a/packages/kit-headless/src/components/carousel/index.ts b/packages/kit-headless/src/components/carousel/index.ts index b53cf95ab..82f5468e5 100644 --- a/packages/kit-headless/src/components/carousel/index.ts +++ b/packages/kit-headless/src/components/carousel/index.ts @@ -1,5 +1,4 @@ export { CarouselRoot as Root } from './inline'; -export { CarouselView as View } from './viewport'; export { CarouselScroller as Scroller } from './scroller'; export { CarouselSlide as Slide } from './slide'; export { CarouselPrevious as Previous } from './previous'; diff --git a/packages/kit-headless/src/components/carousel/next.tsx b/packages/kit-headless/src/components/carousel/next.tsx index 252654cff..f7f14e7c7 100644 --- a/packages/kit-headless/src/components/carousel/next.tsx +++ b/packages/kit-headless/src/components/carousel/next.tsx @@ -12,8 +12,6 @@ export const CarouselNext = component$((props: PropsOf<'button'>) => { disabled={context.currentIndexSig.value + 1 === context.numSlidesSig.value} onClick$={() => { context.currentIndexSig.value++; - - context.transitionDurationSig.value = 625; }} data-qui-carousel-next > diff --git a/packages/kit-headless/src/components/carousel/previous.tsx b/packages/kit-headless/src/components/carousel/previous.tsx index 9de51c532..678a8e930 100644 --- a/packages/kit-headless/src/components/carousel/previous.tsx +++ b/packages/kit-headless/src/components/carousel/previous.tsx @@ -11,7 +11,6 @@ export const CarouselPrevious = component$((props: PropsOf<'button'>) => { disabled={context.currentIndexSig.value === 0} onClick$={() => { context.currentIndexSig.value--; - context.transitionDurationSig.value = 625; }} data-qui-carousel-prev > diff --git a/packages/kit-headless/src/components/carousel/slide.tsx b/packages/kit-headless/src/components/carousel/slide.tsx index d076daf22..8dc98a7cb 100644 --- a/packages/kit-headless/src/components/carousel/slide.tsx +++ b/packages/kit-headless/src/components/carousel/slide.tsx @@ -5,10 +5,8 @@ import { useContext, useTask$, useSignal, - $, } from '@builder.io/qwik'; import { carouselContextId } from './context'; -import { isServer } from '@builder.io/qwik/build'; export type CarouselSlideProps = PropsOf<'div'> & { _index?: number; @@ -17,100 +15,18 @@ export type CarouselSlideProps = PropsOf<'div'> & { export const CarouselSlide = component$(({ _index, ...props }: CarouselSlideProps) => { const context = useContext(carouselContextId); const slideRef = useSignal(); - const localIndexSig = useSignal(null); - const handlePointerUp$ = $(() => { - context.isMouseDraggingSig.value = false; - - if (!context.containerRef.value || !slideRef.value) { - return; - } - - /* - TODO: figure out why a separate DOMMatrix is why dragging and the buttons work properly. - */ - const style = window.getComputedStyle(context.containerRef.value); - const matrix = new DOMMatrix(style.transform); - - const containerTranslateX = matrix.m41; - // How far to the left the slides container is shifted. - const absContainerTranslateX = Math.abs(containerTranslateX); - - if (!context.viewportRef.value) { - return; - } - - // How far the left edge of this slide is from the left of the slides container. - const slideSlideContainerLeftOffset = slideRef.value.offsetLeft; - // How far the right edge of this slide is from the left of the slides container - // (includes space between slide). - const slideRightEdgePos = - slideSlideContainerLeftOffset + - slideRef.value.offsetWidth + - context.spaceBetweenSlides; - - const carouselViewportWidth = context.viewportRef.value.offsetWidth; - const halfViewportWidth = carouselViewportWidth / 2; - - const isWithinBounds = - absContainerTranslateX > slideSlideContainerLeftOffset - halfViewportWidth && - absContainerTranslateX < slideRightEdgePos - halfViewportWidth; - - if (isWithinBounds) { - context.transitionDurationSig.value = 300; - - /* - we update here when mouse released (not when slide changes) - this is how it can "snap" back to the previous slide - */ - context.slideOffsetSig.value = slideSlideContainerLeftOffset * -1; + useTask$(function getIndexOrder() { + if (_index !== undefined) { + context.slideRefsArray.value[_index] = slideRef; + } else { + throw new Error('Qwik UI: Carousel component slide cannot find its proper index.'); } }); - useTask$(() => { - // local index - localIndexSig.value = context.numSlidesSig.value; - - // TODO: Refactor this out and use array length instead - context.numSlidesSig.value++; - - context.slideRefsArray.value = [...context.slideRefsArray.value, slideRef]; - - return; - }); - - useTask$(({ track }) => { - track(() => context.isMouseDraggingSig.value); - - if (isServer) return; - - context.isMouseDraggingSig.value - ? window.addEventListener('pointerup', handlePointerUp$) - : window.removeEventListener('pointerup', handlePointerUp$); - }); - - useTask$(({ track }) => { - track(() => context.currentIndexSig.value); - if (localIndexSig.value === context.currentIndexSig.value && slideRef.value) { - context.transitionDurationSig.value = 625; - context.slideOffsetSig.value = slideRef.value.offsetLeft * -1; - } - - /* TODO: figure out how to customize animation for separate actions: - - For example, this 625 is now for everything, because the slide index changing is our source of truth. - - Perhaps a bind? - - */ - setTimeout(() => { - context.transitionDurationSig.value = 625; - }, 0); - }); - return (
; - -export const CarouselView = component$((props: CarouselViewportProps) => { - const context = useContext(carouselContextId); - - return ( -
- -
- ); -}); From ae0588783c888c59e105cd0286cc315f4c5798f9 Mon Sep 17 00:00:00 2001 From: jack shelton Date: Sun, 21 Jul 2024 10:30:37 -0500 Subject: [PATCH 18/86] fix: get proper array order --- packages/kit-headless/src/components/carousel/slide.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/kit-headless/src/components/carousel/slide.tsx b/packages/kit-headless/src/components/carousel/slide.tsx index 8dc98a7cb..e1b32b59b 100644 --- a/packages/kit-headless/src/components/carousel/slide.tsx +++ b/packages/kit-headless/src/components/carousel/slide.tsx @@ -20,13 +20,12 @@ export const CarouselSlide = component$(({ _index, ...props }: CarouselSlideProp if (_index !== undefined) { context.slideRefsArray.value[_index] = slideRef; } else { - throw new Error('Qwik UI: Carousel component slide cannot find its proper index.'); + throw new Error('Qwik UI: Carousel Slide cannot find its proper index.'); } }); return (
Date: Sun, 21 Jul 2024 12:02:47 -0500 Subject: [PATCH 19/86] account for slide margin --- .../routes/docs/headless/carousel/examples/hero.tsx | 2 +- .../src/components/carousel/scroller.tsx | 12 +++++++----- .../kit-headless/src/components/carousel/slide.tsx | 2 ++ 3 files changed, 10 insertions(+), 6 deletions(-) diff --git a/apps/website/src/routes/docs/headless/carousel/examples/hero.tsx b/apps/website/src/routes/docs/headless/carousel/examples/hero.tsx index cf3d308fb..f50c2c8ea 100644 --- a/apps/website/src/routes/docs/headless/carousel/examples/hero.tsx +++ b/apps/website/src/routes/docs/headless/carousel/examples/hero.tsx @@ -7,7 +7,7 @@ export default component$(() => { const colors = ['red', 'green', 'blue', 'yellow', 'purple', 'orange', 'pink']; return ( - +
Prev Next diff --git a/packages/kit-headless/src/components/carousel/scroller.tsx b/packages/kit-headless/src/components/carousel/scroller.tsx index f57d7a1fc..d13428987 100644 --- a/packages/kit-headless/src/components/carousel/scroller.tsx +++ b/packages/kit-headless/src/components/carousel/scroller.tsx @@ -37,7 +37,7 @@ export const CarouselScroller = component$((props: CarouselContainerProps) => { window.addEventListener('mousemove', handleMouseMove$); }); - const handleSnap$ = $(() => { + const handleMouseSnap$ = $(() => { if (!context.containerRef.value) return; isMouseDownSig.value = false; window.removeEventListener('mousemove', handleMouseMove$); @@ -58,10 +58,12 @@ export const CarouselScroller = component$((props: CarouselContainerProps) => { } }); - // Ensure snapping to the closest full slide width const slideWidth = closestSlide.getBoundingClientRect().width; - const snapPosition = Math.round(containerScrollLeft / slideWidth) * slideWidth; - + const slideMarginLeft = parseFloat(getComputedStyle(closestSlide).marginLeft); + const slideMarginRight = parseFloat(getComputedStyle(closestSlide).marginRight); + const totalSlideWidth = slideWidth + slideMarginLeft + slideMarginRight; + const snapPosition = + Math.round(containerScrollLeft / totalSlideWidth) * totalSlideWidth; container.scrollTo({ left: snapPosition, behavior: 'smooth', @@ -72,7 +74,7 @@ export const CarouselScroller = component$((props: CarouselContainerProps) => {
Date: Sun, 21 Jul 2024 12:52:38 -0500 Subject: [PATCH 20/86] updated correct index --- .../kit-headless/src/components/carousel/scroller.tsx | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/packages/kit-headless/src/components/carousel/scroller.tsx b/packages/kit-headless/src/components/carousel/scroller.tsx index d13428987..ed7779fa4 100644 --- a/packages/kit-headless/src/components/carousel/scroller.tsx +++ b/packages/kit-headless/src/components/carousel/scroller.tsx @@ -47,14 +47,16 @@ export const CarouselScroller = component$((props: CarouselContainerProps) => { const containerScrollLeft = container.scrollLeft; let closestSlide = slides[0].value; + let closestSlideIndex = 0; let minDistance = Math.abs(containerScrollLeft - closestSlide.offsetLeft); - slides.forEach((slideRef) => { + slides.forEach((slideRef, index) => { if (!slideRef.value) return; const distance = Math.abs(containerScrollLeft - slideRef.value.offsetLeft); if (distance < minDistance) { closestSlide = slideRef.value; minDistance = distance; + closestSlideIndex = index; } }); @@ -62,12 +64,14 @@ export const CarouselScroller = component$((props: CarouselContainerProps) => { const slideMarginLeft = parseFloat(getComputedStyle(closestSlide).marginLeft); const slideMarginRight = parseFloat(getComputedStyle(closestSlide).marginRight); const totalSlideWidth = slideWidth + slideMarginLeft + slideMarginRight; - const snapPosition = - Math.round(containerScrollLeft / totalSlideWidth) * totalSlideWidth; + const snapPosition = closestSlideIndex * totalSlideWidth; + container.scrollTo({ left: snapPosition, behavior: 'smooth', }); + + context.currentIndexSig.value = closestSlideIndex; }); return ( From a65ce111bb8c8a4d3e8704905a2808353ac135ac Mon Sep 17 00:00:00 2001 From: jack shelton Date: Sun, 21 Jul 2024 13:22:45 -0500 Subject: [PATCH 21/86] update with css scroll snapping --- .../src/components/carousel/scroller.tsx | 33 ++++++++++++------- 1 file changed, 22 insertions(+), 11 deletions(-) diff --git a/packages/kit-headless/src/components/carousel/scroller.tsx b/packages/kit-headless/src/components/carousel/scroller.tsx index ed7779fa4..0436dacdb 100644 --- a/packages/kit-headless/src/components/carousel/scroller.tsx +++ b/packages/kit-headless/src/components/carousel/scroller.tsx @@ -5,6 +5,7 @@ import { useContext, useSignal, $, + useTask$, } from '@builder.io/qwik'; import { carouselContextId } from './context'; import { useStyles$ } from '@builder.io/qwik'; @@ -18,6 +19,7 @@ export const CarouselScroller = component$((props: CarouselContainerProps) => { const isMouseDownSig = useSignal(false); const startXSig = useSignal(); const scrollLeftSig = useSignal(0); + const closestSlideRef = useSignal(); const handleMouseMove$ = $((e: MouseEvent) => { if (!isMouseDownSig.value || startXSig.value === undefined) return; @@ -46,32 +48,41 @@ export const CarouselScroller = component$((props: CarouselContainerProps) => { const slides = context.slideRefsArray.value; const containerScrollLeft = container.scrollLeft; - let closestSlide = slides[0].value; - let closestSlideIndex = 0; + const closestSlide = slides[0].value; + closestSlideRef.value = closestSlide; + context.currentIndexSig.value = 0; let minDistance = Math.abs(containerScrollLeft - closestSlide.offsetLeft); slides.forEach((slideRef, index) => { if (!slideRef.value) return; const distance = Math.abs(containerScrollLeft - slideRef.value.offsetLeft); if (distance < minDistance) { - closestSlide = slideRef.value; + closestSlideRef.value = slideRef.value; + context.currentIndexSig.value = index; minDistance = distance; - closestSlideIndex = index; } }); + }); + + useTask$(({ track }) => { + track(() => context.currentIndexSig.value); - const slideWidth = closestSlide.getBoundingClientRect().width; - const slideMarginLeft = parseFloat(getComputedStyle(closestSlide).marginLeft); - const slideMarginRight = parseFloat(getComputedStyle(closestSlide).marginRight); + if (!closestSlideRef.value || !context.containerRef.value) return; + + const slideWidth = closestSlideRef.value.getBoundingClientRect().width; + const slideMarginLeft = parseFloat( + getComputedStyle(closestSlideRef.value).marginLeft, + ); + const slideMarginRight = parseFloat( + getComputedStyle(closestSlideRef.value).marginRight, + ); const totalSlideWidth = slideWidth + slideMarginLeft + slideMarginRight; - const snapPosition = closestSlideIndex * totalSlideWidth; + const snapPosition = context.currentIndexSig.value * totalSlideWidth; - container.scrollTo({ + context.containerRef.value.scrollTo({ left: snapPosition, behavior: 'smooth', }); - - context.currentIndexSig.value = closestSlideIndex; }); return ( From 57a5f241df3f1da1d59feff3182e16597ddfb22f Mon Sep 17 00:00:00 2001 From: jack shelton Date: Sun, 21 Jul 2024 13:34:04 -0500 Subject: [PATCH 22/86] simplify container --- packages/kit-headless/src/components/carousel/scroller.tsx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/packages/kit-headless/src/components/carousel/scroller.tsx b/packages/kit-headless/src/components/carousel/scroller.tsx index 0436dacdb..5c10557fe 100644 --- a/packages/kit-headless/src/components/carousel/scroller.tsx +++ b/packages/kit-headless/src/components/carousel/scroller.tsx @@ -46,16 +46,15 @@ export const CarouselScroller = component$((props: CarouselContainerProps) => { const container = context.containerRef.value; const slides = context.slideRefsArray.value; - const containerScrollLeft = container.scrollLeft; const closestSlide = slides[0].value; closestSlideRef.value = closestSlide; context.currentIndexSig.value = 0; - let minDistance = Math.abs(containerScrollLeft - closestSlide.offsetLeft); + let minDistance = Math.abs(container.scrollLeft - closestSlide.offsetLeft); slides.forEach((slideRef, index) => { if (!slideRef.value) return; - const distance = Math.abs(containerScrollLeft - slideRef.value.offsetLeft); + const distance = Math.abs(container.scrollLeft - slideRef.value.offsetLeft); if (distance < minDistance) { closestSlideRef.value = slideRef.value; context.currentIndexSig.value = index; From 6152865fc6bffb80880d327a1f8fd9e6058958d8 Mon Sep 17 00:00:00 2001 From: jack shelton Date: Sun, 21 Jul 2024 15:45:58 -0500 Subject: [PATCH 23/86] get buttons working again --- .../headless/carousel/examples/images.tsx | 28 +++++---- .../src/components/carousel/next.tsx | 1 + .../src/components/carousel/scroller.tsx | 58 +++++++++++-------- 3 files changed, 47 insertions(+), 40 deletions(-) diff --git a/apps/website/src/routes/docs/headless/carousel/examples/images.tsx b/apps/website/src/routes/docs/headless/carousel/examples/images.tsx index 535415537..a1bade526 100644 --- a/apps/website/src/routes/docs/headless/carousel/examples/images.tsx +++ b/apps/website/src/routes/docs/headless/carousel/examples/images.tsx @@ -10,21 +10,19 @@ export default component$(() => { Prev Next
- - - {slideImageMetadata.map((data) => ( - - {data.author} - - ))} - - + + {slideImageMetadata.map((data) => ( + + {data.author} + + ))} + ); }); diff --git a/packages/kit-headless/src/components/carousel/next.tsx b/packages/kit-headless/src/components/carousel/next.tsx index f7f14e7c7..0b81cb7a4 100644 --- a/packages/kit-headless/src/components/carousel/next.tsx +++ b/packages/kit-headless/src/components/carousel/next.tsx @@ -12,6 +12,7 @@ export const CarouselNext = component$((props: PropsOf<'button'>) => { disabled={context.currentIndexSig.value + 1 === context.numSlidesSig.value} onClick$={() => { context.currentIndexSig.value++; + console.log(context.currentIndexSig.value); }} data-qui-carousel-next > diff --git a/packages/kit-headless/src/components/carousel/scroller.tsx b/packages/kit-headless/src/components/carousel/scroller.tsx index 5c10557fe..c074fa5c3 100644 --- a/packages/kit-headless/src/components/carousel/scroller.tsx +++ b/packages/kit-headless/src/components/carousel/scroller.tsx @@ -10,6 +10,7 @@ import { import { carouselContextId } from './context'; import { useStyles$ } from '@builder.io/qwik'; import styles from './carousel.css?inline'; +import { isServer } from '@builder.io/qwik/build'; type CarouselContainerProps = PropsOf<'div'>; @@ -39,34 +40,40 @@ export const CarouselScroller = component$((props: CarouselContainerProps) => { window.addEventListener('mousemove', handleMouseMove$); }); - const handleMouseSnap$ = $(() => { - if (!context.containerRef.value) return; - isMouseDownSig.value = false; - window.removeEventListener('mousemove', handleMouseMove$); - - const container = context.containerRef.value; - const slides = context.slideRefsArray.value; - - const closestSlide = slides[0].value; - closestSlideRef.value = closestSlide; - context.currentIndexSig.value = 0; - let minDistance = Math.abs(container.scrollLeft - closestSlide.offsetLeft); - - slides.forEach((slideRef, index) => { - if (!slideRef.value) return; - const distance = Math.abs(container.scrollLeft - slideRef.value.offsetLeft); - if (distance < minDistance) { - closestSlideRef.value = slideRef.value; - context.currentIndexSig.value = index; - minDistance = distance; - } - }); - }); + // const handleMouseSnap$ = $(() => { + // if (!context.containerRef.value) return; + // isMouseDownSig.value = false; + // window.removeEventListener('mousemove', handleMouseMove$); + + // const container = context.containerRef.value; + // const slides = context.slideRefsArray.value; + + // const closestSlide = slides[0].value; + // closestSlideRef.value = closestSlide; + // context.currentIndexSig.value = 0; + // let minDistance = Math.abs(container.scrollLeft - closestSlide.offsetLeft); + + // slides.forEach((slideRef, index) => { + // if (!slideRef.value) return; + // const distance = Math.abs(container.scrollLeft - slideRef.value.offsetLeft); + // if (distance < minDistance) { + // closestSlideRef.value = slideRef.value; + // context.currentIndexSig.value = index; + // minDistance = distance; + // } + // }); + // }); useTask$(({ track }) => { track(() => context.currentIndexSig.value); - if (!closestSlideRef.value || !context.containerRef.value) return; + if (!context.containerRef.value || isServer) return; + + if (!closestSlideRef.value) { + closestSlideRef.value = context.slideRefsArray.value[0].value; + } + + if (!closestSlideRef.value) return; const slideWidth = closestSlideRef.value.getBoundingClientRect().width; const slideMarginLeft = parseFloat( @@ -78,6 +85,8 @@ export const CarouselScroller = component$((props: CarouselContainerProps) => { const totalSlideWidth = slideWidth + slideMarginLeft + slideMarginRight; const snapPosition = context.currentIndexSig.value * totalSlideWidth; + console.log('hello'); + context.containerRef.value.scrollTo({ left: snapPosition, behavior: 'smooth', @@ -88,7 +97,6 @@ export const CarouselScroller = component$((props: CarouselContainerProps) => {
Date: Sun, 21 Jul 2024 16:42:12 -0500 Subject: [PATCH 24/86] setup for drag to do its own behavior --- .../src/components/carousel/scroller.tsx | 63 +++++++++++-------- 1 file changed, 38 insertions(+), 25 deletions(-) diff --git a/packages/kit-headless/src/components/carousel/scroller.tsx b/packages/kit-headless/src/components/carousel/scroller.tsx index c074fa5c3..72a8a3395 100644 --- a/packages/kit-headless/src/components/carousel/scroller.tsx +++ b/packages/kit-headless/src/components/carousel/scroller.tsx @@ -21,6 +21,7 @@ export const CarouselScroller = component$((props: CarouselContainerProps) => { const startXSig = useSignal(); const scrollLeftSig = useSignal(0); const closestSlideRef = useSignal(); + const wasMouseUpSig = useSignal(false); const handleMouseMove$ = $((e: MouseEvent) => { if (!isMouseDownSig.value || startXSig.value === undefined) return; @@ -31,6 +32,33 @@ export const CarouselScroller = component$((props: CarouselContainerProps) => { context.containerRef.value.scrollLeft = scrollLeftSig.value - walk; }); + const handleMouseSnap$ = $(() => { + if (!context.containerRef.value) return; + if (!isMouseDownSig.value) return; + isMouseDownSig.value = false; + window.removeEventListener('mousemove', handleMouseMove$); + + const container = context.containerRef.value; + const slides = context.slideRefsArray.value; + + const closestSlide = slides[0].value; + closestSlideRef.value = closestSlide; + context.currentIndexSig.value = 0; + let minDistance = Math.abs(container.scrollLeft - closestSlide.offsetLeft); + + slides.forEach((slideRef, index) => { + if (!slideRef.value) return; + const distance = Math.abs(container.scrollLeft - slideRef.value.offsetLeft); + if (distance < minDistance) { + closestSlideRef.value = slideRef.value; + context.currentIndexSig.value = index; + minDistance = distance; + } + }); + + wasMouseUpSig.value = true; + }); + const handleMouseDown$ = $((e: MouseEvent) => { if (!context.isDraggableSig.value) return; if (!context.containerRef.value) return; @@ -38,35 +66,18 @@ export const CarouselScroller = component$((props: CarouselContainerProps) => { startXSig.value = e.pageX - context.containerRef.value.offsetLeft; scrollLeftSig.value = context.containerRef.value.scrollLeft; window.addEventListener('mousemove', handleMouseMove$); + window.addEventListener('mouseup', handleMouseSnap$); }); - // const handleMouseSnap$ = $(() => { - // if (!context.containerRef.value) return; - // isMouseDownSig.value = false; - // window.removeEventListener('mousemove', handleMouseMove$); - - // const container = context.containerRef.value; - // const slides = context.slideRefsArray.value; - - // const closestSlide = slides[0].value; - // closestSlideRef.value = closestSlide; - // context.currentIndexSig.value = 0; - // let minDistance = Math.abs(container.scrollLeft - closestSlide.offsetLeft); - - // slides.forEach((slideRef, index) => { - // if (!slideRef.value) return; - // const distance = Math.abs(container.scrollLeft - slideRef.value.offsetLeft); - // if (distance < minDistance) { - // closestSlideRef.value = slideRef.value; - // context.currentIndexSig.value = index; - // minDistance = distance; - // } - // }); - // }); - useTask$(({ track }) => { track(() => context.currentIndexSig.value); + /** This task should only fire if anything other than drag changes the currentIndex */ + if (wasMouseUpSig.value) { + wasMouseUpSig.value = false; + return; + } + if (!context.containerRef.value || isServer) return; if (!closestSlideRef.value) { @@ -85,12 +96,14 @@ export const CarouselScroller = component$((props: CarouselContainerProps) => { const totalSlideWidth = slideWidth + slideMarginLeft + slideMarginRight; const snapPosition = context.currentIndexSig.value * totalSlideWidth; - console.log('hello'); + if (isMouseDownSig.value) return; context.containerRef.value.scrollTo({ left: snapPosition, behavior: 'smooth', }); + + window.removeEventListener('mousemove', handleMouseMove$); }); return ( From 1ec631e54ead7b202db51f360efc7aa66ab0c06c Mon Sep 17 00:00:00 2001 From: jack shelton Date: Sun, 21 Jul 2024 16:48:37 -0500 Subject: [PATCH 25/86] get mouse working again --- .../src/components/carousel/scroller.tsx | 28 ++++++++++++------- 1 file changed, 18 insertions(+), 10 deletions(-) diff --git a/packages/kit-headless/src/components/carousel/scroller.tsx b/packages/kit-headless/src/components/carousel/scroller.tsx index 72a8a3395..2213c52df 100644 --- a/packages/kit-headless/src/components/carousel/scroller.tsx +++ b/packages/kit-headless/src/components/carousel/scroller.tsx @@ -34,28 +34,36 @@ export const CarouselScroller = component$((props: CarouselContainerProps) => { const handleMouseSnap$ = $(() => { if (!context.containerRef.value) return; - if (!isMouseDownSig.value) return; isMouseDownSig.value = false; window.removeEventListener('mousemove', handleMouseMove$); const container = context.containerRef.value; const slides = context.slideRefsArray.value; + const containerScrollLeft = container.scrollLeft; - const closestSlide = slides[0].value; - closestSlideRef.value = closestSlide; - context.currentIndexSig.value = 0; - let minDistance = Math.abs(container.scrollLeft - closestSlide.offsetLeft); + let closestSlide = slides[0].value; + let minDistance = Math.abs(containerScrollLeft - closestSlide.offsetLeft); - slides.forEach((slideRef, index) => { + slides.forEach((slideRef) => { if (!slideRef.value) return; - const distance = Math.abs(container.scrollLeft - slideRef.value.offsetLeft); + const distance = Math.abs(containerScrollLeft - slideRef.value.offsetLeft); if (distance < minDistance) { - closestSlideRef.value = slideRef.value; - context.currentIndexSig.value = index; + closestSlide = slideRef.value; minDistance = distance; } }); + const slideWidth = closestSlide.getBoundingClientRect().width; + const slideMarginLeft = parseFloat(getComputedStyle(closestSlide).marginLeft); + const slideMarginRight = parseFloat(getComputedStyle(closestSlide).marginRight); + const totalSlideWidth = slideWidth + slideMarginLeft + slideMarginRight; + const snapPosition = + Math.round(containerScrollLeft / totalSlideWidth) * totalSlideWidth; + container.scrollTo({ + left: snapPosition, + behavior: 'smooth', + }); + wasMouseUpSig.value = true; }); @@ -69,7 +77,7 @@ export const CarouselScroller = component$((props: CarouselContainerProps) => { window.addEventListener('mouseup', handleMouseSnap$); }); - useTask$(({ track }) => { + useTask$(function nonDraggingBehavior({ track }) { track(() => context.currentIndexSig.value); /** This task should only fire if anything other than drag changes the currentIndex */ From 469239c60066663688b8f977da70bbffaafe6bee Mon Sep 17 00:00:00 2001 From: jack shelton Date: Sun, 21 Jul 2024 22:05:44 -0500 Subject: [PATCH 26/86] correct indexes again --- packages/kit-headless/src/components/carousel/scroller.tsx | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/packages/kit-headless/src/components/carousel/scroller.tsx b/packages/kit-headless/src/components/carousel/scroller.tsx index 2213c52df..234b4d03a 100644 --- a/packages/kit-headless/src/components/carousel/scroller.tsx +++ b/packages/kit-headless/src/components/carousel/scroller.tsx @@ -59,11 +59,16 @@ export const CarouselScroller = component$((props: CarouselContainerProps) => { const totalSlideWidth = slideWidth + slideMarginLeft + slideMarginRight; const snapPosition = Math.round(containerScrollLeft / totalSlideWidth) * totalSlideWidth; + container.scrollTo({ left: snapPosition, behavior: 'smooth', }); + // Calculate the correct index based on the snap position + const correctIndex = Math.round(snapPosition / totalSlideWidth); + context.currentIndexSig.value = correctIndex; + wasMouseUpSig.value = true; }); From 84deebe031b25308917ccc8d540202466d9bd157 Mon Sep 17 00:00:00 2001 From: jack shelton Date: Sun, 21 Jul 2024 22:07:00 -0500 Subject: [PATCH 27/86] it worksgit add . --- .../kit-headless/src/components/carousel/scroller.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/kit-headless/src/components/carousel/scroller.tsx b/packages/kit-headless/src/components/carousel/scroller.tsx index 234b4d03a..c7bc7e59a 100644 --- a/packages/kit-headless/src/components/carousel/scroller.tsx +++ b/packages/kit-headless/src/components/carousel/scroller.tsx @@ -21,7 +21,7 @@ export const CarouselScroller = component$((props: CarouselContainerProps) => { const startXSig = useSignal(); const scrollLeftSig = useSignal(0); const closestSlideRef = useSignal(); - const wasMouseUpSig = useSignal(false); + const wasMovingSig = useSignal(false); const handleMouseMove$ = $((e: MouseEvent) => { if (!isMouseDownSig.value || startXSig.value === undefined) return; @@ -30,6 +30,7 @@ export const CarouselScroller = component$((props: CarouselContainerProps) => { const SCROLL_SPEED = 1.75; const walk = (x - startXSig.value) * SCROLL_SPEED; context.containerRef.value.scrollLeft = scrollLeftSig.value - walk; + wasMovingSig.value = true; }); const handleMouseSnap$ = $(() => { @@ -68,8 +69,6 @@ export const CarouselScroller = component$((props: CarouselContainerProps) => { // Calculate the correct index based on the snap position const correctIndex = Math.round(snapPosition / totalSlideWidth); context.currentIndexSig.value = correctIndex; - - wasMouseUpSig.value = true; }); const handleMouseDown$ = $((e: MouseEvent) => { @@ -80,14 +79,15 @@ export const CarouselScroller = component$((props: CarouselContainerProps) => { scrollLeftSig.value = context.containerRef.value.scrollLeft; window.addEventListener('mousemove', handleMouseMove$); window.addEventListener('mouseup', handleMouseSnap$); + wasMovingSig.value = false; }); useTask$(function nonDraggingBehavior({ track }) { track(() => context.currentIndexSig.value); /** This task should only fire if anything other than drag changes the currentIndex */ - if (wasMouseUpSig.value) { - wasMouseUpSig.value = false; + if (wasMovingSig.value) { + wasMovingSig.value = false; return; } From 3c21bcf34bf5213174c5395b0d95c62dfde0a27d Mon Sep 17 00:00:00 2001 From: jack shelton Date: Sun, 21 Jul 2024 23:44:00 -0500 Subject: [PATCH 28/86] down to touch interacitons --- .../src/components/carousel/scroller.tsx | 66 ++++++++++++++----- 1 file changed, 51 insertions(+), 15 deletions(-) diff --git a/packages/kit-headless/src/components/carousel/scroller.tsx b/packages/kit-headless/src/components/carousel/scroller.tsx index c7bc7e59a..e729059ad 100644 --- a/packages/kit-headless/src/components/carousel/scroller.tsx +++ b/packages/kit-headless/src/components/carousel/scroller.tsx @@ -17,20 +17,22 @@ type CarouselContainerProps = PropsOf<'div'>; export const CarouselScroller = component$((props: CarouselContainerProps) => { const context = useContext(carouselContextId); useStyles$(styles); - const isMouseDownSig = useSignal(false); const startXSig = useSignal(); const scrollLeftSig = useSignal(0); const closestSlideRef = useSignal(); - const wasMovingSig = useSignal(false); + const isMouseDownSig = useSignal(false); + const isMouseMovingSig = useSignal(false); + const isTouchMovingSig = useSignal(false); + const isTouchDeviceSig = useSignal(false); const handleMouseMove$ = $((e: MouseEvent) => { if (!isMouseDownSig.value || startXSig.value === undefined) return; if (!context.containerRef.value) return; const x = e.pageX - context.containerRef.value.offsetLeft; - const SCROLL_SPEED = 1.75; - const walk = (x - startXSig.value) * SCROLL_SPEED; + const dragSpeed = 1.75; + const walk = (x - startXSig.value) * dragSpeed; context.containerRef.value.scrollLeft = scrollLeftSig.value - walk; - wasMovingSig.value = true; + isMouseMovingSig.value = true; }); const handleMouseSnap$ = $(() => { @@ -58,16 +60,15 @@ export const CarouselScroller = component$((props: CarouselContainerProps) => { const slideMarginLeft = parseFloat(getComputedStyle(closestSlide).marginLeft); const slideMarginRight = parseFloat(getComputedStyle(closestSlide).marginRight); const totalSlideWidth = slideWidth + slideMarginLeft + slideMarginRight; - const snapPosition = + const dragSnapPosition = Math.round(containerScrollLeft / totalSlideWidth) * totalSlideWidth; container.scrollTo({ - left: snapPosition, + left: dragSnapPosition, behavior: 'smooth', }); - // Calculate the correct index based on the snap position - const correctIndex = Math.round(snapPosition / totalSlideWidth); + const correctIndex = Math.round(dragSnapPosition / totalSlideWidth); context.currentIndexSig.value = correctIndex; }); @@ -79,15 +80,17 @@ export const CarouselScroller = component$((props: CarouselContainerProps) => { scrollLeftSig.value = context.containerRef.value.scrollLeft; window.addEventListener('mousemove', handleMouseMove$); window.addEventListener('mouseup', handleMouseSnap$); - wasMovingSig.value = false; + isMouseMovingSig.value = false; }); - useTask$(function nonDraggingBehavior({ track }) { + useTask$(function snapWithoutDrag({ track }) { track(() => context.currentIndexSig.value); + if (isTouchDeviceSig.value && !isTouchMovingSig.value) return; + /** This task should only fire if anything other than drag changes the currentIndex */ - if (wasMovingSig.value) { - wasMovingSig.value = false; + if (isMouseMovingSig.value) { + isMouseMovingSig.value = false; return; } @@ -107,24 +110,57 @@ export const CarouselScroller = component$((props: CarouselContainerProps) => { getComputedStyle(closestSlideRef.value).marginRight, ); const totalSlideWidth = slideWidth + slideMarginLeft + slideMarginRight; - const snapPosition = context.currentIndexSig.value * totalSlideWidth; + const nonDragSnapPosition = context.currentIndexSig.value * totalSlideWidth; if (isMouseDownSig.value) return; context.containerRef.value.scrollTo({ - left: snapPosition, + left: nonDragSnapPosition, behavior: 'smooth', }); window.removeEventListener('mousemove', handleMouseMove$); }); + const updateTouchDeviceIndex$ = $(() => { + if (!context.containerRef.value) return; + if (!isTouchMovingSig.value) return; + const container = context.containerRef.value; + const containerScrollLeft = container.scrollLeft; + const slides = context.slideRefsArray.value; + + let currentIndex = 0; + let minDistance = Infinity; + + slides.forEach((slideRef, index) => { + if (!slideRef.value) return; + const slideLeft = slideRef.value.offsetLeft; + const distance = Math.abs(containerScrollLeft - slideLeft); + if (distance < minDistance) { + minDistance = distance; + currentIndex = index; + } + }); + + if (context.currentIndexSig.value !== currentIndex) { + context.currentIndexSig.value = currentIndex; + } + }); + + const handleTouchMove$ = $(() => { + isTouchMovingSig.value = true; + }); + return (
(isTouchMovingSig.value = false)} + window:onTouchStart$={() => (isTouchDeviceSig.value = true)} preventdefault:mousemove {...props} > From 07b534fa0d04d0976faac1cdef3c49f7509402e9 Mon Sep 17 00:00:00 2001 From: jack shelton Date: Mon, 22 Jul 2024 00:01:31 -0500 Subject: [PATCH 29/86] initial touch working --- packages/kit-headless/src/components/carousel/scroller.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/kit-headless/src/components/carousel/scroller.tsx b/packages/kit-headless/src/components/carousel/scroller.tsx index e729059ad..6e5a8677b 100644 --- a/packages/kit-headless/src/components/carousel/scroller.tsx +++ b/packages/kit-headless/src/components/carousel/scroller.tsx @@ -23,7 +23,6 @@ export const CarouselScroller = component$((props: CarouselContainerProps) => { const isMouseDownSig = useSignal(false); const isMouseMovingSig = useSignal(false); const isTouchMovingSig = useSignal(false); - const isTouchDeviceSig = useSignal(false); const handleMouseMove$ = $((e: MouseEvent) => { if (!isMouseDownSig.value || startXSig.value === undefined) return; @@ -86,7 +85,7 @@ export const CarouselScroller = component$((props: CarouselContainerProps) => { useTask$(function snapWithoutDrag({ track }) { track(() => context.currentIndexSig.value); - if (isTouchDeviceSig.value && !isTouchMovingSig.value) return; + if (isTouchMovingSig.value) return; /** This task should only fire if anything other than drag changes the currentIndex */ if (isMouseMovingSig.value) { @@ -160,7 +159,6 @@ export const CarouselScroller = component$((props: CarouselContainerProps) => { onTouchMove$={[handleTouchMove$, props.onTouchMove$]} onScroll$={[updateTouchDeviceIndex$, props.onScroll$]} onScrollend$={() => (isTouchMovingSig.value = false)} - window:onTouchStart$={() => (isTouchDeviceSig.value = true)} preventdefault:mousemove {...props} > From 031696ce350cf7832167079544c039a40b385f65 Mon Sep 17 00:00:00 2001 From: jack shelton Date: Mon, 22 Jul 2024 00:44:12 -0500 Subject: [PATCH 30/86] finally workinggit add . --- .../src/components/carousel/scroller.tsx | 28 +++++++++++-------- 1 file changed, 16 insertions(+), 12 deletions(-) diff --git a/packages/kit-headless/src/components/carousel/scroller.tsx b/packages/kit-headless/src/components/carousel/scroller.tsx index 6e5a8677b..9744f7725 100644 --- a/packages/kit-headless/src/components/carousel/scroller.tsx +++ b/packages/kit-headless/src/components/carousel/scroller.tsx @@ -22,7 +22,8 @@ export const CarouselScroller = component$((props: CarouselContainerProps) => { const closestSlideRef = useSignal(); const isMouseDownSig = useSignal(false); const isMouseMovingSig = useSignal(false); - const isTouchMovingSig = useSignal(false); + const isTouchDeviceSig = useSignal(false); + const isTouchMovingSig = useSignal(true); const handleMouseMove$ = $((e: MouseEvent) => { if (!isMouseDownSig.value || startXSig.value === undefined) return; @@ -85,8 +86,6 @@ export const CarouselScroller = component$((props: CarouselContainerProps) => { useTask$(function snapWithoutDrag({ track }) { track(() => context.currentIndexSig.value); - if (isTouchMovingSig.value) return; - /** This task should only fire if anything other than drag changes the currentIndex */ if (isMouseMovingSig.value) { isMouseMovingSig.value = false; @@ -96,7 +95,8 @@ export const CarouselScroller = component$((props: CarouselContainerProps) => { if (!context.containerRef.value || isServer) return; if (!closestSlideRef.value) { - closestSlideRef.value = context.slideRefsArray.value[0].value; + closestSlideRef.value = + context.slideRefsArray.value[context.currentIndexSig.value]?.value; } if (!closestSlideRef.value) return; @@ -123,7 +123,6 @@ export const CarouselScroller = component$((props: CarouselContainerProps) => { const updateTouchDeviceIndex$ = $(() => { if (!context.containerRef.value) return; - if (!isTouchMovingSig.value) return; const container = context.containerRef.value; const containerScrollLeft = container.scrollLeft; const slides = context.slideRefsArray.value; @@ -146,19 +145,24 @@ export const CarouselScroller = component$((props: CarouselContainerProps) => { } }); - const handleTouchMove$ = $(() => { - isTouchMovingSig.value = true; - }); - return (
(isTouchMovingSig.value = false)} + onScroll$={[ + $( + () => + isTouchDeviceSig.value && isTouchMovingSig.value && updateTouchDeviceIndex$(), + ), + props.onScroll$, + ]} + onTouchMove$={() => (isTouchMovingSig.value = true)} + window:onTouchStart$={() => { + isTouchMovingSig.value = false; + isTouchDeviceSig.value = true; + }} preventdefault:mousemove {...props} > From 769c466fd75724902f9a47f699106b4186bc4f05 Mon Sep 17 00:00:00 2001 From: jack shelton Date: Mon, 22 Jul 2024 13:26:16 -0500 Subject: [PATCH 31/86] add pagination --- .../headless/carousel/examples/pagination.tsx | 36 +++++++++++++++++++ .../routes/docs/headless/carousel/index.mdx | 4 +++ .../src/components/carousel/bullet.tsx | 25 ++++++++----- .../src/components/carousel/index.ts | 1 + .../src/components/carousel/inline.tsx | 22 +++++++++--- 5 files changed, 75 insertions(+), 13 deletions(-) create mode 100644 apps/website/src/routes/docs/headless/carousel/examples/pagination.tsx diff --git a/apps/website/src/routes/docs/headless/carousel/examples/pagination.tsx b/apps/website/src/routes/docs/headless/carousel/examples/pagination.tsx new file mode 100644 index 000000000..b3ea525a6 --- /dev/null +++ b/apps/website/src/routes/docs/headless/carousel/examples/pagination.tsx @@ -0,0 +1,36 @@ +import { component$, useSignal, useStyles$ } from '@builder.io/qwik'; +import { Carousel } from '@qwik-ui/headless'; + +export default component$(() => { + useStyles$(styles); + + const colors = ['red', 'green', 'blue', 'yellow', 'purple', 'orange', 'pink']; + const currSlideIndex = useSignal(0); + + return ( + +
+ Prev + Next +
+ + {colors.map((color) => ( + + {color} + + ))} + + + {colors.map((color, index) => ( + {index + 1} + ))} + + + ); +}); +// internal +import styles from './carousel.css?inline'; diff --git a/apps/website/src/routes/docs/headless/carousel/index.mdx b/apps/website/src/routes/docs/headless/carousel/index.mdx index 1042d665a..5813c40bc 100644 --- a/apps/website/src/routes/docs/headless/carousel/index.mdx +++ b/apps/website/src/routes/docs/headless/carousel/index.mdx @@ -49,6 +49,10 @@ A control that displays a set of content in a scrolling container. } ``` +## Pagination + + + ## CSR diff --git a/packages/kit-headless/src/components/carousel/bullet.tsx b/packages/kit-headless/src/components/carousel/bullet.tsx index e04fd716c..5536d2749 100644 --- a/packages/kit-headless/src/components/carousel/bullet.tsx +++ b/packages/kit-headless/src/components/carousel/bullet.tsx @@ -1,15 +1,22 @@ -import { PropsOf, Slot, component$ } from '@builder.io/qwik'; +import { PropsOf, Slot, component$, $, useContext } from '@builder.io/qwik'; +import { carouselContextId } from './context'; -export const PaginationBullet = component$((props: PropsOf<'div'>) => { - // const context = useContext(carouselContextId); +type BulletProps = PropsOf<'button'> & { + _index?: number; +}; + +export const CarouselBullet = component$(({ _index, ...props }: BulletProps) => { + const context = useContext(carouselContextId); + + const handleClick$ = $(() => { + if (typeof _index === 'number') { + context.currentIndexSig.value = _index; + } + }); return ( -
+
+ ); }); diff --git a/packages/kit-headless/src/components/carousel/index.ts b/packages/kit-headless/src/components/carousel/index.ts index 82f5468e5..9d631fc80 100644 --- a/packages/kit-headless/src/components/carousel/index.ts +++ b/packages/kit-headless/src/components/carousel/index.ts @@ -4,3 +4,4 @@ export { CarouselSlide as Slide } from './slide'; export { CarouselPrevious as Previous } from './previous'; export { CarouselNext as Next } from './next'; export { CarouselPagination as Pagination } from './pagination'; +export { CarouselBullet as Bullet } from './bullet'; diff --git a/packages/kit-headless/src/components/carousel/inline.tsx b/packages/kit-headless/src/components/carousel/inline.tsx index aeedfcc44..2ab181d12 100644 --- a/packages/kit-headless/src/components/carousel/inline.tsx +++ b/packages/kit-headless/src/components/carousel/inline.tsx @@ -7,20 +7,34 @@ type InternalProps = { _index?: number; value?: string; carouselSlideComponent?: typeof Carousel.Slide; + carouselBulletComponent?: typeof Carousel.Bullet; }; export const CarouselRoot: Component = ( props: CarouselRootProps & InternalProps, ) => { - const { children, carouselSlideComponent: GivenSlide, ...rest } = props; + const { + children, + carouselSlideComponent: GivenSlide, + carouselBulletComponent: GivenBullet, + ...rest + } = props; const Slide = GivenSlide || Carousel.Slide; - let currItemIndex = 0; + const Bullet = GivenBullet || Carousel.Bullet; + let currSlideIndex = 0; + let currBulletIndex = 0; // code executes when the item component's shell is "seen" findComponent(Slide, (slideProps) => { - slideProps._index = currItemIndex; + slideProps._index = currSlideIndex; - currItemIndex++; + currSlideIndex++; + }); + + findComponent(Bullet, (bulletProps) => { + bulletProps._index = currBulletIndex; + + currBulletIndex++; }); processChildren(children); From 35ea86b5f2842c69fa2e4c518cbb3ab56f39ec3a Mon Sep 17 00:00:00 2001 From: jack shelton Date: Mon, 22 Jul 2024 13:36:41 -0500 Subject: [PATCH 32/86] carousel pagination --- .../headless/carousel/examples/carousel.css | 2 +- .../headless/carousel/examples/pagination.tsx | 6 ++++-- .../src/components/carousel/bullet.tsx | 7 ++++++- .../src/components/carousel/inline.tsx | 20 ++++++++++++++----- 4 files changed, 26 insertions(+), 9 deletions(-) diff --git a/apps/website/src/routes/docs/headless/carousel/examples/carousel.css b/apps/website/src/routes/docs/headless/carousel/examples/carousel.css index 4c0b02a39..f26024d36 100644 --- a/apps/website/src/routes/docs/headless/carousel/examples/carousel.css +++ b/apps/website/src/routes/docs/headless/carousel/examples/carousel.css @@ -56,7 +56,7 @@ padding-inline: 0.5rem; } -.pagination-underline { +.carousel-pagination-bullet[data-active] { outline: 2px dotted hsl(var(--primary)); background-color: hsla(var(--primary) / 0.08); } diff --git a/apps/website/src/routes/docs/headless/carousel/examples/pagination.tsx b/apps/website/src/routes/docs/headless/carousel/examples/pagination.tsx index b3ea525a6..ddf18fd77 100644 --- a/apps/website/src/routes/docs/headless/carousel/examples/pagination.tsx +++ b/apps/website/src/routes/docs/headless/carousel/examples/pagination.tsx @@ -24,9 +24,11 @@ export default component$(() => { ))} - + {colors.map((color, index) => ( - {index + 1} + + {index + 1} + ))} diff --git a/packages/kit-headless/src/components/carousel/bullet.tsx b/packages/kit-headless/src/components/carousel/bullet.tsx index 5536d2749..fd86c946e 100644 --- a/packages/kit-headless/src/components/carousel/bullet.tsx +++ b/packages/kit-headless/src/components/carousel/bullet.tsx @@ -15,7 +15,12 @@ export const CarouselBullet = component$(({ _index, ...props }: BulletProps) => }); return ( - ); diff --git a/packages/kit-headless/src/components/carousel/inline.tsx b/packages/kit-headless/src/components/carousel/inline.tsx index 2ab181d12..514b3a681 100644 --- a/packages/kit-headless/src/components/carousel/inline.tsx +++ b/packages/kit-headless/src/components/carousel/inline.tsx @@ -4,10 +4,18 @@ import { Carousel } from '@qwik-ui/headless'; import { findComponent, processChildren } from '../../utils/inline-component'; type InternalProps = { - _index?: number; value?: string; + /** + * @deprecated Use `slideComponent` instead. + */ carouselSlideComponent?: typeof Carousel.Slide; + /** + * @deprecated Use `bulletComponent` instead. + */ carouselBulletComponent?: typeof Carousel.Bullet; + + slideComponent?: typeof Carousel.Slide; + bulletComponent?: typeof Carousel.Bullet; }; export const CarouselRoot: Component = ( @@ -15,12 +23,14 @@ export const CarouselRoot: Component = ( ) => { const { children, - carouselSlideComponent: GivenSlide, - carouselBulletComponent: GivenBullet, + carouselSlideComponent: GivenSlideOld, + carouselBulletComponent: GivenBulletOld, + slideComponent: GivenSlide, + bulletComponent: GivenBullet, ...rest } = props; - const Slide = GivenSlide || Carousel.Slide; - const Bullet = GivenBullet || Carousel.Bullet; + const Slide = GivenSlide || GivenSlideOld || Carousel.Slide; + const Bullet = GivenBullet || GivenBulletOld || Carousel.Bullet; let currSlideIndex = 0; let currBulletIndex = 0; From 3950b8889af957c3df353b8aa594586bcc4a0f0b Mon Sep 17 00:00:00 2001 From: jack shelton Date: Mon, 22 Jul 2024 14:09:02 -0500 Subject: [PATCH 33/86] first attempt at multiple slides per view --- .../headless/carousel/examples/carousel.css | 5 ++++ .../carousel/examples/multiple-slides.tsx | 26 +++++++++++++++++++ .../routes/docs/headless/carousel/index.mdx | 4 +++ 3 files changed, 35 insertions(+) create mode 100644 apps/website/src/routes/docs/headless/carousel/examples/multiple-slides.tsx diff --git a/apps/website/src/routes/docs/headless/carousel/examples/carousel.css b/apps/website/src/routes/docs/headless/carousel/examples/carousel.css index f26024d36..2d7435a29 100644 --- a/apps/website/src/routes/docs/headless/carousel/examples/carousel.css +++ b/apps/website/src/routes/docs/headless/carousel/examples/carousel.css @@ -64,3 +64,8 @@ .carousel-pagination-bullet:hover { background-color: hsla(var(--primary) / 0.08); } + +.carousel-half-size { + --slide-size: 50%; + border: 2px dotted hsl(var(--primary)); +} diff --git a/apps/website/src/routes/docs/headless/carousel/examples/multiple-slides.tsx b/apps/website/src/routes/docs/headless/carousel/examples/multiple-slides.tsx new file mode 100644 index 000000000..75c3a6d48 --- /dev/null +++ b/apps/website/src/routes/docs/headless/carousel/examples/multiple-slides.tsx @@ -0,0 +1,26 @@ +import { component$, useStyles$ } from '@builder.io/qwik'; +import { Carousel } from '@qwik-ui/headless'; + +export default component$(() => { + useStyles$(styles); + + const colors = ['red', 'green', 'blue', 'yellow', 'purple', 'orange', 'pink']; + + return ( + +
+ Prev + Next +
+ + {colors.map((color) => ( + + {color} + + ))} + + + ); +}); +// internal +import styles from './carousel.css?inline'; diff --git a/apps/website/src/routes/docs/headless/carousel/index.mdx b/apps/website/src/routes/docs/headless/carousel/index.mdx index 5813c40bc..c8e034b8f 100644 --- a/apps/website/src/routes/docs/headless/carousel/index.mdx +++ b/apps/website/src/routes/docs/headless/carousel/index.mdx @@ -53,6 +53,10 @@ A control that displays a set of content in a scrolling container. +## Multiple Slides + + + ## CSR From 7bbf2062233ebc20ecd8fe44601a13ff57f2ebaf Mon Sep 17 00:00:00 2001 From: jack shelton Date: Mon, 22 Jul 2024 17:02:23 -0500 Subject: [PATCH 34/86] update next button based on slidesPerView --- .../carousel/examples/multiple-slides.tsx | 9 ++++- .../src/components/carousel/context.ts | 1 + .../src/components/carousel/next.tsx | 35 ++++++++++++++++--- .../src/components/carousel/root.tsx | 6 ++++ 4 files changed, 45 insertions(+), 6 deletions(-) diff --git a/apps/website/src/routes/docs/headless/carousel/examples/multiple-slides.tsx b/apps/website/src/routes/docs/headless/carousel/examples/multiple-slides.tsx index 75c3a6d48..72252ae03 100644 --- a/apps/website/src/routes/docs/headless/carousel/examples/multiple-slides.tsx +++ b/apps/website/src/routes/docs/headless/carousel/examples/multiple-slides.tsx @@ -7,7 +7,7 @@ export default component$(() => { const colors = ['red', 'green', 'blue', 'yellow', 'purple', 'orange', 'pink']; return ( - +
Prev Next @@ -19,6 +19,13 @@ export default component$(() => { ))} + + {colors.map((color, index) => ( + + {index + 1} + + ))} + ); }); diff --git a/packages/kit-headless/src/components/carousel/context.ts b/packages/kit-headless/src/components/carousel/context.ts index 23a7dcbe7..fcfc9df2d 100644 --- a/packages/kit-headless/src/components/carousel/context.ts +++ b/packages/kit-headless/src/components/carousel/context.ts @@ -11,6 +11,7 @@ export interface CarouselContext { slideOffsetSig: Signal; numSlidesSig: Signal; spaceBetweenSlides: number; + slidesPerViewSig: Signal; slideRefsArray: Signal>; /* diff --git a/packages/kit-headless/src/components/carousel/next.tsx b/packages/kit-headless/src/components/carousel/next.tsx index 0b81cb7a4..fd7c79a3f 100644 --- a/packages/kit-headless/src/components/carousel/next.tsx +++ b/packages/kit-headless/src/components/carousel/next.tsx @@ -1,18 +1,43 @@ -import { PropsOf, Slot, component$, useContext } from '@builder.io/qwik'; +import { + PropsOf, + Slot, + component$, + useContext, + useTask$, + useSignal, +} from '@builder.io/qwik'; import { carouselContextId } from './context'; import { VisuallyHidden } from '../../utils/visually-hidden'; export const CarouselNext = component$((props: PropsOf<'button'>) => { const context = useContext(carouselContextId); + const isLastSlideInViewSig = useSignal(false); + const initialLoadSig = useSignal(true); + + useTask$(function updateSlidesPerViewState({ track }) { + track(() => context.currentIndexSig.value); + + if (initialLoadSig.value) return; + + const lastScrollableIndex = + context.numSlidesSig.value - context.slidesPerViewSig.value; + + isLastSlideInViewSig.value = context.currentIndexSig.value >= lastScrollableIndex; + }); + + useTask$(() => { + initialLoadSig.value = false; + }); return ( ); diff --git a/packages/kit-headless/src/components/carousel/previous.tsx b/packages/kit-headless/src/components/carousel/previous.tsx index 782ef64c2..c0a138e1e 100644 --- a/packages/kit-headless/src/components/carousel/previous.tsx +++ b/packages/kit-headless/src/components/carousel/previous.tsx @@ -1,36 +1,54 @@ -import { PropsOf, Slot, component$, useContext, useSignal, $ } from '@builder.io/qwik'; +import { + PropsOf, + Slot, + component$, + useContext, + useSignal, + $, + useId, +} from '@builder.io/qwik'; import { carouselContextId } from './context'; import { VisuallyHidden } from '../../utils/visually-hidden'; export const CarouselPrevious = component$((props: PropsOf<'button'>) => { const context = useContext(carouselContextId); const isKeyboardFocusSig = useSignal(false); + const previousId = useId(); - const handleFocus$ = $((e: FocusEvent) => { - isKeyboardFocusSig.value = e.detail === 0; - }); - - const handleBlur$ = $(() => { + const handleFocusNext$ = $(() => { if (isKeyboardFocusSig.value && context.currentIndexSig.value === 0) { - context.nextButtonRef.value?.focus(); + const activeElAtBlur = document.activeElement; + setTimeout(() => { + if (document.activeElement !== activeElAtBlur) return; + if (context.currentIndexSig.value === 0) { + context.nextButtonRef.value?.focus(); + } + }, 2000); } isKeyboardFocusSig.value = false; }); + const handleKeyDown$ = $(() => { + isKeyboardFocusSig.value = true; + }); + + const handleClick$ = $(() => { + context.currentIndexSig.value--; + }); + return ( ); diff --git a/packages/kit-headless/src/components/carousel/root.tsx b/packages/kit-headless/src/components/carousel/root.tsx index b9d499525..33562a00c 100644 --- a/packages/kit-headless/src/components/carousel/root.tsx +++ b/packages/kit-headless/src/components/carousel/root.tsx @@ -67,13 +67,13 @@ export const CarouselBase = component$( useContextProvider(carouselContextId, context); return ( -
+
- Slide {context.currentIndexSig.value} of - {context.numSlidesSig.value} + Slide {context.currentIndexSig.value + 1} of + {numSlidesSig.value} -
+
); }, ); diff --git a/packages/kit-headless/src/components/carousel/slide.tsx b/packages/kit-headless/src/components/carousel/slide.tsx index 5e097a12f..dca39317f 100644 --- a/packages/kit-headless/src/components/carousel/slide.tsx +++ b/packages/kit-headless/src/components/carousel/slide.tsx @@ -5,6 +5,7 @@ import { useContext, useTask$, useSignal, + useComputed$, } from '@builder.io/qwik'; import { carouselContextId } from './context'; @@ -15,6 +16,9 @@ export type CarouselSlideProps = PropsOf<'div'> & { export const CarouselSlide = component$(({ _index, ...props }: CarouselSlideProps) => { const context = useContext(carouselContextId); const slideRef = useSignal(); + const isActiveSig = useComputed$(() => { + return context.currentIndexSig.value === _index; + }); useTask$(function getIndexOrder() { if (_index !== undefined) { @@ -25,7 +29,14 @@ export const CarouselSlide = component$(({ _index, ...props }: CarouselSlideProp }); return ( -
+
); From 847613bd180d492544275b081d8f138d49784ab8 Mon Sep 17 00:00:00 2001 From: jack shelton Date: Tue, 23 Jul 2024 17:51:54 -0500 Subject: [PATCH 46/86] without scrollbar --- .../carousel/examples/without-scroller.tsx | 24 +++++++++++++++++++ .../routes/docs/headless/carousel/index.mdx | 4 ++++ .../src/components/carousel/context.ts | 1 + .../src/components/carousel/root.tsx | 2 ++ .../src/components/carousel/scroller.tsx | 4 ++++ .../src/components/carousel/slide.tsx | 4 ++++ 6 files changed, 39 insertions(+) create mode 100644 apps/website/src/routes/docs/headless/carousel/examples/without-scroller.tsx diff --git a/apps/website/src/routes/docs/headless/carousel/examples/without-scroller.tsx b/apps/website/src/routes/docs/headless/carousel/examples/without-scroller.tsx new file mode 100644 index 000000000..28750b838 --- /dev/null +++ b/apps/website/src/routes/docs/headless/carousel/examples/without-scroller.tsx @@ -0,0 +1,24 @@ +import { component$, useStyles$ } from '@builder.io/qwik'; +import { Carousel } from '@qwik-ui/headless'; + +export default component$(() => { + useStyles$(styles); + + const colors = ['red', 'green', 'blue', 'yellow', 'purple', 'orange', 'pink']; + + return ( + +
+ Prev + Next +
+ {colors.map((color) => ( + + {color} + + ))} + + ); +}); +// internal +import styles from './carousel.css?inline'; diff --git a/apps/website/src/routes/docs/headless/carousel/index.mdx b/apps/website/src/routes/docs/headless/carousel/index.mdx index ca8e300e2..71b719966 100644 --- a/apps/website/src/routes/docs/headless/carousel/index.mdx +++ b/apps/website/src/routes/docs/headless/carousel/index.mdx @@ -65,6 +65,10 @@ A control that displays a set of content in a scrolling container. +## Without Scroller + + + ## CSR diff --git a/packages/kit-headless/src/components/carousel/context.ts b/packages/kit-headless/src/components/carousel/context.ts index 9e9a7c99d..74e366f92 100644 --- a/packages/kit-headless/src/components/carousel/context.ts +++ b/packages/kit-headless/src/components/carousel/context.ts @@ -6,6 +6,7 @@ import { type Signal } from '@builder.io/qwik'; export interface CarouselContext { isDraggableSig: Signal; + isScrollerSig: Signal; // source of truth slideOffsetSig: Signal; diff --git a/packages/kit-headless/src/components/carousel/root.tsx b/packages/kit-headless/src/components/carousel/root.tsx index 33562a00c..570ab2bf0 100644 --- a/packages/kit-headless/src/components/carousel/root.tsx +++ b/packages/kit-headless/src/components/carousel/root.tsx @@ -45,6 +45,7 @@ export const CarouselBase = component$( const gapSig = useComputed$(() => { return props.gap ?? 0; }); + const isScrollerSig = useSignal(false); const context: CarouselContext = { isDraggableSig, @@ -62,6 +63,7 @@ export const CarouselBase = component$( slidesPerViewSig, nextButtonRef, prevButtonRef, + isScrollerSig, }; useContextProvider(carouselContextId, context); diff --git a/packages/kit-headless/src/components/carousel/scroller.tsx b/packages/kit-headless/src/components/carousel/scroller.tsx index 18f6c94df..6c5a73995 100644 --- a/packages/kit-headless/src/components/carousel/scroller.tsx +++ b/packages/kit-headless/src/components/carousel/scroller.tsx @@ -24,6 +24,10 @@ export const CarouselScroller = component$((props: CarouselContainerProps) => { const isTouchDeviceSig = useSignal(false); const isTouchMovingSig = useSignal(true); + useTask$(() => { + context.isScrollerSig.value = true; + }); + const getSlidePosition$ = $((index: number) => { if (!context.containerRef.value) return 0; const slides = context.slideRefsArray.value; diff --git a/packages/kit-headless/src/components/carousel/slide.tsx b/packages/kit-headless/src/components/carousel/slide.tsx index dca39317f..f63571a67 100644 --- a/packages/kit-headless/src/components/carousel/slide.tsx +++ b/packages/kit-headless/src/components/carousel/slide.tsx @@ -19,6 +19,9 @@ export const CarouselSlide = component$(({ _index, ...props }: CarouselSlideProp const isActiveSig = useComputed$(() => { return context.currentIndexSig.value === _index; }); + const isHiddenSig = useComputed$(() => { + return !context.isScrollerSig.value && !isActiveSig.value; + }); useTask$(function getIndexOrder() { if (_index !== undefined) { @@ -33,6 +36,7 @@ export const CarouselSlide = component$(({ _index, ...props }: CarouselSlideProp ref={slideRef} data-active={isActiveSig.value ? '' : undefined} inert={!isActiveSig.value} + hidden={isHiddenSig.value} aria-roledescription="slide" data-qui-carousel-slide {...props} From 14aef9c77d3492229a5b50cd686ebb03cdae3f6e Mon Sep 17 00:00:00 2001 From: jack shelton Date: Tue, 23 Jul 2024 18:17:40 -0500 Subject: [PATCH 47/86] better styles and remove num slides in inline --- .../src/routes/docs/headless/carousel/examples/carousel.css | 3 ++- packages/kit-headless/src/components/carousel/inline.tsx | 1 - 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/website/src/routes/docs/headless/carousel/examples/carousel.css b/apps/website/src/routes/docs/headless/carousel/examples/carousel.css index 940bccf57..3c80cf344 100644 --- a/apps/website/src/routes/docs/headless/carousel/examples/carousel.css +++ b/apps/website/src/routes/docs/headless/carousel/examples/carousel.css @@ -4,7 +4,7 @@ .carousel-scroller { display: flex; - padding-block: 0.5rem; + margin-bottom: 0.5rem; } .carousel-slide { @@ -14,6 +14,7 @@ border: 2px dotted hsl(var(--primary)); min-height: 10rem; + margin-top: 0.5rem; } .carousel-pagination { diff --git a/packages/kit-headless/src/components/carousel/inline.tsx b/packages/kit-headless/src/components/carousel/inline.tsx index ea9f0098b..879a1e223 100644 --- a/packages/kit-headless/src/components/carousel/inline.tsx +++ b/packages/kit-headless/src/components/carousel/inline.tsx @@ -53,7 +53,6 @@ export const CarouselRoot: Component = ( return ( - {numSlides} {props.children} ); From 050a8783da3670d93e675094e69f5e9c0165b27d Mon Sep 17 00:00:00 2001 From: jack shelton Date: Tue, 23 Jul 2024 23:40:28 -0500 Subject: [PATCH 48/86] transitions sort of working --- .../headless/carousel/examples/carousel.css | 18 +++++++++++++ .../carousel/examples/conditional.tsx | 26 +++++++++++++++++++ .../routes/docs/headless/carousel/index.mdx | 26 +++++++++++++++++++ .../src/components/carousel/slide.tsx | 7 ++--- 4 files changed, 74 insertions(+), 3 deletions(-) create mode 100644 apps/website/src/routes/docs/headless/carousel/examples/conditional.tsx diff --git a/apps/website/src/routes/docs/headless/carousel/examples/carousel.css b/apps/website/src/routes/docs/headless/carousel/examples/carousel.css index 3c80cf344..7b5ec7d4b 100644 --- a/apps/website/src/routes/docs/headless/carousel/examples/carousel.css +++ b/apps/website/src/routes/docs/headless/carousel/examples/carousel.css @@ -61,3 +61,21 @@ flex-basis: 50%; border: 2px dotted hsl(var(--primary)); } + +.carousel-conditional { + position: relative; + height: 200px; +} + +.carousel-conditional .carousel-slide { + opacity: 0; + transition: opacity 0.5s; + /* NOT display block */ + display: revert; + position: absolute; + inset: 0; +} + +.carousel-conditional .carousel-slide[data-active] { + opacity: 1; +} diff --git a/apps/website/src/routes/docs/headless/carousel/examples/conditional.tsx b/apps/website/src/routes/docs/headless/carousel/examples/conditional.tsx new file mode 100644 index 000000000..fbebf2938 --- /dev/null +++ b/apps/website/src/routes/docs/headless/carousel/examples/conditional.tsx @@ -0,0 +1,26 @@ +import { component$, useStyles$ } from '@builder.io/qwik'; +import { Carousel } from '@qwik-ui/headless'; + +export default component$(() => { + useStyles$(styles); + + const colors = ['red', 'green', 'blue', 'yellow', 'purple', 'orange', 'pink']; + + return ( + +
+ Prev + Next +
+
+ {colors.map((color) => ( + + {color} + + ))} +
+ + ); +}); +// internal +import styles from './carousel.css?inline'; diff --git a/apps/website/src/routes/docs/headless/carousel/index.mdx b/apps/website/src/routes/docs/headless/carousel/index.mdx index 71b719966..49e058141 100644 --- a/apps/website/src/routes/docs/headless/carousel/index.mdx +++ b/apps/website/src/routes/docs/headless/carousel/index.mdx @@ -69,6 +69,32 @@ A control that displays a set of content in a scrolling container. +## Animations + +### Conditional Slides + + + +```css +.carousel-conditional { + position: relative; + height: 200px; +} + +.carousel-conditional .carousel-slide { + opacity: 0; + transition: opacity 2.5s; + /* NOT display block */ + display: revert; + position: absolute; + inset: 0; +} + +.carousel-conditional .carousel-slide[data-active] { + opacity: 1; +} +``` + ## CSR diff --git a/packages/kit-headless/src/components/carousel/slide.tsx b/packages/kit-headless/src/components/carousel/slide.tsx index f63571a67..058427881 100644 --- a/packages/kit-headless/src/components/carousel/slide.tsx +++ b/packages/kit-headless/src/components/carousel/slide.tsx @@ -19,7 +19,8 @@ export const CarouselSlide = component$(({ _index, ...props }: CarouselSlideProp const isActiveSig = useComputed$(() => { return context.currentIndexSig.value === _index; }); - const isHiddenSig = useComputed$(() => { + /** Used to hide the actual slide when it's inactive */ + const isInactiveSig = useComputed$(() => { return !context.isScrollerSig.value && !isActiveSig.value; }); @@ -34,11 +35,11 @@ export const CarouselSlide = component$(({ _index, ...props }: CarouselSlideProp return (