Global events

components.foo-bar.js

import Ember from 'ember';
import ClickOutside from '../mixins/click-outside';

const {
  Component,
  run,
  on
} = Ember;

export default Component.extend(ClickOutside, {
  clickOutside() {
    this.sendAction('displayLog', `Clicked outside of ${this.element.id}`);
  },

  _attachClickOutsideHandler: on('didInsertElement', function() {
    run.next(this, this.addClickOutsideListener);
    this.sendAction('displayLog', `Attached window handler for ${this.element.id}`);
  }),

  _removeClickOutsideHandler: on('willDestroyElement', function() {
    this.removeClickOutsideListener();
    this.sendAction('displayLog', `Detached window handler for ${this.element.id}`);
  })
});

controllers.2components.js

import Ember from 'ember';

export default Ember.Controller.extend({
  displayLog(text) {
    this.send('displayLog', text);
  }
});

controllers.application.js

import Ember from 'ember';

const {
  Controller,
  A
} = Ember;

export default Controller.extend({
  appName: 'Global events',
  appLog: A()
});

controllers.home.js

import Ember from 'ember';

export default Ember.Controller.extend({
  displayLog(text) {
    this.send('displayLog', text);
  }
});

router.js

import Ember from 'ember';
import config from './config/environment';

const Router = Ember.Router.extend({
  location: 'none',
  rootURL: config.rootURL
});

Router.map(function() {
  this.route('home', { path : '/' });
  this.route('2components', {path: '/2-components'});
  this.route('no-components', {path: '/no-components'});
});

export default Router;

routes.application.js

import Ember from 'ember';

export default Ember.Route.extend({
  actions: {
    displayLog(text) {
      this.controller.get('appLog').pushObject(text);
    },
    didTransition() {
      this.send('displayLog', 'Transitioned');
    }
  }
});

templates.2components.hbs

{{foo-bar displayLog=(action displayLog)}}
<br>
{{#foo-bar displayLog=(action displayLog)}}
	<button>Another variation on this component</button>
{{/foo-bar}}

templates.application.hbs

<h1>Global events</h1>
{{link-to 'Home' 'home'}} | {{link-to '2 Components' '2components'}} | {{link-to 'No Components' 'no-components'}}
<br>
<br>
{{outlet}}
<br>
<br>
<h2>Logs</h2>
<ul class="logs">
	{{#each appLog as |log|}}
  	<li class="log">{{log}}</li>
  {{/each}}
</ul>

templates.components.foo-bar.hbs

{{#if hasBlock}}
	{{yield}}
{{else}}
	<div class="inside">
    <button>This is all inside the component</button>
  </div>
{{/if}}

templates.home.hbs

{{foo-bar displayLog=(action displayLog)}}

templates.no-components.hbs

<p>There are no components here</p>

tests.helpers.destroy-app.js

import Ember from 'ember';

export default function destroyApp(application) {
  Ember.run(application, 'destroy');
}

tests.helpers.resolver.js

import Resolver from '../../resolver';
import config from '../../config/environment';

const resolver = Resolver.create();

resolver.namespace = {
  modulePrefix: config.modulePrefix,
  podModulePrefix: config.podModulePrefix
};

export default resolver;

tests.helpers.start-app.js

import Ember from 'ember';
import Application from '../../app';
import config from '../../config/environment';

const { run } = Ember;
const assign = Ember.assign || Ember.merge;

export default function startApp(attrs) {
  let application;

  let attributes = assign({rootElement: "#test-root"}, config.APP);
  attributes = assign(attributes, attrs); // use defaults, but you can override;

  run(() => {
    application = Application.create(attributes);
    application.setupForTesting();
    application.injectTestHelpers();
  });

  return application;
}

tests.integration.components.foo-bar-test.js

import { moduleForComponent, test } from 'ember-qunit';
import hbs from 'htmlbars-inline-precompile';

moduleForComponent('foo-bar', 'integration | foor-bar', {
  integration: true
});

test('it renders', function(assert) {

  // Set any properties with this.set('myProperty', 'value');
  // Handle any actions with this.on('myAction', function(val) { ... });

  this.render(hbs`{{foo-bar}}`);

  assert.equal(this.$().text().trim(), 'This is all inside the component');

  // Template block usage:
  this.render(hbs`
    {{#foo-bar}}
      template block text
    {{/foo-bar}}
  `);

  assert.equal(this.$().text().trim(), 'template block text');
});

tests.test-helper.js

import resolver from './helpers/resolver';
import {
  setResolver
} from 'ember-qunit';

setResolver(resolver);

twiddle.json

{
  "version": "0.12.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": true
  },
  "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-click-outside": "0.1.10"
  }
}