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>