From 8803cbbf233da87fb479c45beba909d6f19aca6e Mon Sep 17 00:00:00 2001
From: e7d <michael@e7d.io>
Date: Thu, 1 Jun 2023 15:41:29 +0200
Subject: [PATCH] improve popout presentation

---
 css/main.css  |  50 +++++++++++-----
 index.html    | 155 ++++++++++++++++++++++++++------------------------
 js/gamepad.js |   8 ++-
 3 files changed, 121 insertions(+), 92 deletions(-)

diff --git a/css/main.css b/css/main.css
index d63ddad..fb98fb3 100644
--- a/css/main.css
+++ b/css/main.css
@@ -137,18 +137,31 @@ body.unsupported #gamepad {
     max-width: 200px;
 }
 
-#help-popout {
+.popout {
+    background: rgba(0, 0, 0, 0.5);
+    display: none;
+    height: 100vh;
+    left: 0;
+    position: fixed;
+    top: 0;
+    width: 100vw;
+}
+
+.popout.active {
+    display: block;
+}
+
+.popout .content {
     background: whitesmoke;
     border: 1px solid rgba(0, 0, 0, 0.2);
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
     box-sizing: border-box;
     color: black;
-    display: none;
     font-size: 0.9em;
     left: 50%;
-    min-width: 400px;
-    width: 600px;
-    max-height: 100vh;
+    max-height: 90vh;
+    max-width: 90vw;
+    min-width: 600px;
     overflow-y: auto;
     padding: 20px;
     position: absolute;
@@ -156,43 +169,50 @@ body.unsupported #gamepad {
     transform: translate(-50%, -50%);
 }
 
-#help-popout.active {
-    display: block;
+.popout .close {
+    background: none;
+    border: none;
+    color: black;
+    cursor: pointer;
+    font-size: 1.5em;
+    position: absolute;
+    right: 20px;
+    top: 20px;
 }
 
-#help-popout h2 {
+.popout h2 {
     margin-bottom: 1.5em;
     margin-top: 0;
 }
 
-#help-popout h3 {
+.popout h3 {
     margin-top: 1.5em;
 }
 
-#help-popout p:last-child {
+.popout p:last-child {
     margin-bottom: 0;
 }
 
-#help-popout table {
+.popout table {
     border-collapse: collapse;
     border-spacing: 0;
     max-width: 100%;
     width: 100%;
 }
 
-#help-popout th {
+.popout th {
     text-align: left;
 }
 
-#help-popout th,
-#help-popout td {
+.popout th,
+.popout td {
     border-top: 1px solid #ddd;
     line-height: 1.42857143;
     padding: 8px;
     vertical-align: top;
 }
 
-#help-popout table > thead > tr > th {
+.popout table > thead > tr > th {
     border-bottom: 2px solid #ddd;
     border-top: 0;
     vertical-align: bottom;
diff --git a/index.html b/index.html
index ac97264..87028c9 100644
--- a/index.html
+++ b/index.html
@@ -127,85 +127,90 @@
 			</select>
 		</span>
 	</div>
-	<div id="help-popout">
-		<h2>Help</h2>
+	<div id="help" class="popout">
+		<div class="content">
+			<div class="close">✕</div>
 
-		<h3>Instructions</h3>
-		<p>Press and hold any of your gamepad buttons for at least 1 second. If your gamepad is supported, it shows up.
-		</p>
+			<h2>Help</h2>
 
-		<h3>Detected Controllers</h3>
-		<table>
-			<thead>
-				<tr>
-					<th>Index</th>
-					<th>Controller ID</th>
-				</tr>
-			</thead>
-			<tbody id="gamepad-list">
-				<tr>
-					<td colspan="2">No gamepad detected.</td>
-				</tr>
-			</tbody>
-		</table>
+			<h3>Instructions</h3>
+			<p>Press and hold any of your gamepad buttons for at least 1 second. If your gamepad is supported, it shows
+				up.
+			</p>
 
-		<h3>Keyboard shortcuts</h3>
-		<table>
-			<thead>
-				<tr>
-					<th>Key</th>
-					<th>Action</th>
-				</tr>
-			</thead>
-			<tbody>
-				<tr>
-					<th><kbd>+</kbd></th>
-					<td>Zoom in</td>
-				</tr>
-				<tr>
-					<th><kbd>-</kbd></th>
-					<td>Zoom out</td>
-				</tr>
-				<tr>
-					<th><kbd>0</kbd></th>
-					<td>Reset zoom to 100%</td>
-				</tr>
-				<tr>
-					<th><kbd>5</kbd></th>
-					<td>Adjust zoom automatically to window</td>
-				</tr>
-				<tr>
-					<th><kbd>B</kbd></th>
-					<td>Change background style</td>
-				</tr>
-				<tr>
-					<th><kbd>C</kbd></th>
-					<td>Change active gamepad color</td>
-				</tr>
-				<tr>
-					<th><kbd>D</kbd></th>
-					<td>Toggle debug mode for active gamepad</td>
-				</tr>
-				<tr>
-					<th><kbd>H</kbd></th>
-					<td>Toggle this help menu</td>
-				</tr>
-				<tr>
-					<th><kbd>T</kbd></th>
-					<td>Toggle triggers meter mode</td>
-				</tr>
-				<tr>
-					<th><kbd>Delete</kbd>, <kbd>Escape</kbd></th>
-					<td>Clear active gamepad</td>
-				</tr>
-			</tbody>
-		</table>
+			<h3>Detected Controllers</h3>
+			<table>
+				<thead>
+					<tr>
+						<th>Index</th>
+						<th>Controller ID</th>
+					</tr>
+				</thead>
+				<tbody id="gamepad-list">
+					<tr>
+						<td colspan="2">No gamepad detected.</td>
+					</tr>
+				</tbody>
+			</table>
 
-		<h3>Credits</h3>
-		<p>All information and source code can be found on GitHub at <a target="_blank"
-				href="https://github.com/e7d/gamepad-viewer">e7d/gamepad-viewer</a>.</p>
-		<p>DualShock 4 and Xbox One skins from <a target="_blank"
-				href="https://gamepadviewer.com/">gamepadviewer.com</a>.</p>
+			<h3>Keyboard shortcuts</h3>
+			<table>
+				<thead>
+					<tr>
+						<th>Key</th>
+						<th>Action</th>
+					</tr>
+				</thead>
+				<tbody>
+					<tr>
+						<th><kbd>+</kbd></th>
+						<td>Zoom in</td>
+					</tr>
+					<tr>
+						<th><kbd>-</kbd></th>
+						<td>Zoom out</td>
+					</tr>
+					<tr>
+						<th><kbd>0</kbd></th>
+						<td>Reset zoom to 100%</td>
+					</tr>
+					<tr>
+						<th><kbd>5</kbd></th>
+						<td>Adjust zoom automatically to window</td>
+					</tr>
+					<tr>
+						<th><kbd>B</kbd></th>
+						<td>Change background style</td>
+					</tr>
+					<tr>
+						<th><kbd>C</kbd></th>
+						<td>Change active gamepad color</td>
+					</tr>
+					<tr>
+						<th><kbd>D</kbd></th>
+						<td>Toggle debug mode for active gamepad</td>
+					</tr>
+					<tr>
+						<th><kbd>H</kbd></th>
+						<td>Toggle this help menu</td>
+					</tr>
+					<tr>
+						<th><kbd>T</kbd></th>
+						<td>Toggle triggers meter mode</td>
+					</tr>
+					<tr>
+						<th><kbd>Delete</kbd>, <kbd>Escape</kbd></th>
+						<td>Clear active gamepad</td>
+					</tr>
+				</tbody>
+			</table>
+
+			<h3>Credits</h3>
+			<p>All information and source code can be found on GitHub at <a target="_blank"
+					href="https://github.com/e7d/gamepad-viewer">e7d/gamepad-viewer</a>.</p>
+			<p>DualShock 4 and Xbox One skins from <a target="_blank"
+					href="https://gamepadviewer.com/">gamepadviewer.com</a>.</p>
+		</div>
 	</div>
 
 	<script src="js/jquery.min.js"></script>
diff --git a/js/gamepad.js b/js/gamepad.js
index 0a8f377..2ac8379 100644
--- a/js/gamepad.js
+++ b/js/gamepad.js
@@ -21,7 +21,8 @@ class Gamepad {
         this.$colorSelect = this.$colorOverlay.find('select[name=color]');
         this.$triggersOverlay = this.$overlay.find('#triggers');
         this.$triggersSelect = this.$triggersOverlay.find('select[name=triggers]');
-        this.$helpPopout = $('#help-popout');
+        this.$helpPopout = $('#help.popout');
+        this.$helpPopoutClose = this.$helpPopout.find('.close');
         this.$gamepadList = $('#gamepad-list');
 
         // ensure the GamePad API is available on this browser
@@ -178,6 +179,9 @@ class Gamepad {
 
         // by default, enqueue a delayed display of the placeholder animation
         this.displayPlaceholder();
+
+        // listen for keyboard events
+        this.$helpPopoutClose.on('click', this.toggleHelp.bind(this));
     }
 
     /**
@@ -1080,7 +1084,7 @@ class Gamepad {
      * Toggles the on-screen help message
      */
     toggleHelp() {
-        // refresh gamepad lsit with latest data
+        // refresh gamepad list with latest data
         this.pollGamepads();
         this.buildHelpGamepadList();