Merge pull request #1 from thriqon/master

Close extension when clicking anywhere else
Advertate · Apr 29, 2015 · 87dab01 · 87dab01
2 parents d91dc90 + 0d70dbb
commit 87dab01
Show file tree

Hide file tree

Showing 4 changed files with 86 additions and 3 deletions.
diff --git a/addon/components/confirm-extension.js b/addon/components/confirm-extension.js
@@ -1,12 +1,42 @@
 import Ember from 'ember';
 import layout from '../templates/components/confirm-extension';
 
+/* global $ */
+
 export default Ember.Component.extend({
   layout: layout,
 
+  _setupClickHandler: function () {
+    var closer = _clickHandlerFor(this);
+    this.set('_closer', closer);
+    $(document).on('click', closer);
+  },
+  _teardownClickHandlerIfNeeded: function () {
+    var closer = this.get('_closer');
+    if (closer) {
+      $(document).off('click', closer);
+      this.set('_closer', null);
+    }
+  },
+  _autoCloser: Ember.observer('confirmMode', function () {
+    if (this.get('confirmMode')) {
+      this._setupClickHandler();
+    } else {
+      this._teardownClickHandlerIfNeeded();
+    }
+  }),
+  _beforeRemove: Ember.on('willDestroyElement', function () {
+    this._teardownClickHandlerIfNeeded();
+  }),
+  _afterInsert: Ember.on('didInsertElement', function () {
+    if (this.get('confirmMode')) {
+      this._setupClickHandler();
+    }
+  }),
+
   actions: {
     click: function() {
-      this.set('confirmMode', !this.get('confirmMode'));
+      this.toggleProperty('confirmMode');
     },
     confirm: function() {
       this.set('confirmMode', false);
@@ -17,3 +47,15 @@ export default Ember.Component.extend({
     }
   }
 });
+
+function _contains(ancestor, child) {
+  return ancestor.has(child).length !== 0;
+}
+
+function _clickHandlerFor(self) {
+  return function (e) {
+    if (!_contains(self.$(), e.target)) {
+      Ember.run(self, 'set', 'confirmMode', false);
+    }
+  };
+}
diff --git a/tests/dummy/app/controllers/application.js b/tests/dummy/app/controllers/application.js
@@ -0,0 +1,12 @@
+
+import Ember from 'ember';
+
+/* global alert */
+
+export default Ember.Controller.extend({
+  actions: {
+    boom: function () {
+      alert('BOOM');
+    }
+  }
+});
diff --git a/tests/dummy/app/templates/application.hbs b/tests/dummy/app/templates/application.hbs
@@ -1,3 +1,6 @@
-{{#confirm-extension questionText='really?' confirmText='yes' declineText='no'}}
+
+<h1>Central Command</h1>
+
+{{#confirm-extension questionText='really?' confirmText='yes' declineText='no' confirmAction='boom'}}
   <button>Destroy planet earth</button>
 {{/confirm-extension}}
diff --git a/tests/unit/components/confirm-extension-test.js b/tests/unit/components/confirm-extension-test.js
@@ -47,7 +47,7 @@ test('click on the yielded template leaves the confirm mode and hides the bubble
 
   var $component = this.render();
   assert.equal($component.find('.ece-bubble').length, 1);
-  $component.find('span')[0].click();
+  $component.find('span').click();
   assert.equal(component.get('confirmMode'), false);
   assert.equal($component.find('.ece-bubble').length, 0);
 });
@@ -72,3 +72,29 @@ test('click on confirm triggers the confirmAction, leaves confirmMode and hides
   assert.equal(component.get('confirmMode'), false);
   assert.equal($component.find('.ece-bubble').length, 0);
 });
+
+test('click on <body> should leave confirmMode when initially open', function (assert) {
+  assert.expect(2);
+  var component = this.subject({
+    confirmMode: true
+  });
+
+  var $component = this.render();
+  assert.ok(component.get('confirmMode'), 'should be in confirm mode');
+  $('body').click();
+  assert.ok(!component.get('confirmMode'), 'should not be in confirm mode');
+});
+
+test('click on <body> should leave confirmMode when opened after render', function (assert) {
+  assert.expect(2);
+  var component = this.subject({
+    confirmMode: false
+  });
+
+  var $component = this.render();
+  Ember.run(component, 'set', 'confirmMode', true);
+
+  assert.ok(component.get('confirmMode'), 'should be in confirm mode');
+  $('body').click();
+  assert.ok(!component.get('confirmMode'), 'should not be in confirm mode');
+});