Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

MWPW-161354: filter unused fields in the editor #123

Open
wants to merge 1 commit into
base: MWPW-163845
Choose a base branch
from
+136 −84
Open

MWPW-161354: filter unused fields in the editor #123

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
219 changes: 136 additions & 83 deletions studio/src/editors/merch-card-editor.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,12 +12,15 @@ import { Fragment } from '../aem/fragment.js';

const MODEL_PATH = '/conf/mas/settings/dam/cfm/models/card';

const merchCardCustomElementPromise = customElements.whenDefined('merch-card');

class MerchCardEditor extends LitElement {
static properties = {
refreshing: { state: true, attribute: true },
disabled: { state: true, attribute: true },
hasChanges: { state: true, attribute: true },
loading: { state: true, attribute: true },
superWide: { type: Boolean, state: true },
};

createRenderRoot() {
Expand All @@ -30,6 +33,7 @@ class MerchCardEditor extends LitElement {
this.refreshing = false;
this.hasChanges = false;
this.loading = false;
this.superWide = false;
this.handleKeyDown = this.handleKeyDown.bind(this);
this.close = this.close.bind(this);
this.discardChanges = this.discardChanges.bind(this);
Expand Down Expand Up @@ -167,6 +171,28 @@ class MerchCardEditor extends LitElement {
);
}

updated() {
this.toggleFields();
}

async toggleFields() {
if (!this.fragment) return;
const merchCardCustomElement = await merchCardCustomElementPromise;
if (!merchCardCustomElement) return;
this.querySelectorAll('sp-field-group.toggle').forEach((field) => {
field.style.display = 'none';
});
const variant = merchCardCustomElement.getFragmentMapping(
this.fragment.variant,
);
if (!variant) return;
Object.keys(variant).forEach((key) => {
const field = this.querySelector(`sp-field-group.toggle#${key}`);
if (field) field.style.display = 'block';
});
this.superWide = variant.size?.includes('super-wide');
}

render() {
if (this.loading)
return html`<div id="editor">
Expand All @@ -184,85 +210,107 @@ class MerchCardEditor extends LitElement {
return html`<div id="editor">
${this.toolbar}
<p>${this.fragment.path}</p>
<sp-field-label for="card-variant">Variant</sp-field-label>
<variant-picker
id="card-variant"
?show-all="false"
data-field="variant"
default-value="${form.variant.values[0]}"
@input="${this.#updateFragment}"
@change="${this.#updateFragment}"
?disabled=${this.disabled}
></variant-picker>
<sp-field-label for="card-title">Title</sp-field-label>
<sp-textfield
placeholder="Enter card title"
id="card-title"
data-field="cardTitle"
value="${form.cardTitle.values[0]}"
@input="${this.#updateFragment}"
?disabled=${this.disabled}
></sp-textfield>
<sp-field-label for="card-subtitle">Subtitle</sp-field-label>
<sp-textfield
placeholder="Enter card subtitle"
id="card-subtitle"
data-field="subtitle"
value="${form.subtitle.values[0]}"
@input="${this.#updateFragment}"
?disabled=${this.disabled}
></sp-textfield>
<sp-field-label for="card-size">Size</sp-field-label>
<sp-textfield
placeholder="Enter card size"
id="card-size"
data-field="size"
value="${form.size.values[0]}"
@input="${this.#updateFragment}"
?disabled=${this.disabled}
></sp-textfield>
<sp-field-label for="card-icon">Badge</sp-field-label>
<sp-textfield
placeholder="Enter badge text"
id="card-badge"
data-field="badge"
value="${form.badge.values[0]}"
@input="${this.#updateFragment}"
?disabled=${this.disabled}
></sp-textfield>
<sp-field-label for="mnemonic">Mnemonics</sp-field-label>
<mas-multifield
id="mnemonic"
.value="${this.mnemonics}"
@change="${this.#updateMnemonics}"
@input="${this.#updateMnemonics}"
>
<template>
<mas-mnemonic-field></mas-mnemonic-field>
</template>
</mas-multifield>
<sp-field-label for="card-icon">Background Image</sp-field-label>
<sp-textfield
placeholder="Enter backgroung image URL"
id="background-title"
data-field="backgroundImage"
value="${form.backgroundImage.values[0]}"
@input="${this.#updateFragment}"
?disabled=${this.disabled}
></sp-textfield>
<sp-field-label for="card-icon"
>Background Image Alt Text</sp-field-label
>
<sp-textfield
placeholder="Enter backgroung image Alt Text"
id="background-alt-text"
data-field="backgroundImageAltText"
value="${form.backgroundImageAltText.values[0]}"
@input="${this.#updateFragment}"
?disabled=${this.disabled}
></sp-textfield>
<sp-field-label for="horizontal"> Prices </sp-field-label>
<sp-field-group horizontal id="horizontal">
<sp-field-group id="variant">
<sp-field-label for="card-variant">Variant</sp-field-label>
<variant-picker
id="card-variant"
?show-all="false"
data-field="variant"
default-value="${form.variant.values[0]}"
@change="${this.#handleVariantChange}"
?disabled=${this.disabled}
></variant-picker>
</sp-field-group>
<sp-field-group class="toggle" id="size">
<sp-field-label for="card-size">Size</sp-field-label>
<sp-picker
id="card-size"
data-field="size"
value="${form.size.values[0]}"
@change="${this.#updateFragment}"
?disabled=${this.disabled}
>
<sp-menu-item value="">Normal</sp-menu-item>
<sp-menu-item value="wide">Wide</sp-menu-item>
${this.superWide
? html`<sp-menu-item value="super-wide"
>Super wide</sp-menu-item
>`
: nothing}
</sp-picker>
</sp-field-group>
<sp-field-group class="toggle" id="title">
<sp-field-label for="card-title">Title</sp-field-label>
<sp-textfield
placeholder="Enter card title"
id="card-title"
data-field="cardTitle"
value="${form.cardTitle.values[0]}"
@input="${this.#updateFragment}"
?disabled=${this.disabled}
></sp-textfield>
</sp-field-group>
<sp-field-group class="toggle" id="subtitle">
<sp-field-label for="card-subtitle">Subtitle</sp-field-label>
<sp-textfield
placeholder="Enter card subtitle"
id="card-subtitle"
data-field="subtitle"
value="${form.subtitle.values[0]}"
@input="${this.#updateFragment}"
?disabled=${this.disabled}
></sp-textfield>
</sp-field-group>
<sp-field-group class="toggle" id="badge">
<sp-field-label for="card-icon">Badge</sp-field-label>
<sp-textfield
placeholder="Enter badge text"
id="card-badge"
data-field="badge"
value="${form.badge.values[0]}"
@input="${this.#updateFragment}"
?disabled=${this.disabled}
></sp-textfield>
</sp-field-group>
<sp-field-group class="toggle" id="mnemonics">
<sp-field-label for="mnemonic">Mnemonics</sp-field-label>
<mas-multifield
id="mnemonics"
.value="${this.mnemonics}"
@change="${this.#updateMnemonics}"
@input="${this.#updateMnemonics}"
>
<template>
<mas-mnemonic-field></mas-mnemonic-field>
</template>
</mas-multifield>
</sp-field-group>
<sp-field-group class="toggle" id="backgroundImage">
<sp-field-label for="card-icon"
>Background Image</sp-field-label
>
<sp-textfield
placeholder="Enter backgroung image URL"
id="background-title"
data-field="backgroundImage"
value="${form.backgroundImage.values[0]}"
@input="${this.#updateFragment}"
?disabled=${this.disabled}
></sp-textfield>
<sp-field-label for="card-icon"
>Background Image Alt Text</sp-field-label
>
<sp-textfield
placeholder="Enter backgroung image Alt Text"
id="background-alt-text"
data-field="backgroundImageAltText"
value="${form.backgroundImageAltText.values[0]}"
@input="${this.#updateFragment}"
?disabled=${this.disabled}
></sp-textfield>
</sp-field-group>
<sp-field-group class="toggle" horizontal id="prices">
<sp-field-label for="horizontal"> Prices </sp-field-label>
<rte-field
inline
data-field="prices"
Expand All @@ -272,8 +320,8 @@ class MerchCardEditor extends LitElement {
>${unsafeHTML(form.prices.values[0])}</rte-field
>
</sp-field-group>
<sp-field-label for="horizontal"> Description </sp-field-label>
<sp-field-group horizontal id="horizontal">
<sp-field-group class="toggle" horizontal id="description">
<sp-field-label for="horizontal"> Description </sp-field-label>
<rte-field
link
data-field="description"
Expand All @@ -283,8 +331,8 @@ class MerchCardEditor extends LitElement {
>${unsafeHTML(form.description.values[0])}</rte-field
>
</sp-field-group>
<sp-field-label for="horizontal"> Footer </sp-field-label>
<sp-field-group horizontal id="horizontal">
<sp-field-group class="toggle" horizontal id="ctas">
<sp-field-label for="horizontal"> Footer </sp-field-label>
<rte-field
link
inline
Expand Down Expand Up @@ -328,6 +376,11 @@ class MerchCardEditor extends LitElement {
</div> `;
}

#handleVariantChange(e) {
this.#updateFragment(e);
this.toggleFields();
}

#handeTagsChange(e) {
const value = e.target.getAttribute('value');
const newTags = value ? value.split(',') : []; // do not overwrite the tags array
Expand Down
1 change: 0 additions & 1 deletion studio/src/rte/rte-field.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,7 +93,6 @@ class RteField extends LitElement {
gap: 8px;
flex-direction: column;
font-size: var(--spectrum-font-size-200);
padding: 6px;
}
:host([focused]) #editor {
Expand Down
Loading