@progress/sitefinity-nextjs-sdk/widgets/image/image.view.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 { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
/* eslint-disable @next/next/no-img-element */
import { ImageClickAction } from './interfaces/image-click-action';
import { ImageDisplayMode } from './interfaces/image-display-mode';
import { StyleGenerator } from '../styling/style-generator.service';
import { generateAnchorAttrsFromLink, getCustomAttributes, htmlAttributes } from '../../editor/widget-framework/attributes';
const imageWrapperClass = 'd-inline-block';
export function ImageDefaultView(props) {
    if (!props.item) {
        return (_jsx(_Fragment, { children: _jsx("div", { ...props.attributes }) }));
    }
    let anchorClass = 'd-inline-block';
    if (props.widgetContext.model.Properties.CssClass) {
        anchorClass = `${'d-inline-block'} ${props.widgetContext.model.Properties.CssClass}`;
    }
    if (props.clickAction === ImageClickAction.OpenOriginalSize) {
        return (_jsx("a", { href: props.item.Url, className: anchorClass, ...props.attributes, children: renderImageTag(props, {}) }));
    }
    else if (props.clickAction === ImageClickAction.OpenLink && !!props.widgetContext.model.Properties.ActionLink?.href) {
        const anchorAttributes = generateAnchorAttrsFromLink(props.widgetContext.model.Properties.ActionLink, anchorClass);
        return (_jsx("a", { ...anchorAttributes, ...props.attributes, children: renderImageTag(props, {}) }));
    }
    else {
        let viewPropsCssClass = props.widgetContext.model.Properties.CssClass;
        if (props.widgetContext.model.Properties.Margins) {
            let margins = StyleGenerator.getMarginClasses(props.widgetContext.model.Properties.Margins)?.trim();
            if (margins) {
                if (viewPropsCssClass) {
                    viewPropsCssClass = `${viewPropsCssClass} ${margins}`;
                }
                else {
                    viewPropsCssClass = margins;
                }
            }
        }
        const dataAttributes = htmlAttributes(props.widgetContext);
        return (_jsx(_Fragment, { children: renderImageTag(props, dataAttributes, viewPropsCssClass) }));
    }
}
function renderImageTag(imageModel, dataAttributes, classAttributeValue) {
    let imageClassName = imageModel.fitToContainer ? 'img-fluid' : undefined;
    let imageCustomAttributes = getCustomAttributes(imageModel.widgetContext.model.Properties.Attributes, 'Image');
    const imageAltAttribute = imageModel.alternativeText || undefined;
    if (imageModel.imageSize === ImageDisplayMode.Responsive) {
        let pictureWrapperClass = imageWrapperClass;
        if (classAttributeValue) {
            pictureWrapperClass = `${pictureWrapperClass} ${classAttributeValue}`;
        }
        return (_jsxs("picture", { className: pictureWrapperClass, ...dataAttributes, children: [imageModel.thumbnails.map((thumbnail, idx) => {
                    const sourceWidth = imageModel.width && thumbnail.Width !== imageModel.width ? thumbnail.Width : undefined;
                    const sourceHeight = imageModel.height && thumbnail.Height !== imageModel.height ? thumbnail.Height : undefined;
                    if (sourceWidth && sourceHeight) {
                        return (_jsx("source", { media: `(max-width: ${thumbnail.Width}px)`, srcSet: thumbnail.Url, type: thumbnail.MimeType, width: sourceWidth, height: sourceHeight }, idx));
                    }
                }), renderImage(imageCustomAttributes, imageClassName, imageModel.selectedImageUrl, imageModel.title, imageAltAttribute)] }));
    }
    if (classAttributeValue) {
        if (imageClassName) {
            imageClassName = `${imageClassName} ${classAttributeValue}`;
        }
        else {
            imageClassName = classAttributeValue;
        }
    }
    if (imageModel.imageSize === ImageDisplayMode.CustomSize || imageModel.imageSize === ImageDisplayMode.Thumbnail) {
        if (imageModel.width) {
            imageCustomAttributes['width'] = imageModel.width.toString();
        }
        if (imageModel.height) {
            imageCustomAttributes['height'] = imageModel.height.toString();
        }
    }
    return (_jsx("span", { ...dataAttributes, children: renderImage(imageCustomAttributes, imageClassName, imageModel.selectedImageUrl, imageModel.title, imageAltAttribute) }));
}
function renderImage(attributes, className, src, title, alt) {
    return (_jsx("img", { ...attributes, loading: "lazy", className: className, src: src, title: title, alt: alt }));
}