// Elementor Element Builder Service - Create sections, columns, widgets
import { logger } from '../../utils/logger.js';
import { ErrorHandler } from '../../utils/error-handler.js';
import {
ElementorSection,
ElementorColumn,
ElementorWidget,
ElementorContainer,
ElementorSectionSettings,
ElementorColumnSettings
} from '../../types/elementor.js';
export class ElementorBuilderService {
/**
* Generate unique ID for Elementor elements
*/
private generateId(): string {
return Math.random().toString(36).substring(2, 10);
}
/**
* Create a new Elementor section
*/
createSection(
columns: number = 1,
settings: Partial<ElementorSectionSettings> = {}
): ElementorSection {
return ErrorHandler.wrapAsync(async () => {
logger.debug(`Creating section with ${columns} columns`);
const columnElements: ElementorColumn[] = [];
const columnSize = Math.floor(100 / columns);
for (let i = 0; i < columns; i++) {
columnElements.push(this.createColumn({
_column_size: columnSize,
_inline_size: null
}));
}
const section: ElementorSection = {
id: this.generateId(),
elType: 'section',
isInner: false,
settings: settings || {},
elements: columnElements
};
logger.debug('Section created', { id: section.id, columns });
return section;
}, 'ElementorBuilderService.createSection') as any;
}
/**
* Create a new Elementor column
*/
createColumn(settings: Partial<ElementorColumnSettings> = {}): ElementorColumn {
const column: ElementorColumn = {
id: this.generateId(),
elType: 'column',
isInner: false,
settings: {
_column_size: 100,
_inline_size: null,
...settings
},
elements: [],
widgetType: null
};
return column;
}
/**
* Create a new Elementor container (Flexbox)
*/
createContainer(settings: Record<string, any> = {}): ElementorContainer {
const container: ElementorContainer = {
id: this.generateId(),
elType: 'container',
isInner: false,
settings: {
content_width: 'boxed',
...settings
},
elements: [],
widgetType: null
};
return container;
}
/**
* Create a new Elementor widget
*/
createWidget(
widgetType: string,
settings: Record<string, any> = {}
): ElementorWidget {
const widget: ElementorWidget = {
id: this.generateId(),
elType: 'widget',
widgetType: widgetType,
settings: settings || {},
elements: []
};
logger.debug(`Created widget`, { type: widgetType, id: widget.id });
return widget;
}
/**
* Create common widget types with default settings
*/
createHeadingWidget(text: string, tag: string = 'h2'): ElementorWidget {
return this.createWidget('heading', {
title: text,
header_size: tag,
align: 'left'
});
}
createTextWidget(content: string): ElementorWidget {
return this.createWidget('text-editor', {
editor: content
});
}
createButtonWidget(text: string, link: string = '#'): ElementorWidget {
return this.createWidget('button', {
text: text,
link: { url: link },
align: 'left',
size: 'md'
});
}
createImageWidget(imageUrl: string, imageId?: number): ElementorWidget {
return this.createWidget('image', {
image: {
url: imageUrl,
id: imageId || 0
},
image_size: 'full'
});
}
createDividerWidget(): ElementorWidget {
return this.createWidget('divider', {
style: 'solid',
weight: 1
});
}
createSpacerWidget(size: number = 50): ElementorWidget {
return this.createWidget('spacer', {
space: { size: size }
});
}
}