Question: trying to have 'Settings' sector under the style
Question
https://github.com/artf/grapesjs/issues/1627
I think the question is related to this line specifically, I have the same issue. I look thru the demo but this class only appears in css and this line, so this selector returns undefined does it not? What element has this so that it can then be appended?
traitsProps.append($('.gjs-trt-traits'));
It does work in the demo but I don't understand how..
Trying to solve in KotlinJS, notice: - Make sure it is inside onload - Notice var $ = grapesjs.$; getElementBy doesn't work, but I don't understand what this is doing - Solved - "Load and show settings and style manager": this part of the demo apparently creates the div with that css class, then what follows moves it to the correct spot and wires up the drop down. Not sure why this one is different than everything configured in present plugin, why can't this be setup on init like those?
Answers (3)
Okay, I think I understand. I need many different versions of grapejs canvases... each should be it's own plugin, maybe sharing common code in some cases. I was thinking differently, that presets were only settings that could be overridden but it's more like a preset is the complete solution itself... now I gotta learn to make plugins, off I go!
Hello @gunslingor before calling trait sector you need to make active both section settingButton && settingButton.set('active', 1); styleManagerButton && styleManagerButton.set('active', 1);
and then you can call
--
// Add Settings Sector
| var traitsSector = $('<div class="gjs-sm-sector no-select">'+
| '<div class="gjs-sm-title"><span class="icon-settings fa fa-cog"></span> Settings</div>' +
| '<div class="gjs-sm-properties" style="display: none;"></div></div>');
| var traitsProps = traitsSector.find('.gjs-sm-properties');
| traitsProps.append($('.gjs-trt-traits'));
| $('.gjs-sm-sectors').before(traitsSector);
| traitsSector.find('.gjs-sm-title').on('click', function(){
| var traitStyle = traitsProps.get(0).style;
| var hidden = traitStyle.display == 'none';
| if (hidden) {
| traitStyle.display = 'block';
| } else {
| traitStyle.display = 'none';
| }
| });
|Yeah, I figured that out eventually. I don't get why I have to configure this section AFTER initialization instead of during like many other panels/sections. I think it's because I am using the presets plugin. I think init needs to be simple if your using it and then modified after, but I don't have confirmation and I don't know why. Is this correct, or can you use the presets plugin AND configure traits at init time (at the same time)?
Related Questions and Answers
Continue research with similar issue discussions.
Issue #2148
[QUESTION] IE11 (Unable to get property 'style' of undefined)
Hi! Just faced the same issue: https://github.com/artf/grapesjs/issues/1295#issuecomment-410046832 While click on one of this buttons this....
Issue #1627
[Question]: $('.gjs-trt-traits') is null (trying to have 'Settings' sector under the style)
Hi, I'm using webpage preset and trying to have Settings sector under Style like the demo by doing this (exactly the same as demo.html) but...
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 #3564
BUG: Unable to refresh the iframe
0.17.19 Are you able to reproduce the bug from the demo? YES What is the expected behavior? I had asked a question regarding iframe refresh...
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.