collapsible

components.checkbox-input.js

import Ember from 'ember';

export default Ember.Component.extend({
	classNames: ['checkbox-wrapper'],
  
  wrapperAction: 'enclosedCheckboxToggled',
  
  actions: {
  	toggleChecked() {
  		
    	
    	this.toggleProperty('item.checked')
    	
    	this.sendAction('wrapperAction',true);
  
  	}
  }

  
});

components.collapsible-tree-presenter.js

import Ember from 'ember';

export default Ember.Component.extend({
});

components.collapsible-tree.js

import Ember from 'ember';
import Evented from '@ember/object/evented';
import EmberObject from '@ember/object';

const ItemObject = EmberObject.extend(Evented, {
	checkedEvent(){
  	this.trigger('checked');
  }
});


export default Ember.Component.extend({
  classNames: ['collapsible'],
  collapsed: false,
  parentAction: 'childCheckedWasToggled',
  buttonText: Ember.computed('collapsed', function(){
    return this.get('collapsed') ? "-" : "+"
  }),
  userClickedMe: false,
  propagate: false,
  updateAttr:'',
  itemObject: Ember.computed('item',function(){
  	let obj  =  ItemObject.create();
    obj.set('checked',this.get('item.checked'));
    return obj;
  }),
  
  iHaveChildren: Ember.computed('item.children',function(){
  	return (this.get('item.children.length') > 0) ? true : false;
  }),
  
  iCanPropagateDownwardsChanges: Ember.computed('userClickedMe',function(){
  	return this.get('userClickedMe') && this.get('iHaveChildren') && this.get('propagate');
  }),
  downwardsPropagator: Ember.computed('propagate',function(){
    
    console.log('COMPUTED IN:',this.get('item.title'));
  	if (this.get('iCanPropagateDownwardsChanges')){
   	this.setChildren(this.get('item.children'),this.get('item.checked'));
   } 
  }),
  
  printDiagnostics(){
    console.log('Im node:',
                  this.get('item.title'),
                  '\n',
                  'userClickedMe:',
                  this.get('userClickedMe'),
                  '\n',
                  'iCanPropagateDownwardsChanges',
                  this.get('iCanPropagateDownwardsChanges'),
                  '\n',
                  'iHaveChildren',
                  this.get('iHaveChildren'));
  },
  
  setChildren(collection,value){
  	collection.forEach((c) => {
      Ember.set(c,'checked',value);
    });
  },
  
  actions: {
    toggleCollapsed(){
      this.toggleProperty('collapsed')
    },
    
    childCheckedWasToggled() {
			this.checkChildren()
    },
    
    enclosedCheckboxToggled(wasUserAction){
      this.set('userClickedMe',wasUserAction);
      this.set('propagate',true);
      let children = this.get('item.children');
      
      this.printDiagnostics();
      this.set('itemObject.checked',this.get('item.checked'));
      this.get('itemObject').checkedEvent();
      if (this.get('iCanPropagateDownwardsChanges')){
       	 this.setChildren(children,this.get('item.checked'));
      }
      
      if (!this.get('isRoot')){
        this.sendAction('parentAction')         
      }
    }
  },
  checkChildren(){
    	let children = this.get('item.children');      
      if (children != undefined) {      
     	 this.set('item.checked', children.every(child => Ember.get(child, 'checked')))
      }
    	
	},

  didInsertElement(){
    //TODO check it still works when sync loading items
    this.checkChildren()
    let emmiter = this.get('eventEmmiter');
    if (emmiter != undefined){
      let that = this;
			emmiter.on('checked',function(){
    	console.log('EVENTED:',that.get('item.title'));
      if (that.get('iHaveChildren')){
        console.log(that.get('item.children'));
        that.setChildren(that.get('item.children'),emmiter.get('checked'));
      }
      that.get('itemObject').checkedEvent();
    })    
    
    }
  }
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
  
  items: [
    {title: "test1", children: [
      {title: "test1.1", children: [
        {title: "test1.1.1", checked: true},
      	{title: "test1.1.2", checked: true},
     		{title: "test1.1.3", checked: true},
      	{title: "test1.1.4", checked: true}, 
      ]},
      {title: "test1.2",checked:true, children: [
        {title: "test1.2.1"},
      	{title: "test1.2.2"},
     		{title: "test1.2.3"},
      	{title: "test1.2.4"}, 
      ]},
      {title: "test1.3",checked:true, children: [
        {title: "test1.3.1"},
      	{title: "test1.3.2"},
     		{title: "test1.3.3"},
      	{title: "test1.3.4"}, 
      ]},
     
    ]},
    {title: "test2", children: [
      {title: "test2.1", children: [
        {title: "test2.1.1"},
      	{title: "test2.1.2"},
     		{title: "test2.1.3"},
      	{title: "test2.1.4"}, 
      ]},
      {title: "test2.2", children: [
        {title: "test2.2.1"},
      	{title: "test2.2.2"},
     		{title: "test2.2.3"},
      	{title: "test2.2.4"}, 
      ]},
      {title: "test2.3", children: [
        {title: "test2.3.1"},
      	{title: "test2.3.2"},
     		{title: "test2.3.3"},
      	{title: "test2.3.4"}, 
      ]},
     
    ]},
  ]
  
  
});

helpers.equal.js

import Ember from 'ember';

export function equal(params) {
  return params[0] === params[1];
}

export default Ember.Helper.helper(equal);

styles.app.css

body {
  margin: 12px 16px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12pt;

}

  .collapsible{
  padding-left: 30px;
    display: block;
  }

.checkbox-wrapper{
  display: inline;
}

templates.application.hbs

<div id="destination" hidden=true>
</div>
<hr/>
{{outlet}}
{{#each items as |item|}}
	{{collapsible-tree item=item contentComponent="checkbox-input" isRoot=true }}
{{/each}}


<ul>
{{#each items as |item|}}
	<li>{{item.title}} {{item.checked}}</li>
{{/each}}
</ul>

templates.components.checkbox-input.hbs

<input type="checkbox" checked={{item.checked}} 
											 onclick={{action 'toggleChecked' }}
                       >
{{item.title }}

templates.components.collapsible-tree-presenter.hbs

{{#if item.children}}
	<button {{action 'toggleCollapsed'}}>{{buttonText}}</button>
  {{allChildrenChecked}}

{{/if}}
{{component contentComponent item=item isRoot=isRoot}}

templates.components.collapsible-tree.hbs

{{#if item.children}}
	<button {{action 'toggleCollapsed'}}>{{buttonText}}</button>
  {{allChildrenChecked}}

{{/if}}
{{component contentComponent item=item isRoot=isRoot}}


{{#if collapsed}}
	{{#each item.children as |child|}}
  	{{collapsible-tree item=child updateAttr=updateAttr propagate=propagate userClickedMe=userClickedMe eventEmmiter=itemObject contentComponent=contentComponent}}
	{{/each}}
{{/if}}

twiddle.json

{
  "version": "0.15.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js",
    "ember": "3.0.0",
    "ember-template-compiler": "3.0.0",
    "ember-testing": "3.0.0"
  },
  "addons": {
    "ember-data": "3.4.2",
    "ember-wormhole": "0.5.5"
  }
}