@mikezimm/npmfunctions/src/WebPartFunctions/MainWebPartStyleFunctions.ts

Functions used in my SPFx webparts

import { DisplayMode, Version } from '@microsoft/sp-core-library';
import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base';

import { setPageFormatting, } from '../Services/DOM/FPSFormatFunctions';

// import { IFPSPage, } from '../Services/DOM/FPSInterfaces';
// import { createFPSWindowProps, initializeFPSSection, initializeFPSPage, webpartInstance, initializeMinimalStyle } from '../Services/DOM/FPSDocument';
// import { IFPSWindowProps, IFPSSection, IFPSSectionStyle } from '../Services/DOM/FPSInterfaces';
import { initializeFPSSection, initializeFPSPage, initializeMinimalStyle } from '../Services/DOM/FPSDocument';
import { IFPSSectionStyle } from '../Services/DOM/FPSInterfaces';
import { setSectionStyles } from '../Services/DOM/setAllSectionStyles';
import { minimizeHeader } from '../Services/DOM/minimzeHeader';
import { minimizeToolbar } from '../Services/DOM/minimzeToolbar';
import { minimizeQuickLaunch } from '../Services/DOM/quickLaunch';
// import { getUrlVars } from '../Services/Logging/LogFunctions';

// import { replaceHandleBars } from '../Services/Strings/handleBars';
import { applyHeadingCSS, IMinHeadingStyleProps } from '../HeadingCSS/FPSHeadingFunctions';


// import { FPSApplyHeadingCSS, FPSApplyTagCSSAndStyles, FPSApplyHeadingStyle } from '../components/HeadingCSS/FPSTagFunctions';
// import { HTMLRegEx, IHTMLRegExKeys } from '../../../Service/htmlTags';

import { IMinWPBannerProps } from '../HelpPanelOnNPM/onNpm/BannerInterface';

  /***
 *    d88888b d8888b. .d8888.       .d88b.  d8888b. d888888b d888888b  .d88b.  d8b   db .d8888. 
 *    88'     88  `8D 88'  YP      .8P  Y8. 88  `8D `~~88~~'   `88'   .8P  Y8. 888o  88 88'  YP 
 *    88ooo   88oodD' `8bo.        88    88 88oodD'    88       88    88    88 88V8o 88 `8bo.   
 *    88~~~   88~~~     `Y8b.      88    88 88~~~      88       88    88    88 88 V8o88   `Y8b. 
 *    88      88      db   8D      `8b  d8' 88         88      .88.   `8b  d8' 88  V888 db   8D 
 *    YP      88      `8888Y'       `Y88P'  88         YP    Y888888P  `Y88P'  VP   V8P `8888Y' 
 *                                                                                              
 *                                                                                              
 */

  /**
   * WARNING:  thisWP is the 'this' in the main web part class of type:  BaseClientSideWebPart
   * It expects certain properties to be included on that web part including

   */

export interface IFPSBaseClientSideWebPart extends BaseClientSideWebPart<any> {
    minQuickLaunch: boolean;
    minHideToolbar: boolean;
    wpInstanceID: any;
    urlParameters: any;
    // fpsPageDone: boolean | null;  // Deprecating - No longer needed with more modern styling options in updateSectionStyles.
    // fpsPageArray: any[];  // Deprecating - No longer needed with more modern styling options in updateSectionStyles.
    displayMode: DisplayMode;

}

interface IRenderCustomStyles {
  wpInstanceID: any;
  domElement:  HTMLElement;
  wpProps: IMinWPBannerProps;
  // fpsPageDone: boolean | null;  // Deprecating - No longer needed with more modern styling options in updateSectionStyles.
  // fpsPageArray: any[];  // Deprecating - No longer needed with more modern styling options in updateSectionStyles.
  displayMode: DisplayMode;
  // minHideToolbar: boolean;  //Should not be needed, using web part props for value and local function for url 
  // hideToolbar: boolean;  //Should not be needed, using web part props for value and local function for url 
  doHeadings: boolean;
}

/**
 * renderCustomStyles is intended for one-time style changes during onInit.  Not dynamic changes
 * NOT for things like PinMe or Expando which the user changes on the fly
 * 
 * @param wpInstanceID 
 * @param domElement 
 * @param wpProps 
//  * @param fpsPageDone   // Deprecating - No longer needed with more modern styling options in updateSectionStyles.
//  * @param fpsPageArray  // Deprecating - No longer needed with more modern styling options in updateSectionStyles.
 * @param displayMode 
//  * @param minHideToolbar //Should not be needed, using web part props for value and local function for url param
//  * @param hideToolbar  //Should not be needed, using web part props for value and local function for url 
 * @param doHeadings 
 */

export function  renderCustomStyles( sty: IRenderCustomStyles ) {

  const TempHeadingStyleProps: IMinHeadingStyleProps = sty.wpProps as any;
    if ( sty.doHeadings === true ) applyHeadingCSS( TempHeadingStyleProps );

    //Used with FPS Options Functions
    setQuickLaunch( sty.wpProps.quickLaunchHide );
    minimizeHeader( document, sty.wpProps.pageHeaderHide, false, true );
    // Deprecating - No longer needed with more modern styling options in updateSectionStyles.
    // setThisPageFormatting( sty.wpInstanceID, sty.domElement, sty.wpProps.fpsPageStyle, sty.fpsPageDone, sty.fpsPageArray );
    setToolbar( sty.displayMode, sty.wpInstanceID, sty.wpProps.toolBarHide );
    updateSectionStyles( sty.wpInstanceID, sty.wpProps );
}

  /**
   * Used with FPS Options Functions
   * @param quickLaunchHide 
   */
export function  setQuickLaunch( quickLaunchHide: boolean ) {
    //specifically not undefined or null in case it is not yet preset.
    if ( quickLaunchHide === true || quickLaunchHide === false ) { 
      minimizeQuickLaunch( document , quickLaunchHide );
    }
}

  /**
   * Used with FPS Options Functions
   * @param quickLaunchHide 
   */
export function  setToolbar( displayMode: DisplayMode, wpInstanceID: any, hideToolbar: boolean ) {
  const urlParameters = new URLSearchParams( window.location.href );

  if( displayMode == DisplayMode.Read && urlParameters.get('tool') !== 'true' ){
    let value = hideToolbar === true ? 'none' : null;
    let toolBarStyle: IFPSSectionStyle = initializeMinimalStyle( 'Miminze Toolbar', wpInstanceID, 'display', value );
    minimizeToolbar( document, toolBarStyle, false, true );
  }
}

  /**
   * Used with FPS Options Functions
   * @param fpsPageStyle 
   */
export function  setThisPageFormatting( wpInstanceID: any, domElement: HTMLElement, fpsPageStyle: string, fpsPageDone: boolean | null, fpsPageArray: any[] ) {

    //fpsPage should be IFPSPage
    let fpsPage: any = initializeFPSPage( wpInstanceID, fpsPageDone, fpsPageStyle, fpsPageArray  );
    fpsPage = setPageFormatting( domElement, fpsPage );
    fpsPageArray = fpsPage.Array;
    fpsPageDone = fpsPage.do;

}


export function  updateSectionStyles( wpInstanceID: any, wpProps: IMinWPBannerProps, ) {

    let allSectionMaxWidth = wpProps.allSectionMaxWidthEnable !== true ? null : wpProps.allSectionMaxWidth;
    let allSectionMargin = wpProps.allSectionMarginEnable !== true ? null : wpProps.allSectionMargin;
    let sectionStyles = initializeFPSSection( wpInstanceID, allSectionMaxWidth, allSectionMargin,  );

    setSectionStyles( document, sectionStyles, true, true );

}