measuring paradigm

components.ig-chart.js

import Ember from 'ember';

export default Ember.Component.extend({
    classNames: ['ig-chart'],
});

components.ig-flyout.js

import Ember from 'ember';

export default Ember.Component.extend({
  opened: false,
  expanded: false,
  
  
  // private
  widthInPx: null,
  
  init(...args) {
    this._super(...args);
    Ember.run.next(this, this.calculate);
  },
  
  calculate() {
    this.set('widthInPx', this.$('.ig-flyout').width());
  },
  
  classes: Ember.computed(
    'opened',
    'expanded',
    function() {
  		const { 
        opened,
        expanded
      } = this.getProperties('opened', 'expanded');
      
      let result = 'ig-flyout';
      
      if (expanded) {
        result += ' ig-flyout--expanded';
      } else if (opened) {
        result += ' ig-flyout--opened';
      } else {
      	result += ' ig-flyout--closed';
      }
      
      return result;
    }
  ),
  
  actions: {
    open() { 
      this.set('opened', true);
      this.set('expanded', false);
      Ember.run.next(this, this.calculate);
    },
    
    expand() {
      this.set('opened', false);
      this.set('expanded', true);
      Ember.run.next(this, this.calculate);
    },
    
    hide() {
      this.set('opened', false);
      this.set('expanded', false);
      Ember.run.next(this, this.calculate);
    },
    
    resize() {
    	this.set('flyoutWidth', (Math.random() * 500).toFixed(2)); 
    }
  },
});

components.ig-market-view.js

import Ember from 'ember';

export default Ember.Component.extend({
 //public
  widthInPx: null,
  
  showChart: Ember.computed.gte('widthInPx', 200),
  
    classNames: ['ig-market-view'],
});

components.ig-panel.js

import Ember from 'ember';

export default Ember.Component.extend({
  
  // public, passed from workspace
  workspaceWidthPx: null,
  
  // panel width 
  panelWidthPc: null,
  
  panelWidthInPx: Ember.computed(
    'workspaceWidthPx',
    'panelWidthPc',
    function() {
      const {
        workspaceWidthPx,
        panelWidthPc
      } = this.getProperties(
        'workspaceWidthPx',
        'panelWidthPc');
      console.log(workspaceWidthPx, panelWidthPc);
      return (workspaceWidthPx * 
        (panelWidthPc / 100.0)).toFixed(2);
    }
  ),

  inlineStyle: Ember.computed('panelWidthPc', function() {
    return `width: ${this.get('panelWidthPc')}%`;
  }),
});

components.ig-workspace.js

import Ember from 'ember';

export default Ember.Component.extend({
  
  containerStyle: Ember.computed('workspaceWidthPx', function() {
  	return `width: ${this.get('workspaceWidthPx')}px`;
  }),
  
  workspaceWidthPx: 500,
  
  panelWidthPc: 60,
  
  calculate() {
    this.set('width', this.$().width());
  },
  
  actions: {
    windowResize() {
    	// simulates window.resize on button click
      this.set('workspaceWidthPx', (Math.random() * 500).toFixed(2));
    }
  },
    
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle'
});

styles.app.css

body { font-size: 11px; color: gray; font-family: Arial; }
strong { font-size: 14px; color: black; }

* { overflow: visible; white-space: nowrap;}

.ig-workspace { border: 2px solid black; }
.ig-panel { border: 1px solid orange; }
.ig-market-view { border: 1px solid yellow; }
.ig-chart { border: 1px solid violet; background-color: violet; }
.ig-chart-hidden-message { background-color: pink; }

.ig-flyout { border: 2px solid black; }

.ig-flyout--closed { width: 5% }
.ig-flyout--opened { width: 40% }
.ig-flyout--expanded { width: 90% }

templates.application.hbs

{{ig-workspace}}

{{ig-flyout}}

templates.components.ig-chart.hbs

<strong>chart</strong>

templates.components.ig-flyout.hbs

<button onclick={{action 'hide'}}>hide flyout</button>
<button onclick={{action 'open'}}>open flyout partially</button>
<button onclick={{action 'expand'}}>open flyout fully</button>

<div class={{classes}}>

{{#if expanded}}
<strong>extended flyout</strong>
{{else if opened}}
<strong>opened flyout</strong>
{{else}}
<strong>hidden flyout</strong>
{{/if}}

{{ig-market-view widthInPx=widthInPx}}
</div>

templates.components.ig-market-view.hbs

<strong>market-view</strong><br/>
-- widthInPx: {{widthInPx}}<br/>
{{#if showChart}}
  {{ig-chart}}
{{else}}
  <strong class='ig-chart-hidden-message'>hidden</strong>
{{/if}}

templates.components.ig-panel.hbs

<div class='ig-panel' style={{inlineStyle}}>
  <strong>panel</strong> <br/>
  -- workspaceWidthPx: {{workspaceWidthPx}}px <br/>
  -- panelWidthPc: {{panelWidthPc}}% <br/>
  -- -- calculated panelWidthInPx: {{panelWidthInPx}}px
  {{ig-market-view widthInPx=panelWidthInPx}}
</div>

templates.components.ig-workspace.hbs

<button onclick={{action 'windowResize'}}>window resize</button>
<div style={{containerStyle}}>
 <div class='ig-workspace'>
<strong>workspace</strong>
{{ig-panel 
	workspaceWidthPx=workspaceWidthPx
  panelWidthPc=panelWidthPc  
}}
</div>
</div>

twiddle.json

{
  "version": "0.12.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.12.0",
    "ember-template-compiler": "2.12.0",
    "ember-testing": "2.12.0"
  },
  "addons": {
    "ember-data": "2.12.1"
  }
}