feat(builder): media package -- image crop/perf, video size+picker, gallery cols/lightbox, box-model+anim/vis rollout
- ImageBlock/ImageStylePanel: SizeControl width(absorbs old maxWidth presets)/height, AspectRatioControl + OBJECT_FIT grid + FocalPointGrid for CSS framing crop (aspect-ratio/object-fit/object-position on the <img>). Exported <img> always gets loading="lazy" decoding="async", plus width/ height attrs when the style has a plain px length (pxAttr helper). - VideoBlock/MediaStylePanel: Video URL text input replaced with AssetPicker(mediaType="video") writing videoUrl (paste-URL still handles YouTube/Vimeo, upload/browse handle files). Added SizeControl(width) + AspectRatioControl so the video frame honors real size/aspect instead of a hardcoded 16:9 (padding-bottom hack replaced with CSS aspect-ratio). New optional `poster` prop (image AssetPicker) + preload="metadata" on file-type <video>. - Gallery: surfaced the existing-but-unexposed `columns` and `lightbox` props with panel controls. - All 5 owned components (ImageBlock, VideoBlock, Gallery, ContentSlider, MapEmbed): added margin/padding (per-side)/border/box-shadow/opacity style defaults + AnimationControl/VisibilityControl-backed animation/ animationDelay/hideOnDesktop/hideOnTablet/hideOnMobile props. New shared mediaBoxModel.tsx (package-local, not shared.tsx) DRYs the box-model + border/effects + animation/visibility panel sections across ImageStylePanel and MediaStylePanel. - Tests: extended *.toHtml.test.ts for all 5 components (crop/perf attrs, video size/aspect/poster/preload, gallery columns/lightbox, box-model style emission, craft.props presence) + new MediaStylePanel.video.test.tsx verifying the AssetPicker wiring writes videoUrl/poster and the video-only size controls are gated on videoUrl. 694 tests green, tsc + vite build clean. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -1,5 +1,5 @@
|
||||
import { describe, test, expect } from 'vitest';
|
||||
import { ImageBlock } from './ImageBlock';
|
||||
import { ImageBlock, pxAttr } from './ImageBlock';
|
||||
|
||||
const toHtml = (ImageBlock as any).toHtml;
|
||||
|
||||
@@ -32,3 +32,95 @@ describe('ImageBlock.toHtml src/alt XSS hardening', () => {
|
||||
expect(html).toContain('alt="A photo"');
|
||||
});
|
||||
});
|
||||
|
||||
describe('ImageBlock.toHtml perf attributes (always emitted)', () => {
|
||||
test('loading="lazy" and decoding="async" are always present', () => {
|
||||
const { html } = toHtml({ src: 'https://example.com/photo.jpg' }, '');
|
||||
expect(html).toContain('loading="lazy"');
|
||||
expect(html).toContain('decoding="async"');
|
||||
});
|
||||
|
||||
test('width/height attributes are emitted when the style has plain px values', () => {
|
||||
const { html } = toHtml({ src: 'https://example.com/photo.jpg', style: { width: '400px', height: '300px' } }, '');
|
||||
expect(html).toContain('width="400"');
|
||||
expect(html).toContain('height="300"');
|
||||
});
|
||||
|
||||
test('width/height attributes are omitted when the style value is not a plain px length', () => {
|
||||
const { html } = toHtml({ src: 'https://example.com/photo.jpg', style: { width: '50%', height: 'auto' } }, '');
|
||||
expect(html).not.toMatch(/\swidth="/);
|
||||
expect(html).not.toMatch(/\sheight="/);
|
||||
});
|
||||
});
|
||||
|
||||
describe('pxAttr', () => {
|
||||
test('extracts the numeric portion of a plain px length', () => {
|
||||
expect(pxAttr('400px')).toBe('400');
|
||||
expect(pxAttr('12.5px')).toBe('12.5');
|
||||
});
|
||||
|
||||
test('returns undefined for non-px units, non-string, or unset values', () => {
|
||||
expect(pxAttr('50%')).toBeUndefined();
|
||||
expect(pxAttr('auto')).toBeUndefined();
|
||||
expect(pxAttr(undefined)).toBeUndefined();
|
||||
expect(pxAttr(400)).toBeUndefined();
|
||||
});
|
||||
});
|
||||
|
||||
describe('ImageBlock.toHtml CSS framing crop (aspect-ratio + object-fit + object-position)', () => {
|
||||
test('style.aspectRatio, objectFit, objectPosition all flow into the emitted style attribute', () => {
|
||||
const { html } = toHtml(
|
||||
{ src: 'https://example.com/photo.jpg', style: { aspectRatio: '16 / 9', objectFit: 'cover', objectPosition: 'center top' } },
|
||||
''
|
||||
);
|
||||
expect(html).toContain('aspect-ratio:16 / 9');
|
||||
expect(html).toContain('object-fit:cover');
|
||||
expect(html).toContain('object-position:center top');
|
||||
});
|
||||
});
|
||||
|
||||
describe('ImageBlock.toHtml box-model styles (margin/padding/border/shadow/opacity)', () => {
|
||||
test('margin/padding/border/box-shadow/opacity all flow into the emitted style attribute', () => {
|
||||
const { html } = toHtml(
|
||||
{
|
||||
src: 'https://example.com/photo.jpg',
|
||||
style: {
|
||||
marginTop: '10px', marginRight: '10px', marginBottom: '10px', marginLeft: '10px',
|
||||
paddingTop: '5px',
|
||||
border: '2px solid #ff0000',
|
||||
boxShadow: '0 4px 8px rgba(0,0,0,0.12)',
|
||||
opacity: '0.8',
|
||||
},
|
||||
},
|
||||
''
|
||||
);
|
||||
expect(html).toContain('margin-top:10px');
|
||||
expect(html).toContain('padding-top:5px');
|
||||
expect(html).toContain('border:2px solid #ff0000');
|
||||
expect(html).toContain('box-shadow:0 4px 8px rgba(0,0,0,0.12)');
|
||||
expect(html).toContain('opacity:0.8');
|
||||
});
|
||||
});
|
||||
|
||||
describe('ImageBlock.craft.props exposes the box-model/animation/visibility rollout', () => {
|
||||
test('animation, animationDelay, hideOnDesktop/Tablet/Mobile are present with blank/false defaults', () => {
|
||||
const props = (ImageBlock as any).craft.props;
|
||||
expect(props.animation).toBe('');
|
||||
expect(props.animationDelay).toBe('0');
|
||||
expect(props.hideOnDesktop).toBe(false);
|
||||
expect(props.hideOnTablet).toBe(false);
|
||||
expect(props.hideOnMobile).toBe(false);
|
||||
});
|
||||
|
||||
test('style carries blank/default box-model and crop keys', () => {
|
||||
const style = (ImageBlock as any).craft.props.style;
|
||||
expect(style).toHaveProperty('aspectRatio');
|
||||
expect(style).toHaveProperty('objectFit');
|
||||
expect(style).toHaveProperty('objectPosition');
|
||||
expect(style).toHaveProperty('marginTop');
|
||||
expect(style).toHaveProperty('paddingTop');
|
||||
expect(style.border).toBe('none');
|
||||
expect(style.boxShadow).toBe('none');
|
||||
expect(style.opacity).toBe('1');
|
||||
});
|
||||
});
|
||||
|
||||
@@ -9,6 +9,23 @@ interface ImageBlockProps {
|
||||
src?: string;
|
||||
alt?: string;
|
||||
style?: CSSProperties;
|
||||
animation?: string;
|
||||
animationDelay?: string;
|
||||
hideOnDesktop?: boolean;
|
||||
hideOnTablet?: boolean;
|
||||
hideOnMobile?: boolean;
|
||||
}
|
||||
|
||||
/** Extracts the numeric portion of a plain "<n>px" CSS length string, for
|
||||
* emitting real `width`/`height` HTML attributes on the exported `<img>`
|
||||
* (helps the browser reserve layout space before the image loads --
|
||||
* avoiding CLS -- something a CSS-only width/height can't do on its own).
|
||||
* Returns undefined for any other unit ('%', 'auto', '', etc.) so the
|
||||
* attribute is simply omitted when the pixel size isn't known. */
|
||||
export function pxAttr(v: unknown): string | undefined {
|
||||
if (typeof v !== 'string') return undefined;
|
||||
const m = v.trim().match(/^(\d+(?:\.\d+)?)px$/);
|
||||
return m ? m[1] : undefined;
|
||||
}
|
||||
|
||||
// Helper: upload a file to the WHP API and return the proxy URL
|
||||
@@ -83,7 +100,27 @@ export const ImageBlock: UserComponent<ImageBlockProps> = ({
|
||||
|
||||
ImageBlock.craft = {
|
||||
displayName: 'Image',
|
||||
props: { src: PLACEHOLDER_SRC, alt: '', style: { width: '100%', height: 'auto' } },
|
||||
props: {
|
||||
src: PLACEHOLDER_SRC,
|
||||
alt: '',
|
||||
style: {
|
||||
width: '100%',
|
||||
height: 'auto',
|
||||
aspectRatio: '',
|
||||
objectFit: '' as CSSProperties['objectFit'],
|
||||
objectPosition: '',
|
||||
marginTop: '', marginRight: '', marginBottom: '', marginLeft: '',
|
||||
paddingTop: '', paddingRight: '', paddingBottom: '', paddingLeft: '',
|
||||
border: 'none',
|
||||
boxShadow: 'none',
|
||||
opacity: '1',
|
||||
},
|
||||
animation: '',
|
||||
animationDelay: '0',
|
||||
hideOnDesktop: false,
|
||||
hideOnTablet: false,
|
||||
hideOnMobile: false,
|
||||
},
|
||||
rules: { canDrag: () => true, canMoveIn: () => false, canMoveOut: () => true },
|
||||
};
|
||||
|
||||
@@ -95,5 +132,8 @@ ImageBlock.craft = {
|
||||
}
|
||||
const s = cssPropsToString({ display: 'block', maxWidth: '100%', ...props.style });
|
||||
const alt = props.alt ? ` alt="${escapeAttr(props.alt)}"` : ' alt=""';
|
||||
return { html: `<img src="${escapeAttr(safeImageUrl(src))}"${alt}${s ? ` style="${s}"` : ''} />` };
|
||||
const widthAttr = pxAttr((props.style as any)?.width);
|
||||
const heightAttr = pxAttr((props.style as any)?.height);
|
||||
const dims = `${widthAttr ? ` width="${widthAttr}"` : ''}${heightAttr ? ` height="${heightAttr}"` : ''}`;
|
||||
return { html: `<img src="${escapeAttr(safeImageUrl(src))}"${alt}${dims} loading="lazy" decoding="async"${s ? ` style="${s}"` : ''} />` };
|
||||
};
|
||||
|
||||
@@ -28,6 +28,49 @@ describe('MapEmbed.toHtml iframe src ampersand encoding (F-export review Minor)'
|
||||
});
|
||||
});
|
||||
|
||||
describe('MapEmbed.toHtml box-model styles (margin/padding/border/shadow/opacity)', () => {
|
||||
test('margin/padding/border/box-shadow/opacity all flow into the wrapper style attribute', () => {
|
||||
const { html } = toHtml(
|
||||
{
|
||||
address: 'New York, NY',
|
||||
style: {
|
||||
marginTop: '16px',
|
||||
paddingRight: '4px',
|
||||
border: '1px solid #cccccc',
|
||||
boxShadow: '0 4px 8px rgba(0,0,0,0.12)',
|
||||
opacity: '0.95',
|
||||
},
|
||||
},
|
||||
''
|
||||
);
|
||||
expect(html).toContain('margin-top:16px');
|
||||
expect(html).toContain('padding-right:4px');
|
||||
expect(html).toContain('border:1px solid #cccccc');
|
||||
expect(html).toContain('box-shadow:0 4px 8px rgba(0,0,0,0.12)');
|
||||
expect(html).toContain('opacity:0.95');
|
||||
});
|
||||
});
|
||||
|
||||
describe('MapEmbed.craft.props exposes the animation/visibility rollout', () => {
|
||||
test('animation, animationDelay, hideOnDesktop/Tablet/Mobile are present with blank/false defaults', () => {
|
||||
const props = (MapEmbed as any).craft.props;
|
||||
expect(props.animation).toBe('');
|
||||
expect(props.animationDelay).toBe('0');
|
||||
expect(props.hideOnDesktop).toBe(false);
|
||||
expect(props.hideOnTablet).toBe(false);
|
||||
expect(props.hideOnMobile).toBe(false);
|
||||
});
|
||||
|
||||
test('style carries blank/default box-model keys', () => {
|
||||
const style = (MapEmbed as any).craft.props.style;
|
||||
expect(style).toHaveProperty('marginTop');
|
||||
expect(style).toHaveProperty('paddingTop');
|
||||
expect(style.border).toBe('none');
|
||||
expect(style.boxShadow).toBe('none');
|
||||
expect(style.opacity).toBe('1');
|
||||
});
|
||||
});
|
||||
|
||||
describe('MapEmbed.toHtml address/zoom/height XSS hardening', () => {
|
||||
test('a malicious address cannot break out of the src or title attribute', () => {
|
||||
const malicious = 'X" onerror="alert(1)';
|
||||
|
||||
@@ -8,6 +8,11 @@ interface MapEmbedProps {
|
||||
zoom?: number;
|
||||
height?: string;
|
||||
style?: CSSProperties;
|
||||
animation?: string;
|
||||
animationDelay?: string;
|
||||
hideOnDesktop?: boolean;
|
||||
hideOnTablet?: boolean;
|
||||
hideOnMobile?: boolean;
|
||||
}
|
||||
|
||||
function buildMapUrl(address: string, zoom: number): string {
|
||||
@@ -70,7 +75,18 @@ MapEmbed.craft = {
|
||||
address: 'New York, NY',
|
||||
zoom: 14,
|
||||
height: '400px',
|
||||
style: {},
|
||||
style: {
|
||||
marginTop: '', marginRight: '', marginBottom: '', marginLeft: '',
|
||||
paddingTop: '', paddingRight: '', paddingBottom: '', paddingLeft: '',
|
||||
border: 'none',
|
||||
boxShadow: 'none',
|
||||
opacity: '1',
|
||||
},
|
||||
animation: '',
|
||||
animationDelay: '0',
|
||||
hideOnDesktop: false,
|
||||
hideOnTablet: false,
|
||||
hideOnMobile: false,
|
||||
},
|
||||
rules: {
|
||||
canDrag: () => true,
|
||||
|
||||
@@ -118,3 +118,75 @@ describe('VideoBlock.toHtml iframe src ampersand encoding (F-export review Minor
|
||||
expect(srcMatch![1]).not.toMatch(/&(?!amp;)/);
|
||||
});
|
||||
});
|
||||
|
||||
describe('VideoBlock.toHtml size + aspect ratio (frame honors style props, not a hardcoded 16:9)', () => {
|
||||
test('direct file: style.width flows to the wrapper, style.aspectRatio flows to the <video>', () => {
|
||||
const { html } = toHtml({ videoUrl: 'https://example.com/clip.mp4', style: { width: '50%', aspectRatio: '4 / 3' } }, '');
|
||||
expect(html).toMatch(/<div style="[^"]*width:50%[^"]*"/);
|
||||
expect(html).toMatch(/<video[^>]*style="[^"]*aspect-ratio:4 \/ 3[^"]*"/);
|
||||
});
|
||||
|
||||
test('direct file: no aspectRatio set -- no aspect-ratio declaration is forced onto the <video>', () => {
|
||||
const { html } = toHtml({ videoUrl: 'https://example.com/clip.mp4' }, '');
|
||||
const videoTag = html.match(/<video[^>]*>/)![0];
|
||||
expect(videoTag).not.toContain('aspect-ratio');
|
||||
});
|
||||
|
||||
test('YouTube/Vimeo: style.aspectRatio overrides the 16:9 default on the iframe container', () => {
|
||||
const { html } = toHtml({ videoUrl: 'https://vimeo.com/123456789', style: { aspectRatio: '1 / 1' } }, '');
|
||||
expect(html).toMatch(/<div[^>]*style="[^"]*aspect-ratio:1 \/ 1[^"]*"[^>]*><iframe/);
|
||||
});
|
||||
|
||||
test('YouTube/Vimeo: defaults to 16 / 9 when no aspectRatio style is set', () => {
|
||||
const { html } = toHtml({ videoUrl: 'https://vimeo.com/123456789' }, '');
|
||||
expect(html).toMatch(/<div[^>]*style="[^"]*aspect-ratio:16 \/ 9[^"]*"[^>]*><iframe/);
|
||||
});
|
||||
});
|
||||
|
||||
describe('VideoBlock.toHtml poster + preload (file type)', () => {
|
||||
test('poster attribute is emitted (escaped) and preload="metadata" is always present on a direct file', () => {
|
||||
const { html } = toHtml({ videoUrl: 'https://example.com/clip.mp4', poster: 'https://example.com/poster.jpg' }, '');
|
||||
expect(html).toContain('poster="https://example.com/poster.jpg"');
|
||||
expect(html).toContain('preload="metadata"');
|
||||
});
|
||||
|
||||
test('no poster prop -- no poster attribute is emitted, but preload="metadata" still is', () => {
|
||||
const { html } = toHtml({ videoUrl: 'https://example.com/clip.mp4' }, '');
|
||||
expect(html).not.toContain('poster=');
|
||||
expect(html).toContain('preload="metadata"');
|
||||
});
|
||||
|
||||
test('a malicious poster (javascript: scheme) is blocked by safeImageUrl', () => {
|
||||
const { html } = toHtml({ videoUrl: 'https://example.com/clip.mp4', poster: 'javascript:alert(1)' }, '');
|
||||
expect(html).not.toContain('javascript:');
|
||||
});
|
||||
|
||||
test('a poster value cannot break out of the poster attribute', () => {
|
||||
const malicious = 'https://example.com/x.jpg" onerror="alert(1)';
|
||||
const { html } = toHtml({ videoUrl: 'https://example.com/clip.mp4', poster: malicious }, '');
|
||||
expect(html).not.toContain('onerror="alert(1)"');
|
||||
});
|
||||
});
|
||||
|
||||
describe('VideoBlock.craft.props exposes the box-model/animation/visibility rollout', () => {
|
||||
test('poster, animation, animationDelay, hideOnDesktop/Tablet/Mobile are present with blank/false defaults', () => {
|
||||
const props = (VideoBlock as any).craft.props;
|
||||
expect(props.poster).toBe('');
|
||||
expect(props.animation).toBe('');
|
||||
expect(props.animationDelay).toBe('0');
|
||||
expect(props.hideOnDesktop).toBe(false);
|
||||
expect(props.hideOnTablet).toBe(false);
|
||||
expect(props.hideOnMobile).toBe(false);
|
||||
});
|
||||
|
||||
test('style carries blank/default box-model + size/aspect keys', () => {
|
||||
const style = (VideoBlock as any).craft.props.style;
|
||||
expect(style).toHaveProperty('width');
|
||||
expect(style).toHaveProperty('aspectRatio');
|
||||
expect(style).toHaveProperty('marginTop');
|
||||
expect(style).toHaveProperty('paddingTop');
|
||||
expect(style.border).toBe('none');
|
||||
expect(style.boxShadow).toBe('none');
|
||||
expect(style.opacity).toBe('1');
|
||||
});
|
||||
});
|
||||
|
||||
@@ -2,7 +2,7 @@ import React, { CSSProperties } from 'react';
|
||||
import { useNode, Element, UserComponent } from '@craftjs/core';
|
||||
import { Container } from '../layout/Container';
|
||||
import { cssPropsToString } from '../../utils/style-helpers';
|
||||
import { escapeAttr, safeUrl } from '../../utils/escape';
|
||||
import { escapeAttr, safeUrl, safeImageUrl } from '../../utils/escape';
|
||||
|
||||
/* ---------- Types ---------- */
|
||||
|
||||
@@ -12,6 +12,7 @@ interface VideoBlockProps {
|
||||
videoUrl?: string;
|
||||
videoType?: VideoType;
|
||||
embedUrl?: string;
|
||||
poster?: string;
|
||||
autoplay?: boolean;
|
||||
muted?: boolean;
|
||||
loop?: boolean;
|
||||
@@ -22,6 +23,11 @@ interface VideoBlockProps {
|
||||
innerMaxWidth?: string;
|
||||
style?: CSSProperties;
|
||||
children?: React.ReactNode;
|
||||
animation?: string;
|
||||
animationDelay?: string;
|
||||
hideOnDesktop?: boolean;
|
||||
hideOnTablet?: boolean;
|
||||
hideOnMobile?: boolean;
|
||||
}
|
||||
|
||||
/* ---------- URL detection ---------- */
|
||||
@@ -120,6 +126,7 @@ export const VideoBlock: UserComponent<VideoBlockProps> = ({
|
||||
videoUrl = '',
|
||||
videoType: _videoTypeProp,
|
||||
embedUrl: _embedUrlProp,
|
||||
poster = '',
|
||||
autoplay = false,
|
||||
muted = true,
|
||||
loop = false,
|
||||
@@ -259,8 +266,7 @@ export const VideoBlock: UserComponent<VideoBlockProps> = ({
|
||||
<div
|
||||
style={{
|
||||
position: 'relative',
|
||||
paddingBottom: '56.25%',
|
||||
height: 0,
|
||||
aspectRatio: (style as any)?.aspectRatio || '16 / 9',
|
||||
overflow: 'hidden',
|
||||
borderRadius: (style as any)?.borderRadius || undefined,
|
||||
}}
|
||||
@@ -269,8 +275,7 @@ export const VideoBlock: UserComponent<VideoBlockProps> = ({
|
||||
src={buildEmbedParams(embedUrl, { autoplay, muted, loop, controls })}
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: 0,
|
||||
inset: 0,
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
border: 'none',
|
||||
@@ -284,14 +289,18 @@ export const VideoBlock: UserComponent<VideoBlockProps> = ({
|
||||
{type === 'file' && (
|
||||
<video
|
||||
src={embedUrl}
|
||||
poster={poster || undefined}
|
||||
autoPlay={autoplay}
|
||||
muted={muted}
|
||||
loop={loop}
|
||||
controls={controls}
|
||||
preload="metadata"
|
||||
playsInline
|
||||
style={{
|
||||
display: 'block',
|
||||
width: '100%',
|
||||
aspectRatio: (style as any)?.aspectRatio || undefined,
|
||||
objectFit: 'cover',
|
||||
borderRadius: (style as any)?.borderRadius || undefined,
|
||||
}}
|
||||
/>
|
||||
@@ -310,6 +319,7 @@ VideoBlock.craft = {
|
||||
videoUrl: '',
|
||||
videoType: 'none',
|
||||
embedUrl: '',
|
||||
poster: '',
|
||||
autoplay: false,
|
||||
muted: true,
|
||||
loop: false,
|
||||
@@ -318,7 +328,20 @@ VideoBlock.craft = {
|
||||
overlayColor: '#000000',
|
||||
overlayOpacity: 50,
|
||||
innerMaxWidth: '1200px',
|
||||
style: {},
|
||||
style: {
|
||||
width: '',
|
||||
aspectRatio: '',
|
||||
marginTop: '', marginRight: '', marginBottom: '', marginLeft: '',
|
||||
paddingTop: '', paddingRight: '', paddingBottom: '', paddingLeft: '',
|
||||
border: 'none',
|
||||
boxShadow: 'none',
|
||||
opacity: '1',
|
||||
},
|
||||
animation: '',
|
||||
animationDelay: '0',
|
||||
hideOnDesktop: false,
|
||||
hideOnTablet: false,
|
||||
hideOnMobile: false,
|
||||
},
|
||||
rules: {
|
||||
canDrag: () => true,
|
||||
@@ -334,6 +357,7 @@ VideoBlock.craft = {
|
||||
(VideoBlock as any).toHtml = (props: VideoBlockProps, childrenHtml: string) => {
|
||||
const {
|
||||
videoUrl = '',
|
||||
poster = '',
|
||||
autoplay = false,
|
||||
muted = true,
|
||||
loop: doLoop = false,
|
||||
@@ -422,15 +446,13 @@ VideoBlock.craft = {
|
||||
const iframeSrc = buildEmbedParams(embedUrl, { autoplay, muted, loop: doLoop, controls });
|
||||
const containerStyle = cssPropsToString({
|
||||
position: 'relative',
|
||||
paddingBottom: '56.25%',
|
||||
height: '0',
|
||||
aspectRatio: (style as any)?.aspectRatio || '16 / 9',
|
||||
overflow: 'hidden',
|
||||
borderRadius: (style as any)?.borderRadius || undefined,
|
||||
});
|
||||
const iframeStyle = cssPropsToString({
|
||||
position: 'absolute',
|
||||
top: '0',
|
||||
left: '0',
|
||||
inset: '0',
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
border: 'none',
|
||||
@@ -447,13 +469,16 @@ VideoBlock.craft = {
|
||||
if (doLoop) vidAttrs.push('loop');
|
||||
if (controls) vidAttrs.push('controls');
|
||||
vidAttrs.push('playsinline');
|
||||
const posterAttr = poster ? ` poster="${escapeAttr(safeImageUrl(poster))}"` : '';
|
||||
const vidStyle = cssPropsToString({
|
||||
display: 'block',
|
||||
width: '100%',
|
||||
aspectRatio: (style as any)?.aspectRatio || undefined,
|
||||
objectFit: 'cover',
|
||||
borderRadius: (style as any)?.borderRadius || undefined,
|
||||
});
|
||||
|
||||
return {
|
||||
html: `<div${wrapperStyle ? ` style="${wrapperStyle}"` : ''}><video src="${escapeAttr(safeUrl(embedUrl))}" ${vidAttrs.join(' ')}${vidStyle ? ` style="${vidStyle}"` : ''}></video></div>`,
|
||||
html: `<div${wrapperStyle ? ` style="${wrapperStyle}"` : ''}><video src="${escapeAttr(safeUrl(embedUrl))}"${posterAttr} preload="metadata" ${vidAttrs.join(' ')}${vidStyle ? ` style="${vidStyle}"` : ''}></video></div>`,
|
||||
};
|
||||
};
|
||||
|
||||
@@ -139,3 +139,46 @@ describe('ContentSlider.toHtml interval is NOT runtime-type-checked -- must be c
|
||||
expect(html).toMatch(/setInterval\(function\(\)\{show\(current\+1\);\},3000\);/);
|
||||
});
|
||||
});
|
||||
|
||||
describe('ContentSlider.toHtml box-model styles (margin/padding/border/shadow/opacity)', () => {
|
||||
test('margin/padding/border/box-shadow/opacity all flow into the section style attribute', () => {
|
||||
const { html } = toHtml(
|
||||
{
|
||||
slides,
|
||||
style: {
|
||||
marginBottom: '24px',
|
||||
paddingTop: '8px',
|
||||
border: '3px dashed #00ff00',
|
||||
boxShadow: '0 10px 24px rgba(0,0,0,0.18)',
|
||||
opacity: '0.75',
|
||||
},
|
||||
},
|
||||
''
|
||||
);
|
||||
expect(html).toContain('margin-bottom:24px');
|
||||
expect(html).toContain('padding-top:8px');
|
||||
expect(html).toContain('border:3px dashed #00ff00');
|
||||
expect(html).toContain('box-shadow:0 10px 24px rgba(0,0,0,0.18)');
|
||||
expect(html).toContain('opacity:0.75');
|
||||
});
|
||||
});
|
||||
|
||||
describe('ContentSlider.craft.props exposes the animation/visibility rollout', () => {
|
||||
test('animation, animationDelay, hideOnDesktop/Tablet/Mobile are present with blank/false defaults', () => {
|
||||
const props = (ContentSlider as any).craft.props;
|
||||
expect(props.animation).toBe('');
|
||||
expect(props.animationDelay).toBe('0');
|
||||
expect(props.hideOnDesktop).toBe(false);
|
||||
expect(props.hideOnTablet).toBe(false);
|
||||
expect(props.hideOnMobile).toBe(false);
|
||||
});
|
||||
|
||||
test('style carries blank/default box-model keys', () => {
|
||||
const style = (ContentSlider as any).craft.props.style;
|
||||
expect(style).toHaveProperty('marginTop');
|
||||
expect(style).toHaveProperty('paddingTop');
|
||||
expect(style.border).toBe('none');
|
||||
expect(style.boxShadow).toBe('none');
|
||||
expect(style.opacity).toBe('1');
|
||||
});
|
||||
});
|
||||
|
||||
@@ -21,6 +21,11 @@ interface ContentSliderProps {
|
||||
showArrows?: boolean;
|
||||
height?: string;
|
||||
style?: CSSProperties;
|
||||
animation?: string;
|
||||
animationDelay?: string;
|
||||
hideOnDesktop?: boolean;
|
||||
hideOnTablet?: boolean;
|
||||
hideOnMobile?: boolean;
|
||||
}
|
||||
|
||||
const defaultSlides: Slide[] = [
|
||||
@@ -227,7 +232,18 @@ ContentSlider.craft = {
|
||||
showDots: true,
|
||||
showArrows: true,
|
||||
height: '400px',
|
||||
style: {},
|
||||
style: {
|
||||
marginTop: '', marginRight: '', marginBottom: '', marginLeft: '',
|
||||
paddingTop: '', paddingRight: '', paddingBottom: '', paddingLeft: '',
|
||||
border: 'none',
|
||||
boxShadow: 'none',
|
||||
opacity: '1',
|
||||
},
|
||||
animation: '',
|
||||
animationDelay: '0',
|
||||
hideOnDesktop: false,
|
||||
hideOnTablet: false,
|
||||
hideOnMobile: false,
|
||||
},
|
||||
rules: {
|
||||
canDrag: () => true,
|
||||
|
||||
@@ -3,6 +3,73 @@ import { Gallery } from './Gallery';
|
||||
|
||||
const toHtml = (Gallery as any).toHtml;
|
||||
|
||||
describe('Gallery.toHtml columns + lightbox controls (previously unexposed props)', () => {
|
||||
test('columns drives the grid-template-columns repeat count', () => {
|
||||
const { html } = toHtml({ images: [{ src: '/a.jpg', alt: 'a' }], columns: 5 }, '');
|
||||
expect(html).toContain('grid-template-columns:repeat(5,1fr)');
|
||||
});
|
||||
|
||||
test('lightbox=true adds the delegated-listener overlay markup (columns unaffected)', () => {
|
||||
const { html } = toHtml({ images: [{ src: '/a.jpg', alt: 'a' }], columns: 4, lightbox: true }, '');
|
||||
expect(html).toContain('grid-template-columns:repeat(4,1fr)');
|
||||
expect(html).toContain('role="dialog"');
|
||||
});
|
||||
|
||||
test('a non-numeric columns value falls back safely (Number() coercion, not NaN in the template)', () => {
|
||||
const { html } = toHtml({ images: [{ src: '/a.jpg' }], columns: 'not-a-number' as any }, '');
|
||||
expect(html).toContain('grid-template-columns:repeat(3,1fr)');
|
||||
});
|
||||
});
|
||||
|
||||
describe('Gallery.toHtml box-model styles (margin/padding/border/shadow/opacity)', () => {
|
||||
test('margin/padding/border/box-shadow/opacity all flow into the section style attribute', () => {
|
||||
const { html } = toHtml(
|
||||
{
|
||||
images: [{ src: '/a.jpg', alt: 'a' }],
|
||||
style: {
|
||||
marginTop: '20px',
|
||||
paddingLeft: '12px',
|
||||
border: '1px solid #333333',
|
||||
boxShadow: '0 1px 2px rgba(0,0,0,0.08)',
|
||||
opacity: '0.9',
|
||||
},
|
||||
},
|
||||
''
|
||||
);
|
||||
expect(html).toContain('margin-top:20px');
|
||||
expect(html).toContain('padding-left:12px');
|
||||
expect(html).toContain('border:1px solid #333333');
|
||||
expect(html).toContain('box-shadow:0 1px 2px rgba(0,0,0,0.08)');
|
||||
expect(html).toContain('opacity:0.9');
|
||||
});
|
||||
});
|
||||
|
||||
describe('Gallery.craft.props exposes columns/lightbox + the animation/visibility rollout', () => {
|
||||
test('columns and lightbox have their existing defaults', () => {
|
||||
const props = (Gallery as any).craft.props;
|
||||
expect(props.columns).toBe(3);
|
||||
expect(props.lightbox).toBe(false);
|
||||
});
|
||||
|
||||
test('animation, animationDelay, hideOnDesktop/Tablet/Mobile are present with blank/false defaults', () => {
|
||||
const props = (Gallery as any).craft.props;
|
||||
expect(props.animation).toBe('');
|
||||
expect(props.animationDelay).toBe('0');
|
||||
expect(props.hideOnDesktop).toBe(false);
|
||||
expect(props.hideOnTablet).toBe(false);
|
||||
expect(props.hideOnMobile).toBe(false);
|
||||
});
|
||||
|
||||
test('style carries blank/default box-model keys', () => {
|
||||
const style = (Gallery as any).craft.props.style;
|
||||
expect(style).toHaveProperty('marginTop');
|
||||
expect(style).toHaveProperty('paddingTop');
|
||||
expect(style.border).toBe('none');
|
||||
expect(style.boxShadow).toBe('none');
|
||||
expect(style.opacity).toBe('1');
|
||||
});
|
||||
});
|
||||
|
||||
describe('Gallery.toHtml lightbox uses a delegated listener, not per-item onclick (A4.3)', () => {
|
||||
test('no per-item inline onclick with interpolated src', () => {
|
||||
const { html } = toHtml({ images: [{ src: '/a.jpg', alt: 'a' }], lightbox: true }, '');
|
||||
|
||||
@@ -15,6 +15,11 @@ interface GalleryProps {
|
||||
gap?: string;
|
||||
style?: CSSProperties;
|
||||
lightbox?: boolean;
|
||||
animation?: string;
|
||||
animationDelay?: string;
|
||||
hideOnDesktop?: boolean;
|
||||
hideOnTablet?: boolean;
|
||||
hideOnMobile?: boolean;
|
||||
}
|
||||
|
||||
const placeholderSvg = (index: number) => {
|
||||
@@ -112,8 +117,20 @@ Gallery.craft = {
|
||||
images: defaultImages,
|
||||
columns: 3,
|
||||
gap: '16px',
|
||||
style: { backgroundColor: '#ffffff' },
|
||||
style: {
|
||||
backgroundColor: '#ffffff',
|
||||
marginTop: '', marginRight: '', marginBottom: '', marginLeft: '',
|
||||
paddingTop: '', paddingRight: '', paddingBottom: '', paddingLeft: '',
|
||||
border: 'none',
|
||||
boxShadow: 'none',
|
||||
opacity: '1',
|
||||
},
|
||||
lightbox: false,
|
||||
animation: '',
|
||||
animationDelay: '0',
|
||||
hideOnDesktop: false,
|
||||
hideOnTablet: false,
|
||||
hideOnMobile: false,
|
||||
},
|
||||
rules: {
|
||||
canDrag: () => true,
|
||||
|
||||
Reference in New Issue
Block a user