Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update Options Page #32

Merged
merged 7 commits into from
Jul 13, 2024
Merged

Update Options Page #32

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
3068603
Update Options Layout
smashedr Jul 13, 2024
3d29190
Update Options for Light Mode
smashedr Jul 13, 2024
e575b44
Cleanup
smashedr Jul 13, 2024
82bbe7c
Add Padding
smashedr Jul 13, 2024
e79a9de
Update Dependencies
smashedr Jul 13, 2024
44a75ab
Update Transparency
smashedr Jul 13, 2024
e6b17f9
Cleanup Options
smashedr Jul 13, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion .github/ISSUE_TEMPLATE/config.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,5 +13,5 @@ contact_links:
url: https://discord.gg/wXy6m2X8wY

- name: '📝 Submit Feedback'
about: Send General Feedback Anonymously.
about: Send General Feedback.
url: https://cssnr.github.io/feedback/?app=ASN%20Plus
34 changes: 14 additions & 20 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@
"eslint": "^8.57.0",
"gulp": "^4.0.2",
"json-merger": "^1.1.10",
"prettier": "^3.3.2",
"prettier": "^3.3.3",
"web-ext": "^8.2.0"
}
}
32 changes: 30 additions & 2 deletions src/css/options.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,33 @@
/* CSS for options.html */

.card {
min-width: 360px;
body {
min-width: 400px;
}

#options-wrapper {
width: 100%;
max-width: 800px;
backdrop-filter: blur(6px);
filter: drop-shadow(15px 15px 12px #000000);
}

[data-bs-theme='dark'] #options-wrapper {
background: rgba(0 0 0 / 50%);
}
[data-bs-theme='light'] #options-wrapper {
background: rgba(255 255 255 / 60%);
}

[data-bs-theme='dark'] .form-control {
background: rgba(0 0 0 / 50%);
}
[data-bs-theme='light'] .form-control {
background: rgba(255 255 255 / 50%);
}

[data-bs-theme='dark'] #table-wrapper {
background: rgba(0 0 0 / 50%);
}
[data-bs-theme='light'] #table-wrapper {
background: rgba(255 255 255 / 50%);
}
166 changes: 110 additions & 56 deletions src/html/options.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,32 +13,29 @@
</head>
<body class="h-100">

<div class="container-fluid p-3 h-100">
<div class="d-flex align-items-center h-100">
<div class="col-xxl-6 col-lg-8 col-md-10 col-12 m-auto">
<div class="card mb-3">
<div class="card-body">
<div class="d-flex align-items-center justify-content-center pt-3 px-1 px-sm-3 h-100 w-100">
<div class="m-auto pb-4 w-100" style="max-width: 100%;">
<div id="options-wrapper" class="rounded rounded-4 p-3 m-auto w-100">

<div class="d-flex justify-content-center align-items-center">
<img src="../images/logo48.png" class="me-2" height="48" width="48"
alt="ASN Plus" title="ASN Plus">
<h1>ASN Plus</h1>
</div>
<div class="clearfix"></div>
<p class="text-center lead">v<span class="version"></span></p>
<table class="table table-sm table-borderless table-hover">
<caption class="visually-hidden">Keyboard Shortcuts</caption>
<thead class="visually-hidden"><tr><th>Description</th><th>Shortcut</th></tr></thead>
<tbody>
<tr>
<td>Show Popup Action <i class="fa-regular fa-keyboard ms-1"></i></td>
<td class="text-end" title="Keyboard Shortcut"><kbd id="mainKey">Not Set</kbd></td>
</tr>
<tr>
<td>Open Home Page <i class="fa-regular fa-keyboard ms-1"></i></td>
<td class="text-end" title="Keyboard Shortcut"><kbd id="openHome">Not Set</kbd></td>
</tr>
</tbody>
</table>
<div id="table-wrapper" class="rounded rounded-3 p-2 mb-3">
<table id="keyboard-shortcuts" class="table table-sm table-borderless table-hover mb-0">
<caption class="visually-hidden">Keyboard Shortcuts</caption>
<thead class="visually-hidden"><tr><th>Description</th><th>Shortcut</th></tr></thead>
<tbody>
<tr class="d-none">
<td class="bg-transparent"><i class="fa-regular fa-keyboard me-1"></i> <span class="description"></span></td>
<td class="bg-transparent text-end" title="Keyboard Shortcut"><kbd>Unknown</kbd></td>
</tr>
</tbody>
</table>
</div>
<hr>
<div class="d-none grant-perms my-3">
<button class="btn btn-lg btn-success w-100 mb-2 grant-permissions" type="button">
Expand Down Expand Up @@ -127,18 +124,10 @@ <h1>ASN Plus</h1>
</span>
</label>
</div>
<div id="keybindsInfo" class="ms-4" style="display: none;">
<p class="lh-lg">
<span class="d-inline-block me-2"><kbd>H</kbd> Home</span>
<span class="d-inline-block me-2"><kbd>D</kbd> Database</span>
<span class="d-inline-block me-2"><kbd>W</kbd> Wiki</span>
<span class="d-inline-block me-2"><kbd>C</kbd> Country</span>
<span class="d-inline-block me-2"><kbd>S</kbd> Search</span>
<span class="d-inline-block me-2"><kbd>A</kbd> Add</span>
<span class="d-inline-block me-2"><kbd>E</kbd> Edit</span>
<span class="d-inline-block me-2"><kbd>B</kbd> Back</span>
<span class="d-inline-block me-2"><kbd>P</kbd> Play</span>
</p>
<div id="keybindsInfo" class="ms-4 mb-2" style="display: none;">
<button type="button" class="btn btn-sm btn-outline-primary" data-bs-toggle="modal" data-bs-target="#keybinds-modal">
<i class="fa-regular fa-keyboard me-1"></i> Press K or Z to Show Keybinds
</button>
</div>

<div class="form-check form-switch">
Expand All @@ -150,36 +139,37 @@ <h1>ASN Plus</h1>
</span>
</label>
</div>
<div class="row mt-0" id="autoFillOptions" style="display: none;">
<div class="d-none extra-grant mb-2">
<div class="mt-0" id="autoFillOptions" style="display: none;">
<div class="ms-4 mb-2 extra-grant d-none">
<button class="btn btn-sm btn-outline-success grant-permissions" type="button"
data-bs-toggle="tooltip" data-bs-placement="top" data-bs-trigger="hover"
data-bs-title="Allow Retrieving Remote Aircraft Information." data-extra="yes">
<i class="fa-solid fa-check-double me-1"></i> Grant Extra Permissions</button>
</div>
<div class="d-none extra-perms mb-2">
<div class="ms-4 mb-2 extra-perms d-none">
<button class="link-danger btn btn-sm btn-link revoke-permissions" type="button"
data-bs-toggle="tooltip" data-bs-placement="top" data-bs-trigger="hover"
data-bs-title="Don't Allow Retrieving Remote Aircraft Information." data-extra="yes">
Remove Extra Permissions</button>
</div>

<div class="col-sm-6 col-lg-4 col-12 mb-2">
<label for="asnUsername" class="form-label">
<i class="fa-solid fa-signature me-1"></i> ASN Username
</label>
<input id="asnUsername" aria-describedby="asnUsernameHelp" type="text" class="form-control" autocomplete="off" placeholder="Name">
<div class="form-text" id="asnUsernameHelp">
Username Used for Auto Fill.
<div class="row">
<div class="col-sm-6 col-lg-4 col-12 mb-2">
<label for="asnUsername" class="form-label">
<i class="fa-solid fa-signature me-1"></i> ASN Username
</label>
<input id="asnUsername" aria-describedby="asnUsernameHelp" type="text" class="form-control" autocomplete="off" placeholder="Name">
<div class="form-text" id="asnUsernameHelp">
Username Used for Auto Fill.
</div>
</div>
</div>
<div class="col-sm-6 col-lg-8 col-12 mb-2">
<label for="asnEmail" class="form-label">
<i class="fa-solid fa-at me-1"></i> ASN E-Mail
</label>
<input id="asnEmail" aria-describedby="asnEmailHelp" type="email" class="form-control" autocomplete="off" placeholder="E-Mail">
<div class="form-text" id="asnEmailHelp">
E-Mail Used for Auto Fill.
<div class="col-sm-6 col-lg-8 col-12 mb-2">
<label for="asnEmail" class="form-label">
<i class="fa-solid fa-at me-1"></i> ASN E-Mail
</label>
<input id="asnEmail" aria-describedby="asnEmailHelp" type="email" class="form-control" autocomplete="off" placeholder="E-Mail">
<div class="form-text" id="asnEmailHelp">
E-Mail Used for Auto Fill.
</div>
</div>
</div>
</div>
Expand Down Expand Up @@ -211,7 +201,7 @@ <h1>ASN Plus</h1>
<div class="form-text" id="countryCodeHelp">
Country URL or Code from
<a class="d-inline-block" href="https://asn.flightsafety.org/asndb/countries/" target="_blank" rel="noopener">
ASN</a>.
ASN <i class="fa-solid fa-arrow-up-right-from-square fa-xs ms-1"></i></a>.
</div>
</div>
</div>
Expand Down Expand Up @@ -264,6 +254,42 @@ <h1>ASN Plus</h1>
</span>
</label>
</div>

<a id="reset-background" class="float-end align-bottom small" role="button">Reset</a>
<h5 class="mt-3">
Options Page Background
<span class="small" data-bs-toggle="tooltip" data-bs-title="Disabled or Random Picture.">
<i class="fa-solid fa-circle-info ms-1"></i>
</span>
</h5>
<div class="d-flex flex-column flex-md-row mb-2 align-items-md-center" style="min-height: 38px;">
<div class="flex-grow-0 mt-md-0">
<div class="ms-2 ms-md-0 mt-auto">
<div class="d-flex">
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="radioBackground" id="bgNone" value="none">
<label class="form-check-label" for="bgNone">
<i class="fa-regular fa-square"></i> None
</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="radioBackground" id="bgPicture" value="picture">
<label class="form-check-label" for="bgPicture">
<i class="fa-regular fa-image"></i> Picture
</label>
</div>
</div>
</div>
</div>
<div class="flex-fill mt-2 mt-md-0 ms-2 ms-md-0">
<div id="bgPictureInput" class="input-group">
<span class="input-group-text" id="picture-addon" data-bs-toggle="tooltip" data-bs-title="URL to a Web Image or empty for default.">
<i class="fa-solid fa-circle-info"></i></span>
<input type="text" class="form-control" placeholder="Background Picture URL" aria-label="Background Picture URL"
id="pictureURL" name="pictureURL" aria-describedby="picture-addon">
</div>
</div>
</div> <!-- background options -->
</form>

<p class="fst-italic small mt-3">
Expand All @@ -282,11 +308,39 @@ <h1>ASN Plus</h1>
<a class="link-body-emphasis text-decoration-none d-inline-block" target="_blank" rel="noopener"
href="https://github.com/cssnr/asn-plus/issues">Open Issue</a>
</div>
</div> <!-- card-body -->
</div> <!-- card -->
</div> <!-- col -->
</div> <!-- flex -->
</div> <!-- container -->

</div> <!-- options-wrapper -->
</div> <!-- m-auto -->
</div> <!-- d-flex -->


<div id="keybinds-modal" class="modal" tabindex="-1">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Keyboard Shortcuts <i class="fa-regular fa-keyboard ms-2"></i></h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="row">
<div class="col-12 col-sm-6">
<p><kbd>H</kbd> Home</p>
<p><kbd>D</kbd> Database</p>
<p><kbd>W</kbd> Wikibase</p>
<p><kbd>C</kbd> Country</p>
<p><kbd>S</kbd> Search</p>
</div>
<div class="col-12 col-sm-6">
<p><kbd>A</kbd> Add</p>
<p><kbd>E</kbd> Edit</p>
<p><kbd>B</kbd> Back</p>
<p><kbd>P</kbd> Play</p>
</div>
</div>
</div>
</div>
</div>
</div> <!-- keybinds-modal -->

<div aria-live="polite" aria-atomic="true" class="">
<div id="toast-container" class="toast-container position-fixed bottom-0 end-0 p-3"></div>
Expand Down
17 changes: 14 additions & 3 deletions src/js/export.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -104,6 +104,9 @@ export async function saveOptions(event) {
options['countryCode'] = 'N'
key = 'countryDisplay'
value = 'USA'
} else if (key === 'reset-background') {
key = 'pictureURL'
value = 'https://images.cssnr.com/aviation'
} else if (event.target.type === 'radio') {
key = event.target.name
const radios = document.getElementsByName(key)
Expand All @@ -116,7 +119,16 @@ export async function saveOptions(event) {
} else if (event.target.type === 'checkbox') {
value = event.target.checked
} else if (event.target.type === 'number') {
value = event.target.value.toString()
const number = parseFloat(event.target.value)
let min = 0.5
let max = 2.0
if (!isNaN(number) && number >= min && number <= max) {
event.target.value = number.toString()
value = number
} else {
event.target.value = options[event.target.id]
return
}
} else {
value = event.target.value?.trim()
}
Expand Down Expand Up @@ -147,13 +159,12 @@ export function updateOptions(options) {
}
// console.debug(`${key}: ${value}`)
const el = document.getElementById(key)
// console.debug('el:', el)
if (!el) {
continue
}
if (!['INPUT', 'SELECT'].includes(el.tagName)) {
el.textContent = value.toString()
} else if (el.type === 'checkbox') {
} else if (['checkbox', 'radio'].includes(el.type)) {
el.checked = value
} else {
el.value = value
Expand Down
Loading