blocks-dusted 0.1.12 → 0.1.13

package/templates/blocks/DD-NineCanvas/RenderBlocks.tsx

@@ -0,0 +1,244 @@
+'use client'
+import { cn } from '@/utilities/ui'
+import React, { Fragment } from 'react'
+
+import { AnimatePresence } from 'framer-motion'
+import { FadeOnScroll } from './utilities/FadeOnScroll'
+import { extractCustomCSS } from './utilities/renderCustomCSS'
+import ParallaxWrapper from './utilities/ParallaxWrapper'
+import { blockComponents } from './blockComponents'
+
+interface BlockProps {
+  sectionId?: string
+  disableInnerContainer?: boolean
+
+  scrollBehavior?: 'normal' | 'stickToTop' | 'stickToTopFade' | 'parallax'
+
+  sticky?: boolean
+  stickyTopOffset?: number
+  stickyZIndex?: number
+
+  fadeOnScroll?: boolean
+  useAbsoluteScroll?: boolean
+  fadeStartProgress?: number
+  fadeStartPixels?: number
+  fadeEndProgress?: number
+  fadeEndPixels?: number
+  fadeFinalOpacity?: number
+  fadeOffsetStart?: 'start start' | 'start center' | 'start end' | `start ${number}%`
+  fadeOffsetEnd?: 'start start' | 'start center' | 'start end' | `start ${number}%`
+
+  parallaxEnabled?: boolean
+  parallaxDistance?: number
+  parallaxDirection?: 'up' | 'down'
+  showScrollDebugMarkers?: boolean
+  gsapSelector?: string
+  pinTargetSelector?: string
+  pinSpacing?: number
+  scrollDuration?: number
+  scrollSpeed?: number
+
+  sectionStyle?: React.CSSProperties
+
+  initialYFadeValue?: number
+  isFadeOnce?: boolean
+  fadeStiffValue?: number
+  fadeDampValue?: number
+  exitYFadeValue?: number | string
+
+  [key: string]: any
+}
+
+const toNumber = (value: unknown, fallback: number): number => {
+  if (typeof value === 'number' && Number.isFinite(value)) return value
+
+  if (typeof value === 'string') {
+    const parsed = Number(value)
+    if (Number.isFinite(parsed)) return parsed
+  }
+
+  return fallback
+}
+
+export const RenderBlocks: React.FC<{
+  blocks: Array<BlockProps & { blockType: string }>
+}> = (props) => {
+  const { blocks } = props
+
+  if (!blocks || !Array.isArray(blocks) || blocks.length === 0) return null
+
+  const customCSS = extractCustomCSS(blocks as any)
+
+  return (
+    <>
+      {customCSS && <style dangerouslySetInnerHTML={{ __html: customCSS }} />}
+
+      {blocks.map((block, index) => {
+        const { blockType } = block
+
+        if (!blockType || !(blockType in blockComponents)) return null
+
+        const Block = blockComponents[blockType]
+        if (!Block) return null
+
+        const blockProps = block as BlockProps
+
+        const key =
+          'id' in (block as any) && (block as any).id
+            ? `block-${(block as any).id}-${blockType}`
+            : `block-${index}-${blockType}`
+
+        const sectionId = blockProps.sectionId
+        const scrollSpeed = blockProps.scrollSpeed
+
+        const scrollBehavior = blockProps.scrollBehavior || 'normal'
+
+        const isProjectsSliderSticky =
+          blockType === 'projectsSlider' && blockProps.stickyToTop === true
+
+        const isSticky =
+          scrollBehavior === 'stickToTop' ||
+          scrollBehavior === 'stickToTopFade' ||
+          blockProps.sticky === true
+
+        const isStickyFade =
+          scrollBehavior === 'stickToTopFade' ||
+          (blockProps.sticky === true && blockProps.fadeOnScroll === true)
+
+        const isParallax = scrollBehavior === 'parallax' || blockProps.parallaxEnabled === true
+
+        const stickyTopOffset = toNumber(blockProps.stickyTopOffset, 0)
+        const stickyZIndex = toNumber(blockProps.stickyZIndex, 5)
+
+        const sectionStyle =
+          blockProps.sectionStyle && typeof blockProps.sectionStyle === 'object'
+            ? (blockProps.sectionStyle as React.CSSProperties)
+            : undefined
+
+        const wrapperlessBlockTypes = new Set([
+          'asideNav',
+          'studioHorizontalScroll',
+          'studioStackCards',
+        ])
+
+        const shouldRenderWrapperless =
+          wrapperlessBlockTypes.has(blockType) ||
+          (blockType === 'projectsSlider' && blockProps.stickyToTop === true)
+
+        if (shouldRenderWrapperless) {
+          return <Block suppressHydrationWarning key={key} {...blockProps} disableInnerContainer />
+        }
+
+        const blockElement = <Block {...blockProps} disableInnerContainer />
+        const isNineCanvasBlock = blockType === 'nineCanvasBlock'
+
+        const sharedDataProps = {
+          suppressHydrationWarning: true,
+          id: isNineCanvasBlock ? 'ninecanvas' : sectionId,
+          'data-block-type': blockType,
+          'data-ninecanvas-gesture-owner': blockType === 'DD-Carousel-A' ? true : undefined,
+          'data-projects-slider-sticky': isProjectsSliderSticky ? 'true' : undefined,
+          'data-scroll': scrollSpeed ? true : undefined,
+          'data-scroll-speed': scrollSpeed ? String(scrollSpeed) : undefined,
+        }
+
+        if (isParallax) {
+          return (
+            <AnimatePresence key={key} mode="sync">
+              <section
+                {...sharedDataProps}
+                className={cn('m-0 renderblock-container relative overflow-visible', sectionId)}
+                style={sectionStyle}
+              >
+                <ParallaxWrapper
+                  sectionId={sectionId}
+                  animationConfig={{
+                    scrollToSelector: blockProps.scrollToSelector,
+                    triggerSelector: blockProps.gsapSelector,
+                    pinTargetSelector: blockProps.pinTargetSelector,
+                    pinSpacing: blockProps.pinSpacing,
+                    scrollDuration: blockProps.scrollDuration,
+                    parallaxDistance: blockProps.parallaxDistance ?? 120,
+                    parallaxDirection: blockProps.parallaxDirection ?? 'up',
+                    markers: blockProps.showScrollDebugMarkers,
+                  }}
+                >
+                  {blockElement}
+                </ParallaxWrapper>
+              </section>
+            </AnimatePresence>
+          )
+        }
+
+        if (isStickyFade) {
+          return (
+            <AnimatePresence key={key} mode="sync">
+              <section
+                {...sharedDataProps}
+                className={cn('m-0 renderblock-container sticky overflow-visible', sectionId)}
+                style={{
+                  top: `${stickyTopOffset}px`,
+                  zIndex: stickyZIndex,
+                  ...sectionStyle,
+                }}
+              >
+                <FadeOnScroll
+                  startFade={
+                    blockProps.useAbsoluteScroll
+                      ? (blockProps.fadeStartPixels ?? 1000)
+                      : (blockProps.fadeStartProgress ?? 0)
+                  }
+                  endFade={
+                    blockProps.useAbsoluteScroll
+                      ? (blockProps.fadeEndPixels ?? 2000)
+                      : (blockProps.fadeEndProgress ?? 0.75)
+                  }
+                  finalOpacity={blockProps.fadeFinalOpacity ?? 0}
+                  offsetStart={blockProps.fadeOffsetStart ?? 'start 50%'}
+                  offsetEnd={blockProps.fadeOffsetEnd ?? 'start 10%'}
+                  useAbsoluteScroll={blockProps.useAbsoluteScroll ?? false}
+                >
+                  {blockElement}
+                </FadeOnScroll>
+              </section>
+            </AnimatePresence>
+          )
+        }
+
+        if (isSticky) {
+          return (
+            <AnimatePresence key={key} mode="sync">
+              <section
+                {...sharedDataProps}
+                className={cn('m-0 renderblock-container sticky overflow-visible', sectionId)}
+                style={{
+                  top: `${stickyTopOffset}px`,
+                  zIndex: stickyZIndex,
+                  ...sectionStyle,
+                }}
+              >
+                {blockElement}
+              </section>
+            </AnimatePresence>
+          )
+        }
+
+        return (
+          <AnimatePresence key={key} mode="sync">
+            <section
+              {...sharedDataProps}
+              className={cn(
+                'm-0 renderblock-container relative overflow-visible',
+                isNineCanvasBlock && 'ninecanvas',
+                sectionId,
+              )}
+              style={sectionStyle}
+            >
+              {blockElement}
+            </section>
+          </AnimatePresence>
+        )
+      })}
+    </>
+  )
+}

package/templates/blocks/DD-NineCanvas/allowedCanvasBlocks.ts

@@ -0,0 +1,6 @@
+// Demo-only child registry. The original HZ registry is retained in source/.
+import { Content } from '../Content/config'
+import { DDCarouselA } from '../DD-Carousel-A/config'
+import { DDProgress } from '../DD-Progress/config'
+import { RawHtmlBlock } from '../rawHtml/config'
+export const allowedCanvasBlocks = [Content, DDCarouselA, DDProgress, RawHtmlBlock]

package/templates/blocks/DD-NineCanvas/blockComponents.tsx

@@ -0,0 +1,8 @@
+import dynamic from 'next/dynamic'
+import type { ComponentType } from 'react'
+export const blockComponents: Record<string, ComponentType<any>> = {
+  content: dynamic(() => import('../Content/Component').then((m) => m.ContentBlock)),
+  'DD-Carousel-A': dynamic(() => import('../DD-Carousel-A/Component').then((m) => m.DDCarouselA)),
+  'DD-Progress': dynamic(() => import('../DD-Progress/Component').then((m) => m.DDProgress)),
+  rawHtml: dynamic(() => import('../rawHtml/Component').then((m) => m.RawHtmlBlock)),
+}

package/templates/blocks/DD-NineCanvas/canvas/CanvasGrid.tsx

@@ -0,0 +1,316 @@
+'use client'
+import * as React from 'react'
+import { getClientPerformanceMode } from '../utilities/webglCleanup'
+
+export type CanvasPanel = {
+  id: string
+  x: number
+  y: number
+  label: string
+  content?: React.ReactNode
+}
+
+type CanvasGridProps = {
+  activeCanvas: CanvasPanel
+  canvases: CanvasPanel[]
+  onCanvasChange: (canvasId: string) => void
+}
+
+export function CanvasGrid({ activeCanvas, canvases, onCanvasChange }: CanvasGridProps) {
+  const trackRef = React.useRef<HTMLDivElement>(null)
+  const touchStartRef = React.useRef<{
+    x: number
+    y: number
+    lastY: number
+    target: EventTarget | null
+    canvasGestureAllowed: boolean
+    scrolled?: boolean
+  } | null>(null)
+  const activeContentRef = React.useRef<HTMLDivElement | null>(null)
+
+  React.useEffect(() => {
+    const el = activeContentRef.current
+    if (!el) return
+
+    const reducedPerformance = getClientPerformanceMode() === 'reduced'
+    if (reducedPerformance) {
+      const previousOverflowY = el.style.overflowY
+      el.style.overflowY = 'auto'
+      window.dispatchEvent(new CustomEvent('locomotive:resize'))
+      return () => {
+        el.style.overflowY = previousOverflowY
+      }
+    }
+
+    let cancelled = false
+    let scroll: { destroy: () => void } | undefined
+    let secondFrame = 0
+
+    const firstFrame = window.requestAnimationFrame(() => {
+      secondFrame = window.requestAnimationFrame(async () => {
+        const { default: LocomotiveScroll } = await import('locomotive-scroll')
+        if (cancelled) return
+
+        scroll = new LocomotiveScroll({
+          lenisOptions: { wrapper: el, content: el, eventsTarget: el, lerp: 0.08 },
+        })
+      })
+    })
+
+    return () => {
+      cancelled = true
+      window.cancelAnimationFrame(firstFrame)
+      window.cancelAnimationFrame(secondFrame)
+      scroll?.destroy()
+    }
+  }, [activeCanvas.id])
+
+  React.useEffect(() => {
+    const track = trackRef.current
+    if (!track) return
+
+    const getActivePanel = (target: EventTarget | null) => {
+      if (!(target instanceof Element)) return null
+
+      const panel = target.closest<HTMLElement>('.hzCanvasPanel--active')
+      return panel && track.contains(panel) ? panel : null
+    }
+
+    const getScrollableRegions = (panel: HTMLElement, target: EventTarget | null) => {
+      const regions: HTMLElement[] = []
+      let element =
+        target instanceof HTMLElement
+          ? target
+          : target instanceof Element
+            ? target.parentElement
+            : null
+
+      while (element && element !== panel) {
+        const { overflowY } = window.getComputedStyle(element)
+        const canOverflow = /^(auto|scroll|overlay)$/.test(overflowY)
+
+        if (canOverflow && element.scrollHeight > element.clientHeight) {
+          regions.push(element)
+        }
+
+        element = element.parentElement
+      }
+
+      const canvasContent = panel.querySelector<HTMLElement>('.hzCanvasContent')
+      if (canvasContent && !regions.includes(canvasContent)) regions.push(canvasContent)
+
+      return regions
+    }
+
+    const scrollElement = (element: HTMLElement, deltaY: number) => {
+      const maxScrollTop = element.scrollHeight - element.clientHeight
+      if (maxScrollTop <= 0) return false
+
+      const nextScrollTop = Math.min(Math.max(element.scrollTop + deltaY, 0), maxScrollTop)
+      if (nextScrollTop === element.scrollTop) return false
+
+      element.scrollTop = nextScrollTop
+      return true
+    }
+
+    const scrollFromTarget = (panel: HTMLElement, target: EventTarget | null, deltaY: number) =>
+      getScrollableRegions(panel, target).some((region) => scrollElement(region, deltaY))
+
+    const interactiveGestureSelector = [
+      '.carousel',
+      '.carouselList',
+      '.carouselNav',
+      '[class*="carousel-"]',
+      '[class*="Carousel"]',
+      '.embla',
+      '.embla__viewport',
+      '.embla__container',
+      '.swiper',
+      '.swiper-container',
+      '.swiper-wrapper',
+      '.swiper-slide',
+      '.ultimate-embla-carousel',
+      '.ultimate-embla-viewport',
+      '.ultimate-embla-container',
+      '[data-carousel-id]',
+      '[data-projects-slider-scroll-scene]',
+      '[data-ninecanvas-gesture-owner]',
+      'button',
+      'a',
+      'input',
+      'select',
+      'textarea',
+      '[role="button"]',
+      '[role="slider"]',
+      '[contenteditable="true"]',
+    ].join(',')
+
+    const canUseCanvasGesture = (panel: HTMLElement, target: EventTarget | null) => {
+      if (!(target instanceof Element)) return false
+
+      const gestureOwner = target.closest(interactiveGestureSelector)
+      return !gestureOwner || !panel.contains(gestureOwner)
+    }
+
+    const getAdjacentCanvas = (deltaX: number, deltaY: number) => {
+      const absX = Math.abs(deltaX)
+      const absY = Math.abs(deltaY)
+      const xOffset = absX > absY ? (deltaX < 0 ? 1 : -1) : 0
+      const yOffset = absY >= absX ? (deltaY > 0 ? -1 : 1) : 0
+
+      return canvases.find(
+        (canvas) => canvas.x === activeCanvas.x + xOffset && canvas.y === activeCanvas.y + yOffset,
+      )
+    }
+
+    const changeCanvasFromTouch = (deltaX: number, deltaY: number) => {
+      const nextCanvas = getAdjacentCanvas(deltaX, deltaY)
+      if (!nextCanvas) return false
+
+      onCanvasChange(nextCanvas.id)
+      return true
+    }
+
+    const notifyCanvasScrollDown = (deltaY: number) => {
+      if (deltaY > 0) {
+        window.dispatchEvent(new CustomEvent('hz:canvas-scroll-down'))
+      }
+    }
+
+    const handleWheel = (event: WheelEvent) => {
+      const panel = getActivePanel(event.target)
+      if (!panel) return
+
+      const deltaMultiplier =
+        event.deltaMode === WheelEvent.DOM_DELTA_LINE
+          ? 16
+          : event.deltaMode === WheelEvent.DOM_DELTA_PAGE
+            ? panel.clientHeight
+            : 1
+
+      const deltaY = event.deltaY * deltaMultiplier
+
+      if (!scrollFromTarget(panel, event.target, deltaY)) return
+
+      notifyCanvasScrollDown(deltaY)
+
+      event.preventDefault()
+      event.stopPropagation()
+    }
+
+    const handleTouchStart = (event: TouchEvent) => {
+      const panel = getActivePanel(event.target)
+      const touch = event.touches[0]
+      if (!panel || !touch) return
+
+      touchStartRef.current = {
+        x: touch.clientX,
+        y: touch.clientY,
+        lastY: touch.clientY,
+        target: event.target,
+        canvasGestureAllowed: canUseCanvasGesture(panel, event.target),
+      }
+    }
+
+    const handleTouchMove = (event: TouchEvent) => {
+      const panel = getActivePanel(event.target)
+      const touch = event.touches[0]
+      const touchStart = touchStartRef.current
+      if (!panel || !touchStart || !touch) return
+
+      const deltaY = touchStart.lastY - touch.clientY
+      touchStart.lastY = touch.clientY
+
+      if (scrollFromTarget(panel, event.target, deltaY)) {
+        touchStart.scrolled = true
+        notifyCanvasScrollDown(deltaY)
+
+        event.preventDefault()
+        event.stopPropagation()
+      }
+    }
+
+    const handleTouchEnd = (event: TouchEvent) => {
+      const panel =
+        getActivePanel(event.target) ?? getActivePanel(touchStartRef.current?.target ?? null)
+      const touchStart = touchStartRef.current
+      touchStartRef.current = null
+
+      if (!panel || !touchStart || !touchStart.canvasGestureAllowed) return
+
+      const touch = event.changedTouches[0]
+      if (!touch) return
+
+      const deltaX = touch.clientX - touchStart.x
+      const deltaY = touchStart.y - touch.clientY
+      const absX = Math.abs(deltaX)
+      const absY = Math.abs(deltaY)
+      const isHorizontalSwipe = absX >= 56 && absX > absY * 1.25
+      const isVerticalSwipe = absY >= 56 && absY > absX * 1.25
+
+      if (!isHorizontalSwipe && !isVerticalSwipe) return
+      // A vertical gesture consumed by nested scrolling must not also change panels.
+      if (isVerticalSwipe && touchStart.scrolled) return
+
+      if (changeCanvasFromTouch(deltaX, deltaY)) {
+        event.preventDefault()
+        event.stopPropagation()
+      }
+    }
+
+    const handleTouchCancel = () => {
+      touchStartRef.current = null
+    }
+    track.addEventListener('wheel', handleWheel, { passive: false })
+    track.addEventListener('touchstart', handleTouchStart, { passive: true })
+    track.addEventListener('touchmove', handleTouchMove, { passive: false })
+    track.addEventListener('touchend', handleTouchEnd, { passive: false })
+    track.addEventListener('touchcancel', handleTouchCancel, { passive: true })
+
+    return () => {
+      track.removeEventListener('wheel', handleWheel)
+      track.removeEventListener('touchstart', handleTouchStart)
+      track.removeEventListener('touchmove', handleTouchMove)
+      track.removeEventListener('touchend', handleTouchEnd)
+      track.removeEventListener('touchcancel', handleTouchCancel)
+    }
+  }, [activeCanvas, canvases, onCanvasChange])
+
+  return (
+    <div ref={trackRef} className={`hzCanvasTrack hzCanvasTrack--${activeCanvas.id}`}>
+      {canvases.map((canvas) => {
+        const isActive = canvas.id === activeCanvas.id
+
+        return (
+          <section
+            aria-label={canvas.label}
+            aria-hidden={!isActive}
+            inert={!isActive}
+            className={[
+              'hzCanvasPanel',
+              isActive ? 'hzCanvasPanel--active' : '',
+              `hzCanvasPanel--x-${canvas.x === -1 ? 'neg1' : canvas.x === 1 ? 'pos1' : '0'}`,
+              `hzCanvasPanel--y-${canvas.y === -1 ? 'neg1' : canvas.y === 1 ? 'pos1' : '0'}`,
+            ]
+              .filter(Boolean)
+              .join(' ')}
+            data-active={isActive ? 'true' : undefined}
+            key={canvas.id}
+            onClick={() => onCanvasChange(canvas.id)}
+          >
+            <div
+              ref={isActive ? activeContentRef : undefined}
+              className="hzCanvasContent"
+              data-canvas-content={canvas.id}
+              data-scroll-container={isActive ? true : undefined}
+              onClick={(event) => event.stopPropagation()}
+            >
+              {canvas.content ||
+                (isActive ? <p className="hzCanvasEmpty">{canvas.label}</p> : null)}
+            </div>
+          </section>
+        )
+      })}
+    </div>
+  )
+}