@mikezimm/fps-core-v7/lib/logic/DOM/Headings/functions.js

Library of reusable core interfaces, types and constants migrated from fps-library-v2

import { FPSApplyTagCSSAndStyles } from '../Tags/functions';
import { HTMLRegEx, } from '../Tags/regexHtmlTags';
import { check4This, Check4 } from '../../Links/CheckSearch';
// This needs to be moved downstream
require('@mikezimm/fps-styles/dist/FPSHeadings.css');
/**
 * Processes web part prop heading props and preps to update h2, h3, h4 tag styles.  NOTE SharePoint does not have h1 on the page.
 * @param wpProps
 */
export function applyHeadingCSS(wpProps) {
    if (check4This(Check4.skipStyleChanges_Eq_true) === true) {
        console.log(`skipStyleChanges @ applyHeadingCSS`);
        return;
    }
    runStyleOnTags(wpProps.h1Style, HTMLRegEx.h2);
    runStyleOnTags(wpProps.h2Style, HTMLRegEx.h3);
    runStyleOnTags(wpProps.h3Style, HTMLRegEx.h4);
    addTableStyles(wpProps.tabelTdStyle);
}
/**
 * Takes a web part property string and breaks it into classes and raw css and then applies it to tags.
 * @param tagStyle
 * @param regTag
 * @returns
 */
export function runStyleOnTags(tagStyle, regTag) {
    const { classes, cssStyles } = getClassStyles(tagStyle);
    if (cssStyles.length > 0 || classes.length > 0)
        FPSApplyTagCSSAndStyles(regTag, cssStyles.join(';'), classes, true, false);
    return;
}
/**
 * adds table classes to canvas Tables and updates cell styling
 * @param tabelTdStyle
 */
export function addTableStyles(tabelTdStyle) {
    const { classes, cssStyles } = getClassStyles(tabelTdStyle);
    let tableEles = Array.from(document.getElementsByClassName(`canvasRteResponsiveTable`));
    tableEles.map(ele => {
        classes.map(classX => {
            if (!ele.classList.contains(classX)) {
                ele.classList.add(classX);
            }
        });
    });
    if (cssStyles.length > 0 || classes.length > 0)
        FPSApplyTagCSSAndStyles(HTMLRegEx.td, cssStyles.join(';'), [], true, false);
}
export function getClassStyles(tagStyle) {
    let classes = [];
    let cssStyles = [];
    if (tagStyle) {
        let pieces = tagStyle.split(';');
        pieces.map((piece) => {
            piece = piece.trim();
            if (piece.indexOf('.') === 0) {
                classes.push(piece.replace('.', ''));
            }
            else {
                cssStyles.push(piece);
            }
        });
    }
    return { classes: classes, cssStyles: cssStyles };
}
/**
* This actually Applies CSS to html page headings h2, h3, h4 per web part props.  NOTE SharePoint does not have h1 on the page.
* @param applyTag
* @param applyClass
* @param alertError
* @param consoleResult
*/
export function FPSApplyHeadingCSS(applyTag, applyClass, alertError = true, consoleResult = false) {
    const startTime = new Date();
    let classChanges = [];
    // for (let iteration = 0; iteration < 10000; iteration++) { //Tested this loop on longer page 10,000 times and on my pc took 218 ms.  Was noticable to see old and new
    for (let iteration = 0; iteration < 1; iteration++) {
        //Loop through all the tags to find
        applyTag.tags.map(tag => {
            //Get all elements with this tag
            let nodeList = document.getElementsByTagName(tag);
            if (consoleResult && iteration === 0)
                console.log('FPSApplyHeadingCSS found Elements:', tag, nodeList);
            //Loop through all elements for this tag
            if (nodeList && nodeList.length > 0) {
                for (let i = 0; i < nodeList.length; i++) {
                    const ele = nodeList[i];
                    classChanges.push(ele.innerHTML);
                    applyClass.map(thisClass => {
                        if (!ele.classList.contains(thisClass)) {
                            ele.classList.add(thisClass);
                        }
                    });
                }
            }
        });
    }
    const endTime = new Date();
    if (consoleResult)
        console.log('FPSApplyHeadingCSS time to apply styles:', endTime.getTime() - startTime.getTime(), applyTag, applyClass);
}
export function FPSApplyHeadingStyle(applyTag, cssText, alertError = true, consoleResult = false) {
    const startTime = new Date();
    let classChanges = [];
    for (let iteration = 0; iteration < 1; iteration++) {
        //Loop through all the tags to find
        applyTag.tags.map(tag => {
            //Get all elements with this tag
            let nodeList = document.getElementsByTagName(tag);
            if (consoleResult && iteration === 0)
                console.log('FPSApplyHeadingCSS found Elements:', tag, nodeList);
            //Loop through all elements for this tag
            if (nodeList && nodeList.length > 0) {
                for (let i = 0; i < nodeList.length; i++) {
                    const ele = nodeList[i];
                    if (ele.style) {
                        ele.style.cssText += cssText;
                    }
                    else {
                        ele.style.cssText = cssText;
                    }
                    classChanges.push(ele.innerHTML);
                }
            }
        });
    }
    const endTime = new Date();
    if (consoleResult)
        console.log('FPSApplyHeadingStyle time to apply styles:', endTime.getTime() - startTime.getTime(), applyTag, cssText, classChanges);
}
//# sourceMappingURL=functions.js.map