@akinon/next 2.0.0-beta.2 → 2.0.0-beta.20

package/components/theme-editor/sections/before-after-section.tsx

@@ -0,0 +1,245 @@
+'use client';
+
+import React, { useState, useRef, useEffect, useCallback } from 'react';
+import { getResponsiveValue, resolveThemeCssVariables } from '../utils';
+import { Section } from '../theme-section';
+import { useThemeSettingsContext } from '../theme-settings-context';
+import { twMerge } from 'tailwind-merge';
+import clsx from 'clsx';
+import ThemeBlock from '../theme-block';
+
+interface BeforeAfterSectionProps {
+  section: Section;
+  currentBreakpoint?: string;
+  isDesigner?: boolean;
+  placeholderId?: string;
+  selectedBlockId?: string | null;
+}
+
+export default function BeforeAfterSection({
+  section,
+  currentBreakpoint = 'desktop',
+  isDesigner = false,
+  placeholderId = '',
+  selectedBlockId = null
+}: BeforeAfterSectionProps) {
+  const themeSettings = useThemeSettingsContext();
+  const [sliderPosition, setSliderPosition] = useState(50);
+  const [isResizing, setIsResizing] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [containerWidth, setContainerWidth] = useState(0);
+
+  const styles = section.styles || {};
+  const properties = section.properties || {};
+
+  const beforeBlock = section.blocks?.find(b => b.label === 'Before Image');
+  const afterBlock = section.blocks?.find(b => b.label === 'After Image');
+
+  const height = getResponsiveValue(styles.height, currentBreakpoint, '500px') as string | number;
+  const width = getResponsiveValue(styles.width, currentBreakpoint, '100%') as string;
+  const maxWidth = getResponsiveValue(styles['max-width'], currentBreakpoint, 'normal') as string;
+  
+  const sliderColor = resolveThemeCssVariables(
+    getResponsiveValue(styles['slider-color'], currentBreakpoint, '#ffffff') as string,
+    themeSettings
+  );
+
+  const renderBlock = (block: any) => {
+      return (
+          <ThemeBlock
+            key={block.id}
+            block={block}
+            placeholderId={placeholderId}
+            sectionId={section.id}
+            isDesigner={isDesigner}
+            isSelected={selectedBlockId === block.id}
+            selectedBlockId={selectedBlockId}
+            currentBreakpoint={currentBreakpoint}
+            onMoveUp={() => {
+                if (window.parent) window.parent.postMessage({ type: 'MOVE_BLOCK_UP', data: { placeholderId, sectionId: section.id, blockId: block.id } }, '*');
+            }}
+            onMoveDown={() => {
+                if (window.parent) window.parent.postMessage({ type: 'MOVE_BLOCK_DOWN', data: { placeholderId, sectionId: section.id, blockId: block.id } }, '*');
+            }}
+            onDuplicate={() => {
+                if (window.parent) window.parent.postMessage({ type: 'DUPLICATE_BLOCK', data: { placeholderId, sectionId: section.id, blockId: block.id } }, '*');
+            }}
+            onToggleVisibility={() => {
+                if (window.parent) window.parent.postMessage({ type: 'TOGGLE_BLOCK_VISIBILITY', data: { placeholderId, sectionId: section.id, blockId: block.id } }, '*');
+            }}
+            onDelete={() => {
+                if (window.parent) window.parent.postMessage({ type: 'DELETE_BLOCK', data: { placeholderId, sectionId: section.id, blockId: block.id } }, '*');
+            }}
+            onRename={(newLabel) => {
+                if (window.parent) window.parent.postMessage({ type: 'RENAME_BLOCK', data: { placeholderId, sectionId: section.id, blockId: block.id, label: newLabel } }, '*');
+            }}
+          />
+      );
+  };
+
+  useEffect(() => {
+    if (!containerRef.current) return;
+    
+    setContainerWidth(containerRef.current.offsetWidth);
+
+    const observer = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        setContainerWidth(entry.contentRect.width);
+      }
+    });
+    
+    observer.observe(containerRef.current);
+    
+    return () => observer.disconnect();
+  }, []);
+
+  const handleStart = (clientX: number) => {
+      setIsResizing(true);
+      if (containerRef.current) {
+        const rect = containerRef.current.getBoundingClientRect();
+        const x = Math.max(0, Math.min(clientX - rect.left, rect.width));
+        setSliderPosition((x / rect.width) * 100);
+      }
+  };
+
+  const handleMouseDown = (e: React.MouseEvent) => handleStart(e.clientX);
+  const handleTouchStart = (e: React.TouchEvent) => handleStart(e.touches[0].clientX);
+
+  const handleMove = useCallback(
+    (clientX: number) => {
+      if (!isResizing || !containerRef.current) return;
+      
+      const rect = containerRef.current.getBoundingClientRect();
+      const x = Math.max(0, Math.min(clientX - rect.left, rect.width));
+      const percentage = (x / rect.width) * 100;
+      
+      setSliderPosition(percentage);
+    },
+    [isResizing]
+  );
+
+  const handleMouseMove = (e: React.MouseEvent) => {
+    if (isResizing) handleMove(e.clientX);
+  };
+  
+  const handleTouchMove = (e: React.TouchEvent) => {
+    if (isResizing) handleMove(e.touches[0].clientX);
+  };
+  
+  useEffect(() => {
+    const handleGlobalEnd = () => setIsResizing(false);
+    const handleGlobalMove = (e: MouseEvent) => {
+        if (isResizing) {
+            e.preventDefault();
+            handleMove(e.clientX);
+        }
+    };
+    
+    const handleGlobalTouchMove = (e: TouchEvent) => {
+        if (isResizing) {
+            handleMove(e.touches[0].clientX);
+        }
+    }
+
+    if (isResizing) {
+        window.addEventListener('mouseup', handleGlobalEnd);
+        window.addEventListener('touchend', handleGlobalEnd);
+        window.addEventListener('mousemove', handleGlobalMove);
+        window.addEventListener('touchmove', handleGlobalTouchMove, { passive: false });
+    }
+
+    return () => {
+        window.removeEventListener('mouseup', handleGlobalEnd);
+        window.removeEventListener('touchend', handleGlobalEnd);
+        window.removeEventListener('mousemove', handleGlobalMove);
+        window.removeEventListener('touchmove', handleGlobalTouchMove);
+    };
+  }, [isResizing, handleMove]);
+
+
+  const maxWidthClass =
+    maxWidth === 'narrow'
+      ? 'max-w-4xl'
+      : maxWidth === 'normal'
+      ? 'max-w-7xl'
+      : maxWidth === 'full'
+      ? 'w-full'
+      : '';
+      
+  const hasMaxWidth = maxWidth !== 'none' && maxWidth !== 'full';
+
+  return (
+    <div 
+        className={twMerge(
+            clsx(
+            'relative mx-auto select-none overflow-hidden group/before-after',
+            hasMaxWidth && 'mx-auto',
+            maxWidthClass
+            )
+        )}
+        style={{ 
+            height: typeof height === 'number' ? `${height}px` : height,
+            width: width === 'fill' ? '100%' : width,
+            maxWidth: maxWidth === 'none' ? 'none' : undefined
+        }}
+        ref={containerRef}
+        onMouseDown={handleMouseDown}
+        onTouchStart={handleTouchStart}
+        onMouseMove={handleMouseMove}
+        onTouchMove={handleTouchMove}
+    >
+        <div className="absolute inset-0 w-full h-full">
+            {afterBlock ? (
+                <div className="w-full h-full pointer-events-none">
+                    {renderBlock(afterBlock)}
+                </div>
+            ) : (
+                <div className="w-full h-full bg-gray-200 flex items-center justify-center text-gray-400 select-none pointer-events-none">
+                    No After Image
+                </div>
+            )}
+        </div>
+
+        <div 
+            className="absolute top-0 left-0 h-full overflow-hidden border-r"
+            style={{ 
+                width: `${sliderPosition}%`,
+                borderColor: sliderColor
+            }}
+        >
+            <div 
+                className="relative h-full" 
+                style={{ width: containerWidth ? `${containerWidth}px` : '100%' }}
+            >
+                 {beforeBlock ? (
+                     <div className="absolute top-0 left-0 w-full h-full pointer-events-none">
+                        {renderBlock(beforeBlock)}
+                     </div>
+                 ) : (
+                    <div className="absolute top-0 left-0 w-full h-full bg-gray-300 flex items-center justify-center text-gray-500 select-none pointer-events-none">
+                        No Before Image
+                    </div>
+                 )}
+            </div>
+        </div>
+
+        <div 
+            className={clsx(
+                "absolute top-0 bottom-0 w-1 z-20 cursor-ew-resize"
+            )}
+            style={{ 
+                left: `${sliderPosition}%`, 
+                backgroundColor: sliderColor,
+                transform: 'translateX(-50%)'
+            }}
+        >
+            <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-8 h-8 bg-white rounded-full shadow-lg flex items-center justify-center text-gray-800 pointer-events-none">
+                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                    <path d="M10 15l-3-3 3-3" />
+                    <path d="M14 15l3-3-3-3" />
+                </svg>
+            </div>
+        </div>
+    </div>
+  );
+}