@mikezimm/fps-library-v2/lib/components/molecules/FullPageBackGround/PropPane/FPSSlickBackgroundGroup.js

Library of reusable typescript/javascript functions, interfaces and constants

/**
 * CodeAnalizerComment: Updated 5 imports on 2024-09-22 14:49:52
 * Update:: import { IPropertyPaneGroup } to '@mikezimm/fps-core-v7/lib/types/@msft/1.15.2/sp-property-pane;'
 * Update:: import { IPropertyPaneDropdownProps } to '@mikezimm/fps-core-v7/lib/types/@msft/1.15.2/sp-property-pane;'
 * Update:: import { IPropertyPaneField } to '@mikezimm/fps-core-v7/lib/types/@msft/1.15.2/sp-property-pane;'
 * Update:: import { IPropertyPaneDropdownOption } to '@mikezimm/fps-core-v7/lib/types/@msft/1.15.2/sp-property-pane;'
 * Update:: import { IThisFPSWebPartClass } to '@mikezimm/fps-core-v7/lib/banner/FPSWebPartClass/IThisFPSWebPartClass1152;'

 */
/**
 * CodeAnalizerComment: Updated 6 imports on 2024-09-21 23:07:24
 * Update:: import { IPropertyPaneDropdownProps } to '@mikezimm/fps-core-v7/lib/types/@msft/1.15.2/sp-property-pane;'
 * Update:: import { IPropertyPaneDropdownOption } to '@mikezimm/fps-core-v7/lib/types/@msft/1.15.2/sp-property-pane;'
 * Update:: import { FullPageImageFitStrings } to '@mikezimm/fps-core-v7/lib/components/molecules/FullPageBackGround/interfaces/IFPSPageBGWPProps;'
 * Update:: import { FullPageOverlayColors } to '@mikezimm/fps-core-v7/lib/components/molecules/FullPageBackGround/interfaces/IFPSPageBGWPProps;'
 * Update:: import { IFPSPageBGWPProps } to '@mikezimm/fps-core-v7/lib/components/molecules/FullPageBackGround/interfaces/IFPSPageBGWPProps;'
 * Update:: import { IThisFPSWebPartClass } to '@mikezimm/fps-core-v7/lib/banner/FPSWebPartClass/IThisFPSWebPartClass1152;'

 */
import { PropertyPaneTextField, PropertyPaneDropdown, PropertyPaneToggle, PropertyPaneLabel, PropertyPaneSlider, } from '@microsoft/sp-property-pane';
import { FullPageImageFitStrings, FullPageOverlayColors, } from '@mikezimm/fps-core-v7/lib/components/molecules/FullPageBackGround/interfaces/IFPSPageBGWPProps';
const FPSSlickFullPageOverlayColorChoices = FullPageOverlayColors.map((key, idx) => { return { index: idx, key: key, text: key }; });
const FPSSlickFullPageImageFitChoices = FullPageImageFitStrings.map((key, idx) => { return { index: idx, key: key, text: key }; });
/**
 * FPSBanner3BasicGroup builds FPS Banner Basics Prop Pane Group: showBanner, bannerTitle, infoElementChoice, infoElementText,
 * @param forceBanner
 * @param modifyBannerTitle
 * @param showBanner
 * @param infoElementText
 * @returns
 */
// eslint-disable-next-line @typescript-eslint/no-explicit-any
export function FPSSlickBackgroundGroup(thisWPClass) {
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    const thisProps = thisWPClass.properties;
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    const groupFields = [];
    if (thisWPClass._allowFullPageBG === false) {
        groupFields.push(PropertyPaneLabel('nothing', {
            text: 'This set of options is NOT available in webpart'
        }));
    }
    else {
        const { fullPageImage, fullPageOverlayOpacity } = thisProps;
        const hasFullCanvasBG = fullPageImage ? true : false;
        groupFields.push(PropertyPaneTextField(`fullPageImage`, {
            label: 'Full Page Image url',
            description: `Single picture spanning all sections`,
        }));
        groupFields.push(PropertyPaneSlider(`fullPageOverlayOpacity`, {
            label: `Image Overlay Opacity - make Image lighter or darker`,
            min: 0,
            max: 1,
            step: .1,
            // eslint-disable-next-line @typescript-eslint/no-explicit-any
            value: thisProps[`fullPageOverlayOpacity`],
        }));
        const hasOverlayOpacity = fullPageOverlayOpacity > 0 ? true : false;
        groupFields.push(PropertyPaneDropdown('fullPageOverlayColor', {
            label: 'Overlay color - When opacity > 0',
            options: FPSSlickFullPageOverlayColorChoices,
            disabled: hasOverlayOpacity === true ? false : true,
        }));
        groupFields.push(PropertyPaneTextField(`fullPageImageFilter`, {
            label: 'CSS Image Filter - for Full Page Image',
            description: `example:  blur(5px) sepia(100%) - will both blur and colorize`,
            disabled: hasFullCanvasBG === true ? false : true,
        }));
        // whiteRefreshTip
        groupFields.push(PropertyPaneToggle('defaultWhiteText', {
            label: `Force default text color to White`,
            onText: `When fullPageImage is dark`,
            offText: `Off`
        }));
        groupFields.push(PropertyPaneTextField(`whiteRefreshTip`, {
            label: 'White text refresh label',
            description: `Tip to refresh White Font colors like:  Refresh White Text`,
            disabled: thisProps.defaultWhiteText === true ? false : true,
        }));
        // Show defaultWPBack in this section when NOT on SlickSections web part
        if (thisWPClass._allowFullPageBG === 'Auto') {
            groupFields.push(PropertyPaneTextField(`defaultWPBack`, {
                label: 'Default Webparts Background-Color css',
                description: 'Applies to all sections except where you specify differently',
            }));
        }
        // https://github.com/mikezimm/Slick-Sections/issues/107
        groupFields.push(PropertyPaneToggle('defaultWPBordRad', {
            label: `Add Border Radius to all Webparts`,
            onText: `Add Radius`,
            offText: `Default`
        }));
        groupFields.push(PropertyPaneDropdown('fullPageImageFit', {
            label: 'Image fit',
            options: FPSSlickFullPageImageFitChoices,
            disabled: hasFullCanvasBG === true ? false : true,
        }));
    }
    const propGroup = {
        groupName: `FPS Full Page Background Props`,
        isCollapsed: true,
        groupFields: groupFields
    };
    return propGroup;
}
//# sourceMappingURL=FPSSlickBackgroundGroup.js.map