Make the DealHub.io interface more developer-friendly for editing conditional answers and other attributes.

beautifyDealhub.js

var sheets = document.styleSheets;
var neatSheet = null;

/* Find the default style to edit */
for (i = 0; i < sheets.length; i++) {
  if (sheets[i].title === null) {
    neatSheet = sheets[i];
  }
}

/**
 * The selector below controls the display of the text box upon focus.
 * 
 *   .vl-baloon-ta-effect:focus
 *
 * Copying this to make it applicable for the regular text box would be ideal.
 */
neatSheet.insertRule('.vl-baloon-ta-effect { height: auto; border-radius: 5px; }', 0);

/**
 * The selector below is the Add note button, which sadly isn't all that useful
 * in its current implementation due the clunky modal behavior.
 * 
 *   p.vl-text-btn.Marginbox__l-small.ng-scope
 */
neatSheet.insertRule('p.vl-text-btn.Marginbox__l-small.ng-scope { display: none; }', 0);

/**
 * The selector below needs to have its height style removed, so as to
 * allow the text area to push visual elements out vertically.
 * 
 *   div.vl-formula-validity.cond-validity0.flex-item.valid
 */
var flexItems = document.getElementsByClassName('flex-item');

for (var i = 0; i < flexItems.length; i++) {
  let flexItem = flexItems[i];
  var isCondValidity = false;

  for (var j = 0; j < flexItem.classList.length; j++) {
    let styleClass = flexItem.classList[j];
    
    if (styleClass.startsWith('cond-validity')) {
      isCondValidity = true;
      flexItem.style = null;
    }
  }
}

/**
 * TODO: Use a `MutationObserver` to deal with the annoying element-specific
 * `height` attribute applied directly to the conditional formula text area.
 * 
 * @see https://usefulangle.com/post/356/javascript-detect-element-added-to-dom
 */