Ractive html rendering

by tanvir_alam_shawn

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/ractive/1.3.8/ractive.min.js"></script>
<main></main>

<script id='algorithmTemplate' type='text/ractive'>   
				<algorithmActions />
        {{#each algorithms}}
        	{{#if this.properties}}
          	{{#each this.properties}}
          		<property property='{{this}}' depth='{{depth}}'/>
            {{/each}}
          {{/if}}
					
          {{#if this.groups}}
          	{{#each this.groups}}
          		<group group='{{this}}' depth='{{depth}}'/>
            {{/each}}  
          {{/if}}
        {{/each}}  
</script>

<script id='group' type='text/ractive'>
    <div class='group depth-{{depth}}'>
    		<p>{{group.groupName}}</p>
    		<algorithmActions />
        {{#if group.properties}}
        	{{#each group.properties}}
          	<property property='{{this}}' depth='{{depth + 1}}'/>
          {{/each}}
        {{/if}}
        
        {{#if group.groups}}
        	{{#each group.groups}}
          	<group group='{{this}}' depth='{{depth + 1}}'/>
          {{/each}}
        {{/if}}
    </div>
</script>

<script id='property' type='text/ractive'>
    <div class='property depth-{{depth}}'>
        <p>{{property.propertyName}}</p>
    </div>
</script>

<script id='algorithmActions' type='text/ractive'>
				<div class="algorithmDropdown">
          <button on-click="addProperties" class="dropbtn mainDropDown">
            <i class="fa fa-bars" aria-hidden="true"></i>+ Add Property
          </button>
          <button on-click="addGroups" class="dropbtn mainDropDown">
            <i class="fa fa-bars" aria-hidden="true"></i>+ Add Group
          </button>
        </div>
</script>

CSS

body { font-family: 'Helvetica Neue', arial, sans-serif; font-weight: 200; color: #353535; } h1 { font-weight: 200; } p { margin: 0.5em 0; }

.comment {
    padding: 0.5em;
    border-top: 1px solid #eee;
}

.comment .comment {
    padding-left: 2em;
}

.depth-1 {
    color: #555;
}

.depth-2 {
    color: #999;
}

.group, .property {
  border: #a5acb4;
  border-style: solid;
  padding: 40px;
  border-radius: 12px;
}

JavaScript

Ractive.components.group = Ractive.extend({
    template: '#group',
    data: { depth: 1 }
});

Ractive.components.property = Ractive.extend({
    template: '#property',
    data: { depth: 1 } 
});

Ractive.components.algorithmActions = Ractive.extend({
    template: '#algorithmActions',
    oninit: function () {
      this.on( 'addProperties', function (event) {
      	var depth = event.ractive.parent.get().depth;
        var propertyLevel;
       	if(typeof depth === "undefined") {
        	depth = 0;
          propertyLevel = event.ractive.parent.get('algorithms.' + depth + '.properties');
        } else {
        	depth = depth;
          propertyLevel = event.ractive.parent.get('group.properties');
        }

        propertyLevel.push(
          {
            propertyName: 'property-' + depth,
            spt: '',
            tpt: '',
            sm: '',
            weightStatus: false,
            weight: 0
          }
        );
        event.ractive.parent.update();
      });
      
      this.on( 'addGroups', function (event) {
        var depth = event.ractive.parent.get().depth;
        var groupLevel;
          if(typeof depth === "undefined") {
            depth = 0;
            groupLevel = event.ractive.parent.get('algorithms.' + depth + '.groups');
          } else {
            depth = depth;
            groupLevel = event.ractive.parent.get('group.groups');
          }

       		groupLevel.push(
          	{
              groupName: 'group-' + depth,
              selectedWeightMethod: '',
              weight: 0,
              properties: [],
              groups: []
            }
          );

        event.ractive.parent.update();
      });
    }
});

var ractive = new Ractive({
    el: 'main',
    template: '#algorithmTemplate',
    data: {
        algorithms: [
            {
              selectedWeightMethod: '',
              weightedStatus: false,
            	properties: [],
              groups: []              
            }
       ...