@mikezimm/fps-library-v2
Version:
Library of reusable typescript/javascript functions, interfaces and constants
152 lines (151 loc) • 8.53 kB
JavaScript
/**
* CodeAnalizerComment: Updated 3 imports on 2024-09-21 23:07:24
* Update:: import { check4This } to '@mikezimm/fps-core-v7/lib/logic/Links/CheckSearch;'
* Update:: import { IFPSFullPageImageFit } 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;'
*/
import { check4This, Check4 } from "@mikezimm/fps-core-v7/lib/logic/Links/CheckSearch";
import { FullPageBGElementClasses } from './FullPageBGElementClasses';
// require( './forceWhiteText.css' );
// require( './fullPageBackground.css' );
require('@mikezimm/fps-styles/dist/forceWhiteText.css');
require('@mikezimm/fps-styles/dist/fullPageBackground.css');
require('@mikezimm/fps-styles/dist/quickLaunchStyles.css');
// https://github.com/mikezimm/drilldown7/issues/352
export function addCanvasBGImageComponent(webPartProps, updates, _isSPA) {
const { fullPageImage, fullPageImageFilter } = webPartProps;
// 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;
updates = setQuickLaunchTransp(webPartProps, updates);
// eslint-disable-next-line @typescript-eslint/no-explicit-any
let slickCanvasBG = Array.from(document.getElementsByClassName(`slickSectionCanvasBG`));
if (slickCanvasBG.length === 0)
slickCanvasBG = Array.from(document.getElementsByClassName(`slickSectionCanvasBG2`));
if (!fullPageImage) {
// if the fps canvas element exists already, just remove the visibleSlickSection className and return
if (slickCanvasBG.length > 0) {
slickCanvasBG[0].classList.remove(`visibleSlickSection`);
}
return updates;
}
// https://github.com/mikezimm/drilldown7/issues/352
// Determine the proper element to base BG on:
const BGTargetClass = _isSPA === true ? 'mainContent' : 'CanvasComponent';
// https://developer.mozilla.org/en-US/docs/Web/API/Element/getElementsByClassName
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const divsCanvas = Array.from(document.getElementsByClassName(BGTargetClass));
if (divsCanvas.length === 0) {
// If there are no CanvasComponent elements, then I don't have an element to prepend the background to
console.log(`FPS Slick Sections addPre${BGTargetClass} - NO ${BGTargetClass} found`);
return updates;
}
// // Adding this to allow you to create a fullPageColor background instead of an image
// const UseFPBGColor: boolean = fullPageImage && fullPageImage.indexOf( 'http' ) !== 0 && fullPageImage.indexOf( '/' ) !== 0 ? true : false;
// // If UseFPBGColor === false, then it's an image and just use the White/Black dropdown value
// const useFullPageOverlayColor = UseFPBGColor === false ? fullPageOverlayColor : fullPageImage;
// const fullPageImageFilter = webPartProps.fullPageImageFilter ? `style= "filter:${webPartProps.fullPageImageFilter}"` : ``;
// let fullPageImageFit: IFPSFullPageImageFit = webPartProps.fullPageImageFit;
// if (check4This(PageFitOriginal) === true) { fullPageImageFit = `Original`; }
// else if (check4This(PageFitLayout2) === true) { fullPageImageFit = `Layout2`; }
// const canvasClass = fullPageImageFit === 'Layout2' ? `slickSectionCanvasBG2` : `slickSectionCanvasBG`;
// const imgClass = fullPageImageFit === 'Layout2' ? `slickSectionCanvasBGImg2` : `slickSectionCanvasBGImg`;
const { canvasClass, imgClass, useFullPageOverlayColor, UseFPBGColor, } = FullPageBGElementClasses(webPartProps);
if (slickCanvasBG.length > 0) {
// If slickCanvasBG already exists, add the visible class
slickCanvasBG[0].classList.add(`visibleSlickSection`);
// Then update the src
const img = slickCanvasBG[0].getElementsByClassName(imgClass);
if (img && img.src !== webPartProps.fullPageImage)
img.src = webPartProps.fullPageImage;
updates++;
}
else {
const tempDiv = document.createElement("div");
// https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentElement
divsCanvas[0].insertAdjacentElement("beforebegin", tempDiv);
const fullPageImageFilterX = fullPageImageFilter ? `style= "filter:${fullPageImageFilter}"` : ``;
// https://github.com/mikezimm/Slick-Sections/issues/40
const divHTML = `<div class="${canvasClass}">
<img class="${imgClass}" src="${fullPageImage}" ${fullPageImageFilterX}>
<div class="${`slickSectionCanvasBGOverlay`}" style="
background: ${useFullPageOverlayColor};
opacity: ${webPartProps.fullPageOverlayOpacity};
${UseFPBGColor === true ? 'height: 120vh;' : ''}
${UseFPBGColor === true ? 'position: absolute;' : ''}
${UseFPBGColor === true ? 'top: -50vh;' : ''}
"></div>
</div>`;
tempDiv.outerHTML = divHTML;
tempDiv.classList.add(`visibleSlickSection`);
updates++;
}
// Only apply white to command bar if there is an image && you force white default
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const cmdBar = Array.from(document.getElementsByClassName(`mainContent`));
if (cmdBar && cmdBar.length > 0) {
if (defaultWhiteText === true) {
cmdBar[0].classList.add(`forceWhiteTextCmdButton`);
cmdBar[0].classList.add(`defaultWhiteText`);
}
else {
cmdBar[0].classList.remove(`forceWhiteTextCmdButton`);
cmdBar[0].classList.remove(`defaultWhiteText`);
}
}
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const siteHeader = document.querySelector(`[data-automationid="SiteHeader"]`);
if (siteHeader) {
if (defaultWhiteText === true) {
siteHeader.classList.add(`forceWhiteTextSiteHeader`);
}
else {
siteHeader.classList.remove(`forceWhiteTextSiteHeader`);
}
}
// Added this for horizontal nav https://github.com/mikezimm/Slick-Sections/issues/53
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const horizontalNav = Array.from(document.getElementsByClassName(`ms-HorizontalNav`));
if (horizontalNav && horizontalNav.length > 0) {
// Added targetIdx because first ms-HorizontalNav might be Hub Nav which does not have background
// Then also get parentElement so it can target both the HorizontalName AND actionsWrapper class
const targetIdx = horizontalNav.length - 1;
if (defaultWhiteText === true) {
horizontalNav[targetIdx].parentElement.classList.add(`forceWhiteTextSiteHeader`);
}
else {
horizontalNav[targetIdx].parentElement.classList.remove(`forceWhiteTextSiteHeader`);
}
}
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const pageHeader = document.querySelector(`[data-automation-id="pageHeader"]`);
if (pageHeader) {
if (defaultWhiteText === true) {
pageHeader.classList.add(`forceWhiteTextPageHeader`);
}
else {
pageHeader.classList.remove(`forceWhiteTextPageHeader`);
}
}
return updates;
}
// https://github.com/mikezimm/Slick-Sections/issues/57
// eslint-disable-next-line @typescript-eslint/no-explicit-any
export function setQuickLaunchTransp(webPartProps, updates) {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const leftNav = document.getElementById('spLeftNav');
if (leftNav) {
leftNav.classList.add('forceQuickTransp');
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;
if (defaultWhiteText === true) {
leftNav.classList.add('forceWhiteText');
}
else {
leftNav.classList.remove('forceWhiteText');
}
updates++;
}
return updates;
}
//# sourceMappingURL=addCanvasBGImageComponent.js.map