Skip to content

Commit

Permalink
MWPW-161354: toggle used/unused fields
Browse files Browse the repository at this point in the history 
MWPW-162449: convert size field to dropdown
  • Loading branch information
@yesil
yesil committed Dec 24, 2024
1 parent 0fec699 commit 081bdad
Show file tree
Hide file tree
Showing 2 changed files with 136 additions and 84 deletions.
219 changes: 136 additions & 83 deletions studio/src/editors/merch-card-editor.js
View file
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
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

0 comments on commit 081bdad

Please sign in to comment.