@mikezimm/npmfunctions/dist/Services/DOM/otherDOMAttempts.js

Functions used in my SPFx webparts

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.updateByClassNameEleParent = exports.updateByClassNameEleChild = exports.setSectionMaxWidth = void 0;
function setSectionMaxWidth(document, newValue, alertError, consoleResult) {
    if (alertError === void 0) { alertError = true; }
    if (consoleResult === void 0) { consoleResult = false; }
    var maxWidth = "".concat(newValue, "px !important");
    // let result = this.updateByClassNameEleChild( document, 'CanvasZone', 0, 'maxWidth', maxWidth, alertError, consoleResult  );
    var result = updateByClassNameEleParent(document, 'CanvasSection', 0, 'maxWidth', maxWidth, alertError, consoleResult);
    result = updateByClassNameEleParent(document, 'CanvasSection', 1, 'maxWidth', maxWidth, alertError, consoleResult);
    result = updateByClassNameEleParent(document, 'CanvasSection', 2, 'maxWidth', maxWidth, alertError, consoleResult);
    return result;
}
exports.setSectionMaxWidth = setSectionMaxWidth;
function updateByClassNameEleChild(document, className, nthDirectChild, styleProp, newValue, alertError, consoleResult) {
    if (alertError === void 0) { alertError = true; }
    if (consoleResult === void 0) { consoleResult = false; }
    var result = {
        className: className,
        nthDirectChild: nthDirectChild,
        styleProp: styleProp,
        newValue: newValue,
        success: 0,
        errors: 0,
    };
    var divs = document.getElementsByClassName(className);
    console.log("updateEleByClassName divs.length: ", divs.length);
    //Got this from:  https://stackoverflow.com/a/222847
    var arr = [].slice.call(divs);
    //inspiration from:  https://reactgo.com/select-element-data-attribute-js/
    arr.map(function (el) {
        var changeElement = nthDirectChild > -1 ? el.childNodes[nthDirectChild] : el;
        if (changeElement) {
            try {
                // console.log('el style:', changeElement.style );
                var originalValue = null;
                if (changeElement.style) {
                    originalValue = JSON.stringify(el.style[styleProp]);
                    el.style[styleProp] = newValue;
                }
                else {
                    var newStyle = {};
                    newStyle[styleProp] = newValue;
                    changeElement.style = newStyle;
                }
                if (consoleResult === true) {
                    console.log("".concat(className, ":  set ").concat(styleProp, " from ").concat(originalValue, " to "), newValue);
                }
                result.success++;
            }
            catch (e) {
                if (alertError === true) {
                    alert("className:  Could not find element with className of ".concat(className));
                }
                console.log("className:  Could not find element with className of ".concat(className));
                result.errors++;
            }
        }
        else {
            result.errors++;
        }
    });
    if (alertError !== true) {
        console.log("updateEleByClassName:", result);
    }
    return result;
}
exports.updateByClassNameEleChild = updateByClassNameEleChild;
function updateByClassNameEleParent(document, className, nthParent, styleProp, newValue, alertError, consoleResult) {
    if (alertError === void 0) { alertError = true; }
    if (consoleResult === void 0) { consoleResult = false; }
    var result = {
        className: className,
        nthParent: nthParent,
        styleProp: styleProp,
        newValue: newValue,
        success: 0,
        errors: 0,
    };
    var divs = document.getElementsByClassName(className);
    console.log("updateEleByClassName divs.length: ", divs.length);
    //Got this from:  https://stackoverflow.com/a/222847
    var arr = [].slice.call(divs);
    //inspiration from:  https://reactgo.com/select-element-data-attribute-js/
    arr.map(function (el) {
        if (el) {
            try {
                var changeElement = el;
                // if ( nthParent === 0 ) {changeElement = el; } 
                // else if ( nthParent === 1 ) { changeElement = el.parentNode; }
                // else if ( nthParent === 2 ) { changeElement = el.parentNode.parentNode; }
                // else if ( nthParent === 3 ) { changeElement = el.parentNode.parentNode.parentNode; }
                // else if ( nthParent === 4 ) { changeElement = el.parentNode.parentNode.parentNode.parentNode; }
                for (var i = 0; i <= nthParent; i++) {
                    changeElement = changeElement.parentNode;
                }
                // console.log('el style:', changeElement.style );
                var originalValue = null;
                if (changeElement.style) {
                    originalValue = JSON.stringify(changeElement.style[styleProp]);
                    changeElement.style[styleProp] = newValue;
                }
                else {
                    var newStyle = {};
                    newStyle[styleProp] = newValue;
                    changeElement.style = newStyle;
                }
                if (consoleResult === true) {
                    console.log("".concat(className, ":  set ").concat(styleProp, " from ").concat(originalValue, " to "), newValue);
                }
                result.success++;
            }
            catch (e) {
                if (alertError === true) {
                    alert("className:  Could not find element with className of ".concat(className));
                }
                console.log("className:  Could not find element with className of ".concat(className));
                result.errors++;
            }
        }
        else {
            result.errors++;
        }
    });
    if (alertError !== true) {
        console.log("updateByClassNameEleParent:", result);
    }
    return result;
}
exports.updateByClassNameEleParent = updateByClassNameEleParent;
//# sourceMappingURL=otherDOMAttempts.js.map