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

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

Hide file tree

Showing 2 changed files with 29 additions and 3 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)
                                     ;
+                doc.body.addEventListener("click", function(ev){
+                    if(doc.defaultView.getComputedStyle($menu[0]).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
@@ -1,6 +1,6 @@
 "use strict";
 
-describe("Core - Ui", function () {
+fdescribe("Core - Ui", function () {
   afterAll(function (done) {
     flushIframes();
     done();
@@ -19,4 +19,24 @@ 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 ui = doc.defaultView.respecUI;
+      var menu = doc.querySelector("#respec-menu");
+      expect(doc.defaultView.getComputedStyle(menu).display).toEqual("none");
+      doc.querySelector("#respec-pill").click();
+      expect(doc.defaultView.getComputedStyle(menu).display).toEqual("block");
+      // showing it doesn't change it from showing
+
+      expect(doc.defaultView.getComputedStyle(menu).display).toEqual("block");
+      // give it time to fade out
+      doc.body.click();
+      setTimeout(function(){
+        expect(doc.defaultView.getComputedStyle(menu).display).toEqual("none");
+        done();
+      }, 300);
+    });
+  });
+
 });