From 9760369e4c55ccbb9e8692b6046285886cad1294 Mon Sep 17 00:00:00 2001
From: Robin Ward <robin.ward@gmail.com>
Date: Wed, 26 Aug 2015 12:27:30 -0400
Subject: [PATCH] Clean up clicking outside the hamburger, add test

---
 .../components/hamburger-menu.js.es6          | 34 +++++++------------
 .../discourse/templates/header.hbs            |  2 +-
 .../acceptance/hamburger-menu-test.js.es6     | 11 ++++++
 3 files changed, 25 insertions(+), 22 deletions(-)

diff --git a/app/assets/javascripts/discourse/components/hamburger-menu.js.es6 b/app/assets/javascripts/discourse/components/hamburger-menu.js.es6
index 226640ca9c5..3c9a13fefd4 100644
--- a/app/assets/javascripts/discourse/components/hamburger-menu.js.es6
+++ b/app/assets/javascripts/discourse/components/hamburger-menu.js.es6
@@ -1,32 +1,23 @@
-import { default as computed, on } from 'ember-addons/ember-computed-decorators';
+import { default as computed, on, observes } from 'ember-addons/ember-computed-decorators';
+
 
 export default Ember.Component.extend({
   classNameBindings: ['visible::slideright'],
   elementId: 'hamburger-menu',
 
-  visibilityChanged: function(){
-    if(this.get("visible")) {
-     $('html').on('click.close-humburger', (e) => {
-
-        if (this.get('isDestroyed')) {
-          $('html').off('click.close-humburger');
-          return true;
-        }
-
+  @observes('visible')
+  _catchClickOutside() {
+    if (this.get('visible')) {
+      $('html').on('click.close-hamburger', (e) => {
         const $target = $(e.target);
-        if ($target.closest('.dropdown.categories').length > 0) {
-          return;
-        }
-
-        this.set("visible", false);
-        $('html').off('click.close-humburger');
-        return true;
-
+        if ($target.closest('.dropdown.hamburger').length > 0) { return; }
+        if ($target.closest('#hamburger-menu').length > 0) { return; }
+        this.set('visible', false);
       });
     } else {
-      $('html').off('click.close-humburger');
+      $('html').off('click.close-hamburger');
     }
-  }.observes("visible"),
+  },
 
   @computed()
   showKeyboardShortcuts() {
@@ -59,13 +50,14 @@ export default Ember.Component.extend({
         this.set('visible', false);
       }
     });
+
   },
 
   @on('willDestroyElement')
   _removeEvents() {
     this.$().off('click.discourse-hamburger');
     $('body').off('keydown.discourse-hambuger');
-    $('body').off('click.close-humburger');
+    $('html').off('click.close-hamburger');
   },
 
   @computed()
diff --git a/app/assets/javascripts/discourse/templates/header.hbs b/app/assets/javascripts/discourse/templates/header.hbs
index a05d8930e2b..6c7a403138e 100644
--- a/app/assets/javascripts/discourse/templates/header.hbs
+++ b/app/assets/javascripts/discourse/templates/header.hbs
@@ -42,7 +42,7 @@
             </a>
           {{/if}}
         </li>
-        <li class='categories dropdown'>
+        <li class='hamburger categories dropdown'>
           {{#if loginRequired}}
             <a class='icon'
                href
diff --git a/test/javascripts/acceptance/hamburger-menu-test.js.es6 b/test/javascripts/acceptance/hamburger-menu-test.js.es6
index 2fad102fb88..312cab6e387 100644
--- a/test/javascripts/acceptance/hamburger-menu-test.js.es6
+++ b/test/javascripts/acceptance/hamburger-menu-test.js.es6
@@ -17,6 +17,17 @@ test("Toggle Menu", (assert) => {
   andThen(() => {
     assert.ok(exists("#hamburger-menu.slideright"), "clicking the X hides it");
   });
+
+  click("#toggle-hamburger-menu");
+  andThen(() => {
+    assert.ok(!exists("#hamburger-menu.slideright"), "it opens again");
+  });
+
+  click('#main-outlet')
+  andThen(() => {
+    assert.ok(exists("#hamburger-menu.slideright"), "clicking the body hides the menu");
+  });
+
 });
 
 test("Menu Items", (assert) => {