yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

svg bug and cleanup

Browse Source
This commit is contained in:
JesmoDev
2024-02-15 16:24:03 +01:00
parent f35a020f13
commit ea0a03bda7
5 changed files with 51 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/Umbraco.Web.UI.Client/src/packages/core/components/input-upload-field/index.ts
View File

@@ -2,3 +2,4 @@ export * from './input-upload-field.element.js';
export * from './input-upload-field-file.element.js';
export * from './input-upload-field-audio.element.js';
export * from './input-upload-field-video.element.js';
export * from './input-upload-field-svg.element.js';

1
src/Umbraco.Web.UI.Client/src/packages/core/components/input-upload-field/input-upload-field-audio.element.ts
View File

@@ -1,4 +1,3 @@
import { UMB_APP_CONTEXT } from '@umbraco-cms/backoffice/app';
import { html, customElement, property, css } from '@umbraco-cms/backoffice/external/lit';
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';

45
src/Umbraco.Web.UI.Client/src/packages/core/components/input-upload-field/input-upload-field-svg.element.ts Normal file
View File

@@ -0,0 +1,45 @@
import { html, customElement, property, css } from '@umbraco-cms/backoffice/external/lit';
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
@customElement('umb-input-upload-field-svg')
export class UmbInputUploadFieldSvgElement extends UmbLitElement {
@property({ type: String })
path = '';
render() {
if (!this.path) return html`<uui-loader></uui-loader>`;
return html`<img src=${this.path} alt="svg" />`;
}
static styles = [
css`
:host {
display: flex;
background-color: #fff;
background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" fill-opacity=".1"><path d="M50 0h50v50H50zM0 50h50v50H0z"/></svg>');
background-repeat: repeat;
background-size: 10px 10px;
height: 100%;
min-height: 240px;
position: relative;
width: fit-content;
max-height: 240px;
}
img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
width: auto;
height: auto;
}
`,
];
}
declare global {
interface HTMLElementTagNameMap {
'umb-input-upload-field-svg': UmbInputUploadFieldSvgElement;
}
}

1
src/Umbraco.Web.UI.Client/src/packages/core/components/input-upload-field/input-upload-field-video.element.ts
View File

@@ -1,4 +1,3 @@
import { UMB_APP_CONTEXT } from '@umbraco-cms/backoffice/app';
import { html, customElement, property, css } from '@umbraco-cms/backoffice/external/lit';
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';

8
src/Umbraco.Web.UI.Client/src/packages/core/components/input-upload-field/input-upload-field.element.ts
View File

@@ -1,5 +1,6 @@
import type { TemporaryFileQueueItem } from '../../temporary-file/temporary-file-manager.class.js';
import { UmbTemporaryFileManager } from '../../temporary-file/temporary-file-manager.class.js';
import { UMB_PROPERTY_DATASET_CONTEXT } from '../../property/property-dataset/property-dataset-context.token.js';
import { UmbId } from '@umbraco-cms/backoffice/id';
import {
css,
@@ -19,7 +20,6 @@ import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
import './input-upload-field-file.element.js';
import { UmbChangeEvent } from '@umbraco-cms/backoffice/event';
import { UMB_APP_CONTEXT } from '@umbraco-cms/backoffice/app';
import { UMB_PROPERTY_DATASET_CONTEXT } from '../../property/property-dataset/property-dataset-context.token.js';
@customElement('umb-input-upload-field')
export class UmbInputUploadFieldElement extends FormControlMixin(UmbLitElement) {
@@ -208,6 +208,7 @@ export class UmbInputUploadFieldElement extends FormControlMixin(UmbLitElement)
}
#renderFiles() {
console.log('files', this._files);
return repeat(
this._files,
(path) => path,
@@ -248,19 +249,20 @@ export class UmbInputUploadFieldElement extends FormControlMixin(UmbLitElement)
// Extract the MIME type from the data URL
if (path.startsWith('data:')) {
const mimeType = path.substring(5, path.indexOf(';'));
if (mimeType === 'image/svg+xml') return 'svg';
if (mimeType.startsWith('image/')) return 'image';
if (mimeType.startsWith('audio/')) return 'audio';
if (mimeType.startsWith('video/')) return 'video';
if (mimeType === 'image/svg+xml') return 'svg';
}
// Extract the file extension from the path
const extension = path.split('.').pop()?.toLowerCase();
console.log('extension', extension, path);
if (!extension) return 'file';
if (['svg'].includes(extension)) return 'svg';
if (['mp3', 'weba', 'oga', 'opus'].includes(extension)) return 'audio';
if (['mp4', 'mov', 'webm', 'ogv'].includes(extension)) return 'video';
if (['jpg', 'jpeg', 'png', 'gif'].includes(extension)) return 'image';
if (['svg'].includes(extension)) return 'svg';
return 'file';
}