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

Functions used in my SPFx webparts

import { findParentElementLikeThis } from './domSearch';

import { getStringArrayFromString } from '../../Services/Strings/stringServices';

import { IFPSPage } from './FPSInterfaces';

//This is from old page styling before newer modern styling.
export function setPageFormatting( domElement: HTMLElement | any, fpsPage: IFPSPage ) {

// fpsPage.Style = 'this.section.maxWidth=100%;next.section.maxWidth=100%';
// fpsPage.Style = 'this.webpart.margin=0px 0px;next.webpart.margin=0px 0px;this.section.maxWidth=100%;next.section.maxWidth=100%';

if ( fpsPage.attempted === true ) { return fpsPage; }
if ( fpsPage.Style === '' || fpsPage.Style === null || fpsPage.Style === undefined ) { fpsPage.attempted = true; return fpsPage; }

if ( fpsPage.Array === null ) {
    fpsPage.Array = getStringArrayFromString ( fpsPage.Style, ';or,', true, null, true );
}
if ( fpsPage.Array === [] ) {
    fpsPage.Array = fpsPage.Array;
    fpsPage.attempted = true;
    return fpsPage;

} else {
        try {

        let thisCanvasSection = findParentElementLikeThis( domElement, "classList", 'CanvasSection', 10 , 'contains');

        fpsPage.Array.map( ( setting: any ) => {
            if ( setting ) {
            let thisSetting = setting.split('=');
            if ( thisSetting.length !== 2 ) {
                console.log('setting incorrect: ', setting );
            } else {
                let changeEle = null;
                let doThis = thisSetting[0].split('.');

                //Get correct section element
                if ( doThis[1] === 'section' ) {
                    if ( doThis[0] === 'this' ) {
                        changeEle = thisCanvasSection.parentElement;
                    } else if ( doThis[0] === 'next' ) {
                        changeEle = thisCanvasSection.parentElement.parentElement.nextElementSibling.firstChild;
                    }
                } else if ( ['control','webpart','controlzone'].indexOf( doThis[1] ) >= 0 ) {
                    if ( doThis[0] === 'this' ) {
                        changeEle = domElement.parentElement.parentElement.parentElement;
                    } else if ( doThis[0] === 'next' ) {
                        changeEle = domElement.parentElement.nextElementSibling;
                        if ( changeEle === null ) { //Get webpart in next section
                        changeEle = thisCanvasSection.parentElement.parentElement.nextElementSibling.firstChild.firstChild.firstChild;
                        }
                    }
                }

                //Sets property of target element
                if ( changeEle ) { changeEle.style[doThis[2]] = thisSetting[1]; }
                console.log('setPageFormatting',doThis, thisSetting[1] );
            }
            }
        });

        fpsPage.attempted = true;
        return fpsPage;

        } catch (e) {
            alert('Opps!  Your page formatting is not valid! ');

        }
    }
}


export function getWebpartWidth( domElement: HTMLElement | any, ) {

    try {
        return domElement.clientWidth;

    } catch (e) {
        console.log('could not find clientWidth of: ' , domElement );
        return -1;
    }

}