PLP Hack

plphack.js

const options = {
  allGreen: {
    className: 'success',
    iconName: 'check',
    classNameToRemove: 'danger'
  }, 
  allRed: {
    className: 'danger',
    iconName: 'clear',
    classNameToRemove: 'success'
  }
};
const mode = options.allGreen;

// Get all PFAS and projects
const pfas = document.querySelectorAll('.courserow-list-item-content');

// Get the icons of all completed PFAs and projects
const alreadyDoneIcons = document.querySelectorAll('i[icon="check"],i[icon="clear"]');

// Remove any existing icons from the PFA/project
alreadyDoneIcons.forEach(icon => {
  const pfaLink = icon.parentNode;

  // Remove icon
  pfaLink.removeChild(icon);

  // Remove success class
  pfaLink.classList.remove(mode.classNameToRemove);

  // Remove success class from parent (projects only)
  pfaLink.parentNode.classList.remove(mode.classNameToRemove)
});

pfas.forEach(pfa => {
  const pfaLink = pfa.childNodes[0];

  // Give all PFAs the desired class
  pfa.classList.add(mode.className);
  
  // Add PFA's link the desired class
  pfaLink.classList.add(mode.className);

  // Create a new icon 
  const icon = document.createElement('i');
  
  icon.setAttribute('icon', mode.iconName);
  icon.innerText = mode.iconName;
  icon.className = 'material-icons material-icons-default';

  // Add the new icon to the PFA link before the title
  pfaLink.insertBefore(icon, pfaLink.firstChild);
});