blocks-dusted 0.1.10 → 0.1.12

package/templates/blocks/DD-MasonaryMedia/config.ts

@@ -156,7 +156,7 @@ export const DDMasonaryMedia: Block = {
                   type: 'upload',
                   relationTo: 'media',
                   label: 'Static Preview Image',
-                  required: false,
+                  required: false,
                   admin: {
                     description: 'Static image shown by default before hover.'
                   }
@@ -371,7 +371,7 @@ export const DDMasonaryMedia: Block = {
                   ]
                 }
               ]
-            },
+            },
             {
               name: 'ctaContainerClass',
               type: 'text',

package/templates/blocks/DD-MasonaryMedia/vendor.d.ts

@@ -1,2 +1,2 @@
-declare module 'isotope-layout'
-declare module 'imagesloaded'
+declare module 'isotope-layout'
+declare module 'imagesloaded'

package/templates/blocks/DD-Masonry/Component.tsx

@@ -0,0 +1,645 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+'use client'
+
+import React, { useEffect, useLayoutEffect, useMemo, useRef, useState, useCallback } from 'react'
+import { gsap } from 'gsap'
+import { ScrollTrigger } from 'gsap/ScrollTrigger'
+import { cn } from '@/utilities/ui'
+import FadeUpOnInView from '@/components/ui/anims/FadeUpOnInView'
+
+if (typeof window !== 'undefined') {
+  gsap.registerPlugin(ScrollTrigger)
+}
+
+const useMedia = (queries: string[], values: number[], defaultValue: number): number => {
+  const [value, setValue] = useState(() => {
+    if (typeof window !== 'undefined') {
+      return values[queries.findIndex((q) => window.matchMedia(q).matches)] ?? defaultValue
+    }
+
+    return values[0] ?? defaultValue
+  })
+
+  useEffect(() => {
+    if (typeof window === 'undefined') return
+
+    const handler = () => {
+      setValue(values[queries.findIndex((q) => window.matchMedia(q).matches)] ?? defaultValue)
+    }
+
+    const mediaQueryLists = queries.map((q) => window.matchMedia(q))
+    mediaQueryLists.forEach((mql) => mql.addEventListener('change', handler))
+
+    return () => mediaQueryLists.forEach((mql) => mql.removeEventListener('change', handler))
+  }, [queries, values, defaultValue])
+
+  return value
+}
+
+const useMeasure = <T extends HTMLElement>() => {
+  const ref = useRef<T | null>(null)
+  const [size, setSize] = useState({ width: 0, height: 0 })
+
+  useLayoutEffect(() => {
+    if (!ref.current) return
+
+    const ro = new ResizeObserver((entries) => {
+      if (entries[0]) {
+        const { width, height } = entries[0].contentRect
+        setSize({ width, height })
+      }
+    })
+
+    ro.observe(ref.current)
+
+    return () => ro.disconnect()
+  }, [])
+
+  return [ref, size] as const
+}
+
+interface MasonryItem {
+  id: string
+  media: { id?: string; url?: string; alt?: string; mimeType?: string }
+  linkType?: 'none' | 'reference' | 'custom'
+  reference?: {
+    value: string | { slug: string }
+    relationTo: string
+  }
+  url?: string
+  newTab?: boolean
+  aspectRatio: string
+  showTextOverlay?: boolean
+  textOverlay?: string
+}
+
+interface MasonryMediaBlockProps {
+  items: MasonryItem[]
+  layout: {
+    columns: {
+      desktop: number
+      laptop: number
+      tablet: number
+      mobile: number
+    }
+    gap: number
+  }
+  animation: {
+    enableAnimation?: boolean
+    animateFrom: 'bottom' | 'top' | 'left' | 'right' | 'center' | 'random'
+    ease: string
+    duration: number
+    stagger: number
+    repeatOnScroll?: boolean
+  }
+  interaction: {
+    scaleOnHover: boolean
+    hoverScale: number
+    blurToFocus: boolean
+    colorShiftOnHover: boolean
+    customHoverColors?: {
+      fromColor: string
+      toColor: string
+    }
+  }
+  advanced?: {
+    sectionId?: string
+    customClassName?: string
+    enableParallax?: boolean
+    parallaxSpeed?: number
+  }
+}
+
+const MediaContent: React.FC<{ item: MasonryItem }> = React.memo(
+  ({ item }) => {
+    return (
+      <div
+        className="w-full h-full overflow-hidden masonry-media-container"
+        style={
+          {
+            aspectRatio: item.aspectRatio || '1/1',
+            '--masonry-aspect-ratio': item.aspectRatio || '1/1'
+          } as React.CSSProperties
+        }
+      >
+        <style jsx>{`
+          .masonry-media-container :global(.media-block),
+          .masonry-media-container :global(.media-block img),
+          .masonry-media-container :global(.media-block video),
+          .masonry-media-container :global(.media-block picture),
+          .masonry-media-container :global(.media-block picture img) {
+            width: 100% !important;
+            height: 100% !important;
+            object-fit: cover !important;
+            aspect-ratio: var(--masonry-aspect-ratio) !important;
+            margin: 0;
+            border-radius: 4px;
+          }
+
+          .masonry-media-container :global(.parallax-section),
+          .masonry-media-container :global(.parallax-content) {
+            width: 100% !important;
+            height: 100% !important;
+          }
+        `}</style>
+                {item.media?.mimeType?.startsWith('video/') ? (
+          <video className="h-full w-full object-cover" src={item.media.url} muted playsInline loop />
+        ) : (
+          <img className="h-full w-full object-cover" src={item.media?.url || ''} alt={item.media?.alt || ''} />
+        )}
+      </div>
+    )
+  },
+  (prev, next) =>
+    prev.item.media?.id === next.item.media?.id && prev.item.aspectRatio === next.item.aspectRatio
+)
+
+export const DDMasonry: React.FC<MasonryMediaBlockProps> = ({
+  items,
+  layout,
+  animation,
+  interaction,
+  advanced
+}) => {
+  const triggersRef = useRef<ScrollTrigger[]>([])
+
+  const getLinkUrl = (item: MasonryItem): string | null => {
+    if (!item.linkType || item.linkType === 'none') return null
+
+    if (item.linkType === 'custom') {
+      return item.url || null
+    }
+
+    if (item.linkType === 'reference' && item.reference) {
+      const refValue = item.reference.value
+
+      const getCollectionPath = (relationTo: string) => {
+        if (relationTo === 'posts') return 'thoughts'
+        if (relationTo === 'pages') return ''
+        return relationTo
+      }
+
+      const prefix = getCollectionPath(item.reference.relationTo)
+      const toUrl = (slug: string) => (prefix ? `/${prefix}/${slug}` : `/${slug}`)
+
+      if (typeof refValue === 'string') {
+        return toUrl(refValue)
+      }
+
+      if (refValue && typeof refValue === 'object' && 'slug' in refValue) {
+        return toUrl(String(refValue.slug))
+      }
+    }
+
+    return null
+  }
+
+  const handleItemClick = (item: MasonryItem) => {
+    const url = getLinkUrl(item)
+    if (!url) return
+
+    if (item.newTab) {
+      window.open(url, '_blank', 'noopener,noreferrer')
+      return
+    }
+
+    window.location.href = url
+  }
+
+  const blockId = useMemo(
+    () => advanced?.sectionId || `masonry-${Math.random().toString(36).slice(2, 11)}`,
+    [advanced?.sectionId]
+  )
+
+  const columns = useMedia(
+    ['(min-width:1440px)', '(min-width:968px)', '(min-width:640px)', '(min-width:420px)'],
+    [
+      layout?.columns?.desktop || 5,
+      layout?.columns?.laptop || 4,
+      layout?.columns?.tablet || 3,
+      layout?.columns?.mobile || 2
+    ],
+    1
+  )
+
+  const [containerRef, { width }] = useMeasure<HTMLDivElement>()
+  const [mediaReady, setMediaReady] = useState(false)
+  const [containerHeight, setContainerHeight] = useState(0)
+  const animatedItems = useRef(new Set<string>())
+
+  const validItems = useMemo(() => {
+    return (
+      items?.map((item, index) => ({
+        ...item,
+        id: item.id || `item-${index}`
+      })) || []
+    )
+  }, [items])
+
+  const getAspectRatioHeight = (ratio: string, width: number): number => {
+    if (!ratio || !ratio.includes('/')) return width
+
+    const [w, h] = ratio.split('/').map(Number)
+    const validW = w && !isNaN(w) ? w : 1
+    const validH = h && !isNaN(h) ? h : 1
+
+    return (width * validH) / validW
+  }
+
+  const preloadMedia = async (itemsToPreload: MasonryItem[]): Promise<void> => {
+    await Promise.all(
+      itemsToPreload.map((item) => {
+        if (item.media?.url && item.media.mimeType?.startsWith('image/')) {
+          return new Promise<void>((resolve) => {
+            const img = new Image()
+            img.src = item.media.url || ''
+            img.onload = img.onerror = () => resolve()
+          })
+        }
+
+        return Promise.resolve()
+      })
+    )
+  }
+
+  const getInitialPosition = useCallback(
+    (item: any) => {
+      const containerRect = containerRef.current?.getBoundingClientRect()
+      if (!containerRect) return { x: item.x, y: item.y }
+
+      let direction = animation?.animateFrom || 'bottom'
+
+      if (direction === 'random') {
+        const dirs = ['top', 'bottom', 'left', 'right']
+        direction = dirs[Math.floor(Math.random() * dirs.length)] as typeof direction
+      }
+
+      switch (direction) {
+        case 'top':
+          return { x: item.x, y: -200 }
+        case 'bottom':
+          return { x: item.x, y: window.innerHeight + 200 }
+        case 'left':
+          return { x: -200, y: item.y }
+        case 'right':
+          return { x: window.innerWidth + 200, y: item.y }
+        case 'center':
+          return {
+            x: containerRect.width / 2 - item.w / 2,
+            y: containerRect.height / 2 - item.h / 2
+          }
+        default:
+          return { x: item.x, y: item.y + 100 }
+      }
+    },
+    [containerRef, animation?.animateFrom]
+  )
+
+  useEffect(() => {
+    if (items && items.length > 0) {
+      const timeout = window.setTimeout(() => setMediaReady(true), 3000)
+
+      preloadMedia(items)
+        .then(() => setMediaReady(true))
+        .finally(() => window.clearTimeout(timeout))
+    } else {
+      setMediaReady(true)
+    }
+  }, [items])
+
+  const grid = useMemo(() => {
+    if (!width || !validItems.length) return { items: [], height: 0 }
+
+    const colHeights = new Array(columns).fill(0)
+    const gap = layout?.gap || 16
+    const totalGaps = (columns - 1) * gap
+    const columnWidth = (width - totalGaps) / columns
+
+    const gridItems = validItems.map((item) => {
+      const aspectRatio = item.aspectRatio || '1/1'
+      const [w, h] = aspectRatio.split('/').map(Number)
+      const validW = w && !isNaN(w) ? w : 1
+      const validH = h && !isNaN(h) ? h : 1
+      const ratio = validW / validH
+
+      let colSpan = 1
+
+      if (ratio >= 2) {
+        colSpan = Math.min(2, columns)
+      } else if (ratio >= 1.5) {
+        colSpan = Math.min(2, columns)
+      }
+
+      let bestCol = 0
+      let minHeight = Infinity
+
+      for (let col = 0; col <= columns - colSpan; col++) {
+        const maxHeightInSpan = Math.max(...colHeights.slice(col, col + colSpan))
+
+        if (maxHeightInSpan < minHeight) {
+          minHeight = maxHeightInSpan
+          bestCol = col
+        }
+      }
+
+      const itemWidth = columnWidth * colSpan + gap * (colSpan - 1)
+      const x = bestCol * (columnWidth + gap)
+      const height = getAspectRatioHeight(aspectRatio, itemWidth)
+      const y = Math.max(...colHeights.slice(bestCol, bestCol + colSpan))
+
+      for (let i = bestCol; i < bestCol + colSpan; i++) {
+        colHeights[i] = y + height + gap
+      }
+
+      return { ...item, x, y, w: itemWidth, h: height, colSpan }
+    })
+
+    const totalHeight = Math.max(...colHeights)
+
+    return { items: gridItems, height: totalHeight }
+  }, [columns, validItems, width, layout?.gap])
+
+  useEffect(() => {
+    setContainerHeight(grid.height)
+  }, [grid.height])
+
+  const animateItemIntoView = useCallback(
+    (element: HTMLElement, item: any, index: number, delay: number = 0) => {
+      const start = getInitialPosition(item)
+      const deltaX = start.x - item.x
+      const deltaY = start.y - item.y
+
+      gsap.fromTo(
+        element,
+        {
+          opacity: 0,
+          x: deltaX,
+          y: deltaY,
+          ...(interaction?.blurToFocus && { filter: 'blur(10px)' })
+        },
+        {
+          opacity: 1,
+          x: 0,
+          y: 0,
+          ...(interaction?.blurToFocus && { filter: 'none' }),
+          duration: animation?.duration || 0.8,
+          ease: animation?.ease && animation.ease !== '0' ? animation.ease : 'power3.out',
+          delay: delay + index * (animation?.stagger || 0.05),
+          overwrite: 'auto'
+        }
+      )
+    },
+    [getInitialPosition, animation, interaction?.blurToFocus]
+  )
+
+  const hasMounted = useRef(false)
+
+  useLayoutEffect(() => {
+    if (!mediaReady || !items || items.length === 0) return
+
+    const blockEl = containerRef.current
+    if (!blockEl) return
+
+    triggersRef.current.forEach((t) => t.kill())
+    triggersRef.current = []
+
+    gsap.killTweensOf(`[data-block-id="${blockId}"] [data-key]`)
+
+    if (animation?.enableAnimation === false) {
+      grid.items.forEach((item) => {
+        const selector = `[data-key="${item.id}"]`
+        const element = blockEl.querySelector(selector) as HTMLElement | null
+        if (!element) return
+
+        gsap.set(element, {
+          opacity: 1,
+          x: 0,
+          y: 0,
+          left: item.x,
+          top: item.y,
+          width: item.w,
+          height: item.h,
+          filter: 'none'
+        })
+      })
+
+      return
+    }
+
+    grid.items.forEach((item, index) => {
+      const selector = `[data-key="${item.id}"]`
+      const element = blockEl.querySelector(selector) as HTMLElement | null
+      if (!element) return
+
+      const animProps = { left: item.x, top: item.y, width: item.w, height: item.h }
+
+      if (!hasMounted.current) {
+        gsap.set(element, {
+          opacity: 1,
+          x: 0,
+          y: 0,
+          width: item.w,
+          height: item.h,
+          filter: 'none'
+        })
+
+        const trigger = ScrollTrigger.create({
+          id: `masonry-item-${blockId}-${item.id}`,
+          trigger: element,
+          start: 'top 85%',
+          end: 'bottom 15%',
+          toggleActions: animation?.repeatOnScroll
+            ? 'play none none reverse'
+            : 'play none none none',
+          onEnter: () => {
+            if (!animatedItems.current.has(item.id) || animation?.repeatOnScroll) {
+              animateItemIntoView(element, item, index)
+
+              if (!animation?.repeatOnScroll) {
+                animatedItems.current.add(item.id)
+              }
+            }
+          },
+          onLeave: () => {
+            if (animation?.repeatOnScroll) {
+              gsap.to(element, {
+                opacity: 0.3,
+                duration: 0.3,
+                ease: 'power2.out'
+              })
+            }
+          },
+          onEnterBack: () => {
+            if (animation?.repeatOnScroll) {
+              gsap.to(element, {
+                opacity: 1,
+                duration: 0.3,
+                ease: 'power2.out'
+              })
+            }
+          },
+          onLeaveBack: () => {
+            if (animation?.repeatOnScroll) {
+              gsap.to(element, {
+                opacity: 0.3,
+                duration: 0.3,
+                ease: 'power2.out'
+              })
+            }
+          }
+        })
+
+        triggersRef.current.push(trigger)
+      } else {
+        gsap.to(element, {
+          ...animProps,
+          x: 0,
+          y: 0,
+          duration: animation?.duration || 0.6,
+          ease: animation?.ease && animation.ease !== '0' ? animation.ease : 'power3.out',
+          overwrite: 'auto'
+        })
+      }
+    })
+
+    hasMounted.current = true
+
+    return () => {
+      triggersRef.current.forEach((t) => t.kill())
+      triggersRef.current = []
+    }
+  }, [grid, mediaReady, animation, interaction?.blurToFocus, items, animateItemIntoView])
+
+  useEffect(() => {
+    return () => {
+      ScrollTrigger.getAll().forEach((trigger) => {
+        if (trigger.vars.id?.startsWith(`masonry-item-${blockId}-`)) {
+          trigger.kill()
+        }
+      })
+
+      gsap.killTweensOf(`[data-block-id="${blockId}"] [data-key]`)
+    }
+  }, [blockId])
+
+  const handleMouseEnter = (_itemId: string, element: HTMLElement) => {
+    if (interaction?.scaleOnHover) {
+      gsap.to(element, {
+        scale: interaction.hoverScale || 0.95,
+        duration: 0.3,
+        ease: 'power2.out',
+        filter: 'brightness(0.75)'
+      })
+    }
+
+    if (interaction?.colorShiftOnHover) {
+      const overlay = element.querySelector('.color-overlay') as HTMLElement
+      if (overlay) gsap.to(overlay, { opacity: 0.3, duration: 0.3 })
+    }
+  }
+
+  const handleMouseLeave = (_itemId: string, element: HTMLElement) => {
+    if (interaction?.scaleOnHover) {
+      gsap.to(element, {
+        scale: 1,
+        duration: 0.3,
+        ease: 'power2.out',
+        filter: 'none'
+      })
+    }
+
+    if (interaction?.colorShiftOnHover) {
+      const overlay = element.querySelector('.color-overlay') as HTMLElement
+      if (overlay) gsap.to(overlay, { opacity: 0, duration: 0.3 })
+    }
+  }
+
+  if (!items || items.length === 0) {
+    return <div className="p-4">No items to display</div>
+  }
+
+  return (
+    <div
+      id={advanced?.sectionId}
+      data-block-id={blockId}
+      className={cn('masonary-media-block relative w-full', advanced?.customClassName)}
+      ref={containerRef}
+      style={{
+        height: containerHeight > 0 ? `${containerHeight}px` : 'auto',
+        minHeight: containerHeight > 0 ? `${containerHeight}px` : 'auto'
+      }}
+      {...(advanced?.enableParallax && {
+        'data-scroll': true,
+        'data-scroll-speed': advanced.parallaxSpeed || 0.5
+      })}
+    >
+      {!mediaReady &&
+        grid.items.map((item) => (
+          <div
+            key={`skeleton-${item.id}`}
+            className="absolute rounded-md overflow-hidden border border-border"
+            style={{
+              left: item.x,
+              top: item.y,
+              width: item.w,
+              height: item.h
+            }}
+          >
+            <div className="shimmer-effect w-full h-full bg-zinc-200/10 dark:bg-zinc-800/10" />
+          </div>
+        ))}
+
+      {mediaReady &&
+        grid.items.map((item) => {
+          const hasLink = getLinkUrl(item) !== null
+
+          return (
+            <div
+              key={item.id}
+              data-key={item.id}
+              className={cn(
+                'absolute box-content rounded-md overflow-hidden border border-border shadow-2xl',
+                hasLink && 'cursor-pointer'
+              )}
+              style={{
+                left: item.x,
+                top: item.y,
+                width: item.w,
+                height: item.h,
+                opacity: 1,
+                willChange: 'transform, opacity, width, height'
+              }}
+              onClick={() => handleItemClick(item)}
+              onMouseEnter={(e) => handleMouseEnter(item.id, e.currentTarget)}
+              onMouseLeave={(e) => handleMouseLeave(item.id, e.currentTarget)}
+            >
+              <div className="group relative w-full h-full">
+                <MediaContent item={item} />
+
+                {item.showTextOverlay && item.textOverlay && (
+                  <span
+                    className="masonary-card-text-overlay absolute inset-0 z-10 m-auto flex h-full w-full items-center justify-center p-4 px-2 text-center text-sm text-white [text-shadow:2px_2px_2px_black] shadow-[0_0_0px_black] transition-all duration-300 hover:scale-110 hover:brightness-110 group-hover:[&_img]:brightness-[0.15]"
+                  >
+                    {item.textOverlay}
+                  </span>
+                )}
+
+                {interaction?.colorShiftOnHover && (
+                  <FadeUpOnInView delay={0.1} className="absolute inset-0">
+                    <div
+                      className="color-overlay absolute inset-0 rounded-sm opacity-0 pointer-events-none"
+                      style={{
+                        background: `linear-gradient(to top right, ${
+                          interaction.customHoverColors?.fromColor || 'rgba(236, 72, 153, 0.5)'
+                        }, ${interaction.customHoverColors?.toColor || 'rgba(14, 165, 233, 0.5)'})`
+                      }}
+                    />
+                  </FadeUpOnInView>
+                )}
+              </div>
+            </div>
+          )
+        })}
+    </div>
+  )
+}

package/templates/blocks/DD-Masonry/README.md

@@ -0,0 +1,4 @@
+# DD-Masonry
+
+Portable first-pass conversion of `MasonryMediaBlock` from ROUND-TWO-CONVERSION. Project-specific roots and nested unconverted block dependencies were intentionally replaced with local rendering so the template can install into a clean Payload project.
+