@mikezimm/fps-library-v2
Version:
Library of reusable typescript/javascript functions, interfaces and constants
210 lines (208 loc) • 12.1 kB
JavaScript
/**
* CodeAnalizerComment: Updated 1 imports on 2024-09-22 14:49:52
* Update:: import { IThisFPSWebPartClass } to '@mikezimm/fps-core-v7/lib/banner/FPSWebPartClass/IThisFPSWebPartClass1152;'
*/
/**
* CodeAnalizerComment: Updated 7 imports on 2024-09-21 23:07:24
* 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;'
* Update:: import { IPerformanceOp } to '@mikezimm/fps-core-v7/lib/components/molecules/Performance/IPerformance;'
* Update:: import { IStartPerformOp } to '@mikezimm/fps-core-v7/lib/components/molecules/Performance/IPerformanceSettings;'
* Update:: import { startPerformOpV2 } to '@mikezimm/fps-core-v7/lib/components/molecules/Performance/functions;'
* Update:: import { updatePerformanceEndV2 } to '@mikezimm/fps-core-v7/lib/components/molecules/Performance/functions;'
* Update:: import { check4This } to '@mikezimm/fps-core-v7/lib/logic/Links/CheckSearch;'
*/
// import { IThisFPSWebPartClass } from "@mikezimm/fps-library-v2/lib/banner/FPSWebPartClass/IThisFPSWebPartClass";
// import { IFpsSlickSectionsWebPartProps } from "../IFpsSlickSectionsWebPartProps";
// import { IPerformanceOp, check4This } from "../fpsReferences";
// import { startPerformOpV2, updatePerformanceEndV2 } from "@mikezimm/fps-library-v2/lib/components/molecules/Performance/functions";
// import { IStartPerformOp } from "@mikezimm/fps-library-v2/lib/components/molecules/Performance/IPerformanceSettings";
// import styles from '../components/FpsSlickSections.module.scss';
import { addCanvasBGImageComponent } from "./addCanvasBGImageComponent";
import { updateSectionCSS } from "./updateSectionCSS";
import { forceWebpartWhiteText } from "./forceWebpartWhiteText";
import { startPerformOpV2, updatePerformanceEndV2 } from '@mikezimm/fps-core-v7/lib/components/molecules/Performance/functions';
import { check4This } from '@mikezimm/fps-core-v7/lib/logic/Links/CheckSearch';
import { OOTBTitleSectionClass } from "@mikezimm/fps-core-v7/lib/logic/DOM/Search/tagParentSection";
import { Check4 } from '@mikezimm/fps-core-v7/lib/logic/Links/CheckSearch';
// import { IFPSFullPageImageFit } from "../PropPaneGroups/FPSSlickBackgroundGroup";
// require ('./quickLaunchStyles.css');
export function updateSectionBGStyles(op, thisWPClass) {
const performanceSettings = { label: op, updateMiliseconds: true, includeMsStr: true, op: op };
let renderOp = startPerformOpV2(performanceSettings);
let updates = 0;
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const webPartProps = thisWPClass.properties;
// updates = setQuickLaunchTransp( webPartProps, updates );
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const divs = Array.from(document.querySelectorAll('.CanvasZone'));
if (check4This(Check4.SetNormalColor) === true)
console.log("CanvasZone.length: ", divs.length);
const hasFullCanvasBG = webPartProps.fullPageImage ? true : false;
let sectionNo = -1; // ADD FOR SLICK SECTION TITLE WEBPART https://github.com/mikezimm/Slick-Sections/issues/98
divs.map((thisDiv) => {
let isTitleSection = false;
// ADD FOR SLICK SECTION TITLE WEBPART https://github.com/mikezimm/Slick-Sections/issues/98
if (thisDiv.classList.contains(OOTBTitleSectionClass)) {
// https://github.com/mikezimm/Slick-Sections/issues/89
// Do nothing with vertical sections...
isTitleSection = true;
}
else {
sectionNo++;
}
// ADD FOR SLICK SECTION TITLE WEBPART https://github.com/mikezimm/Slick-Sections/issues/98
if (isTitleSection !== true) {
const sectionEnabled = webPartProps[`sectEnable${sectionNo + 1}`] === true ? true : false;
if (sectionEnabled === true || hasFullCanvasBG === true) {
if (sectionEnabled)
updates = addSectionImage(webPartProps, sectionNo, thisDiv, updates);
if (sectionEnabled)
updates = addSectionStyles(webPartProps, sectionNo, thisDiv, updates);
else if (hasFullCanvasBG === true) {
updateSectionCSS(thisDiv, `backgroundColor`, `transparent`);
updates++;
}
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const thisWPClassAny = thisWPClass;
if (sectionEnabled)
updates = addWebPartBackground(webPartProps, sectionNo, thisDiv, updates, thisWPClassAny.context);
if (sectionEnabled)
updates = addWebPartPadding(webPartProps, sectionNo, thisDiv, updates);
if (sectionEnabled || webPartProps.defaultWhiteText)
updates = forceWhiteText(webPartProps, sectionNo, thisDiv, updates);
}
/**
* https://github.com/fps-solutions/LinkUp/issues/82
* Added this loop to set title section background style to transparent for when
* you have the full page BG Image enabled
*/
}
else if (hasFullCanvasBG === true) {
updateSectionCSS(thisDiv, `backgroundColor`, `transparent`);
updates++;
}
});
// https://github.com/mikezimm/drilldown7/issues/352
// https://github.com/mikezimm/pivottiles7/issues/456 - Does not run and white out BG Image if none is in props
updates = !webPartProps.fullPageImage ? updates : addCanvasBGImageComponent(webPartProps, updates, thisWPClass._isSPA);
renderOp = updatePerformanceEndV2({ op: renderOp, updateMiliseconds: true, count: updates });
return renderOp;
}
// eslint-disable-next-line @typescript-eslint/no-explicit-any
export function addWebPartBackground(webPartProps, sectionNo, CanvasZone, updates, context) {
// Added check if sectionNo < 0 it will always add the default
const WPBG = sectionNo > -1 && webPartProps[`sectWPBack${sectionNo + 1}`] ? webPartProps[`sectWPBack${sectionNo + 1}`] :
webPartProps.defaultWPBack ? webPartProps.defaultWPBack : ``;
// https://github.com/mikezimm/Slick-Sections/issues/107
const WPBR = sectionNo > -1 && webPartProps.defaultWPBordRad ? true : false;
if (WPBG || WPBR) {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const webparts = Array.from(CanvasZone.querySelectorAll('.ControlZone'));
if (check4This(Check4.SetNormalColor) === true)
console.log("CanvasControls.length: ", webparts.length);
webparts.map((thisWP, wpNumb) => {
// Added check if !context it will always assume it's not the current web part
const isCurrentWebPart = context && context._instanceId === thisWP.id ? true : false;
if (WPBG) { // modified this when: https://github.com/mikezimm/Slick-Sections/issues/107
if (isCurrentWebPart === true && webPartProps.enableTabs === false) {
// Added this to remove any padding and margin from this web part if tabs are not enabled
// because background color will make padding visible if it is set on the web part props
updateSectionCSS(thisWP, `padding`, '0px');
updateSectionCSS(thisWP, `margin`, '0px');
updates++;
}
else {
updateSectionCSS(thisWP, `background`, WPBG);
updates++;
}
}
// https://github.com/mikezimm/Slick-Sections/issues/107
updateSectionCSS(thisWP, `border-radius`, WPBR ? '20px' : null);
updateSectionCSS(thisWP, `padding`, WPBR ? '20px' : null);
});
}
return updates;
}
// eslint-disable-next-line @typescript-eslint/no-explicit-any
export function addSectionStyles(webPartProps, sectionNo, CanvasZone, updates) {
if (webPartProps[`sectBgColor${sectionNo + 1}`]) {
updateSectionCSS(CanvasZone, `backgroundColor`, webPartProps[`sectBgColor${sectionNo + 1}`]);
updates++;
}
else if (webPartProps.fullPageImage) {
updateSectionCSS(CanvasZone, `backgroundColor`, `transparent`);
updates++;
}
if (webPartProps[`sectHeight${sectionNo + 1}`]) {
updateSectionCSS(CanvasZone, `minHeight`, webPartProps[`sectHeight${sectionNo + 1}`]);
updates++;
}
if (webPartProps[`sectOpacity${sectionNo + 1}`]) {
updateSectionCSS(CanvasZone, `opacity`, webPartProps[`sectOpacity${sectionNo + 1}`]);
updates++;
}
if (webPartProps[`sectMargBot${sectionNo + 1}`]) {
updateSectionCSS(CanvasZone, `marginBottom`, `${webPartProps[`sectMargBot${sectionNo + 1}`]}px`);
updates++;
}
return updates;
}
// eslint-disable-next-line @typescript-eslint/no-explicit-any
export function addSectionImage(webPartProps, sectionNo, CanvasZone, updates) {
const originalBgImage = webPartProps[`sectBgImage${sectionNo + 1}`];
if (originalBgImage) {
CanvasZone.classList.add('baseSlickBackground');
if (sectionNo > 0)
CanvasZone.classList.add('targetedSlickSection');
const imageProp = originalBgImage.indexOf('http') === 0 ? `url("${originalBgImage}")` : originalBgImage;
updateSectionCSS(CanvasZone, `backgroundImage`, imageProp);
updates += 5;
}
return updates;
}
// eslint-disable-next-line @typescript-eslint/no-explicit-any
export function addWebPartPadding(webPartProps, sectionNo, CanvasZone, updates) {
const WPPadding = webPartProps[`sectWPPad${sectionNo + 1}`] ? webPartProps[`sectWPPad${sectionNo + 1}`] :
webPartProps.defaultWPPad ? webPartProps.defaultWPPad : null;
if (WPPadding) {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const webparts = Array.from(CanvasZone.querySelectorAll('.ControlZone'));
if (check4This(Check4.SetNormalColor) === true)
console.log("CanvasControls.length: ", webparts.length);
webparts.map((thisWP, wpNumb) => {
updateSectionCSS(thisWP, `padding`, `${WPPadding}px`);
updates++;
});
}
return updates;
}
// eslint-disable-next-line @typescript-eslint/no-explicit-any
export function forceWhiteText(webPartProps, sectionNo, CanvasZone, updates) {
// Added due to https://github.com/mikezimm/Slick-Sections/issues/51
const defaultWhiteText = check4This(Check4.SetNormalColor) === true ? false : check4This(Check4.SetWhiteColor) === true ? true : webPartProps.defaultWhiteText;
const WPWhite = webPartProps[`sectForceWhite${sectionNo + 1}`] === true || defaultWhiteText === true ? true : false;
if (WPWhite) {
updates = forceWebpartWhiteText(CanvasZone, updates);
}
return updates;
}
// eslint-disable-next-line @typescript-eslint/no-explicit-any
// export function setQuickLaunchTransp( webPartProps: any, updates: number ) : number {
// // eslint-disable-next-line @typescript-eslint/no-explicit-any
// const testEle: any = document.getElementById('spLeftNav');
// if ( testEle ) {
// testEle.classList.add( 'forceQuickTransp' );
// updates ++;
// // Added due to https://github.com/mikezimm/Slick-Sections/issues/51
// const defaultWhiteText : boolean = check4This( Check4.SetNormalColor ) === true ? false : check4This( Check4.SetWhiteColor ) === true ? true : webPartProps.defaultWhiteText;
// if ( defaultWhiteText === true ) {
// testEle.classList.add( 'forceWhiteText' );
// } else {
// testEle.classList.remove( 'forceWhiteText' );
// }
// updates ++;
// }
// return updates;
// }
//# sourceMappingURL=SectionStyles.js.map