diff --git a/packages/web-react/src/components/FileUploader/demo/FileUploaderAttachment.tsx b/packages/web-react/src/components/FileUploader/demo/FileUploaderAttachment.tsx index b8482df1af..b0a14442f7 100644 --- a/packages/web-react/src/components/FileUploader/demo/FileUploaderAttachment.tsx +++ b/packages/web-react/src/components/FileUploader/demo/FileUploaderAttachment.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { DEMO_ATTACHMENT_BASE64_IMAGE } from './constants'; +import { DEMO_ATTACHMENT_BASE64_IMAGE, DEMO_ATTACHMENT_BASE64_IMAGE_40X52 } from './constants'; import { base64ToByteArray } from '../utils'; import { FileUploaderAttachment as FileUploaderAttachmentComponent, useFileQueue } from '..'; @@ -7,6 +7,7 @@ const FileUploaderAttachment = () => { const { onDismiss } = useFileQueue(); const byteArray = base64ToByteArray(DEMO_ATTACHMENT_BASE64_IMAGE); + const byteArrayPortrait = base64ToByteArray(DEMO_ATTACHMENT_BASE64_IMAGE_40X52); // ⚠️ VISUAL EXAMPLE ONLY, DO NOT COPY-PASTE return ( @@ -30,6 +31,15 @@ const FileUploaderAttachment = () => { alert('Edit'); }} /> + ); diff --git a/packages/web-twig/src/Resources/components/FileUploader/FileUploaderAttachment.twig b/packages/web-twig/src/Resources/components/FileUploader/FileUploaderAttachment.twig index 03d4b92583..7440b40bd2 100644 --- a/packages/web-twig/src/Resources/components/FileUploader/FileUploaderAttachment.twig +++ b/packages/web-twig/src/Resources/components/FileUploader/FileUploaderAttachment.twig @@ -19,7 +19,8 @@ {# Attributes #} {%- set _dataImagePreviewAttr = _generateImagePreview ? 'data-spirit-imagePreview="true"' : null -%} -{%- set _imageObjectFitAttr = _imageObjectFit ? 'data-spirit-image-object-fit=' ~ _imageObjectFit : null -%} +{%- set _imageObjectFitCSSAttr = '--file-uploader-attachment-image-object-fit:' -%} +{%- set _imageObjectFitAttr = _imageObjectFit ? 'style=' ~ _imageObjectFitCSSAttr ~ _imageObjectFit : null -%} {# Miscellaneous #} {%- set _styleProps = useStyleProps(props) -%} diff --git a/packages/web-twig/src/Resources/components/FileUploader/stories/FileUploaderAttachment.twig b/packages/web-twig/src/Resources/components/FileUploader/stories/FileUploaderAttachment.twig index dbea74ed54..e4d6e98af4 100644 --- a/packages/web-twig/src/Resources/components/FileUploader/stories/FileUploaderAttachment.twig +++ b/packages/web-twig/src/Resources/components/FileUploader/stories/FileUploaderAttachment.twig @@ -8,5 +8,10 @@ imagePreview="https://picsum.photos/id/823/162/162" onEdit="{() => {}}" /> + diff --git a/packages/web/src/js/FileUploader.ts b/packages/web/src/js/FileUploader.ts index d7afcb39ed..341ad24f1b 100644 --- a/packages/web/src/js/FileUploader.ts +++ b/packages/web/src/js/FileUploader.ts @@ -267,8 +267,6 @@ class FileUploader extends BaseComponent { const AttachmentSvgIcon = item?.querySelector('svg'); const AttachmentPreviewImage = snippet.querySelector('.FileUploaderAttachment__image'); const isFileImg = file.type.includes('image'); - const itemImageObjectFit = (item?.querySelector('.FileUploaderAttachment__image img') as HTMLElement)?.dataset - ?.spiritImageObjectFit; if (hasImagePreview && isFileImg) { AttachmentSvgIcon?.remove(); @@ -280,13 +278,6 @@ class FileUploader extends BaseComponent { AttachmentPreviewImage?.remove(); } - if (itemImageObjectFit) { - AttachmentPreviewImage?.querySelector('img')?.setAttribute( - 'style', - `--file-uploader-attachment-image-object-fit: ${itemImageObjectFit}`, - ); - } - item!.appendChild(attachmentInputElement); item!.setAttribute('id', id); itemName!.appendChild(document.createTextNode(file.name)); @@ -389,8 +380,6 @@ class FileUploader extends BaseComponent { this.fileQueue.set(name, newValue); const itemImgElement = SelectorEngine.findOne(`#${name} .FileUploaderAttachment__image img`) as HTMLImageElement; - const itemImageObjectFit = itemImgElement?.dataset?.spiritImageObjectFit; - let cropStyles; if (meta && itemImgElement && FileUploader.isCoordsInMeta(meta)) { const previewHeight = IMAGE_PREVIEW_HEIGHT; @@ -411,18 +400,10 @@ class FileUploader extends BaseComponent { const imageWidth = Math.round(parseInt(meta.originalWidth as string, 10) * scale); const imageHeight = Math.round(parseInt(meta.originalHeight as string, 10) * scale); - cropStyles = ` - --file-uploader-attachment-image-top: -${cropY}px; - --file-uploader-attachment-image-left: -${cropX}px; - --file-uploader-attachment-image-width: ${imageWidth}px; - --file-uploader-attachment-image-height: ${imageHeight}px; - `; - - if (itemImageObjectFit) { - cropStyles += `--file-uploader-attachment-image-object-fit: ${itemImageObjectFit};`; - } - - itemImgElement?.setAttribute('style', cropStyles); + itemImgElement?.style.setProperty('--file-uploader-attachment-image-top', `-${cropY}px`); + itemImgElement?.style.setProperty('--file-uploader-attachment-image-left', `-${cropX}px`); + itemImgElement?.style.setProperty('--file-uploader-attachment-image-width', `${imageWidth}px`); + itemImgElement?.style.setProperty('--file-uploader-attachment-image-height', `${imageHeight}px`); } callback && callback(name, file, meta); diff --git a/packages/web/src/scss/components/FileUploader/README.md b/packages/web/src/scss/components/FileUploader/README.md index b2a5d6aa28..d24355e0b1 100644 --- a/packages/web/src/scss/components/FileUploader/README.md +++ b/packages/web/src/scss/components/FileUploader/README.md @@ -342,7 +342,7 @@ Object fit is `cover` by default. ```html - + ``` @@ -352,7 +352,7 @@ Full example:
  • - + diff --git a/packages/web/src/scss/components/FileUploader/index.html b/packages/web/src/scss/components/FileUploader/index.html index 614667d65c..d01c58f48b 100644 --- a/packages/web/src/scss/components/FileUploader/index.html +++ b/packages/web/src/scss/components/FileUploader/index.html @@ -515,6 +515,24 @@
    • + +
  • + + Contained image + + + Contained image + + + +
    • + +