@thewhateverapp/tile-sdk 0.13.10 → 0.13.11
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -4,5 +4,5 @@
|
|
|
4
4
|
* React component that attaches to the SlideshowManager singleton.
|
|
5
5
|
* The slideshow state persists across route changes.
|
|
6
6
|
*/
|
|
7
|
-
export declare const persistentSlideshowTemplate = "'use client';\n\nimport { useEffect, useState, createContext, useContext, ReactNode } from 'react';\nimport { SlideshowManager, SlideshowState, SlideImage } from '../lib/SlideshowManager';\n\n// Context to share slideshow state with overlays\ninterface SlideshowContextValue {\n state: SlideshowState;\n controls: {\n next: () => void;\n prev: () => void;\n goTo: (index: number) => void;\n pause: () => void;\n resume: () => void;\n toggle: () => void;\n };\n}\n\nconst SlideshowContext = createContext<SlideshowContextValue | null>(null);\n\nexport function useSlideshow(): SlideshowContextValue {\n const context = useContext(SlideshowContext);\n if (!context) {\n throw new Error('useSlideshow must be used within PersistentSlideshow');\n }\n return context;\n}\n\ninterface PersistentSlideshowProps {\n images: SlideImage[];\n /** Auto-advance interval in milliseconds (default: 5000) */\n intervalMs?: number;\n /** Auto-advance slides (default: true) */\n autoAdvance?: boolean;\n /** Transition type (default: 'fade') */\n transition?: 'fade' | 'slide' | 'none';\n /** Transition duration in ms (default: 500) */\n transitionDuration?: number;\n /** Show navigation dots (default: true) */\n showDots?: boolean;\n /** Show navigation arrows (default: true) */\n showArrows?: boolean;\n /** Additional class names */\n className?: string;\n /** Image container class names */\n imageClassName?: string;\n /** Children rendered as overlay */\n children?: ReactNode;\n}\n\nexport function PersistentSlideshow({\n images,\n intervalMs = 5000,\n autoAdvance = true,\n transition = 'fade',\n transitionDuration = 500,\n showDots = true,\n showArrows = true,\n className = '',\n imageClassName = '',\n children\n}: PersistentSlideshowProps) {\n const [state, setState] = useState<SlideshowState>(SlideshowManager.getState());\n\n useEffect(() => {\n // Initialize slideshow with images\n SlideshowManager.initialize(images, {\n intervalMs,\n transitionDuration,\n autoAdvance,\n });\n\n // Subscribe to state changes\n const unsubscribe = SlideshowManager.onStateChange(setState);\n\n return () => {\n unsubscribe();\n // Don't destroy - let slideshow persist for route changes\n };\n }, [images, intervalMs, transitionDuration, autoAdvance]);\n\n const contextValue: SlideshowContextValue = {\n state,\n controls: {\n next: () => SlideshowManager.next(),\n prev: () => SlideshowManager.prev(),\n goTo: (index) => SlideshowManager.goTo(index),\n pause: () => SlideshowManager.pause(),\n resume: () => SlideshowManager.resume(),\n toggle: () => SlideshowManager.toggle(),\n },\n };\n\n // Get transition styles\n const getTransitionStyles = (index: number): React.CSSProperties => {\n const isActive = index === state.currentIndex;\n\n switch (transition) {\n case 'fade':\n return {\n opacity: isActive ? 1 : 0,\n transition: `opacity ${transitionDuration}ms ease-in-out`,\n position: 'absolute',\n inset: 0,\n };\n case 'slide':\n const offset = (index - state.currentIndex) * 100;\n return {\n transform: `translateX(${offset}%)`,\n transition: `transform ${transitionDuration}ms ease-in-out`,\n position: 'absolute',\n inset: 0,\n };\n case 'none':\n default:\n return {\n opacity: isActive ? 1 : 0,\n position: 'absolute',\n inset: 0,\n };\n }\n };\n\n if (images.length === 0) {\n return (\n <div className={`relative w-full h-full bg-black flex items-center justify-center ${className}`}>\n <p className=\"text-white/60\">No images</p>\n </div>\n );\n }\n\n return (\n <SlideshowContext.Provider value={contextValue}>\n <div
|
|
7
|
+
export declare const persistentSlideshowTemplate = "'use client';\n\nimport { useEffect, useState, useRef, useCallback, createContext, useContext, ReactNode } from 'react';\nimport { SlideshowManager, SlideshowState, SlideImage } from '../lib/SlideshowManager';\n\n// Context to share slideshow state with overlays\ninterface SlideshowContextValue {\n state: SlideshowState;\n controls: {\n next: () => void;\n prev: () => void;\n goTo: (index: number) => void;\n pause: () => void;\n resume: () => void;\n toggle: () => void;\n };\n}\n\nconst SlideshowContext = createContext<SlideshowContextValue | null>(null);\n\nexport function useSlideshow(): SlideshowContextValue {\n const context = useContext(SlideshowContext);\n if (!context) {\n throw new Error('useSlideshow must be used within PersistentSlideshow');\n }\n return context;\n}\n\ninterface PersistentSlideshowProps {\n images: SlideImage[];\n /** Auto-advance interval in milliseconds (default: 5000) */\n intervalMs?: number;\n /** Auto-advance slides (default: true) */\n autoAdvance?: boolean;\n /** Transition type (default: 'fade') */\n transition?: 'fade' | 'slide' | 'none';\n /** Transition duration in ms (default: 500) */\n transitionDuration?: number;\n /** Show navigation dots (default: true) */\n showDots?: boolean;\n /** Show navigation arrows (default: true) */\n showArrows?: boolean;\n /** Enable swipe gestures on touch devices (default: true) */\n swipeable?: boolean;\n /** Additional class names */\n className?: string;\n /** Image container class names */\n imageClassName?: string;\n /** Children rendered as overlay */\n children?: ReactNode;\n}\n\nexport function PersistentSlideshow({\n images,\n intervalMs = 5000,\n autoAdvance = true,\n transition = 'fade',\n transitionDuration = 500,\n showDots = true,\n showArrows = true,\n swipeable = true,\n className = '',\n imageClassName = '',\n children\n}: PersistentSlideshowProps) {\n const [state, setState] = useState<SlideshowState>(SlideshowManager.getState());\n const touchStartRef = useRef<{ x: number; y: number; time: number } | null>(null);\n\n // Touch/swipe handlers\n const handleTouchStart = useCallback((e: React.TouchEvent) => {\n if (!swipeable || state.totalSlides <= 1) return;\n const touch = e.touches[0];\n touchStartRef.current = {\n x: touch.clientX,\n y: touch.clientY,\n time: Date.now(),\n };\n }, [swipeable, state.totalSlides]);\n\n const handleTouchEnd = useCallback((e: React.TouchEvent) => {\n if (!swipeable || !touchStartRef.current || state.isTransitioning) return;\n\n const touch = e.changedTouches[0];\n const deltaX = touch.clientX - touchStartRef.current.x;\n const deltaY = touch.clientY - touchStartRef.current.y;\n const deltaTime = Date.now() - touchStartRef.current.time;\n\n // Minimum swipe distance (50px) and max time (300ms for quick swipe, or slower with more distance)\n const minSwipeDistance = 50;\n const isHorizontalSwipe = Math.abs(deltaX) > Math.abs(deltaY);\n const isValidSwipe = Math.abs(deltaX) > minSwipeDistance && isHorizontalSwipe;\n const isQuickSwipe = deltaTime < 300 || Math.abs(deltaX) > 100;\n\n if (isValidSwipe && isQuickSwipe) {\n if (deltaX > 0) {\n SlideshowManager.prev();\n } else {\n SlideshowManager.next();\n }\n }\n\n touchStartRef.current = null;\n }, [swipeable, state.isTransitioning]);\n\n useEffect(() => {\n // Initialize slideshow with images\n SlideshowManager.initialize(images, {\n intervalMs,\n transitionDuration,\n autoAdvance,\n });\n\n // Subscribe to state changes\n const unsubscribe = SlideshowManager.onStateChange(setState);\n\n return () => {\n unsubscribe();\n // Don't destroy - let slideshow persist for route changes\n };\n }, [images, intervalMs, transitionDuration, autoAdvance]);\n\n const contextValue: SlideshowContextValue = {\n state,\n controls: {\n next: () => SlideshowManager.next(),\n prev: () => SlideshowManager.prev(),\n goTo: (index) => SlideshowManager.goTo(index),\n pause: () => SlideshowManager.pause(),\n resume: () => SlideshowManager.resume(),\n toggle: () => SlideshowManager.toggle(),\n },\n };\n\n // Get transition styles\n const getTransitionStyles = (index: number): React.CSSProperties => {\n const isActive = index === state.currentIndex;\n\n switch (transition) {\n case 'fade':\n return {\n opacity: isActive ? 1 : 0,\n transition: `opacity ${transitionDuration}ms ease-in-out`,\n position: 'absolute',\n inset: 0,\n };\n case 'slide':\n const offset = (index - state.currentIndex) * 100;\n return {\n transform: `translateX(${offset}%)`,\n transition: `transform ${transitionDuration}ms ease-in-out`,\n position: 'absolute',\n inset: 0,\n };\n case 'none':\n default:\n return {\n opacity: isActive ? 1 : 0,\n position: 'absolute',\n inset: 0,\n };\n }\n };\n\n if (images.length === 0) {\n return (\n <div className={`relative w-full h-full bg-black flex items-center justify-center ${className}`}>\n <p className=\"text-white/60\">No images</p>\n </div>\n );\n }\n\n return (\n <SlideshowContext.Provider value={contextValue}>\n <div\n className={`relative w-full h-full bg-black overflow-hidden ${className}`}\n onTouchStart={handleTouchStart}\n onTouchEnd={handleTouchEnd}\n >\n {/* Image container */}\n <div className=\"relative w-full h-full\">\n {state.images.map((image, index) => (\n <div\n key={`${image.url}-${index}`}\n style={getTransitionStyles(index)}\n className={imageClassName}\n >\n <img\n src={image.url}\n alt={image.alt || `Slide ${index + 1}`}\n className=\"w-full h-full object-contain\"\n loading={index === 0 ? 'eager' : 'lazy'}\n />\n </div>\n ))}\n </div>\n\n {/* Navigation arrows */}\n {showArrows && state.totalSlides > 1 && (\n <>\n <button\n onClick={() => SlideshowManager.prev()}\n disabled={state.isTransitioning}\n className=\"absolute left-2 top-1/2 -translate-y-1/2 p-2 bg-black/40 hover:bg-black/60 rounded-full text-white transition-colors disabled:opacity-50\"\n aria-label=\"Previous slide\"\n >\n <svg className=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M15 19l-7-7 7-7\" />\n </svg>\n </button>\n <button\n onClick={() => SlideshowManager.next()}\n disabled={state.isTransitioning}\n className=\"absolute right-2 top-1/2 -translate-y-1/2 p-2 bg-black/40 hover:bg-black/60 rounded-full text-white transition-colors disabled:opacity-50\"\n aria-label=\"Next slide\"\n >\n <svg className=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M9 5l7 7-7 7\" />\n </svg>\n </button>\n </>\n )}\n\n {/* Navigation dots */}\n {showDots && state.totalSlides > 1 && (\n <div className=\"absolute bottom-3 left-1/2 -translate-x-1/2 flex gap-1.5\">\n {state.images.map((_, index) => (\n <button\n key={index}\n onClick={() => SlideshowManager.goTo(index)}\n disabled={state.isTransitioning}\n className={`w-2 h-2 rounded-full transition-colors ${\n index === state.currentIndex\n ? 'bg-white'\n : 'bg-white/40 hover:bg-white/60'\n }`}\n aria-label={`Go to slide ${index + 1}`}\n />\n ))}\n </div>\n )}\n\n {/* Overlay children - pointer-events managed by individual OverlaySlot components */}\n <div className=\"absolute inset-0 z-10 pointer-events-none\">\n {children}\n </div>\n </div>\n </SlideshowContext.Provider>\n );\n}\n";
|
|
8
8
|
//# sourceMappingURL=PersistentSlideshow.tsx.template.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PersistentSlideshow.tsx.template.d.ts","sourceRoot":"","sources":["../../../src/templates/slideshow/PersistentSlideshow.tsx.template.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,eAAO,MAAM,2BAA2B,
|
|
1
|
+
{"version":3,"file":"PersistentSlideshow.tsx.template.d.ts","sourceRoot":"","sources":["../../../src/templates/slideshow/PersistentSlideshow.tsx.template.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,eAAO,MAAM,2BAA2B,y2QAyPvC,CAAC"}
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
*/
|
|
7
7
|
export const persistentSlideshowTemplate = `'use client';
|
|
8
8
|
|
|
9
|
-
import { useEffect, useState, createContext, useContext, ReactNode } from 'react';
|
|
9
|
+
import { useEffect, useState, useRef, useCallback, createContext, useContext, ReactNode } from 'react';
|
|
10
10
|
import { SlideshowManager, SlideshowState, SlideImage } from '../lib/SlideshowManager';
|
|
11
11
|
|
|
12
12
|
// Context to share slideshow state with overlays
|
|
@@ -46,6 +46,8 @@ interface PersistentSlideshowProps {
|
|
|
46
46
|
showDots?: boolean;
|
|
47
47
|
/** Show navigation arrows (default: true) */
|
|
48
48
|
showArrows?: boolean;
|
|
49
|
+
/** Enable swipe gestures on touch devices (default: true) */
|
|
50
|
+
swipeable?: boolean;
|
|
49
51
|
/** Additional class names */
|
|
50
52
|
className?: string;
|
|
51
53
|
/** Image container class names */
|
|
@@ -62,11 +64,49 @@ export function PersistentSlideshow({
|
|
|
62
64
|
transitionDuration = 500,
|
|
63
65
|
showDots = true,
|
|
64
66
|
showArrows = true,
|
|
67
|
+
swipeable = true,
|
|
65
68
|
className = '',
|
|
66
69
|
imageClassName = '',
|
|
67
70
|
children
|
|
68
71
|
}: PersistentSlideshowProps) {
|
|
69
72
|
const [state, setState] = useState<SlideshowState>(SlideshowManager.getState());
|
|
73
|
+
const touchStartRef = useRef<{ x: number; y: number; time: number } | null>(null);
|
|
74
|
+
|
|
75
|
+
// Touch/swipe handlers
|
|
76
|
+
const handleTouchStart = useCallback((e: React.TouchEvent) => {
|
|
77
|
+
if (!swipeable || state.totalSlides <= 1) return;
|
|
78
|
+
const touch = e.touches[0];
|
|
79
|
+
touchStartRef.current = {
|
|
80
|
+
x: touch.clientX,
|
|
81
|
+
y: touch.clientY,
|
|
82
|
+
time: Date.now(),
|
|
83
|
+
};
|
|
84
|
+
}, [swipeable, state.totalSlides]);
|
|
85
|
+
|
|
86
|
+
const handleTouchEnd = useCallback((e: React.TouchEvent) => {
|
|
87
|
+
if (!swipeable || !touchStartRef.current || state.isTransitioning) return;
|
|
88
|
+
|
|
89
|
+
const touch = e.changedTouches[0];
|
|
90
|
+
const deltaX = touch.clientX - touchStartRef.current.x;
|
|
91
|
+
const deltaY = touch.clientY - touchStartRef.current.y;
|
|
92
|
+
const deltaTime = Date.now() - touchStartRef.current.time;
|
|
93
|
+
|
|
94
|
+
// Minimum swipe distance (50px) and max time (300ms for quick swipe, or slower with more distance)
|
|
95
|
+
const minSwipeDistance = 50;
|
|
96
|
+
const isHorizontalSwipe = Math.abs(deltaX) > Math.abs(deltaY);
|
|
97
|
+
const isValidSwipe = Math.abs(deltaX) > minSwipeDistance && isHorizontalSwipe;
|
|
98
|
+
const isQuickSwipe = deltaTime < 300 || Math.abs(deltaX) > 100;
|
|
99
|
+
|
|
100
|
+
if (isValidSwipe && isQuickSwipe) {
|
|
101
|
+
if (deltaX > 0) {
|
|
102
|
+
SlideshowManager.prev();
|
|
103
|
+
} else {
|
|
104
|
+
SlideshowManager.next();
|
|
105
|
+
}
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
touchStartRef.current = null;
|
|
109
|
+
}, [swipeable, state.isTransitioning]);
|
|
70
110
|
|
|
71
111
|
useEffect(() => {
|
|
72
112
|
// Initialize slideshow with images
|
|
@@ -137,7 +177,11 @@ export function PersistentSlideshow({
|
|
|
137
177
|
|
|
138
178
|
return (
|
|
139
179
|
<SlideshowContext.Provider value={contextValue}>
|
|
140
|
-
<div
|
|
180
|
+
<div
|
|
181
|
+
className={\`relative w-full h-full bg-black overflow-hidden \${className}\`}
|
|
182
|
+
onTouchStart={handleTouchStart}
|
|
183
|
+
onTouchEnd={handleTouchEnd}
|
|
184
|
+
>
|
|
141
185
|
{/* Image container */}
|
|
142
186
|
<div className="relative w-full h-full">
|
|
143
187
|
{state.images.map((image, index) => (
|
|
@@ -201,8 +245,8 @@ export function PersistentSlideshow({
|
|
|
201
245
|
</div>
|
|
202
246
|
)}
|
|
203
247
|
|
|
204
|
-
{/* Overlay children */}
|
|
205
|
-
<div className="absolute inset-0 z-10">
|
|
248
|
+
{/* Overlay children - pointer-events managed by individual OverlaySlot components */}
|
|
249
|
+
<div className="absolute inset-0 z-10 pointer-events-none">
|
|
206
250
|
{children}
|
|
207
251
|
</div>
|
|
208
252
|
</div>
|