Product gallery image grid - GCOM-1052

.vscode/settings.json

@@ -2,10 +2,12 @@
   "editor.formatOnSave": true,
   "editor.tabSize": 2,
   "editor.defaultFormatter": "esbenp.prettier-vscode",
-  "editor.codeActionsOnSave": { "source.fixAll.eslint": false },
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": "never"
+  },
   "editor.snippetSuggestions": "none",
   "emmet.showExpandedAbbreviation": "never",
-  "editor.wordBasedSuggestions": false,
+  "editor.wordBasedSuggestions": "off",
   "javascript.suggest.names": false,
   "typescript.tsdk": "node_modules/typescript/lib",
   "search.exclude": {

docs/framework/config.md

@@ -425,6 +425,6 @@ Number of recently viewed products to be stored in localStorage
 
 SidebarGalleryConfig will contain all configuration values for the Sidebar Gallery component.
 
-#### paginationVariant: 'DOTS' | 'THUMBNAILS_BOTTOM'
+#### paginationVariant: 'DOTS' | 'GRID' | 'THUMBNAILS_BOTTOM'
 
 Variant used for the pagination

examples/magento-graphcms/pages/blog/[url].tsx

@@ -1,6 +1,6 @@
 import { PageOptions } from '@graphcommerce/framer-next-pages'
 import { hygraphPageContent, HygraphPagesQuery } from '@graphcommerce/graphcms-ui'
-import { StoreConfigDocument } from '@graphcommerce/magento-store'
+import { redirectOrNotFound, StoreConfigDocument } from '@graphcommerce/magento-store'
 import {
   PageMeta,
   BlogTitle,
@@ -94,6 +94,7 @@ export const getStaticProps: GetPageStaticProps = async ({ locale, params }) =>
     query: BlogListDocument,
     variables: { currentUrl: [`blog/${urlKey}`], first: limit },
   })
+
   if (!(await page).data.pages?.[0]) return { notFound: true }
 
   return {

packages/framer-scroller/components/ScrollerProvider.tsx

@@ -166,6 +166,8 @@ export function ScrollerProvider(props: ScrollerProviderProps) {
       const itemsArr: unknown[] = items.get().slice()
       itemsArr.length = count
 
+      console.log('Registering children', itemsArr)
+
       items.set(
         itemsArr.fill(undefined).map<ItemState>((_, i) => ({
           visibility: motionValue(i === 0 ? 1 : 0),

packages/magento-pagebuilder/ContentTypes/Slider/AutoScroll.tsx

@@ -7,7 +7,7 @@ type AutoScrollProps = {
 }
 
 export function AutoScroll(props: AutoScrollProps) {
-  const { getScrollSnapPositions, getSnapPosition, scrollerRef, scroll } = useScrollerContext()
+  const { getScrollSnapPositions, getSnapPosition, scroll } = useScrollerContext()
   const scrollTo = useScrollTo()
   const { pause = false, timePerSlide = 7500 } = props
   const { xProgress } = scroll

packages/magento-product/hooks/useStickyEffect.ts

@@ -0,0 +1,50 @@
+import { useEffect, useRef } from 'react'
+
+export function useStickyEffect() {
+  const marginRef = useRef<HTMLDivElement>(null)
+  const sidebarRef = useRef<HTMLDivElement>(null)
+  const wrapperRef = useRef<HTMLDivElement>(null)
+
+  const lastScrollTop = useRef(typeof document === 'undefined' ? 0 : document.body.scrollTop)
+
+  const handleScroll = () => {
+    const marginElement = marginRef.current
+    const sidebarElement = sidebarRef.current
+    const wrapperElement = wrapperRef.current
+
+    if (!(marginElement && sidebarElement && wrapperElement)) return
+
+    const { height: sidebarHeight } = sidebarElement.getBoundingClientRect()
+    const { scrollTop } = document.documentElement
+    const scrollDirection = scrollTop > lastScrollTop.current ? 1 : 0
+
+    if (lastScrollTop.current === scrollTop || sidebarHeight <= window.innerHeight) {
+      sidebarElement.style.top = '0px'
+      sidebarElement.style.bottom = ''
+      marginElement.style.marginTop = ''
+      return
+    }
+
+    const wrapperBounds = wrapperElement.getBoundingClientRect()
+    const sidebarBounds = sidebarElement.getBoundingClientRect()
+
+    marginElement.style.marginTop = `${sidebarBounds.top - wrapperBounds.top}px`
+
+    if (scrollDirection === 1) {
+      sidebarElement.style.bottom = ''
+      sidebarElement.style.top = `-${sidebarHeight - window.innerHeight}px`
+    } else {
+      sidebarElement.style.top = ''
+      sidebarElement.style.bottom = `-${sidebarHeight - window.innerHeight}px`
+    }
+
+    lastScrollTop.current = scrollTop
+  }
+
+  useEffect(() => {
+    window.addEventListener('scroll', handleScroll)
+    return () => window.removeEventListener('scroll', handleScroll)
+  }, [])
+
+  return [marginRef, sidebarRef, wrapperRef]
+}

packages/next-ui/Config.graphqls

@@ -11,6 +11,7 @@ Enumeration of all possible positions for the sidebar gallery thumbnails.
 enum SidebarGalleryPaginationVariant {
   DOTS
   THUMBNAILS_BOTTOM
+  GRID
 }
 
 """

packages/next-ui/FramerScroller/GalleryZoom.tsx

@@ -0,0 +1,12 @@
+import React from 'react'
+import { UseGalleryZoomProps, useGalleryZoom } from '../hooks/useGalleryZoom'
+
+type GalleryZoomProps = UseGalleryZoomProps & {
+  children?: (props: ReturnType<typeof useGalleryZoom>) => React.ReactNode
+}
+
+export function GalleryZoom(props: GalleryZoomProps) {
+  const { children, ...rest } = props
+  const galleryZoom = useGalleryZoom(rest)
+  return <>{children?.(galleryZoom)}</>
+}