Issue #1529Opened October 19, 2018by krunal0391 reactions
[Help] Componet is not editable
Question
Code SnippetTEXT
I have custom component and have applied editable=true but child element are not editable, I even tried adding data-gjs-editable=true and also try to use basic component blocks but entire component is not editable.
`var sliderType = 'hsbc-slider-1';
var createSliderComponent = function (comps, defaultModel, defaultView) {
var defaultType = comps.getType("default");
var defaultModel = defaultType.model;
var defaultView = defaultType.view;
comps.addType(sliderType, {
// Define the Model
model: defaultModel.extend({
// Extend default properties
defaults: Object.assign({}, defaultModel.prototype.defaults, {
type: sliderType,
tagName: 'div',
copyable: true,
removable: false,
stylable: false,
resizable: false,
editable: true,
badgable: true,
highlightable: true,
attributes: {
'class': 'slider-container',
'data-gjs-type': sliderType
}
}),
}, {
isComponent(el) {
if (el.getAttribute &&
el.getAttribute('data-gjs-type') == sliderType) {
return {
type: sliderType
};
}
}
}),
// Define the View
view: defaultView
});
};`
`{
id: sliderType + "_block",
label: "Slider",
category: "Layout",
attributes: {
class: "gjs-block sliderbox-icon",
"data-gjs-hover-img": "https://team.global.hsbc/sites/LearningDevLib/hsbc_uni_images/Icons/grapes-js/slider.png"
},
content: {
type: 'hsbc-slider-1',
activeOnRender: 1,
content : '<div class="slider-left-part"><h2 data-gjs-type="text">Sample Title</h2><div class="slider-title" data-gjs-type="text">Lorem Ipsum</div><div class="slider-description" data-gjs-type="text">Sample Description</div><div class="slider-link"><a href="" data-gjs-type="link">Link</a></div></div><div class="slider-right-part"><img data-gjs-type="image" class="slider-image" src="https://via.placeholder.com/503x300"></div>'
}
}`
Answers (3)
artf• October 26, 20181 reactions
traits are not visible when clicked on component.
Because you're clicking another component (the inner one, which has its own traits), if you don't need that component to be selectable you can use selectable property <div data-gjs-selectable="false">...
artf• October 19, 20180 reactions
You should put the HTML not inside content(in the block definition) but components
krunal039• October 22, 20180 reactions
Code SnippetTEXT
@artf I have put inside components and if I do that way than traits are not visible when clicked on component.
`var sliderType = 'hsbc-slider-1';
var createSliderComponent = function (comps, defaultModel, defaultView) {
var defaultType = comps.getType("default");
var defaultModel = defaultType.model;
var defaultView = defaultType.view;
comps.addType(sliderType, {
// Define the Model
model: defaultModel.extend({
// Extend default properties
defaults: Object.assign({}, defaultModel.prototype.defaults, {
type: sliderType,
tagName: 'div',
copyable: true,
removable: false,
stylable: false,
resizable: false,
editable: true,
badgable: true,
highlightable: true,
sTitle: '',
sHeader: '',
sDescription: '',
sLink: '',
sLinkTitle: '',
sSrc: '',
sContent: '<div class="slider-left-part"><h2>Sample Title</h2><div class="slider-title">Lorem Ipsum</div><div class="slider-description">Sample Description</div><div class="slider-link"><a href="">Link</a></div></div><div class="slider-right-part"><img class="slider-image" src="https://via.placeholder.com/503x300"></div>',
sHeader: '',
attributes: {
'class': 'slider-container',
'data-gjs-type': sliderType
},
traits: [{
type: 'text',
label: 'Header Text',
name: 'sHeader',
placeholder: 'eg. Welcome',
changeProp: 1
}, {
type: 'text',
label: 'Title',
name: 'sTitle',
placeholder: 'eg. HSBC Link',
changeProp: 1
}, {
type: 'text',
label: 'Description',
name: 'sDescription',
placeholder: 'eg. Hear what our leaders are saying about HSBC University – and how it can help you learn, develop and connect.',
changeProp: 1
},
{
type: 'select',
label: 'Link Title',
name: 'sLink',
options: [{
value: 'Access',
name: 'Access'
}, {
value: 'Find Out More',
name: 'Find Out More'
}, {
value: 'None',
name: 'None'
}, {
value: 'Read More',
name: 'Read More'
}, {
value: 'Register',
name: 'Register'
}, {
value: 'Role Based Learning',
name: 'Role Based Learning'
}, {
value: 'Visit Website',
name: 'Visit Website'
}, {
value: 'Watch Video',
name: 'Watch Video'
}],
changeProp: 1
}, {
type: 'text',
label: 'Link to open',
name: 'sLinkTitle',
placeholder: 'eg. https://team.global.hsbc/sites/HSBCUni',
changeProp: 1
}
]
}),
initialize: function initialize(o) {
defaultModel.prototype.initialize.apply(this, arguments);
if (this.components() && !this.components().length) {
this.components(this.get('sContent'));
}
this.listenTo(this, 'change:sHeader', this.updateContent);
},
updateContent: function () {
this.find('h2')[0] && this.find('h2')[0].set("content", this.get('sHeader'));
this.find('div.slider-title')[0] && this.find('div.slider-title')[0].set("content", this.get('sTitle'));
this.find('div.slider-description')[0] && this.find('div.slider-description')[0].set("content", this.get('sDescription'));
this.find('a')[0] && this.find('a')[0].set("href", this.get('sLink'));
this.find('a')[0] && this.find('a')[0].set("content", this.get('sLinkTitle'));
this.find('img')[0] && this.find('img')[0].set("src", this.get('sSrc'));
}
}, {
isComponent(el) {
if (el.getAttribute &&
el.getAttribute('data-gjs-type') == sliderType || el.getAttribute('') =='slider-container') {
return {
type: sliderType,
content : '<div class="slider-left-part"><h2>Sample Title</h2><div class="slider-title">Lorem Ipsum</div><div class="slider-description">Sample Description</div><div class="slider-link"><a href="">Link</a></div></div><div class="slider-right-part"><img class="slider-image" src="https://via.placeholder.com/503x300"></div>',
activeOnRender: 1
};
}
}
}),
// Define the View
view: defaultView
});
};`Related Questions and Answers
Continue research with similar issue discussions.
Issue #486
Custom Component not editable and also after traits update canvas does not update
below is code i used for traits and custom section but after adding component via block, cannot edit text or trait update does not update c...
2 answersUpdated September 18, 2019
Issue #1720
[QUESTION] How to add the button in custom traits
Hi, I try to add a button to my custom traits for my custom blocks but its not working fine as expected and also need to know how to call t...
3 answersUpdated April 3, 2020
Issue #1683
How to change id/class when new element drop on editor or render element with dynamic ip?
Hello @artf , Hope you are doing well. I have two questions regards dynamic blocks adding, 1) Is it possible to render the block with dynam...
3 answersUpdated December 27, 2019
Issue #1618
Child components are not tracked in models ??
Hi, I'm facing as strange issue and I need your help. when I move components inside blocks, at the view model the changes successfully appl...
3 answersUpdated December 7, 2019
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.