Issue #3052Opened September 30, 2020by MudassarSandhu0 reactions

BUG: hide/show traits and change their values dynamically

Question

I have extended the link component and add new traits like href. In order to show or hide the trait i followed this #https://github.com/artf/grapesjs/issues/1460. But how to show those hide traits again on the basis of another trait change value? Right now what i have done is

`editor.DomComponents.addType('link', {
    model: dModel.extend({
        defaults: Object.assign({}, dModel.prototype.defaults, {
          traits: [
            {
              name: 'path-name',
              type: 'text',
              label: 'Text to display',
              changeProp: 1,
            },
            {
               type: 'set-path', // Type of the trait
               label: 'Href', // The label you will see in Settings
               name: 'path', // The name of the attribute/property to use on component
               options: [],
               changeProp: 1,
             },
             {
               type: 'text', // Type of the trait
               label: 'Href', // The label you will see in Settings
               name: 'path-url', // The name of the attribute/property to use on component
               changeProp: 1,
             },
            {
              type: 'select',
              label: 'Step',
              name: 'select-type',
              options: inputTypes,
              changeProp: 1,
            }
          ],
        }),
        init() {
          debugger;
          // Also the listener changes from `change:attributes:*` to `change:*`
          this.listenTo(this, 'change:selectType', this.doStuff);
        },
        updated(property, value, prevValue) {
          console.log('Local hook: model.updated', 'property', property, 'value', value, 'prevValue', prevValue);
        },
        doStuff() {
          switch (this.getTrait('select-type').props().value) {
            case 'non':
               this.getTrait('path-url').props().attributes.style = 'display: block';
               this.getTrait('path').props().attributes.style = 'display: none';
              break;
            case 'step':
               this.getTrait('path-url').props().attributes.style = 'display: none';
               this.getTrait('path').props().attributes.style = 'display: block';
              break;
        },
      },
      {
        isComponent: function (el) {
          if (el.tagName == 'A' || el.tagName == 'link') {
            return {type: 'link'};
          }
        },
      }),
    view: dView
  });`

But its not reflecting the changes in the component setting. Can we change the style of trait like hide/show dynamically. Can we assign select-type trait value to path-name trait value or do i need to implement custom types for that?

Answers (2)

artfOctober 10, 20200 reactions
  1. You've called the trait name: 'select-type', but you're listening to change:selectType, so fix it by changing the listener in change:select-type
  2. Don't rely on the trait value this.getTrait('select-type').props().value but on the component itself this.get('select-type')
  3. Currently you can't update traits attributes in that way, but you can do this getTrait('ID').view.el.style.display = 'none';
chaegumiJanuary 12, 20230 reactions

getTrait('ID').view is undefined.

Related Questions and Answers

Continue research with similar issue discussions.

Paid Plugins That Match This Issue

Curated by issue keywords and label relevance to help you ship faster.

View all plugins

Loading paid plugin recommendations...

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.