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

extension example

Browse Source
This commit is contained in:
Lone Iversen
2024-08-21 14:27:37 +02:00
committed by Jacob Overgaard
parent 906a0ff469
commit 7b9d530bf8
4 changed files with 123 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -0,0 +1,12 @@
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];

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

@@ -0,0 +1,48 @@
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;
}
}

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

@@ -1,5 +1,9 @@
import { manifest as schemaManifest } from './Umbraco.UploadField.js';
import type { ManifestPropertyEditorUi, ManifestTypes } from '@umbraco-cms/backoffice/extension-registry';
import type {
ManifestFileUploadPreview,
ManifestPropertyEditorUi,
ManifestTypes,
} from '@umbraco-cms/backoffice/extension-registry';
const manifest: ManifestPropertyEditorUi = {
type: 'propertyEditorUi',
@@ -14,4 +18,13 @@ const manifest: ManifestPropertyEditorUi = {
},
};
export const manifests: Array<ManifestTypes> = [manifest, schemaManifest];
/** 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];

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

@@ -0,0 +1,48 @@
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;
}
}