@progress/sitefinity-nextjs-sdk
Version:
Provides OOB widgets developed using the Next.js framework, which includes an abstraction layer for Sitefinity communication. Additionally, it offers an expanded API, typings, and tools for further development and integration.
174 lines (173 loc) • 9.04 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { isAbsoluteUrl } from 'next/dist/shared/lib/utils';
import { htmlAttributes } from '../../editor/widget-framework/attributes';
import { getMinimumMetadata } from '../../editor/widget-framework/widget-metadata';
import { RestClient, RestSdkTypes } from '../../rest-sdk/rest-client';
import { RootUrlService } from '../../rest-sdk/root-url.service';
import { RenderWidgetService } from '../../services/render-widget-service';
import { StyleGenerator } from '../styling/style-generator.service';
import { StylingConfig } from '../styling/styling-config';
import { Tracer } from '@progress/sitefinity-nextjs-sdk/diagnostics/empty';
const ColumnNamePrefix = 'Column';
const sectionKey = 'Section';
export async function Section(props) {
const { span, ctx } = Tracer.traceWidget(props, true);
props.model.Properties.ColumnsCount = props.model.Properties.ColumnsCount || 1;
props.model.Properties.ColumnProportionsInfo = props.model.Properties.ColumnProportionsInfo || ['12'];
const columns = populateColumns(props);
const section = await populateSection(props.model.Properties, props.requestContext);
const labels = props.model.Properties.Labels;
if (labels && labels['Section'] && labels['Section'].Label) {
props.model.Caption = labels['Section'].Label;
}
const dataAttributes = htmlAttributes(props);
section.Attributes = Object.assign(section.Attributes, dataAttributes);
const TagName = (props.model.Properties.TagName || 'section');
return (_jsxs(_Fragment, { children: [_jsxs(TagName, { ...section.Attributes, style: section.Style, children: [section.ShowVideo && section.VideoUrl &&
_jsx("div", { className: "sc-video__wrapper", children: _jsx("video", { className: "sc-video__element", autoPlay: true, muted: true, loop: true, children: _jsx("source", { src: section.VideoUrl }) }) }), columns.map((x, i) => {
return (_jsx("div", { ...x.Attributes, style: x.Style, children: x.Children.map(y => {
return RenderWidgetService.createComponent(y.model, props.requestContext, ctx);
}) }, i));
})] }), Tracer.endSpan(span)] }));
}
function populateColumns(context) {
let columns = [];
const properties = context.model.Properties;
for (let i = 0; i < properties.ColumnsCount; i++) {
let currentName = `${ColumnNamePrefix}${i + 1}`;
const classAttribute = `col-md-${properties.ColumnProportionsInfo[i]}`;
const classAttributes = [classAttribute];
let children = [];
if (context.model.Children) {
children = context.model.Children.filter(x => x.PlaceHolder === currentName).map((x => {
let ret = {
model: x,
metadata: getMinimumMetadata(RenderWidgetService.widgetRegistry.widgets[x.Name], context.requestContext.isEdit),
requestContext: context.requestContext
};
return ret;
}));
}
const column = {
Attributes: {},
Children: children
};
if (context.requestContext.isEdit) {
column.Attributes['data-sfcontainer'] = currentName;
if (properties.Labels && properties.Labels.hasOwnProperty(currentName)) {
const currentTitle = properties.Labels[currentName].Label;
column.Attributes['data-sfplaceholderlabel'] = currentTitle;
}
}
if (properties.Attributes && properties.Attributes.hasOwnProperty(currentName)) {
properties.Attributes[currentName].forEach((attribute) => {
column.Attributes[attribute.Key] = attribute.Value;
});
}
if (properties.ColumnsBackground && properties.ColumnsBackground.hasOwnProperty(currentName)) {
const backgroundStyle = properties.ColumnsBackground[currentName];
if (backgroundStyle.BackgroundType === 'Color') {
column.Style = { '--sf-background-color': `${backgroundStyle.Color}` };
}
}
if (properties.ColumnsPadding && properties.ColumnsPadding.hasOwnProperty(currentName)) {
const columnPadding = properties.ColumnsPadding[currentName];
const paddings = StyleGenerator.getPaddingClasses(columnPadding);
if (paddings) {
column.Attributes['className'] = paddings;
classAttributes.push(paddings);
}
}
if (properties.CustomCssClass && properties.CustomCssClass.hasOwnProperty(currentName)) {
const columnCssClass = properties.CustomCssClass[currentName];
if (columnCssClass && columnCssClass.Class) {
classAttributes.push(columnCssClass.Class);
}
}
if (column.Attributes['className']) {
classAttributes.push(column.Attributes['className']);
}
column.Attributes['className'] = classAttributes.filter(x => x).join(' ');
columns.push(column);
}
return columns;
}
function populateSection(properties, requestContext) {
const sectionObject = {
Attributes: {}
};
let attributes = properties.Attributes;
if (attributes && attributes.hasOwnProperty(sectionKey)) {
attributes[sectionKey].forEach((attribute) => {
sectionObject.Attributes[attribute.Key] = attribute.Value;
});
}
const sectionClasses = ['row'];
if (properties.SectionPadding) {
const paddingClasses = StyleGenerator.getPaddingClasses(properties.SectionPadding);
sectionClasses.push(paddingClasses);
}
if (properties.SectionMargin) {
const marginClasses = StyleGenerator.getMarginClasses(properties.SectionMargin);
sectionClasses.push(marginClasses);
}
if (properties.CustomCssClass && properties.CustomCssClass.hasOwnProperty(sectionKey)) {
sectionClasses.push(properties.CustomCssClass[sectionKey].Class);
}
if (!properties.SectionBackground) {
sectionObject.Attributes['className'] = sectionClasses.filter(x => x).join(' ');
return Promise.resolve(sectionObject);
}
if (properties.SectionBackground.BackgroundType === 'Video') {
if (properties.SectionBackground.VideoItem && properties.SectionBackground.VideoItem.Id) {
sectionClasses.push(StylingConfig.VideoBackgroundClass);
let itemArgs = {
type: RestSdkTypes.Video,
id: properties.SectionBackground.VideoItem.Id,
provider: properties.SectionBackground.VideoItem.Provider,
culture: requestContext.culture
};
return RestClient.getItemWithFallback(itemArgs).then((video) => {
sectionObject.ShowVideo = true;
const videoUrl = `${RootUrlService.getClientCmsUrl()}${video.Url}`;
sectionObject.VideoUrl = videoUrl;
sectionObject.Attributes['className'] = sectionClasses.filter(x => x).join(' ');
return sectionObject;
});
}
}
else if (properties.SectionBackground.BackgroundType === 'Image' && properties.SectionBackground.ImageItem && properties.SectionBackground.ImageItem.Id) {
const imagePosition = properties.SectionBackground.ImagePosition || 'Fill';
sectionClasses.push(StylingConfig.ImageBackgroundClass);
let itemArgs = {
type: RestSdkTypes.Image,
id: properties.SectionBackground.ImageItem.Id,
provider: properties.SectionBackground.ImageItem.Provider,
culture: requestContext.culture
};
return RestClient.getItemWithFallback(itemArgs).then((image) => {
let style = {};
switch (imagePosition) {
case 'Fill':
style['--sf-background-size'] = '100% auto';
break;
case 'Center':
style['--sf-background-position'] = 'center';
break;
default:
style['--sf-background-size'] = 'cover';
break;
}
const imageUrl = isAbsoluteUrl(image.Url) ? image.Url : `${RootUrlService.getClientCmsUrl()}${image.Url}`;
style['--sf-background-image'] = `url(${imageUrl})`;
sectionObject.Style = style;
sectionObject.Attributes['className'] = sectionClasses.filter(x => x).join(' ');
return sectionObject;
});
}
else if (properties.SectionBackground.BackgroundType === 'Color' && properties.SectionBackground.Color) {
sectionObject.Style = { '--sf-background-color': `${properties.SectionBackground.Color}` };
}
sectionObject.Attributes['className'] = sectionClasses.filter(x => x).join(' ');
return Promise.resolve(sectionObject);
}