From 3378fb344762bd564678b71f42d7cf7a117f7d6f Mon Sep 17 00:00:00 2001
From: Patrick Walton <pcwalton@mimiga.net>
Date: Wed, 6 Sep 2017 18:39:14 -0700
Subject: [PATCH] Make clicking outside the settings popup dismiss it

---
 demo/client/html/text-demo.html.hbs | 4 +---
 demo/client/src/app-controller.ts   | 7 ++++++-
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/demo/client/html/text-demo.html.hbs b/demo/client/html/text-demo.html.hbs
index 1336851e..cb5183f5 100644
--- a/demo/client/html/text-demo.html.hbs
+++ b/demo/client/html/text-demo.html.hbs
@@ -49,9 +49,7 @@
                     <div class="pf-arrow-box"></div>
                 </div>
                 <button id="pf-settings-button" type="button" class="btn btn-outline-secondary"
-                 aria-expanded="false" aria-controls="#pf-settings">
-                    {{octicon "gear"}}
-                </button>
+                 aria-expanded="false" aria-controls="#pf-settings">{{octicon "gear"}}</button>
             </div>
             <div class="rounded py-1 px-3 mr-3" id="pf-fps-label">0 ms</div>
         </div>
diff --git a/demo/client/src/app-controller.ts b/demo/client/src/app-controller.ts
index b90b8ed8..dd311e19 100644
--- a/demo/client/src/app-controller.ts
+++ b/demo/client/src/app-controller.ts
@@ -60,12 +60,17 @@ export abstract class DemoAppController<View extends PathfinderDemoView> extends
         this.settingsButton = document.getElementById('pf-settings-button') as HTMLButtonElement;
         this.settingsCloseButton = document.getElementById('pf-settings-close-button') as
             HTMLButtonElement;
-        this.settingsButton.addEventListener('click', () => {
+
+        this.settingsButton.addEventListener('click', event => {
+            event.stopPropagation();
             this.settingsCard.classList.toggle('pf-invisible');
         }, false);
         this.settingsCloseButton.addEventListener('click', () => {
             this.settingsCard.classList.add('pf-invisible');
         }, false);
+        document.body.addEventListener('click', () => {
+            this.settingsCard.classList.add('pf-invisible');
+        }, false);
 
         this.filePickerElement = document.getElementById('pf-file-select') as
             (HTMLInputElement | null);