@progress/sitefinity-nextjs-sdk/editor/widget-framework/attributes.js

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.

import { SanitizerService } from '../../services/sanitizer-service';
export function htmlAttributes(widgetContext, error = undefined) {
    if (!widgetContext.requestContext.isEdit) {
        return {};
    }
    const model = widgetContext.model;
    const metadata = widgetContext.metadata;
    const editorMetadata = metadata?.editorMetadata;
    const attributes = {
        'data-sfname': model.Name,
        'data-sftitle': SanitizerService.getInstance().sanitizeHtml(model.Caption || editorMetadata?.Title || model.Name),
        'data-sfid': model.Id,
        'data-sfisorphaned': model.Orphaned ? 'true' : 'false',
        'data-sficonname': editorMetadata?.IconName,
        'data-sficonurl': editorMetadata?.IconUrl
    };
    attributes['data-sfisemptyvisualhidden'] = false;
    attributes['data-sfisempty'] = false;
    attributes['draggable'] = true;
    if (editorMetadata) {
        if (editorMetadata.EmptyIcon) {
            attributes['data-sfemptyicon'] = editorMetadata.EmptyIcon;
        }
        if (editorMetadata.EmptyIconAction) {
            attributes['data-sfemptyiconaction'] = editorMetadata.EmptyIconAction;
        }
        if (editorMetadata.EmptyIconText) {
            attributes['data-sfemptyicontext'] = editorMetadata.EmptyIconText;
        }
        if (editorMetadata.HideEmptyVisual) {
            attributes['data-sfisemptyvisualhidden'] = editorMetadata.HideEmptyVisual;
        }
        if (editorMetadata.HasQuickEditOperation) {
            attributes['data-sfhasquickeditoperation'] = true;
        }
        if (editorMetadata.IsEmptyEntity) {
            attributes['data-sfisemptyentity'] = true;
        }
        attributes['data-sfiscontentwidget'] = editorMetadata.Category !== 'Layout & Presets' && editorMetadata.Category !== 'Layout';
    }
    if (error) {
        attributes['data-sferror'] = error;
    }
    return attributes;
}
export function setHideEmptyVisual(attributes, value) {
    attributes['data-sfisemptyvisualhidden'] = value;
}
export function setWarning(attributes, warning) {
    attributes['data-sfwarning'] = warning;
}
export const generateAnchorAttrsFromLink = (linkModel, classList = '') => {
    if (!linkModel) {
        return null;
    }
    let href = linkModel.href || '';
    if (href.indexOf('?') < 0 && linkModel.queryParams) {
        const queryParamsEncoded = linkModel.queryParams
            .split('&')
            .map(x => {
            return x.split('=')
                .map(x => {
                if (x) {
                    return encodeURIComponent(x);
                }
                else {
                    return x;
                }
            });
        }).map(x => x.join('=')).join('&');
        href += `?${queryParamsEncoded}`;
    }
    if (href.indexOf('#') < 0 && linkModel.anchor) {
        href += `#${linkModel.anchor}`;
    }
    let attributes = {};
    attributes.href = href;
    if (linkModel.target) {
        attributes.target = linkModel.target;
    }
    if (linkModel.tooltip) {
        attributes.title = linkModel.tooltip;
    }
    if (linkModel.classList?.length) {
        classList = `${classList} ${linkModel.classList.join(' ')}`;
    }
    if (!!classList.trim()) {
        attributes.className = classList;
    }
    if (linkModel.attributes) {
        attributes = { ...attributes, ...linkModel.attributes };
    }
    return attributes;
};
export const getCustomAttributes = (attributes, part) => {
    if (!attributes || !attributes[part]) {
        return {};
    }
    let returnVal = {};
    attributes[part].forEach((attribute) => {
        returnVal[attribute.Key] = attribute.Value;
    });
    return returnVal;
};