Fix(ui): close ui when doc is clicked (closes #772)

w3c · May 19, 2016 · 8977846 · 8977846
1 parent f06ceba
commit 8977846
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 2 deletions.
diff --git a/js/core/ui.js b/js/core/ui.js
@@ -14,7 +14,7 @@
 define(
     ["shortcut", "core/jquery-enhanced"],
     function (shortcut) {
-        var $menu = $("<div></div>")
+        var $menu = $("<div id=respec-menu></div>")
                         .css({
                             background:     "#fff"
                         ,   border:         "1px solid #000"
@@ -125,11 +125,17 @@ define(
                                     ,   border:         "1px solid #ccc"
                                     ,   borderRadius:   "5px"
                                     })
-                                    .click(function () {
+                                    .click(function (e) {
+                                        e.stopPropagation();
                                         $menu.toggle();
                                     })
                                     .appendTo($div)
                                     ;
+                window.document.firstElementChild.addEventListener("click", function(ev){
+                    if($menu[0].style.display === "block"){
+                        $menu.fadeOut(200);
+                    }
+                });
                 $menu.appendTo($div);
                 shortcut.add("Esc", function () {
                     ui.closeModal();

diff --git a/tests/spec/core/ui-spec.js b/tests/spec/core/ui-spec.js
@@ -19,4 +19,22 @@ describe("Core - Ui", function () {
       expect(pillContainer.classList.contains("respec-hidden")).toBe(false);
     }).then(done);
   });
+
+  it("hides the UI when document is clicked", function (done) {
+    makeRSDoc(makeStandardOps(), function (doc) {
+      var menu = doc.querySelector("#respec-menu");
+      expect(window.getComputedStyle(menu).display).toEqual("none");
+      doc.querySelector("#respec-pill").click();
+      // spin the event loop
+      doc.body.click();
+      new Promise(function(resolve){
+        setTimeout(resolve, 500)
+      })
+      .then(function(){
+        expect(window.getComputedStyle(menu).display).toEqual("none");
+        done();
+      });
+      // give it time to fade out
+    });
+  });
 });