@mikezimm/npmfunctions/src/Services/DOM/minimzeHeader.ts

Functions used in my SPFx webparts

import { IFPSWindowProps, } from './FPSInterfaces';
import { createFPSWindowProps, } from './FPSDocument';
 /**
  * This minimizes the header on site pages where you do not want the Page Title at the top. originally copied from Pivot Tiles
  * 
  * @param document 
  * @param minimize 
  * @param alertError 
  * @param consoleResult 
  */
  export function minimizeHeader ( document: any, minimize : boolean, alertError: boolean = true, consoleResult: boolean = false  ) {

    let fpsWindowProps: IFPSWindowProps = createFPSWindowProps();

    //If this was already attempted, then exit
    if ( fpsWindowProps.header.attempted === true ) { return; }
    else if ( minimize !== true ) { return; }
    else { fpsWindowProps.header.attempted = true; }

    let height: any = minimize === true ? '0px' : null;

    const divs: any[] = document.querySelectorAll('[data-automation-id="pageHeader"]');
    console.log( "divs.length: ", divs.length );

    //inspiration from:  https://reactgo.com/select-element-data-attribute-js/
    divs.forEach((el: any)=>{
      try {
        if ( el.style ){
          el.style.height = height;
        } else {
          el.style = { height: height};
        }
        if ( consoleResult === true ) {
            console.log('minimizeHeader:  set minimize to ', minimize);
        }
        fpsWindowProps.header.success ++;

      } catch (e) {
          if ( alertError === true ) {
              alert('minimizeHeader:  Could not find element with data-automation-id="pageHeader"');
          }
          console.log('minimizeHeader:  Could not find element with data-automation-id="pageHeader"');
          fpsWindowProps.header.errors ++;
      }
    });

  }