Handlebars Renderer for Content stream tagging

With Filtered Ordered tags

by Ben Clayton

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.11/handlebars.js"></script>
<div class="taglist"></div>

<script id="taginterface" type="text/html">
  {{#each-cs-property-match . }}
  <h3>{{property}} </h3>
    {{#each tags}}
      <div class="tagvalue">
        <div>{{tag}} ({{count}})</div>
      </div>
    {{/each}}
  {{/each-property-match}}

</script>

CSS

.taglist {
  margin-top: 30px;
  position: relative;
}

.tagvalue {
  position: relative;
  width: 300px;
  padding: 5px;
  margin: 4px;
  background-color: #FFFFD0;
  opacity: 1;
  overflow: hidden;
}

.long {
  border:1px solid red;
  padding:3px;
}

.small {
  font-size: 12px;
}

JavaScript

var data = [
{
"tags":[
{"count":4,"tag":"2005"},
{"count":2,"tag":"2002"},
{"count":2,"tag":"2010"},
{"count":1,"tag":"2001"},
{"count":1,"tag":"2003"},
{"count":1,"tag":"2007"},
{"count":1,"tag":"2014"},
{"count":1,"tag":"2015"}
],
"property":"Manufactured"
},{
"tags":[
{"count":6,"tag":"Weider"},
{"count":5,"tag":"All-Fill"}
],"property":"Brand"
},{
"tags":[
{"count":2,"tag":"New"},
{"count":9,"tag":"SecondUser"}
],"property":"State"
}];


Handlebars.registerHelper('each-cs-property-match', function(context,wordstr, options) {
  debugger;
	var ret = "",words = [];
	if ( ( typeof( wordstr ) == "string" ) &&  ( wordstr != '' ) ){
		words = wordstr.split(',');
	} else {
		for(var i = 0, j = context.length; i < j; i++) {
     	words.push( context[i].property );
    }
		if ( ! options ) options = wordstr;
	}
	
  for (var n = 0; n < words.length; n++){
		for(var i = 0, j = context.length; i < j; i++) {
    	if (context[i].property == words[n]){
      	ret = ret + options.fn(context[i]);
      }
    }
  }

  return ret;
});

Handlebars.registerHelper('compare', function(value1, comparator, value2, options) {
  var match;
  switch (comparator) {
    case "==":
      match = (value1 == value2);
      break;

    case "===":
      match = (value1 === value2);
      break;

    case "!=":
      match = (value1 != value2);
      break;

    case ">":
      match = (value1 > value2);
      break;

    case "<":
      match = (value1 < value2);
      break;

    case ">=":
      match = (value1 >= value2);
      break;

    case "<=":
      match = (value1 <= value2);
      break;

    case ">=":
      match = (value1 >= value2);
      break;

    case "eq":
      match = (value1.toString() == value2.toString());
      break;

    case "ne":
      match = (value1.toString() != value2.toString());
      break;

    case "=~":
    case "regex":
    case "match":
      var re = new RegExp(value2, 'i');
      var m = re.exec(value1);
      match = (m && (m.length > 0));
     ...