html-handlebars.md

Turning violation nodes into readable HTML

The violations returns a list of rules that had failures. Each rule has a list of nodes that failed the rule. Each node may have failed for one or more reasons. This information is encoded in a set of structures that can be somewhat difficult to comprehend. This code shows how to turn a list of violations into a table and then for each node in a rule's nodes list, how to generate a summary of the reason(s) that rule failed.

The example uses handlebars templates but can be easily adapted to other formats

The JavaScript

function helperItemIterator(items, template) {
  var out = '';
  if (items) {
    for (var i = 0; i < items.length; i++) {
      out += template(items[i]);
    }
  }
  return out;
}
Handlebars.registerHelper('violations', function (items) {
  return helperItemIterator(items, compiledRowTemplate);
});
Handlebars.registerHelper('related', function (items) {
  return helperItemIterator(items, compiledRelatedNodeTemplate);
});
Handlebars.registerHelper('reasons', function (items) {
  return helperItemIterator(items, compiledFailureTemplate);
});

// Setup handlebars templates

compiledRowTemplate = Handlebars.compile(rowTemplate.innerHTML);
compiledTableTemplate = Handlebars.compile(tableTemplate.innerHTML);
compiledRelatedListTemplate = Handlebars.compile(relatedListTemplate.innerHTML);
compiledRelatedNodeTemplate = Handlebars.compile(relatedNodeTemplate.innerHTML);
compiledFailureTemplate = Handlebars.compile(failureTemplate.innerHTML);
compiledReasonsTemplate = Handlebars.compile(reasonsTemplate.innerHTML);

function messageFromRelatedNodes(relatedNodes) {
  var retVal = '';
  if (relatedNodes.length) {
    var list = relatedNodes.map(function (node) {
      return {
        targetArrayString: JSON.stringify(node.target),
        targetString: node.target.join(' ')
      };
    });
    retVal += compiledRelatedListTemplate({ relatedNodeList: list });
  }
  return retVal;
}

function messagesFromArray(nodes) {
  var list = nodes.map(function (failure) {
    return {
      message: failure.message.replace(/</gi, '&lt;').replace(/>/gi, '&gt;'),
      relatedNodesMessage: messageFromRelatedNodes(failure.relatedNodes)
    };
  });
  return compiledReasonsTemplate({ reasonsList: list });
}

function summary(node) {
  var retVal = '';
  if (node.any.length) {
    retVal += '<h3 class="error-title">Fix any of the following</h3>';
    retVal += messagesFromArray(node.any);
  }

  var all = node.all.concat(node.none);
  if (all.length) {
    retVal += '<h3 class="error-title">Fix all of the following</h3>';
    retVal += messagesFromArray(all);
  }
  return retVal;
}

/*
 * This code will generate a table of the rules that failed including counts and links to the Deque University help
 * for each rule.
 *
 * When used, you should attach click handlers to the anchors in order to generate the details for each of the
 * violations for each rule.
 */

if (results.violations.length) {
  var violations = results.violations.map(function (rule, i) {
    return {
      impact: rule.impact,
      help: rule.help.replace(/</gi, '&lt;').replace(/>/gi, '&gt;'),
      bestpractice: rule.tags.indexOf('best-practice') !== -1,
      helpUrl: rule.helpUrl,
      count: rule.nodes.length,
      index: i
    };
  });

  html = compiledTableTemplate({ violationList: violations });
}

/*
 * To generate the human readable summary, call the `summary` function with the node. This will return HTML for that node.
 */

reasonHtml = summary(node);

The Handlebars Templates

<script id='rowTemplate' type='text/x-handlebars-template'>
  <tr> <th scope="row" class="help"> <a href="javascript:;" class="rule"
  data-index="{{index}}">
  {{{help}}}
  </a> </th> <td scope="row"> <a target="_blank" href="{{helpUrl}}">?</a> </td>
  <td class="count">
  {{count}}
  </td> <td class="impact">
  {{impact}}
  </td> </tr>
</script>
<script id='tableTemplate' type='text/x-handlebars-template'>
  <table> <tr> <th scope="col">Description</th> <th scope="col">Info</th> <th
  scope="col">Count</th> <th scope="col">Impact</th> </tr>
  {{#violations violationList}}{{/violations}}
  </table>
</script>
<script id='relatedListTemplate' type='text/x-handlebars-template'>
  <ul>Related Nodes:
  {{#related relatedNodeList}}{{/related}}
  </ul>
</script>
<script id='relatedNodeTemplate' type='text/x-handlebars-template'>
  <li> <a href="javascript:;" class="related-node" data-element="{{targetArrayString}}">
  {{targetString}}
  </a> </li>
</script>
<script id='reasonsTemplate' type='text/x-handlebars-template'>
  <p class="summary"> <ul class="failure-message">
  {{#reasons reasonsList}}{{/reasons}}
  </ul> </p>
</script>
<script id='failureTemplate' type='text/x-handlebars-template'>
  <li>
  {{message}}
  {{{relatedNodesMessage}}}
  </li>
</script>