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

setup extensions of preexisting ones

Browse Source
This commit is contained in:
Lone Iversen
2024-08-23 11:25:17 +02:00
committed by Jacob Overgaard
parent a05527961c
commit 8eeeb3fa29
13 changed files with 56 additions and 133 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,6 +1,2 @@
export * from './preview/index.js';
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';
export * from './input-upload-field-image.element.js';

13
src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-upload-field/manifests.ts
View File

@@ -1,12 +1 @@
import type { ManifestFileUploadPreview } from '@umbraco-cms/backoffice/extension-registry';
const previews: Array<ManifestFileUploadPreview> = [
{
type: 'fileUploadPreview',
alias: 'My PDF Showcase',
name: 'PDF Showcase',
forMimeTypes: ['application/pdf'],
},
];
console.log('export..');
export const manifests = [...previews];
export * from './preview/manifest.js';

5
src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-upload-field/preview/index.ts Normal file
View File

@@ -0,0 +1,5 @@
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';
export * from './input-upload-field-image.element.js';

2
src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-upload-field/input-upload-field-audio.element.ts → src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-upload-field/preview/input-upload-field-audio.element.ts
View File

@@ -2,7 +2,7 @@ import { html, customElement, property, css } from '@umbraco-cms/backoffice/exte
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
@customElement('umb-input-upload-field-audio')
export class UmbInputUploadFieldAudioElement extends UmbLitElement {
export default class UmbInputUploadFieldAudioElement extends UmbLitElement {
@property({ type: String })
path = '';

2
src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-upload-field/input-upload-field-file.element.ts → src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-upload-field/preview/input-upload-field-file.element.ts
View File

@@ -4,7 +4,7 @@ import { html, customElement, property, state, css } from '@umbraco-cms/backoffi
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
@customElement('umb-input-upload-field-file')
export class UmbInputUploadFieldFileElement extends UmbLitElement {
export default class UmbInputUploadFieldFileElement extends UmbLitElement {
@property({ type: String })
path: string = '';

2
src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-upload-field/input-upload-field-image.element.ts → src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-upload-field/preview/input-upload-field-image.element.ts
View File

@@ -2,7 +2,7 @@ import { html, customElement, property, css } from '@umbraco-cms/backoffice/exte
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
@customElement('umb-input-upload-field-image')
export class UmbInputUploadFieldImageElement extends UmbLitElement {
export default class UmbInputUploadFieldImageElement extends UmbLitElement {
@property({ type: String })
path = '';

2
src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-upload-field/input-upload-field-svg.element.ts → src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-upload-field/preview/input-upload-field-svg.element.ts
View File

@@ -2,7 +2,7 @@ import { html, customElement, property, css } from '@umbraco-cms/backoffice/exte
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
@customElement('umb-input-upload-field-svg')
export class UmbInputUploadFieldSvgElement extends UmbLitElement {
export default class UmbInputUploadFieldSvgElement extends UmbLitElement {
@property({ type: String })
path = '';

2
src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-upload-field/input-upload-field-video.element.ts → src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-upload-field/preview/input-upload-field-video.element.ts
View File

@@ -2,7 +2,7 @@ import { html, customElement, property, css } from '@umbraco-cms/backoffice/exte
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
@customElement('umb-input-upload-field-video')
export class UmbInputUploadFieldVideoElement extends UmbLitElement {
export default class UmbInputUploadFieldVideoElement extends UmbLitElement {
@property({ type: String })
path = '';

40
src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-upload-field/preview/manifest.ts Normal file
View File

@@ -0,0 +1,40 @@
import type { ManifestFileUploadPreview, ManifestTypes } from '@umbraco-cms/backoffice/extension-registry';
const previews: Array<ManifestFileUploadPreview> = [
{
type: 'fileUploadPreview',
alias: 'Umb.FileUploadPreview.Audio',
name: 'Audio File Upload Preview',
element: () => import('./input-upload-field-audio.element.js'),
forMimeTypes: ['audio/*'],
},
{
type: 'fileUploadPreview',
alias: 'Umb.FileUploadPreview.File',
name: 'File File Upload Preview',
element: () => import('./input-upload-field-file.element.js'),
},
{
type: 'fileUploadPreview',
alias: 'Umb.FileUploadPreview.Image',
name: 'Image File Upload Preview',
element: () => import('./input-upload-field-image.element.js'),
forMimeTypes: ['image/*'],
},
{
type: 'fileUploadPreview',
alias: 'Umb.FileUploadPreview.Svg',
name: 'Svg File Upload Preview',
element: () => import('./input-upload-field-svg.element.js'),
forMimeTypes: ['image/svg+xml'],
},
{
type: 'fileUploadPreview',
alias: 'Umb.FileUploadPreview.Video',
name: 'Video File Upload Preview',
element: () => import('./input-upload-field-video.element.js'),
forMimeTypes: ['video/*'],
},
];
export const manifests: Array<ManifestTypes> = [...previews];

48
src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-upload-field/test.element.ts
View File

@@ -1,48 +0,0 @@
import { html, customElement, property, css } from '@umbraco-cms/backoffice/external/lit';
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
@customElement('umb-pdf-preview')
export class UmbPDFPreviewElement extends UmbLitElement {
@property({ attribute: false })
file?: File;
@property({ type: String })
path?: string;
override render() {
if (!this.path) return html`<uui-loader></uui-loader>`;
return html`This is the path: ${this.path} & the file is named ${this.file?.name}`;
}
static override 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-pdf-preview': UmbPDFPreviewElement;
}
}

2
src/Umbraco.Web.UI.Client/src/packages/media/media/manifests.ts
View File

@@ -11,6 +11,7 @@ import { manifests as searchManifests } from './search/manifests.js';
import { manifests as sectionViewManifests } from './section-view/manifests.js';
import { manifests as treeManifests } from './tree/manifests.js';
import { manifests as workspaceManifests } from './workspace/manifests.js';
import { manifests as fileUploadPreviewManifests } from './components/input-upload-field/manifests.js';
import type { ManifestTypes } from '@umbraco-cms/backoffice/extension-registry';
export const manifests: Array<ManifestTypes> = [
@@ -27,4 +28,5 @@ export const manifests: Array<ManifestTypes> = [
...sectionViewManifests,
...treeManifests,
...workspaceManifests,
...fileUploadPreviewManifests,
];

17
src/Umbraco.Web.UI.Client/src/packages/media/media/property-editors/upload-field/manifests.ts
View File

@@ -1,9 +1,5 @@
import { manifest as schemaManifest } from './Umbraco.UploadField.js';
import type {
ManifestFileUploadPreview,
ManifestPropertyEditorUi,
ManifestTypes,
} from '@umbraco-cms/backoffice/extension-registry';
import type { ManifestPropertyEditorUi, ManifestTypes } from '@umbraco-cms/backoffice/extension-registry';
const manifest: ManifestPropertyEditorUi = {
type: 'propertyEditorUi',
@@ -18,13 +14,4 @@ const manifest: ManifestPropertyEditorUi = {
},
};
/** Testing */
const previews: ManifestFileUploadPreview = {
type: 'fileUploadPreview',
alias: 'My PDF Showcase',
name: 'PDF Showcase',
element: () => import('./test.element.js'),
forMimeTypes: ['application/pdf'],
};
export const manifests: Array<ManifestTypes> = [manifest, schemaManifest, previews];
export const manifests: Array<ManifestTypes> = [manifest, schemaManifest];

48
src/Umbraco.Web.UI.Client/src/packages/media/media/property-editors/upload-field/test.element.ts
View File

@@ -1,48 +0,0 @@
import { html, customElement, property, css } from '@umbraco-cms/backoffice/external/lit';
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
@customElement('umb-pdf-preview')
export default class UmbPDFPreviewElement extends UmbLitElement {
@property({ attribute: false })
file?: File;
@property({ type: String })
path?: string;
override render() {
if (!this.path) return html`<uui-loader></uui-loader>`;
return html`This is the path: ${this.path} & the file is named ${this.file?.name}`;
}
static override 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-pdf-preview': UmbPDFPreviewElement;
}
}