blocks-dusted 0.1.12 → 0.1.13

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

@@ -0,0 +1,432 @@
+/* eslint-disable react-hooks/set-state-in-effect */
+/* eslint-disable @next/next/no-html-link-for-pages */
+'use client'
+
+import * as React from 'react'
+import { createPortal } from 'react-dom'
+import { motion } from 'framer-motion'
+import Link from 'next/link'
+import { Tooltip, TooltipTrigger, TooltipPanel } from '../tooltip/tooltip'
+import { TopLogoBgElement, BottomLogoBgElement } from './icons/custom-icons'
+import { ArrowLeft, Circle } from 'lucide-react'
+
+export type RadialNavItem = {
+  id: number
+  icon: React.ComponentType<{ size?: number; className?: string }>
+  label: string
+  angle: number
+  canvasId: string
+}
+
+type RadialNavProps = {
+  items: RadialNavItem[]
+  activeCanvasId: string
+  onCanvasChange: (canvasId: string) => void
+}
+
+type RadialNavInnerProps = RadialNavProps & {
+  isOpen: boolean
+  setIsOpen: React.Dispatch<React.SetStateAction<boolean>>
+}
+
+let mountedRadialNavCount = 0
+
+function getPolarCoordinates(angleDeg: number, radius: number) {
+  const rad = ((angleDeg - 90) * Math.PI) / 180
+
+  return {
+    x: radius * Math.cos(rad),
+    y: radius * Math.sin(rad),
+  }
+}
+
+function useIsTouchMode() {
+  const [isTouchMode, setIsTouchMode] = React.useState(false)
+
+  React.useEffect(() => {
+    const checkTouchMode = () => {
+      setIsTouchMode(
+        window.matchMedia('(hover: none), (pointer: coarse)').matches ||
+          navigator.maxTouchPoints > 0,
+      )
+    }
+
+    checkTouchMode()
+
+    window.addEventListener('resize', checkTouchMode)
+
+    return () => {
+      window.removeEventListener('resize', checkTouchMode)
+    }
+  }, [])
+
+  return isTouchMode
+}
+
+function MorphCenterIcon() {
+  return <Circle aria-hidden="true" size={24} />
+}
+
+function RadialNavInner({
+  items,
+  activeCanvasId,
+  onCanvasChange,
+  isOpen,
+  setIsOpen,
+}: RadialNavInnerProps) {
+  const size = 200
+  const orbitRadius = size / 2 - 2
+  const activeItem = items.find((item) => item.canvasId === activeCanvasId)
+  const rotateAngle = activeItem?.angle ?? 0
+
+  const closeTimerRef = React.useRef<number | null>(null)
+  const suppressOpenUntilRef = React.useRef(0)
+  const isTouchMode = useIsTouchMode()
+
+  const openRadialNav = () => {
+    if (Date.now() < suppressOpenUntilRef.current) return
+
+    if (closeTimerRef.current) {
+      window.clearTimeout(closeTimerRef.current)
+      closeTimerRef.current = null
+    }
+
+    setIsOpen(true)
+  }
+
+  const closeRadialNav = () => {
+    if (closeTimerRef.current) {
+      window.clearTimeout(closeTimerRef.current)
+    }
+
+    closeTimerRef.current = window.setTimeout(() => {
+      setIsOpen(false)
+      closeTimerRef.current = null
+    }, 500)
+  }
+
+  const handleCenterClick = () => {
+    if (isTouchMode) {
+      if (!isOpen) {
+        openRadialNav()
+        return
+      }
+
+      onCanvasChange('canvas_05')
+      setIsOpen(false)
+      return
+    }
+
+    onCanvasChange('canvas_05')
+  }
+
+  React.useEffect(() => {
+    return () => {
+      if (closeTimerRef.current) {
+        window.clearTimeout(closeTimerRef.current)
+      }
+    }
+  }, [])
+
+  return (
+    <>
+      <motion.div
+        animate={{
+          scale: isOpen ? 0.775 : 0.65,
+          y: isOpen ? '-1.5rem' : '0rem',
+          filter: isOpen ? 'brightness(0.8)' : 'brightness(1)',
+          borderWidth: isOpen ? '0px' : '2px',
+          borderColor: isOpen ? '#ffffff00' : '#808080',
+          borderStyle: 'solid',
+        }}
+        className={`hzRadialRoot hzRadialRoot--portal origin-center ${isOpen ? 'hzRadialNavIsOpen' : ''}`}
+        onBlur={(event) => {
+          if (!event.currentTarget.contains(event.relatedTarget as Node | null)) {
+            closeRadialNav()
+          }
+        }}
+        onFocus={() => {
+          if (!isTouchMode) {
+            openRadialNav()
+          }
+        }}
+        onMouseEnter={() => {
+          if (!isTouchMode) {
+            openRadialNav()
+          }
+        }}
+        onMouseLeave={() => {
+          if (!isTouchMode) {
+            closeRadialNav()
+          }
+        }}
+        tabIndex={0}
+        transition={{ type: 'spring', stiffness: 220, damping: 28 }}
+      >
+        <div className="radialNav-notification fixed left-1/2 top-1/2 mt-32 z-50 h-fit w-[min(50rem,calc(100vw-2rem))] -translate-x-1/2 translate-y-1/2 origin-center p-4 md:p-6 flex flex-col items-center justify-center rounded-2xl squircle shadow-3xl bg-7 text-md text-stone-200 border border-border">
+          <h4 className="tracking-wider font-semibold">NineCanvas layout demo</h4>
+          <p className="tracking-wider !text-[1.125rem]">
+            Explore all nine panels using the navigation or swipe between adjacent panels. Open the{' '}
+            <a
+              href="/backend-preview/ninecanvasblock"
+              className="text-underline !hover:text-accent font-semibold"
+              style={{ textDecoration: 'underline', textUnderlineOffset: '2px' }}
+            >
+              static configuration preview{' '}
+            </a>
+            to inspect the layout fields.
+          </p>
+          <Link
+            href="/nine-canvas"
+            aria-hidden={!isOpen}
+            aria-label="Return to main canvas"
+            className="relative w-fit flex gap-2 mt-8 items-center text-lime-500 scale-120 hover:gap-4 duration-300 hover:duration-300 hover:brightness-110"
+            onClick={() => {
+              onCanvasChange('canvas_05')
+              setIsOpen(false)
+            }}
+            onFocus={() => openRadialNav()}
+            onMouseEnter={() => {
+              if (!isTouchMode) {
+                openRadialNav()
+              }
+            }}
+            tabIndex={isOpen ? 0 : -1}
+          >
+            <ArrowLeft aria-hidden="true" size={18} strokeWidth={2.25} />
+            <span className="text-md font-semibold">Restart demo</span>
+          </Link>
+        </div>
+        <motion.div
+          animate={{
+            opacity: isOpen ? 0.8 : 0,
+            scale: isOpen ? 1.5 : 0.75,
+          }}
+          className="hzRadialBackdrop"
+          transition={{ type: 'spring', stiffness: 220, damping: 26 }}
+        />
+
+        {items.map((item) => {
+          const Icon = item.icon
+          const { x, y } = getPolarCoordinates(item.angle, orbitRadius)
+          const isActive = activeCanvasId === item.canvasId
+          const shouldShowActive = isActive || isOpen
+          const activeClosedOffsetY = 62
+          const activeClosedScale = 1.5
+
+          return (
+            <Tooltip key={item.id}>
+              <TooltipTrigger
+                render={
+                  <motion.button
+                    animate={{
+                      left: `calc(50% + ${isOpen ? x : 0}px)`,
+                      top: `calc(50% + ${isOpen ? y : isActive ? activeClosedOffsetY : 0}px)`,
+                      opacity: shouldShowActive ? 1 : 0,
+                      scale: isOpen ? 1 : isActive ? activeClosedScale : 0,
+                      width: 42,
+                    }}
+                    aria-label={item.label}
+                    className={[
+                      'hzRadialItem group',
+                      `hzRadialItem--${item.canvasId}`,
+                      `hzRadialItem--id-${item.id}`,
+                      isActive ? 'hzRadialItem--active' : '',
+                      !isOpen && !isActive ? 'hzRadialItem--closed' : '',
+                    ]
+                      .filter(Boolean)
+                      .join(' ')}
+                    key={item.id}
+                    onClick={(event) => {
+                      event.currentTarget.blur()
+                      onCanvasChange(item.canvasId)
+                      suppressOpenUntilRef.current = Date.now() + 700
+                      setIsOpen(false)
+                    }}
+                    transition={{ type: 'spring', stiffness: 220, damping: 28 }}
+                    type="button"
+                  >
+                    <Icon size={16} />
+                  </motion.button>
+                }
+              />
+
+              <TooltipPanel className="hzTooltipPanel">
+                <p>{item.label}</p>
+              </TooltipPanel>
+            </Tooltip>
+          )
+        })}
+
+        <Tooltip>
+          <TooltipTrigger
+            render={
+              <button
+                aria-expanded={isOpen}
+                aria-label={isOpen ? 'Go to Canvas 5' : 'Open Canvas navigation'}
+                className={`hzRadialCenterButton ${
+                  activeCanvasId === 'canvas_05' ? 'hzRadialCenterButton--active' : ''
+                }`}
+                onClick={handleCenterClick}
+                type="button"
+              >
+                <motion.div
+                  animate={{ rotate: isOpen ? rotateAngle : 0 }}
+                  className="hzRadialCenterButtonIcon"
+                  transition={{ type: 'spring', stiffness: 220, damping: 26 }}
+                >
+                  <MorphCenterIcon />
+                </motion.div>
+              </button>
+            }
+          />
+
+          <TooltipPanel className="hzTooltipPanel">
+            <p>Canvas 5</p>
+          </TooltipPanel>
+        </Tooltip>
+
+        {/* <motion.div
+          animate={{
+            opacity: isOpen ? 1 : 0,
+            scale: isOpen ? 1 : 0.7,
+            y: isOpen ? 0 : -8,
+            x: isOpen ? 0 : -32
+          }}
+          transition={{ type: 'spring', stiffness: 260, damping: 24 }}
+        >
+          <Link
+            href="/nine-canvas"
+            aria-hidden={!isOpen}
+            aria-label="Return to main canvas"
+            className="hzRadialReturnButton hidden md:flex"
+            onClick={() => {
+              onCanvasChange('canvas_05')
+              setIsOpen(false)
+            }}
+            onFocus={() => openRadialNav()}
+            onMouseEnter={() => {
+              if (!isTouchMode) {
+                openRadialNav()
+              }
+            }}
+            tabIndex={isOpen ? 0 : -1}
+          >
+            <ArrowLeft aria-hidden="true" size={18} strokeWidth={2.25} />
+            <span className="text-xs text-stone-200">Exit Overview-Mode</span>
+          </Link>
+        </motion.div> */}
+      </motion.div>
+    </>
+  )
+}
+
+export function RadialNav(props: RadialNavProps) {
+  const [mounted, setMounted] = React.useState(false)
+  const [isOpen, setIsOpen] = React.useState(false)
+
+  const lastScrollYRef = React.useRef(0)
+
+  React.useEffect(() => {
+    setMounted(true)
+    lastScrollYRef.current = window.scrollY
+
+    mountedRadialNavCount += 1
+    document.body.classList.add('hasRadialNav')
+
+    return () => {
+      mountedRadialNavCount = Math.max(0, mountedRadialNavCount - 1)
+
+      if (mountedRadialNavCount === 0) {
+        document.body.classList.remove('hasRadialNav')
+        document.body.classList.remove('hasRadialNavOpen')
+      }
+    }
+  }, [])
+
+  React.useEffect(() => {
+    if (!mounted) return
+
+    const desktopMedia = window.matchMedia('(min-width: 768px)')
+
+    const handleVerticalMotion = (deltaY: number) => {
+      if (!desktopMedia.matches) return
+
+      if (deltaY > 8) {
+        setIsOpen(true)
+      } else if (deltaY < -8) {
+        setIsOpen(false)
+      }
+    }
+
+    const handleScroll = () => {
+      const scrollY = window.scrollY
+      const deltaY = scrollY - lastScrollYRef.current
+
+      handleVerticalMotion(deltaY)
+
+      lastScrollYRef.current = Math.max(0, scrollY)
+    }
+
+    const handleWheel = (event: WheelEvent) => {
+      handleVerticalMotion(event.deltaY)
+    }
+
+    const handleCanvasScrollDown = () => {
+      if (!desktopMedia.matches) return
+
+      setIsOpen(true)
+    }
+
+    const handleBreakpointChange = () => {
+      lastScrollYRef.current = window.scrollY
+    }
+
+    window.addEventListener('scroll', handleScroll, { passive: true })
+
+    window.addEventListener('hz:canvas-scroll-down', handleCanvasScrollDown)
+
+    document.addEventListener('wheel', handleWheel, {
+      capture: true,
+      passive: true,
+    })
+
+    desktopMedia.addEventListener('change', handleBreakpointChange)
+
+    return () => {
+      window.removeEventListener('scroll', handleScroll)
+
+      window.removeEventListener('hz:canvas-scroll-down', handleCanvasScrollDown)
+
+      document.removeEventListener('wheel', handleWheel, {
+        capture: true,
+      })
+
+      desktopMedia.removeEventListener('change', handleBreakpointChange)
+    }
+  }, [mounted])
+
+  React.useEffect(() => {
+    if (isOpen) {
+      document.body.classList.add('hasRadialNavOpen')
+    } else {
+      document.body.classList.remove('hasRadialNavOpen')
+    }
+
+    return () => {
+      document.body.classList.remove('hasRadialNavOpen')
+    }
+  }, [isOpen])
+
+  if (!mounted) return null
+
+  return createPortal(
+    <>
+      <TopLogoBgElement />
+
+      <RadialNavInner {...props} isOpen={isOpen} setIsOpen={setIsOpen} />
+      <BottomLogoBgElement />
+    </>,
+    document.body,
+  )
+}