usr-story

application.controller.js

import Ember from 'ember';

const { run, computed } = Ember;

export default Ember.Controller.extend({
  appName:'Ember Twiddle',
  innerWidth: 0,
  innerHeight: 0,
  activeMenu: null,
  showBlink: false,
  
  actions: {
    itemClicked(val) {
      this.set('activeMenu', val);
      this.set('showBlink', true);
      run.later(() => {
        run.debounce(this, this.hideBlink, 1000);
      }, 1000);
    }
  },
  
  init() {
    this._super(...arguments);
    const { innerWidth, innerHeight } = window;
    this.set('innerWidth', innerWidth);
    this.set('innerHeight', innerHeight);
    const boundResizeListener = run.bind(this, this.resizeHandler);
    this.set('_boundResizeListener', boundResizeListener);
    window.addEventListener('resize', boundResizeListener);
  },
  
  willDestroy() {
    this._super(...arguments);
    window.removeEventListener('resize', this.get('_boundResizeListener'));
    this.set('_boundResizeListener', null);
  },
  
  resizeHandler(evt) {
    run.debounce(this, this.debouncedHanlder, evt, 300);
  },
  
  debouncedHanlder(event) {
    const { innerWidth, innerHeight } = window;
    this.set('innerWidth', innerWidth);
    this.set('innerHeight', innerHeight);
  },
  
  hideBlink() {
    run.later(() => {
      this.set('showBlink', false);
    }, 1000);
  },
  
  isSmallViewport: computed.lt('innerWidth', 768)
});

application.template.hbs

<div id="header">
  {{#if isSmallViewport}}
    <nav id="small-navbar">
      {{small-menu itemClicked=(action "itemClicked")}}
    </nav>
  {{else}}
    <nav id="main-navbar">
      {{menu-items itemClicked=(action "itemClicked")}}
    </nav>
  {{/if}}
</div>
<div id="content">
  <h1>Yada yada some content...</h1>
  <p>
    innerWidth: {{innerWidth}} <br />
    innerHeight: {{innerHeight}}
  </p>
  {{#if showBlink}}
    <blink>Clicked Menu#{{activeMenu}}</blink>
  {{/if}}
</div>

menu-items.component.js

import Ember from 'ember';

export default Ember.Component.extend({
  tagName: 'ul',
  classNames: ['menu-items'],
  
  actions: {
    itemClicked(val) {
      if(this.attrs.itemClicked) {
        this.attrs.itemClicked(val);
      }
    }
  }
});

menu-items.template.hbs

<li {{action 'itemClicked' '1'}}>Item 1</li>
<li {{action 'itemClicked' '2'}}>Item 2</li>
<li {{action 'itemClicked' '3'}}>Item 3</li>
<li {{action 'itemClicked' '4'}}>Item 4</li>
<li {{action 'itemClicked' '5'}}>Item 5</li>

small-menu.component.js

import Ember from 'ember';

export default Ember.Component.extend({
  isOpen: false,
  
  actions: {
    toggleMenu() {
      this.toggleProperty('isOpen');
    },
    itemClicked(val) {
      this.set('isOpen', false);
      if(this.attrs.itemClicked) {
        this.attrs.itemClicked(val);
      }
    }
  },
  
  bodyClicked({ target }) {
    const $thisEl = this.$();
    const $target = Ember.$(target);

    if($target[0] !== $thisEl[0] && !$target.closest($thisEl).length) {
      this.somethingElseThenThisWasClicked();
    }
  },
  
	somethingElseThenThisWasClicked() {
    this.set('isOpen', false);
  },
  
  didInsertElement() {
    this._super(...arguments);
    const boundBodyClicked = Ember.run.bind(this, this.bodyClicked);
    this.set('_boundBodyClicked', boundBodyClicked);
    Ember.$(document).on('click', boundBodyClicked);
  },
  
  willDestroyElement() {
    this._super(...arguments);
    Ember.$(document).off('click', this.get('_boundBodyClicked'));
    this.set('_boundBodyClicked', null);
  }
});

small-menu.template.hbs

<button {{action "toggleMenu"}}>Menu</button>
{{#if isOpen}}
	{{menu-items itemClicked=(action "itemClicked")}}
{{/if}}

styles.app.css

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

.menu-items {
  list-style: none;
  margin: 0;
  padding: 0;
  position: absolute;
}

.menu-items li {
  background-color: #eee;
  padding: 5px;
  cursor: pointer;
}

.menu-items li:hover {
  background-color: #ddd;
}

#main-navbar {
  position: relative;
  height: 25px;
}

#main-navbar .menu-items li {
  display: inline;
}

twiddle.json

{
  "version": "0.5.0",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/2.2.0/ember.debug.js",
    "ember-data": "https://cdnjs.cloudflare.com/ajax/libs/ember-data.js/2.2.0/ember-data.js",
    "ember-template-compiler": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/2.2.0/ember-template-compiler.js"
  }
}