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

Functions used in my SPFx webparts

  export function setSectionMaxWidth ( document: any, newValue : number, alertError: boolean = true, consoleResult: boolean = false  ) {

    let maxWidth = `${newValue}px !important`;
    // let result = this.updateByClassNameEleChild( document, 'CanvasZone', 0, 'maxWidth', maxWidth, alertError, consoleResult  );
    let 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;

  }

  export function updateByClassNameEleChild ( document: any, className: string, nthDirectChild: number, styleProp: string, newValue: any, alertError: boolean = true, consoleResult: boolean = false  ) {

    let result : any = {
      className: className,
      nthDirectChild: nthDirectChild,
      styleProp: styleProp,
      newValue: newValue,
      success: 0,
      errors: 0,
    };

    const 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( (el: any)=>{

      let changeElement = nthDirectChild > -1 ? el.childNodes[nthDirectChild] : el;
      if ( changeElement ) {
        try {
          // console.log('el style:', changeElement.style );
          let originalValue = null;
          if ( changeElement.style ){
            originalValue = JSON.stringify(el.style[styleProp]);
            el.style[styleProp] = newValue;
          } else {
            let newStyle: any = {};
            newStyle[styleProp] = newValue;
            changeElement.style = newStyle;
          }
          if ( consoleResult === true ) {
              console.log(`${className}:  set ${styleProp} from ${originalValue} to `, newValue);
          }
          result.success ++;
  
        } catch (e) {
            if ( alertError === true ) {
                alert(`className:  Could not find element with className of ${className}`);
            }
            console.log(`className:  Could not find element with className of ${className}`);
            result.errors ++;
        }
      } else { result.errors ++; }

    });

    if ( alertError !== true ) {
      console.log(`updateEleByClassName:`, result);
    }
    return result;

  }

  export function  updateByClassNameEleParent ( document: any, className: string, nthParent: number, styleProp: string, newValue: any, alertError: boolean = true, consoleResult: boolean = false  ) {

    let result : any = {
      className: className,
      nthParent: nthParent,
      styleProp: styleProp,
      newValue: newValue,
      success: 0,
      errors: 0,
    };

    const divs: any[] = document.getElementsByClassName(className);
    console.log( "updateEleByClassName divs.length: ", divs.length );

    //Got this from:  https://stackoverflow.com/a/222847
    var arr: any[] = [].slice.call(divs);

    //inspiration from:  https://reactgo.com/select-element-data-attribute-js/
    arr.map( (el: any)=>{

      if ( el ) {
        try {
          let changeElement: any = 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 (let i = 0; i <= nthParent; i++ ) {
            changeElement = changeElement.parentNode;
          }

          // console.log('el style:', changeElement.style );
          let originalValue: any = null;
          if ( changeElement.style ){
            originalValue = JSON.stringify(changeElement.style[styleProp]);
            changeElement.style[styleProp] = newValue;
          } else {
            let newStyle: any = {};
            newStyle[styleProp] = newValue;
            changeElement.style = newStyle;
          }
          if ( consoleResult === true ) {
              console.log(`${className}:  set ${styleProp} from ${originalValue} to `, newValue);
          }
          result.success ++;
  
        } catch (e) {
            if ( alertError === true ) {
                alert(`className:  Could not find element with className of ${className}`);
            }
            console.log(`className:  Could not find element with className of ${className}`);
            result.errors ++;
        }
      } else { result.errors ++; }

    });

    if ( alertError !== true ) {
      console.log(`updateByClassNameEleParent:`, result);
    }
    return result;

  }