Rim-Modules/gamepad-viewer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

improve popout presentation

Browse Source
This commit is contained in:
e7d 2023-06-01 15:41:29 +02:00
parent fdf316a67d
commit 8803cbbf23
No known key found for this signature in database
GPG Key ID: F320BE007C0B8881
3 changed files with 121 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
css/main.css
View File

@ -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;

155
index.html
View File

@ -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>

8
js/gamepad.js
View File

@ -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();