Drawers with Ember & GreenSock

components.a-drawer.js

import Ember from 'ember';

export default Ember.Component.extend({
  
  classNames: ['a-drawer'],

  values: [],

  selectedValue: 'x',
  
  showValues: false,
  
  mouseEnter: function() {
    this.toggleProperty('showValues');
  },
  
  mouseLeave: function() {
    this.toggleProperty('showValues');
  },
  
  values: Ember.computed('valuesString', function() {
    return this.get('valuesString').split(',');
  }),

  actions: {
 
    selectValue: function(value) {
      this.set('selectedValue', value);
    }

  }

});

components.an-item.js

import Ember from 'ember';

export default Ember.Component.extend({
  
  classNames: ['an-item'],
  
  value: 666,

  click: function() {
    this.selectValue(this.get('value'));
  }
  
});

components.drawer-slide.js

import Ember from 'ember';
import { TweenLite } from 'gsap';

export default Ember.Component.extend({
  
  classNames: ['drawer-slide'],

  classNameBindings: [
    // no animations, just CSS
    //'show:drawer-slide-show:drawer-slide-hide'
    'showCSSClass'
  ],
  
  show: false,

  showCSSClass: Ember.computed('show', function() {
    const show = this.get('show');
    if (show) {
      this.pullOut();
      return 'drawer-slide-show';
    } else {
      this.pushIn();
      return 'drawer-slide-hide';
    }  
  }),

  pullOut: function() {
    const element = this.element;
    TweenLite.to(element, 1, {width: 200});
  },

  pushIn: function() {
    const element = this.element;
    TweenLite.to(element, 1, {width: 0});
  }

});

components.drawers-group.js

import Ember from 'ember';

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

controllers.application.js

import Ember from 'ember';

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

styles.app.css

body {
  margin: 12px 16px;
  font-family: monospace 
  font-size: 30px;
}

.a-drawer {
  display: flex;
}

.a-drawer .selected-value {
  min-width: 30px;
  border-radius: 10px;
  border: 2px solid #a28223;
  padding: 15px;
  text-decoration: underline;
  text-align: center;
}

.a-drawer .drawer-slide {
  display: flex;
  border-radius: 4px;
  background-color: #eaeaea;
  overflow: hidden;
}

.drawer-slide-show {
  /* GreenSock takes care of the animation */
} 

.drawer-slide-hide {
  /* GreenSock takes care of the animation */
  width: 0;
} 

.an-item {
  background-color: #e6d6a8;
  border: 2px solid #e8bd3c;
  padding: 15px;
  margin: 5px 10px;
  cursor: pointer;
}

templates.application.hbs

{{drawers-group}}

templates.components.a-drawer.hbs

<div class="selected-value">
  {{selectedValue}}
</div>

<!--
  component:drawer-slide in block form
  isolates the animation logic, it does one thing
  and it does it well.
  A by product of this characteristic is high re-usability.
-->
{{#drawer-slide show=showValues}}

  {{#each values as |value|}}
    {{an-item value=value
              selectValue=(action "selectValue")}}
  {{/each}}
  
{{/drawer-slide}}

templates.components.an-item.hbs

{{value}}

templates.components.drawer-slide.hbs

{{yield}}

templates.components.drawers-group.hbs

{{a-drawer valuesString="a,b,c"}}
{{a-drawer valuesString="d,e,f"}}
{{a-drawer valuesString="g,h,i"}}

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-gsap": "0.2.0"
  }
}