Skip to content

Commit e3dd44f

Browse files
madsrasmussenmadsrasmussen
committed
split media links into info app
1 parent 4a728d8 commit e3dd44f

File tree

5 files changed

+166
-102
lines changed

5 files changed

+166
-102
lines changed

‎src/Umbraco.Web.UI.Client/src/packages/media/media/reference/info-app/manifests.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ export const manifests: Array<UmbExtensionManifest> = [
77
name: 'Media References Workspace Info App',
88
alias: 'Umb.WorkspaceInfoApp.Media.References',
99
element: () => import('./media-references-workspace-info-app.element.js'),
10-
weight: 80,
10+
weight: 90,
1111
meta: {
1212
label: '#references_labelUsedByItems',
1313
},

‎src/Umbraco.Web.UI.Client/src/packages/media/media/url/info-app/manifests.ts

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import { UMB_MEDIA_WORKSPACE_ALIAS } from '../../workspace/constants.js';
2+
import { UMB_WORKSPACE_CONDITION_ALIAS } from '@umbraco-cms/backoffice/workspace';
3+
4+
export const manifests: Array<UmbExtensionManifest> = [
5+
{
6+
type: 'workspaceInfoApp',
7+
name: 'Media Links Workspace Info App',
8+
alias: 'Umb.WorkspaceInfoApp.Media.Links',
9+
element: () => import('./media-links-workspace-info-app.element.js'),
10+
weight: 100,
11+
meta: {
12+
label: '#general_links',
13+
},
14+
conditions: [
15+
{
16+
alias: UMB_WORKSPACE_CONDITION_ALIAS,
17+
match: UMB_MEDIA_WORKSPACE_ALIAS,
18+
},
19+
],
20+
},
21+
];

‎src/Umbraco.Web.UI.Client/src/packages/media/media/url/info-app/media-links-workspace-info-app.element.ts

Lines changed: 142 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,142 @@
1+
import { UMB_MEDIA_WORKSPACE_CONTEXT } from '../../workspace/constants.js';
2+
import type { MediaUrlInfoModel } from '@umbraco-cms/backoffice/external/backend-api';
3+
import { css, customElement, html, repeat, state } from '@umbraco-cms/backoffice/external/lit';
4+
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
5+
6+
@customElement('umb-document-links-workspace-info-app')
7+
export class UmbMediaLinksWorkspaceInfoAppElement extends UmbLitElement {
8+
@state()
9+
private _urls?: Array<MediaUrlInfoModel>;
10+
11+
#workspaceContext?: typeof UMB_MEDIA_WORKSPACE_CONTEXT.TYPE;
12+
13+
constructor() {
14+
super();
15+
16+
this.consumeContext(UMB_MEDIA_WORKSPACE_CONTEXT, (context) => {
17+
this.#workspaceContext = context;
18+
this.#observeUrls();
19+
});
20+
}
21+
22+
#observeUrls() {
23+
if (!this.#workspaceContext) return;
24+
25+
this.observe(
26+
this.#workspaceContext.urls,
27+
(urls) => {
28+
this._urls = urls;
29+
},
30+
'__urls',
31+
);
32+
}
33+
34+
protected override render() {
35+
return html` ${this.#renderLinksSection()} `;
36+
}
37+
38+
#openSvg(imagePath: string) {
39+
const popup = window.open('', '_blank');
40+
if (!popup) return;
41+
42+
const html = `<!doctype html>
43+
<body style="background-image: linear-gradient(45deg, #ccc 25%, transparent 25%), linear-gradient(135deg, #ccc 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ccc 75%), linear-gradient(135deg, transparent 75%, #ccc 75%); background-size:30px 30px; background-position:0 0, 15px 0, 15px -15px, 0px 15px;">
44+
<img src="${imagePath}"/>
45+
<script>history.pushState(null, null, "${window.location.href}");</script>
46+
</body>`;
47+
48+
popup.document.open();
49+
popup.document.write(html);
50+
popup.document.close();
51+
}
52+
53+
#renderLinksSection() {
54+
if (this._urls && this._urls.length) {
55+
return html`
56+
${repeat(
57+
this._urls,
58+
(item) => item.url,
59+
(item) => this.#renderLinkItem(item),
60+
)}
61+
`;
62+
} else {
63+
return html`
64+
<div class="link-item">
65+
<span class="link-content italic"><umb-localize key="content_noMediaLink"></umb-localize></span>
66+
</div>
67+
`;
68+
}
69+
}
70+
71+
#renderLinkItem(item: MediaUrlInfoModel) {
72+
const ext = item.url.split(/[#?]/)[0].split('.').pop()?.trim();
73+
if (ext === 'svg') {
74+
return html`
75+
<a href="#" target="_blank" class="link-item with-href" @click=${() => this.#openSvg(item.url)}>
76+
<span class="link-content">${item.url}</span>
77+
<uui-icon name="icon-out"></uui-icon>
78+
</a>
79+
`;
80+
} else {
81+
return html`
82+
<a href=${item.url} target="_blank" class="link-item with-href">
83+
<span class="link-content">${item.url}</span>
84+
<uui-icon name="icon-out"></uui-icon>
85+
</a>
86+
`;
87+
}
88+
}
89+
90+
static override styles = [
91+
css`
92+
uui-box {
93+
--uui-box-default-padding: 0;
94+
}
95+
96+
#link-section {
97+
display: flex;
98+
flex-direction: column;
99+
text-align: left;
100+
}
101+
102+
.link-item {
103+
padding: var(--uui-size-space-4) var(--uui-size-space-6);
104+
display: grid;
105+
grid-template-columns: 1fr auto;
106+
gap: var(--uui-size-6);
107+
color: inherit;
108+
text-decoration: none;
109+
word-break: break-all;
110+
}
111+
112+
.link-language {
113+
color: var(--uui-color-divider-emphasis);
114+
}
115+
116+
.link-content.italic {
117+
font-style: italic;
118+
}
119+
120+
.link-item uui-icon {
121+
margin-right: var(--uui-size-space-2);
122+
vertical-align: middle;
123+
}
124+
125+
.link-item.with-href {
126+
cursor: pointer;
127+
}
128+
129+
.link-item.with-href:hover {
130+
background: var(--uui-color-divider);
131+
}
132+
`,
133+
];
134+
}
135+
136+
export default UmbMediaLinksWorkspaceInfoAppElement;
137+
138+
declare global {
139+
interface HTMLElementTagNameMap {
140+
'umb-media-links-workspace-info-app': UmbMediaLinksWorkspaceInfoAppElement;
141+
}
142+
}

‎src/Umbraco.Web.UI.Client/src/packages/media/media/url/manifests.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
import { manifests as repositoryManifests } from './repository/manifests.js';
2+
import { manifests as infoAppManifests } from './info-app/manifests.js';
23

3-
export const manifests: Array<UmbExtensionManifest> = [...repositoryManifests];
4+
export const manifests: Array<UmbExtensionManifest> = [...repositoryManifests, ...infoAppManifests];

‎src/Umbraco.Web.UI.Client/src/packages/media/media/workspace/views/info/media-workspace-view-info.element.ts

Lines changed: 0 additions & 100 deletions
Original file line numberDiff line numberDiff line change
@@ -34,9 +34,6 @@ export class UmbMediaWorkspaceViewInfoElement extends UmbLitElement {
3434

3535
#mediaTypeItemRepository = new UmbMediaTypeItemRepository(this);
3636

37-
@state()
38-
private _urls?: Array<MediaUrlInfoModel>;
39-
4037
@state()
4138
private _createDate?: string | null = null;
4239

@@ -87,14 +84,6 @@ export class UmbMediaWorkspaceViewInfoElement extends UmbLitElement {
8784
#observeContent() {
8885
if (!this.#workspaceContext) return;
8986

90-
this.observe(
91-
this.#workspaceContext.urls,
92-
(urls) => {
93-
this._urls = urls;
94-
},
95-
'__urls',
96-
);
97-
9887
this.observe(
9988
this.#workspaceContext.unique,
10089
(unique) => {
@@ -109,20 +98,6 @@ export class UmbMediaWorkspaceViewInfoElement extends UmbLitElement {
10998
this._updateDate = variants?.[0]?.updateDate;
11099
});
111100
}
112-
#openSvg(imagePath: string) {
113-
const popup = window.open('', '_blank');
114-
if (!popup) return;
115-
116-
const html = `<!doctype html>
117-
<body style="background-image: linear-gradient(45deg, #ccc 25%, transparent 25%), linear-gradient(135deg, #ccc 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ccc 75%), linear-gradient(135deg, transparent 75%, #ccc 75%); background-size:30px 30px; background-position:0 0, 15px 0, 15px -15px, 0px 15px;">
118-
<img src="${imagePath}"/>
119-
<script>history.pushState(null, null, "${window.location.href}");</script>
120-
</body>`;
121-
122-
popup.document.open();
123-
popup.document.write(html);
124-
popup.document.close();
125-
}
126101

127102
override render() {
128103
return html`
@@ -140,43 +115,6 @@ export class UmbMediaWorkspaceViewInfoElement extends UmbLitElement {
140115
`;
141116
}
142117

143-
#renderLinksSection() {
144-
if (this._urls && this._urls.length) {
145-
return html`
146-
${repeat(
147-
this._urls,
148-
(item) => item.url,
149-
(item) => this.#renderLinkItem(item),
150-
)}
151-
`;
152-
} else {
153-
return html`
154-
<div class="link-item">
155-
<span class="link-content italic"><umb-localize key="content_noMediaLink"></umb-localize></span>
156-
</div>
157-
`;
158-
}
159-
}
160-
161-
#renderLinkItem(item: MediaUrlInfoModel) {
162-
const ext = item.url.split(/[#?]/)[0].split('.').pop()?.trim();
163-
if (ext === 'svg') {
164-
return html`
165-
<a href="#" target="_blank" class="link-item with-href" @click=${() => this.#openSvg(item.url)}>
166-
<span class="link-content">${item.url}</span>
167-
<uui-icon name="icon-out"></uui-icon>
168-
</a>
169-
`;
170-
} else {
171-
return html`
172-
<a href=${item.url} target="_blank" class="link-item with-href">
173-
<span class="link-content">${item.url}</span>
174-
<uui-icon name="icon-out"></uui-icon>
175-
</a>
176-
`;
177-
}
178-
}
179-
180118
#renderInfoApp(initializer: UmbExtensionElementInitializer<ManifestWorkspaceInfoApp>) {
181119
const headline = initializer.manifest?.meta.label;
182120
return html`
@@ -267,44 +205,6 @@ export class UmbMediaWorkspaceViewInfoElement extends UmbLitElement {
267205
margin-bottom: var(--uui-size-space-6);
268206
}
269207
270-
// Link section
271-
272-
#link-section {
273-
display: flex;
274-
flex-direction: column;
275-
text-align: left;
276-
}
277-
278-
.link-item {
279-
padding: var(--uui-size-space-4) var(--uui-size-space-6);
280-
display: grid;
281-
grid-template-columns: 1fr auto;
282-
gap: var(--uui-size-6);
283-
color: inherit;
284-
text-decoration: none;
285-
}
286-
287-
.link-language {
288-
color: var(--uui-color-divider-emphasis);
289-
}
290-
291-
.link-content.italic {
292-
font-style: italic;
293-
}
294-
295-
.link-item uui-icon {
296-
margin-right: var(--uui-size-space-2);
297-
vertical-align: middle;
298-
}
299-
300-
.link-item.with-href {
301-
cursor: pointer;
302-
}
303-
304-
.link-item.with-href:hover {
305-
background: var(--uui-color-divider);
306-
}
307-
308208
uui-ref-node-document-type[readonly] {
309209
padding-top: 7px;
310210
padding-bottom: 7px;

0 commit comments

Comments
 (0)