Show/Hide Traits

[stljeff1]

What is the best way to show/hide "child" traits when a parent trait changes?

I have components with custom traits. Some traits are only relevant when another trait is "turned on". How can I show/hide traits that are relevant to the current state of the component?

For instance, say I have a "Layout" component. By default, child elements display as blocks. On the Layout component, I have a trait to turn component into a css grid. If this trait is checked, child elements will display as grid items, and I show additional traits to show, including grid gap, grid columns, etc.

This layout component is not a real component - I am just trying to describe a simple scenario where showing/hiding traits make sense.

Anyway, I see two methods.

1. Ideally, I want to handle this on the component, when thE component's model is initialized.

editor.DomComponents.addType('Konnektive Import Order',  {
     extend: 'default',
     model: {
         defaults: {
                 traits: [
                         { name: 'is-grid-layout', type: 'checkbox', changeProp: 1 }
                         { name: 'grid-gap' }
                         { name: 'grid-col' }
                ]
        },
        init() {

                    this.listenTo(this, 'change:is-grid-layout', (event) => {
                        const displayStyle = (event.changed.attributes['data-gjs-is-grid-layout']) ? 'display: block' : 'display: none'  
                        this.updateTrait('data-gjs-grid-gap', {
                            attributes: {style: displayStyle}            
                        })
                    })
        }
     }
});

Reference: #1460

This seems to produce an infinite loop where the component is constantly updating itself. I am not sure why, any insight would be appreciated.

2. The other way I see is creating a Super Trait with all my related traits inside. I've done this before - its straight forward, but its a bit cumbersome and tedious. Here is an example of this.

        editor.TraitManager.addType('my-layout-trait', {
            noLabel: true,
            templateInput: `<div class="gjs-sf-custom-trait" data-input></div>`,
            createInput({trait}) {
                     // CREATE HTML FOR  ALL TRAITS
           },
           onUpdate({elInput, component, e}) {
                  // use elInput.querySelector to get child traits
                  
                  // if PARENT trait is checked, show child traits using "traitEl.style.display = block"
                  
                  // else, hide child traits using "traitEl.style.display = none"
          }
     })

Is there a "best practice"?

[senthil177cse]

Hi did you got solution for this?
even me also having like this feature show hide traits...

[stljeff1]

Yes. I have two solutions you can try.

First is the second method I describe above. Essentially, you make a super trait that contains all the child traits.

Here is an example of an Animation trait. The user is initially presented with a drop down containing a list of possible CSS animations that can be applied to the component. When the user selects an animation, 3 more "traits" show up that allow the user to configure the settings of the animation. These values are saved as style attributes of the component.

        editor.TraitManager.addType('animation', {
            noLabel: true,
            templateInput: `<div class="gjs-custom-trait" data-input></div>`,
            createInput() {
                const el = document.createElement('div');
                const animationSelectWrapper = document.createElement('div');
                const extraFields = document.createElement('div');
                const animationDelayWrapper = document.createElement('div');
                const animationDurationWrapper = document.createElement('div');
                const animationIterationWrapper = document.createElement('div');
                const disableOnMobileWrapper = document.createElement('div');
                                
                const animationTypes = Object.keys(CssAnimationOptions);

                let animationSelect;


                animationSelectWrapper.classList.add('animation-select', 'gjs-trt-trait');
                animationSelectWrapper.innerHTML = `
                    <div class="gjs-label-wrp"><div class="gjs-label">Animation</div></div>
                    <div class="gjs-field-wrp gjs-field-wrp--select">
                            <div class="gjs-field gjs-field-animation-type">
                            <select>
                                <option  value="">None</option>
                            </select>
                            </div>
                    </div>
                `;


                animationIterationWrapper.classList.add('animation-duration', 'gjs-trt-trait');
                animationIterationWrapper.innerHTML = `
                    <div class="gjs-label-wrp"><div class="gjs-label">Animation Iteration Count</div></div>
                    <div class="gjs-field-wrp gjs-field-wrp--text">
                            <div class="gjs-field gjs-field-animation-iteration">
                            <input class='animation-iteration-input' type="text" placeholder='Example: "3" or "infinite"' >
                            </div>
                    </div>
                `;

                animationDelayWrapper.classList.add('animation-delay', 'gjs-trt-trait');
                animationDelayWrapper.innerHTML = `
                    <div class="gjs-label-wrp"><div class="gjs-label animation-delay-label">Animation Delay</div></div>
                    <div class="gjs-field-wrp gjs-field-wrp--text">
                            <div class="gjs-field gjs-field-animation-delay">
                            <input class='animation-delay-input' type="text" placeholder='Example: 2s"' >
                            </div>
                    </div>
                    `;
    
                animationDurationWrapper.classList.add('animation-duration', 'gjs-trt-trait');
                animationDurationWrapper.innerHTML = `
                        <div class="gjs-label-wrp"><div class="gjs-label animationn-duration-label">Animation Duration</div></div>
                    <div class="gjs-field-wrp gjs-field-wrp--select">
                            <div class="gjs-field gjs-field-animation-duration">
                            <input class='animation-duration-input' type="text" placeholder='Example: "3s"' >
                            </div>
                    </div>
                `;

                
                
                animationSelect = animationSelectWrapper.querySelector('select');

                animationTypes.forEach((arrayElement, i) => {
                    const optGroup = document.createElement('optgroup');

                    optGroup.label = arrayElement;

                    Object.keys(CssAnimationOptions[arrayElement]).forEach((animOption) => {
                        const opt = document.createElement('option');
                        opt.value = animOption;
                        opt.innerHTML = CssAnimationOptions[arrayElement][animOption];
                        optGroup.append(opt);
                    });
                    animationSelect.append(optGroup);
                });

                animationSelect.addEventListener('change', (e) => {
                    const value = (<HTMLInputElement>e.target).value;
                    let selOpt;
          
                    if(value) {

                        extraFields.style.display = 'block';


                    }
                    else
                        extraFields.style.display = 'none';
                })

                extraFields.classList.add('animation-extra-fields');
                extraFields.append(animationIterationWrapper);
                extraFields.append(animationDurationWrapper);
                extraFields.append(animationDelayWrapper);
                
                el.append(animationSelectWrapper);
                el.append(extraFields);
                return el;
            },


            /**
            	Use this function toupdate the component
            **/
            onEvent({elInput, component, e}) {
                const animationSelect = elInput.querySelector('select');
                const animationType = animationSelect.value;
                const compStyle = component.getStyle();
                    
                let newStyle = compStyle;
              
                if(animationType) {
                    const animIterationInput = elInput.querySelector('.animation-iteration-input');
                    const animDurationInput = elInput.querySelector('.animation-duration-input');
                    const animDelayInput = elInput.querySelector('.animation-delay-input');
                    const animDisable = elInput.querySelector('.anim-disabled');

                    newStyle['animation-name'] = animationType;
                    
                    if(animIterationInput && animIterationInput.value) {
                        newStyle['animation-iteration-count'] = animIterationInput.value;
                    }
                    else 
                        delete newStyle['animation-iteration-count'];
                
                    if(animDurationInput && animDurationInput.value) {
                        newStyle['animation-duration'] = animDurationInput.value;
                    }
                    else 
                        delete newStyle['animation-duration'];
                    
                    
                    if(animDelayInput && animDelayInput.value)
                        newStyle['animation-delay'] = animDelayInput.value;
                    else
                        delete newStyle['animation-delay']
                    
                    if(animDisable && animDisable.checked) {
                        component.addClass('disable-anim-mobile');
                    }
                    else {
                        component.removeClass('disable-anim-mobile');
                    }
                    
         
                    component.addAttributes({"data-animation": true});
                }
                else {

                    delete newStyle['animation-name'];
                    delete newStyle['animation-delay'];
                    delete newStyle['animation-duration'];
                    delete newStyle['animation-iteration-count'];

                }

                component.setStyle({...compStyle, ...newStyle});

            },

            /**
            	Use this function to grab values from component and update value of trait input fields
            **/
            onUpdate({elInput, component}) {
                const compStyle = component.getStyle();
                let animType = compStyle['animation-name'];
                if(animType) {
                    const animationSelect = elInput.querySelector('select');
                    const animDurationInput = elInput.querySelector('.animation-duration-input');
                    const animDelayInput = elInput.querySelector('.animation-delay-input');
                    const animDisable = elInput.querySelector('.anim-disabled');
                    
                    animationSelect.querySelector('[value="' + animType + '"]').selected = true;
                    animationSelect.dispatchEvent(new CustomEvent('change'));

                    if(compStyle['animation-iteration-count']) {
                        animDurationInput.value = compStyle['animation-iteration-count'];
                    }
                    
                    if(compStyle['animation-duration']) {
                        animDurationInput.value = compStyle['animation-duration'];
                    }
                    
                    if(compStyle['animation-delay']) {
                        animDelayInput.value = compStyle['animation-delay'];
                    }

                    if(component.getClasses().includes('disable-anim-mobile')) {
                        animDisable.checked = true;
                    }
                    
                }
                else {
                    elInput.querySelector('.animation-extra-fields').style.display = 'none';
                }
            }
        });

You could also stringify the values of the child traits as JSON data and save that as the value of the parent trait.

Method 2

Here is another method. This one does not involve a custom trait. All of the logic to show/hide traits is defined when the component's model is initiated.

Warning: this is untested code. I extracted it from my application, which is not very well organized. There may be better, cleaner implementations, but I think it demonstrates the basic idea.

export const myChildTraits = [
  {
    type: 'text',
    label: 'Child Trait ',
    name: 'my-child-trait-1',
    changeProp: 1
  },{
    type: 'checkbox',
    label: 'Child Trait 2',
    name: 'my-child-trait-2'
    changeProp: 1
  }
];


const initChildTraits = (component) => {
  const attrs = component.getAttributes();
  

  // Initialize Child Traits
  if (!Object.keys(attrs).includes('my-parent-trait') || attrs['my-parent-trait'] === false) {
    myChildTraits.forEach((traitProps) => {
      const trait = component.getTrait(traitProps.name);
      component.updateTrait(traitProps.name, {
        attributes: { style: 'display: none;' }
      });
    });
  }

  component.listenTo(component, 'change:attributes:my-parent-trait', (event) => {
    const isActive = event.changed.attributes['my-parent-trait'];
    const displayStyle = isActive ? 'block' : 'none';

    myChildTraits.forEach((traitProps) => {
      const trait = component.getTrait(traitProps.name);
      if (trait) {
        trait.view.el.style.display = displayStyle;
      }
    });
  });
}

          
  // CREATE BLOCK
const traits = [{
		type: 'checkbox',
		label: 'Enable Parent Trait',
		name: 'my-parent-trait'
	}, ...myChildTraits
]
editor.DomComponents.addType('sf-product-element', {
	extend: 'default',
	extendFn: ['init'],
	model: {
	    defaults: {
	        traits: [...traits]
	    
	    },
	    init() {
	    	this.setupTraits();
	    	initChildTraits();
	    },
	    setupTraits() {
	      traits
	        .filter((trait) => trait.changeProp)
	        .forEach((trait) => {
	          const attrName = trait.name.match(/^data/) ? trait.name : 'data-gjs-' + trait.name;
	          if (has(this.attributes, trait.name)) {
	            const attributes = {
	              ...this.getAttributes()
	            };
	            if (trait.type === 'checkbox' && this.attributes[trait.name] === '') {
	              attributes[attrName] = true;
	              this.set(trait.name, true);
	            } else {
	              attributes[attrName] = this.attributes[trait.name];
	            }
	            this.setAttributes(attributes);
	          }

	          this.listenTo(this, `change:${trait.name}`, function (event) {
	            const value = event.changed[trait.name];
	            const attributes = {
	              ...this.getAttributes()
	            };
	            attributes[attrName] = value;
	            this.setAttributes(attributes);
	          });
	        });
	    },
 
    },
});

[vladninja]

Is there is more elegant solution, when one trait depends on the value of another trait?
Because now, in my opinion the beat way is to create a big Trait (with multiple inputs/selects/textareas/custom elements) in some framework like Vue/React and add a logic of hiding/showing or more advanced logic (e.g when the trait 2 depends on the trait 1 option) in your trait app and save object data in 1 trait param.
Of course, you will need to implement getter method for onEvent and setter for onUpdate, but it will work (woking on production in my project), but I will try to find more elegant solution, if there is possible.

Any updates planing for implementing "dynamic" traits @artf ?