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)
- You've called the trait
name: 'select-type',but you're listening tochange:selectType, so fix it by changing the listener inchange:select-type - Don't rely on the trait value
this.getTrait('select-type').props().valuebut on the component itselfthis.get('select-type') - Currently you can't update traits attributes in that way, but you can do this
getTrait('ID').view.el.style.display = 'none';
getTrait('ID').view is undefined.
Related Questions and Answers
Continue research with similar issue discussions.
Issue #3778
BUG: Select options are not displaying - new anomaly
GrapesJS version[X] I confirm to use the latest version of GrapesJSWhat browser are you using? ChromeReproducible demo link https://github....
Issue #1113
[QUESTIONS] New trait type is not working with rendered components?
Hello, thanks for the great framework. I'm trying to apply this to my project. I want to add a new trait for existing LINK '<a>' component....
Issue #5141
BUG: component resets attribute values on updating traits ( first time only )
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Chrome Version 113.0.5672.63 Reproducible...
Issue #2645
how to add new content to the intended component without removing the previously added component content
WARNING READ and FOLLOW next 5 steps, then REMOVE them before posting the issueFollow CONTRIBUTING Guidelines https://github.com/artf/grape...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.