@mindfiredigital/page-builder
Version:
143 lines (142 loc) • 5.39 kB
JavaScript
import { svgs } from '../icons/svgs.js';
export function createSidebar(dynamicComponents) {
// We have default values if there is no custom components are specified within parameters
if (
!dynamicComponents ||
(dynamicComponents.Basic.length === 0 &&
dynamicComponents.Extra.length === 0 &&
Object.keys(dynamicComponents.Custom).length === 0)
) {
dynamicComponents = {
Basic: [
'button',
'header',
'text',
'image',
'video',
'container',
'twoCol',
'threeCol',
'table',
'link',
],
// Add portfolio for version 2
Extra: ['landingpage'],
Custom: {},
};
}
const sidebar = document.getElementById('sidebar');
if (!sidebar) {
console.error('Sidebar element not found');
return;
}
// Define your components, icons, and titles as before using it
const icons = {
button: svgs.button,
header: svgs.header,
image: svgs.image,
video: svgs.video,
text: svgs.text,
container: svgs.container,
twoCol: svgs.twocol,
threeCol: svgs.threecol,
table: svgs.table,
// portfolio: 'dist/icons/portfolio.png',
landingpage: svgs.landing,
link: svgs.hyperlink,
};
const titles = {
button: 'Button',
header: 'Header',
image: 'Image',
video: 'Link Video',
text: 'Text',
container: 'Container',
twoCol: 'Two Column Layout',
threeCol: 'Three Column Layout',
table: 'Table',
// portfolio: 'Portfolio Template',
landingpage: 'Landing Page Template',
link: 'Link',
};
// Create the Templates menu section
const templatesMenu = document.createElement('div');
templatesMenu.classList.add('menu');
// Depending upon the config object of the dynamic components, it will add components to the sidebar
Object.entries(dynamicComponents).forEach(([category, components]) => {
const categoryMenu = document.createElement('div');
categoryMenu.classList.add('category');
const categoryHeading = document.createElement('h4');
categoryHeading.classList.add('categoryHeading');
categoryHeading.innerHTML = category;
categoryMenu.prepend(categoryHeading);
// Handling standard dynamic components (Basic and Extra)
if (Array.isArray(components)) {
components.forEach(componentId => {
const iconElement = document.createElement('div');
iconElement.classList.add('draggable');
iconElement.id = componentId;
iconElement.setAttribute('draggable', 'true');
iconElement.setAttribute('data-component', componentId);
const customTitle = titles[componentId] || `Drag to add ${componentId}`;
iconElement.setAttribute('title', customTitle);
// Add SVG as innerHTML
if (icons[componentId]) {
iconElement.innerHTML = icons[componentId];
// Optionally style the SVG
const svgElement = iconElement.querySelector('svg');
if (svgElement) {
svgElement.classList.add('component-icon');
}
} else {
console.warn(`Icon not found for component: ${componentId}`);
}
categoryMenu.appendChild(iconElement);
});
}
// Handling Custom components (which is an object)
else if (category === 'Custom' && typeof components === 'object') {
Object.entries(components).forEach(([keyName, config]) => {
const iconElement = document.createElement('div');
iconElement.classList.add('draggable', 'custom-component');
iconElement.id = keyName;
iconElement.setAttribute('draggable', 'true');
iconElement.setAttribute('data-component', keyName);
// Handle the config object properly - could be old format or new format
if (typeof config === 'string') {
// Handle legacy format where config is just the tag name string
iconElement.setAttribute('data-tag-name', config);
iconElement.setAttribute('title', `Drag to add ${keyName}`);
// Create element with first letter of the key name
const letterSpan = document.createElement('span');
letterSpan.classList.add('custom-component-letter');
letterSpan.textContent = keyName.charAt(0).toUpperCase();
iconElement.appendChild(letterSpan);
} else {
// Handling new format with CustomComponentConfig
const { component, svg, title } = config;
iconElement.setAttribute('data-tag-name', component);
iconElement.setAttribute('title', title || `Drag to add ${keyName}`);
if (svg) {
// Using provided SVG
iconElement.innerHTML = svg;
// Style the SVG
const svgElement = iconElement.querySelector('svg');
if (svgElement) {
svgElement.classList.add('component-icon');
}
} else {
// Fallback to first letter if no SVG provided
const letterSpan = document.createElement('span');
letterSpan.classList.add('custom-component-letter');
letterSpan.textContent = keyName.charAt(0).toUpperCase();
iconElement.appendChild(letterSpan);
}
}
categoryMenu.appendChild(iconElement);
});
}
templatesMenu.appendChild(categoryMenu);
});
sidebar.appendChild(templatesMenu);
}