Handlebars Renderer for Content stream tagging

by Ben Clayton

HTML

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

<script id="person" type="text/html">
  {{#each parenttags}}
  <h3>{{name}} ({{cs_len tags}} items)</h3>
    {{#each tags}}
			
      {{#compare @index "==" 5 }} 
      	<div class="long"> 
      {{/compare}}


      <div class="contact">
        <div>{{name}}</div>
      </div>

      {{#compare @index ">=" 5 }}
      	{{#if @last }}
        	</div>
        {{/if}}
      {{/compare}}


    {{/each}}
  {{/each}}

</script>

CSS

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

.contact {
  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 = {
  parenttags: [{
    name: "List One",
    tags: [{
      name: "tag value zero"
    }, {
      name: "tag value one"
    }, {
      name: "tag value two"
    }, {
      name: "tag value three"
    }, {
      name: "tag value four"
    }]
  },{
    name: "List Two",
    tags: [{
      name: "tag value zero"
    }, {
      name: "tag value one"
    }, {
      name: "tag value two"
    }, {
      name: "tag value three"
    }, {
      name: "tag value four"
    }, {
      name: "tag value five"
    }]
  },{
    name: "List Three",
    tags: [{
      name: "tag value zero"
    }, {
      name: "tag value one"
    }, {
      name: "tag value two"
    }, {
      name: "tag value three"
    }, {
      name: "tag value four"
    }, {
      name: "tag value five"
    }, {
      name: "tag value six"
    }]
  },{
    name: "List Four",
    tags: [{
      name: "tag value zero"
    }, {
      name: "tag value one"
    }, {
      name: "tag value two"
    }, {
      name: "tag value three"
    }, {
      name: "tag value four"
    }, {
      name: "tag value five"
    }, {
      name: "tag value six"
    }, {
      name: "tag value seven"
    }]
  }, {
    name: "List Five",
    tags: [{
      name: "tag value zero"
    }, {
      name: "tag value one"
    }]
  }]
};







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());
   ...