Hi there, I'm Anubhav Jain ๐
- ๐ฏ Iโm looking to collaborate with other content creators
- ๐ฅ 2023 Goals: Contribute more to Open Source projects
Simple Accordion Plugin for GrapesJS
Home Page: https://github.com/Anubhavjain786/grapesjs-accordion
License: MIT License
How to add get the module dynamic id before each CSS class to encapsulate the CSS for
I need that dynamic ID before each CSS Class while drop the component
as per my screenshot CSS structure will be like
#ij7j .accordion__group{
margin-bottom:16px;
}
#ij7j .accordion__button{
background-color:rgb(168, 168, 168);
padding-top:16px;
padding-right:16px;
padding-bottom:16px;
padding-left:16px;
width:100%;
text-align:left;
border-top-width:initial;
border-right-width:initial;
border-bottom-width:initial;
border-left-width:initial;
border-top-style:none;
border-right-style:none;
border-bottom-style:none;
border-left-style:none;
border-top-color:initial;
border-right-color:initial;
border-bottom-color:initial;
border-left-color:initial;
border-image-source:initial;
border-image-slice:initial;
border-image-width:initial;
border-image-outset:initial;
border-image-repeat:initial;
outline-color:initial;
outline-style:none;
outline-width:initial;
cursor:pointer;
display:flex;
align-items:flex-start;
border-top-left-radius:8px;
border-top-right-radius:8px;
border-bottom-right-radius:8px;
border-bottom-left-radius:8px;
transition-duration:0.2s;
transition-timing-function:cubic-bezier(0.175, 0.885, 0.32, 1.275);
transition-delay:0s;
transition-property:all;
}
Please help
Hello @Anubhav Thanks to nice plugin.
Right now I have faced issue after upgrading grapesjs to v0.20.1 the current on. Can you please help to solve the issue in where I have made the modification run the plugin again.
Uncaught TypeError: Cannot set property defaults of #<n> which has only a getter
at grapesjs@latest:2:930538
at Module.It (grapesjs@latest:2:930754)
at Function.$ [as extend] (grapesjs@latest:2:30156)
at eval (Accordion.js?57d5:8:1)
at eval (index.js?2af9:22:1)
at eval (index.js?b635:106:1)
at grapesjs@latest:2:979994
at Array.forEach (<anonymous>)
at Object.init (grapesjs@latest:2:979845)
at (index):27:32
I think this is occur for this latest release https://github.com/artf/grapesjs/releases
Please help so that I can make it workable again . I have update the model error is fixed but code not working
**### Accordions.js**
export default (dc, { defaultModel, ...config }) => {
const type = "accordions";
const attrAccordions = config.attrAccordions;
dc.addType(type, {
isComponent(el) {
if (el.hasAttribute && el.hasAttribute(attrAccordions)) {
return { type };
}
},
model: {
defaults: {
...defaultModel.prototype.defaults,
copyable: false,
droppable: false,
name: "Accordions",
"attr-accordions": config.attrAccordions,
"attr-accordion": config.attrAccordion,
"attr-accordion-content": config.attrAccordionContent,
"attr-accordion-container": config.attrAccordionContainer,
"class-accordion-active": config.classAccordionActive,
"selector-accordion": config.selectorAccordion,
script() {
var i;
var el = this;
var attrAccordions = "[" + "{[ attr-accordions ]}" + "]";
var attrAccordion = "[" + "{[ attr-accordion ]}" + "]";
var attrAccordionContent =
"[" + "{[ attr-accordion-content ]}" + "]";
var attrAccordionContainer =
"[" + "{[ attr-accordion-container ]}" + "]";
var classAccordionActive = "{[ class-accordion-active ]}";
var selectorAccordion = "{[ selector-accordion ]}";
var body = document.body;
var matches =
body.matchesSelector ||
body.webkitMatchesSelector ||
body.mozMatchesSelector ||
body.msMatchesSelector;
// var hideContents = () => {
// var accordionContents =
// el.querySelectorAll(attrAccordionContent) || [];
// if (accordionContents) {
// for (i = 0; i < accordionContents.length; i++) {
// accordionContents[i].style.display = "none";
// }
// }
// };
var activeAccordion = (accordionEl) => {
var accordionContainers =
el.querySelectorAll(attrAccordionContainer) || [];
if (accordionContainer) {
for (i = 0; i < accordionContainers.length; i++) {
var accordionContainer = accordionContainers[i];
var newClass = accordionContainer.className
.replace(classAccordionActive, "")
.trim();
accordionContainer.className = newClass;
}
}
// hideContents();
accordionEl.className += " " + classAccordionActive;
};
var deactiveAccordion = (accordionEl) => {
var newClass = accordionEl.className
.replace(classAccordionActive, "")
.trim();
accordionEl.className = newClass;
};
el.addEventListener("click", (e) => {
var target = e.target;
if (matches.call(target, attrAccordion)) {
if (
el.querySelector(target.getAttribute(selectorAccordion)).style
.display === "block"
) {
deactiveAccordion(target.parentElement);
el.querySelector(
target.getAttribute(selectorAccordion)
).style.display = "none";
} else {
activeAccordion(target.parentElement);
el.querySelector(
target.getAttribute(selectorAccordion)
).style.display = "block";
}
}
});
},
...config.accordionsProps,
},
init() {
const attrs = this.getAttributes();
attrs[config.attrAccordions] = 1;
this.setAttributes(attrs);
},
__oninitview() {
const comps = this.model.components();
!comps.length && comps.add(config.template);
},
}
});
};
```
`
### **AccordionContent.js**
`export default (dc, { defaultModel, ...config }) => {
const type = "accordion-content";
const attrKey = config.attrAccordionContent;
const classKey = config.classAccordionContent;
dc.addType(type, {
isComponent(el) {
if (el.hasAttribute && el.hasAttribute(attrKey)) {
return { type };
}
},
model: {
defaults: {
...defaultModel.prototype.defaults,
name: "Accordion Content",
draggable: `[${config.attrAccordionContainer}]`,
copyable: false,
removable: false,
selectable: true,
...config.accordionContentProps,
},
init() {
const attrs = this.getAttributes();
attrs[attrKey] = 1;
this.setAttributes(attrs);
classKey && this.addClass(classKey);
},
},
});
};
`
### **AccordionContainer.js**
`export default (dc, { defaultModel, ...config }) => {
const type = "accordion-container";
const attrAccordions = config.attrAccordions;
const attrKey = config.attrAccordionContainer;
const classKey = config.classAccordionContainer;
const attrAccordionContent = config.attrAccordionContent;
const selectorAccordion = config.selectorAccordion;
dc.addType(type, {
isComponent(el) {
if (el.hasAttribute && el.hasAttribute(attrKey)) {
return { type };
}
},
model: {
defaults: {
...defaultModel.prototype.defaults,
name: "Accordion Container",
draggable: `[${attrAccordions}, ${attrAccordionContent}]`,
droppable: false,
copyable: true,
removable: true,
...config.accordionContainerProps,
},
init() {
const attrs = this.getAttributes();
attrs[attrKey] = 1;
this.setAttributes(attrs);
classKey && this.addClass(classKey);
this.listenTo(this, "add", this.onAdd);
},
onAdd() {
const componentModels = this.components().models;
if (componentModels && Array.isArray(componentModels)) {
let accordionContentID;
for (let i = componentModels.length - 1; i >= 0; i--) {
const model = componentModels[i];
const attrs = model.getAttributes();
if (attrs[`${attrAccordionContent}`]) {
accordionContentID = model.getId();
model.setId(accordionContentID);
} else {
model.addAttributes({
[selectorAccordion]: `#${accordionContentID}`,
});
}
}
}
},
},
});
};
`
### **Accordion.js**
`export default (dc, { defaultModel, ...config }) => {
const type = "accordion";
const attrKey = config.attrAccordion;
const classKey = config.classAccordion;
const selectorAccordion = config.selectorAccordion;
dc.addType(type, {
isComponent(el) {
if (el.hasAttribute && el.hasAttribute(attrKey)) {
return { type };
}
},
model: {
defaults: {
name: "Accordion",
draggable: `[${config.attrAccordionContainer}]`,
droppable: false,
copyable: false,
removable: false,
selectable: false,
...config.accordionProps,
},
init() {
const attrs = this.getAttributes();
attrs[attrKey] = 1;
this.setAttributes(attrs);
classKey && this.addClass(classKey);
},
clone() {
const cloned = defaultModel.prototype.clone.apply(this, arguments);
cloned.addAttributes({ [selectorAccordion]: "" });
return cloned;
},
},
});
};
`
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.