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

redo of template section picker part 1

Browse Source
This commit is contained in:
Lone Iversen
2024-02-16 16:39:12 +01:00
parent 4d67cfc870
commit c3f61e9efc
5 changed files with 144 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/Umbraco.Web.UI.Client/src/packages/templating/components/templating-item-menu/templating-item-menu.element.ts
View File

@@ -9,7 +9,7 @@ import { getInsertDictionarySnippet, getInsertPartialSnippet } from '../../utils
import { UmbDictionaryDetailRepository } from '@umbraco-cms/backoffice/dictionary';
import { customElement, property, css, html } from '@umbraco-cms/backoffice/external/lit';
import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
import type { UmbModalManagerContext, UmbModalContext } from '@umbraco-cms/backoffice/modal';
import type { UmbModalManagerContext } from '@umbraco-cms/backoffice/modal';
import { UMB_DICTIONARY_ITEM_PICKER_MODAL, UMB_MODAL_MANAGER_CONTEXT } from '@umbraco-cms/backoffice/modal';
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
@@ -20,8 +20,6 @@ export class UmbTemplatingInsertMenuElement extends UmbLitElement {
private _modalContext?: UmbModalManagerContext;
#openModal?: UmbModalContext;
#dictionaryDetailRepository = new UmbDictionaryDetailRepository(this);
constructor() {

21
src/Umbraco.Web.UI.Client/src/packages/templating/modals/templating-page-field-builder/templating-page-field-builder-modal.element.ts
View File

@@ -1,3 +1,4 @@
import { getUmbracoFieldSnippet } from '../../utils/index.js';
import type {
UmbTemplatingPageFieldBuilderModalData,
UmbTemplatingPageFieldBuilderModalValue,
@@ -16,7 +17,8 @@ export class UmbTemplatingPageFieldBuilderModalElement extends UmbModalBaseEleme
}
private _submit() {
this.value = { output: this.#generateOutput() };
if (!this._field) return;
this.value = { output: getUmbracoFieldSnippet(this._field, this._default, this._recursive) };
this.modalContext?.submit();
}
@@ -32,19 +34,6 @@ export class UmbTemplatingPageFieldBuilderModalElement extends UmbModalBaseEleme
@state()
private _recursive: boolean = false;
#generateOutput() {
if (!this._field) return '';
if (this._default && !this._recursive) {
return `@Model.Value("${this._field}", fallback: Fallback.ToDefaultValue, defaultValue: new HtmlString("${this._default}"))`;
} else if (this._default && this._recursive) {
return `@Model.Value("${this._field}", fallback: Fallback.To(Fallback.Ancestors, Fallback.DefaultValue), defaultValue: new HtmlString("${this._default}"))`;
} else if (!this._default && this._recursive) {
return `@Model.Value("${this._field}", fallback: Fallback.ToAncestors)`;
} else {
return `@Model.Value("${this._field}")`;
}
}
render() {
return html`
<umb-body-layout headline=${this.localize.term('template_insert')}>
@@ -74,7 +63,9 @@ export class UmbTemplatingPageFieldBuilderModalElement extends UmbModalBaseEleme
?disabled=${this._field ? false : true}></uui-checkbox>
<uui-label><umb-localize key="templateEditor_outputSample">Output sample</umb-localize></uui-label>
<umb-code-block language="C#" copy>${this.#generateOutput()}</umb-code-block>
<umb-code-block language="C#" copy
>${this._field ? getUmbracoFieldSnippet(this._field, this._default, this._recursive) : ''}</umb-code-block
>
</div>
</uui-box>
<uui-button

132
src/Umbraco.Web.UI.Client/src/packages/templating/modals/templating-section-picker/templating-section-picker-modal.element.ts
View File

@@ -1,4 +1,5 @@
import { getAddSectionSnippet, getRenderBodySnippet, getRenderSectionSnippet } from '../../utils/index.js';
import { TemplatingSectionType } from '../../types.js';
import type {
UmbTemplatingSectionPickerModalData,
UmbTemplatingSectionPickerModalValue,
@@ -14,6 +15,7 @@ export class UmbTemplatingSectionPickerModalElement extends UmbModalBaseElement<
UmbTemplatingSectionPickerModalData,
UmbTemplatingSectionPickerModalValue
> {
/*
@queryAll('umb-insert-section-checkbox')
checkboxes!: NodeListOf<UmbInsertSectionCheckboxElement>;
@@ -22,7 +24,8 @@ export class UmbTemplatingSectionPickerModalElement extends UmbModalBaseElement<
@state()
snippet = '';
*/
/*
#chooseSection(event: Event) {
const target = event.target as UmbInsertSectionCheckboxElement;
const checkboxes = Array.from(this.checkboxes);
@@ -40,30 +43,129 @@ export class UmbTemplatingSectionPickerModalElement extends UmbModalBaseElement<
});
}
}
*/
/*
firstUpdated() {
this.selectedCheckbox = this.checkboxes[0];
}
*/
snippetMethods = [getRenderBodySnippet, getRenderSectionSnippet, getAddSectionSnippet];
//snippetMethods = [getRenderBodySnippet, getRenderSectionSnippet, getAddSectionSnippet];
@state()
private _pickedSection?: TemplatingSectionType;
#close() {
this.modalContext?.reject();
}
#submit() {
/*
const value = this.selectedCheckbox?.snippet;
if (this.selectedCheckbox?.validate()) {
this.value = { value: value ?? '' };
this.modalContext?.submit();
}
*/
}
render() {
return html`
<umb-body-layout headline=${this.localize.term('template_insert')}>
<uui-box>
<div id="main">
${this.#renderRenderChildTemplate()} ${this.#renderRenderANamedSection()}
${this.#renderDefineANamedSection()}
</div>
</uui-box>
<div slot="actions">
<uui-button @click=${this.#close} look="secondary" label="Close">Close</uui-button>
<uui-button @click=${this.#submit} look="primary" color="positive" label="Submit">Submit</uui-button>
</div>
</umb-body-layout>
`;
}
#renderRenderChildTemplate() {
return html`<uui-button
label=${this.localize.term('template_renderBody')}
@click=${() => (this._pickedSection = TemplatingSectionType.renderChildTemplate)}
look="placeholder">
${this._pickedSection === TemplatingSectionType.renderChildTemplate
? html`<uui-badge color="positive"><uui-icon name="icon-check"></uui-icon></uui-badge>`
: ''}
<h3><umb-localize key="template_renderBody">Render Child Template</umb-localize></h3>
<p>
<umb-localize key="template_renderBodyDesc">
Renders the contents of a child template, by inserting a <code>@RenderBody()</code> placeholder.
</umb-localize>
</p>
</uui-button>`;
}
#renderRenderANamedSection() {
return html`<uui-button
label=${this.localize.term('template_renderSection')}
@click=${() => (this._pickedSection = TemplatingSectionType.renderANamedSection)}
look="placeholder">
${this._pickedSection === TemplatingSectionType.renderANamedSection
? html`<uui-badge color="positive"><uui-icon name="icon-check"></uui-icon></uui-badge>`
: ''}
<h3><umb-localize key="template_renderSection">Render a named section</umb-localize></h3>
<p>
<umb-localize key="template_renderSectionDesc">
Renders a named area of a child template, by inserting a
<code>@RenderSection(name)</code> placeholder. This renders an area of a child template which is wrapped in a
corresponding <code>@section [name]{ ... }</code> definition.
</umb-localize>
</p>
${this._pickedSection === TemplatingSectionType.renderANamedSection
? html`<div class="section">
<uui-label for="section-name" required>Section Name</uui-label>
<uui-input id="section-name" label="section name"></uui-input>
<uui-checkbox label=${this.localize.term('template_sectionMandatory')}></uui-checkbox>
<small>
<umb-localize key="template_sectionMandatoryDesc">
If mandatory, the child template must contain a <code>@section</code> definition, otherwise an error is
shown.
</umb-localize>
</small>
</div>`
: ''}
</uui-button>`;
}
#renderDefineANamedSection() {
return html`<uui-button
label=${this.localize.term('template_defineSection')}
@click=${() => (this._pickedSection = TemplatingSectionType.defineANamedSection)}
look="placeholder">
${this._pickedSection === TemplatingSectionType.defineANamedSection
? html`<uui-badge color="positive"><uui-icon name="icon-check"></uui-icon></uui-badge>`
: ''}
<h3><umb-localize key="template_defineSection">Define a named section</umb-localize></h3>
<p>
<umb-localize key="template_defineSectionDesc">
Defines a part of your template as a named section by wrapping it in <code>@section { ... }</code>. This can
be rendered in a specific area of the parent of this template, by using <code>@RenderSection</code>.
</umb-localize>
</p>
</uui-button>`;
}
/*
render() {
return html`
<umb-body-layout headline=${this.localize.term('template_insert')}>
<div id="main">
<uui-box>
<uui-button label="Render Child Template">
<uui-badge color="positive"><uui-icon name="icon-check"></uui-icon></uui-badge>
<h3>Render Child Template</h3>
Renders the contents of a child template, by inserting a @RenderBody() placeholder.
</uui-button>
<umb-insert-section-checkbox
@change=${this.#chooseSection}
label=${this.localize.term('template_renderBody')}
@@ -113,10 +215,12 @@ export class UmbTemplatingSectionPickerModalElement extends UmbModalBaseElement<
</umb-body-layout>
`;
}
*/
static styles = [
UmbTextStyles,
css`
/*
:host {
display: block;
color: var(--uui-color-text);
@@ -133,11 +237,35 @@ export class UmbTemplatingSectionPickerModalElement extends UmbModalBaseElement<
#main umb-insert-section-checkbox:not(:last-of-type) {
margin-bottom: var(--uui-size-space-5);
}
*/
code {
background-color: var(--uui-color-surface-alt);
border: 1px solid var(--uui-color-border);
border-radius: var(--uui-border-radius);
}
#main {
display: grid;
grid-gap: var(--uui-size-space-5);
}
.section {
display: grid;
}
uui-button {
text-align: left;
}
uui-button p {
margin-top: 0;
}
uui-input,
small {
margin-block: var(--uui-size-space-2) var(--uui-size-space-6);
}
`,
];
}

6
src/Umbraco.Web.UI.Client/src/packages/templating/types.ts
View File

@@ -3,3 +3,9 @@ export enum CodeSnippetType {
dictionaryItem = 'dictionaryItem',
pageField = 'pageField',
}
export enum TemplatingSectionType {
renderChildTemplate = 'RenderChildTemplate',
renderANamedSection = 'RenderANamedSection',
defineANamedSection = 'DefineANamedSection',
}

2
src/Umbraco.Web.UI.Client/src/packages/templating/utils/index.ts
View File

@@ -45,7 +45,7 @@ export const getUmbracoFieldSnippet = (field: string, defaultValue: string | nul
const value = `${field !== null ? `@Model.Value("${field}"` : ''}${
fallback !== null ? `, fallback: ${fallback}` : ''
}${defaultValue !== null ? `, defaultValue: new HtmlString("${defaultValue}")` : ''}${field ? ')' : ''}`;
}${defaultValue !== null ? `, defaultValue: new HtmlString("${defaultValue}")` : ''}${field ? ')' : ')'}`;
return value;
};