Skip to content

Commit cece75b

Browse files
AaronSadlerUKAaronSadlerUK
authored
Merge pull request #18 from AaronSadlerUK/Modal-Tweaks
Modal tweaks
2 parents 18eb0fb + c09dcc8 commit cece75b

15 files changed

+463
-218
lines changed

‎UmbNav.Web/App_Plugins/UmbNav/src/manifest.ts‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,18 @@ const umbNavPropertyEditorUiManifest = {
4040
"label": "Allow Member Visibility",
4141
"description": "Allow the ability to hide menu items based on member authentication status",
4242
"propertyEditorUiAlias": "Umb.PropertyEditorUi.Toggle"
43+
},
44+
{
45+
"alias": "hideNoopener",
46+
"label": "Hide noopener Toggle",
47+
"description": "Hide the ability to toggle noopener",
48+
"propertyEditorUiAlias": "Umb.PropertyEditorUi.Toggle"
49+
},
50+
{
51+
"alias": "hideNoreferrer",
52+
"label": "Hide noreferrer Toggle",
53+
"description": "Hide the ability to toggle noreferrer",
54+
"propertyEditorUiAlias": "Umb.PropertyEditorUi.Toggle"
4355
}
4456
],
4557
"defaultData": [
@@ -62,6 +74,14 @@ const umbNavPropertyEditorUiManifest = {
6274
{
6375
"alias": "allowDisplay",
6476
"value": false
77+
},
78+
{
79+
"alias": "hideNoopener",
80+
"value": false
81+
},
82+
{
83+
"alias": "hideNoreferrer",
84+
"value": false
6585
}
6686
]
6787
}

‎UmbNav.Web/App_Plugins/UmbNav/src/modals/customcssclasses-item-modal-element.ts‎

Lines changed: 0 additions & 94 deletions
This file was deleted.

‎UmbNav.Web/App_Plugins/UmbNav/src/modals/customcssclasses-item-modal-token.ts‎

Lines changed: 0 additions & 22 deletions
This file was deleted.

‎UmbNav.Web/App_Plugins/UmbNav/src/modals/manifest.ts‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -6,14 +6,6 @@ const textItemModalManifest = {
66
elementName: "umbnav-text-item-modal"
77
};
88

9-
const cssCustomClassesItemModalManifest = {
10-
type: 'modal',
11-
alias: 'umbnav.customcssclasses.item.modal',
12-
name: 'UmbNav (Custom CSS Classes Item Modal)',
13-
element: () => import('./customcssclasses-item-modal-element.ts'),
14-
elementName: "umbnav-customcssclasses-item-modal"
15-
};
16-
179
const visibilityModalManifest = {
1810
type: 'modal',
1911
alias: 'umbnav.visibility.item.modal',
@@ -22,4 +14,12 @@ const visibilityModalManifest = {
2214
elementName: "umbnav-visibility-item-modal"
2315
};
2416

25-
export const manifests = [textItemModalManifest, cssCustomClassesItemModalManifest, visibilityModalManifest];
17+
const settingsModalManifest = {
18+
type: 'modal',
19+
alias: 'umbnav.settings.item.modal',
20+
name: 'UmbNav (Settings Item Modal)',
21+
element: () => import('./settings-item-modal-element.ts'),
22+
elementName: "umbnav-settings-item-modal"
23+
};
24+
25+
export const manifests = [textItemModalManifest, visibilityModalManifest, settingsModalManifest];

‎UmbNav.Web/App_Plugins/UmbNav/src/modals/settings-item-modal-element.ts‎

Lines changed: 206 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,206 @@
1+
import {css, customElement, html, state, when} from '@umbraco-cms/backoffice/external/lit';
2+
import { UmbModalBaseElement } from '@umbraco-cms/backoffice/modal';
3+
import {type UUIBooleanInputEvent, UUIInputEvent} from "@umbraco-cms/backoffice/external/uui";
4+
import {UmbTextStyles} from '@umbraco-cms/backoffice/style';
5+
import type { UUIButtonState } from '@umbraco-cms/backoffice/external/uui';
6+
import {UmbNavSettingsItem, UmbNavSettingsItemModalData} from "./settings-item-modal-token.ts";
7+
8+
@customElement('umbnav-settings-item-modal')
9+
export class UmbNavModalElement extends
10+
UmbModalBaseElement<UmbNavSettingsItemModalData, UmbNavSettingsItem>
11+
{
12+
constructor() {
13+
super();
14+
}
15+
16+
connectedCallback(): void {
17+
super.connectedCallback();
18+
this.updateValue({customCssClasses: this.data?.customCssClasses});
19+
}
20+
21+
@state()
22+
public get enableCustomCssClasses(): Boolean {
23+
return <Boolean>this.data?.config.find(item => item.alias === 'allowCustomClasses')?.value ?? false;
24+
}
25+
26+
@state()
27+
public get hideNoOpenerToggle(): Boolean {
28+
return <Boolean>this.data?.config.find(item => item.alias === 'hideNoopener')?.value ?? false;
29+
}
30+
31+
@state()
32+
public get hideNoReferrerToggle(): Boolean {
33+
return <Boolean>this.data?.config.find(item => item.alias === 'hideNoreferrer')?.value ?? false;
34+
}
35+
36+
@state()
37+
customCssClasses: string = '';
38+
39+
@state()
40+
noReferrer: string = '';
41+
42+
@state()
43+
noOpener: string = '';
44+
45+
@state()
46+
private _submitButtonState: UUIButtonState;
47+
48+
#handleConfirm() {
49+
this._submitButtonState = 'waiting';
50+
51+
this.value = {
52+
customCssClasses: this.value?.customCssClasses ?? '',
53+
noReferrer: this.value?.noReferrer ?? '',
54+
noOpener: this.value?.noOpener ?? ''}
55+
;
56+
this.modalContext?.submit();
57+
}
58+
59+
#handleCancel() {
60+
this.modalContext?.reject();
61+
}
62+
63+
#contentChange(event: UUIInputEvent) {
64+
this.updateValue({customCssClasses: event.target.value.toString()});
65+
}
66+
67+
#handleNoReferrerToggle(event: UUIBooleanInputEvent) {
68+
69+
if (event.target.checked) {
70+
this.updateValue({noReferrer: 'noreferrer'});
71+
this.noReferrer = 'noreferrer';
72+
}else{
73+
this.updateValue({noReferrer: ''});
74+
this.noReferrer = '';
75+
}
76+
}
77+
78+
#handleNoOpenerToggle(event: UUIBooleanInputEvent) {
79+
80+
if (event.target.checked) {
81+
this.updateValue({noOpener: 'noopener'});
82+
this.noOpener = 'noopener';
83+
}else{
84+
this.updateValue({noOpener: ''});
85+
this.noOpener = '';
86+
}
87+
}
88+
89+
override render() {
90+
return html`
91+
<umb-body-layout headline=${this.data?.headline}>
92+
<uui-box>
93+
${when(
94+
this.enableCustomCssClasses,
95+
() => html`${this.#renderCustomCssClassesInput()}`,
96+
)}
97+
98+
${when(
99+
!this.hideNoOpenerToggle || !this.hideNoReferrerToggle,
100+
() => html`${this.#renderSEOToggles()}`,
101+
)}
102+
</uui-box>
103+
<div slot="actions">
104+
<uui-button label=${this.localize.term('general_close')} @click=${this.#handleCancel}></uui-button>
105+
<uui-button
106+
color="positive"
107+
look="primary"
108+
label=${this.localize.term('general_submit')}
109+
.state=${this._submitButtonState}
110+
@click=${this.#handleConfirm}></uui-button>
111+
</div>
112+
</umb-body-layout>
113+
`;
114+
}
115+
116+
#renderCustomCssClassesInput() {
117+
return html`
118+
<umb-property-layout orientation="vertical">
119+
<div class="side-by-side" slot="editor">
120+
<umb-property-layout
121+
orientation="vertical"
122+
label="Custom CSS Classes"
123+
style="padding:0;">
124+
<uui-input
125+
slot="editor"
126+
label="Custom CSS Classes"
127+
.value=${this.data?.customCssClasses}
128+
@input=${this.#contentChange} />
129+
</uui-input>
130+
</umb-property-layout>
131+
</div>
132+
</umb-property-layout>
133+
`;
134+
}
135+
136+
#renderSEOToggles() {
137+
return html`
138+
<umb-property-layout orientation="vertical">
139+
<div class="side-by-side" slot="editor">
140+
<umb-property-layout
141+
orientation="vertical"
142+
label='SEO'
143+
style="padding:0;"
144+
class="seo-toggles">
145+
${when(
146+
!this.hideNoReferrerToggle,
147+
() => html`
148+
<uui-toggle label='Add "noreferrer" to link'
149+
slot="editor"
150+
?checked="${this.data?.noReferrer === 'noreferrer'}"
151+
@change=${this.#handleNoReferrerToggle}></uui-toggle>`,
152+
)}
153+
154+
${when(
155+
!this.hideNoOpenerToggle,
156+
() => html`
157+
<uui-toggle label='Add "noopener" to link'
158+
slot="editor"
159+
?checked="${this.data?.noOpener === 'noopener'}"
160+
@change=${this.#handleNoOpenerToggle}></uui-toggle>`,
161+
)}
162+
</umb-property-layout>
163+
</div>
164+
</umb-property-layout>
165+
`;
166+
}
167+
168+
static override styles = [
169+
UmbTextStyles,
170+
css`
171+
uui-box {
172+
--uui-box-default-padding: 0 var(--uui-size-space-5);
173+
}
174+
175+
uui-button-group {
176+
width: 100%;
177+
}
178+
179+
uui-input {
180+
width: 100%;
181+
}
182+
183+
.side-by-side {
184+
display: flex;
185+
flex-wrap: wrap;
186+
gap: var(--uui-size-space-5);
187+
188+
umb-property-layout {
189+
flex: 1 1 0px;
190+
}
191+
}
192+
193+
.invalid {
194+
color: var(--uui-color-danger);
195+
}
196+
197+
.seo-toggles uui-toggle:not(:last-child) {
198+
display: block;
199+
margin-bottom: var(--uui-size-space-5);
200+
}
201+
`,
202+
];
203+
204+
}
205+
206+
export default UmbNavModalElement;

0 commit comments

Comments
 (0)