Skip to content

Internal Updates #4

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.

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

Merged
merged 4 commits into from
Dec 8, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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 manifest.json
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
"description": "SMWC.world Web Extension and Browser Addon to Easily Patch and Play SMW ROMs.",
"homepage_url": "https://smwc.world",
"author": "Shane",
"version": "0.0.3",
"version": "0.0.4",
"manifest_version": 3,
"commands": {
"_execute_action": {
Expand Down
154 changes: 77 additions & 77 deletions src/html/options.html
Original file line number Diff line number Diff line change
Expand Up @@ -10,88 +10,88 @@
<body>

<div class="container-fluid p-3">
<div class="row">
<div class="col-xl-6 col-md-8 col-12 m-auto">
<div class="card" >
<div class="card-body">
<div class="justify-content-center align-items-center d-flex">
<img src="../images/logo48.png" class="img-fluid float-start me-2" alt="SMWC Web Extension" height="48" width="48">
<h1 class="align-middle">SMWC Web Extension</h1>
</div>
<div class="clearfix"></div>
<p class="text-center lead">v<span id="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</td>
<td class="text-end"><kbd id="mainKey">Unknown</kbd></td>
</tr>
</tbody>
</table>
<hr>
<form id="options">
<div class="form-check form-switch">
<input class="form-check-input options" type="checkbox" role="switch" id="contextMenu">
<label class="form-check-label" for="contextMenu" aria-describedby="contextMenuHelp">Enable Right Click Menu</label>
</div>
<div class="form-check form-switch mb-3">
<input class="form-check-input options" type="checkbox" role="switch" id="showUpdate">
<label class="form-check-label" for="showUpdate" aria-describedby="showUpdateHelp">Show Release Notes on Update</label>
</div>
</form>

<!-- <div class="accordion" id="accordionExample">-->
<!-- <div class="accordion-item">-->
<!-- <h2 class="accordion-header">-->
<!-- <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">-->
<!-- Advanced Settings-->
<!-- </button>-->
<!-- </h2>-->
<!-- <div id="collapseOne" class="accordion-collapse collapse" data-bs-parent="#accordionExample">-->
<!-- <div class="accordion-body">-->
<!-- <div class="alert alert-warning text-center" role="alert"><strong>DO NOT</strong> Change This Setting!</div>-->
<div class="row">
<div class="col-xl-6 col-md-8 col-12 m-auto">
<div class="card" >
<div class="card-body">
<div class="justify-content-center align-items-center d-flex">
<img src="../images/logo48.png" class="img-fluid float-start me-2" alt="SMWC Web Extension" height="48" width="48">
<h1 class="align-middle">SMWC Web Extension</h1>
</div>
<div class="clearfix"></div>
<p class="text-center lead">v<span id="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</td>
<td class="text-end"><kbd id="mainKey">Unknown</kbd></td>
</tr>
</tbody>
</table>
<hr>
<form id="options-form">
<div class="form-check form-switch">
<input class="form-check-input options" type="checkbox" role="switch" id="contextMenu">
<label class="form-check-label" for="contextMenu" aria-describedby="contextMenuHelp">Enable Right Click Menu</label>
</div>
<div class="form-check form-switch mb-3">
<input class="form-check-input options" type="checkbox" role="switch" id="showUpdate">
<label class="form-check-label" for="showUpdate" aria-describedby="showUpdateHelp">Show Release Notes on Update</label>
</div>
</form>

<!-- <form id="advanced" class="">-->
<!-- <label for="url" class="form-label">SMWC.world URL</label>-->
<!-- <a id="reset-default" class="float-end align-bottom small" role="button">Reset to Default</a>-->
<!-- <input type="text" id="url" class="options" aria-describedby="urlHelp">-->
<!-- <div id="urlInvalid" class="invalid-feedback">Invalid Hostname.</div>-->
<!-- <div id="urlHelp" class="form-text mb-3">-->
<!-- URL to SMWC.world Instance. Only used for testing!-->
<!-- </div>-->
<!-- <div class="">-->
<!-- <button type="submit" class="btn btn-outline-warning w-100">-->
<!-- Save Advanced Settings-->
<!-- <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" class="bi bi-floppy2 ms-1" viewBox="0 0 16 16">-->
<!-- <path d="M1.5 0h11.586a1.5 1.5 0 0 1 1.06.44l1.415 1.414A1.5 1.5 0 0 1 16 2.914V14.5a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 0 14.5v-13A1.5 1.5 0 0 1 1.5 0ZM1 1.5v13a.5.5 0 0 0 .5.5H2v-4.5A1.5 1.5 0 0 1 3.5 9h9a1.5 1.5 0 0 1 1.5 1.5V15h.5a.5.5 0 0 0 .5-.5V2.914a.5.5 0 0 0-.146-.353l-1.415-1.415A.5.5 0 0 0 13.086 1H13v3.5A1.5 1.5 0 0 1 11.5 6h-7A1.5 1.5 0 0 1 3 4.5V1H1.5a.5.5 0 0 0-.5.5Zm9.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-1Z"/>-->
<!-- </svg>-->
<!-- </button>-->
<!-- </div>-->
<!-- </form>-->
<!-- <div class="accordion" id="accordionExample">-->
<!-- <div class="accordion-item">-->
<!-- <h2 class="accordion-header">-->
<!-- <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">-->
<!-- Advanced Settings-->
<!-- </button>-->
<!-- </h2>-->
<!-- <div id="collapseOne" class="accordion-collapse collapse" data-bs-parent="#accordionExample">-->
<!-- <div class="accordion-body">-->
<!-- <div class="alert alert-warning text-center" role="alert"><strong>DO NOT</strong> Change This Setting!</div>-->

<!-- </div>-->
<!-- </div>-->
<!-- <form id="advanced" class="">-->
<!-- <label for="url" class="form-label">SMWC.world URL</label>-->
<!-- <a id="reset-default" class="float-end align-bottom small" role="button">Reset to Default</a>-->
<!-- <input type="text" id="url" class="options" aria-describedby="urlHelp">-->
<!-- <div id="urlInvalid" class="invalid-feedback">Invalid Hostname.</div>-->
<!-- <div id="urlHelp" class="form-text mb-3">-->
<!-- URL to SMWC.world Instance. Only used for testing!-->
<!-- </div>-->
<!-- </div>-->
<!-- <div class="">-->
<!-- <button type="submit" class="btn btn-outline-warning w-100">-->
<!-- Save Advanced Settings-->
<!-- <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" class="bi bi-floppy2 ms-1" viewBox="0 0 16 16">-->
<!-- <path d="M1.5 0h11.586a1.5 1.5 0 0 1 1.06.44l1.415 1.414A1.5 1.5 0 0 1 16 2.914V14.5a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 0 14.5v-13A1.5 1.5 0 0 1 1.5 0ZM1 1.5v13a.5.5 0 0 0 .5.5H2v-4.5A1.5 1.5 0 0 1 3.5 9h9a1.5 1.5 0 0 1 1.5 1.5V15h.5a.5.5 0 0 0 .5-.5V2.914a.5.5 0 0 0-.146-.353l-1.415-1.415A.5.5 0 0 0 13.086 1H13v3.5A1.5 1.5 0 0 1 11.5 6h-7A1.5 1.5 0 0 1 3 4.5V1H1.5a.5.5 0 0 0-.5.5Zm9.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-1Z"/>-->
<!-- </svg>-->
<!-- </button>-->
<!-- </div>-->
<!-- </form>-->

<hr>
<div class="text-center">
<a class="link-body-emphasis text-decoration-none d-inline-block" target="_blank" rel="noopener"
href="https://github.com/cssnr/smwc-web-extension#readme">Get Help</a>
|
<a class="link-body-emphasis text-decoration-none d-inline-block" target="_blank" rel="noopener"
href="https://github.com/cssnr/smwc-web-extension/discussions/new?category=feature-requests">Request Feature</a>
|
<a class="link-body-emphasis text-decoration-none d-inline-block" target="_blank" rel="noopener"
href="https://github.com/cssnr/smwc-web-extension/issues/new">Open Issue</a>
</div>
</div>
</div>
</div>
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->

<hr>
<div class="text-center">
<a class="link-body-emphasis text-decoration-none d-inline-block" target="_blank" rel="noopener"
href="https://github.com/cssnr/smwc-web-extension#readme">Get Help</a>
|
<a class="link-body-emphasis text-decoration-none d-inline-block" target="_blank" rel="noopener"
href="https://github.com/cssnr/smwc-web-extension/discussions/categories/feature-requests">Request Feature</a>
|
<a class="link-body-emphasis text-decoration-none d-inline-block" target="_blank" rel="noopener"
href="https://github.com/cssnr/smwc-web-extension/issues">Open Issue</a>
</div>
</div>
</div> <!-- card-body -->
</div> <!-- card -->
</div> <!-- col -->
</div> <!-- row -->
</div> <!-- container -->

<script type="text/javascript" src="../dist/jquery/jquery.min.js"></script>
<script type="text/javascript" src="../dist/bootstrap/bootstrap.bundle.min.js"></script>
Expand Down
24 changes: 13 additions & 11 deletions src/html/popup.html
Original file line number Diff line number Diff line change
Expand Up @@ -42,23 +42,25 @@
</div>
<div id="popup-alert" class="alert alert-warning mt-2 visually-hidden" role="alert"></div>
<hr class="my-2">
<div class="form-check form-switch">
<input class="form-check-input options" type="checkbox" role="switch" id="contextMenu">
<label class="form-check-label" for="contextMenu">Enable Right Click Menu</label>
</div>
<div class="form-check form-switch">
<input class="form-check-input options" type="checkbox" role="switch" id="showUpdate">
<label class="form-check-label" for="showUpdate" aria-describedby="showUpdateHelp">Show Release Notes on Update</label>
</div>
<form id="options-form">
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" role="switch" id="contextMenu">
<label class="form-check-label" for="contextMenu">Enable Right Click Menu</label>
</div>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" role="switch" id="showUpdate">
<label class="form-check-label" for="showUpdate" aria-describedby="showUpdateHelp">Show Release Notes on Update</label>
</div>
</form>
<a class="btn btn-outline-primary btn-sm w-100 mt-3" role="button" data-href="options">
Open Options
</a>
<hr>
<p class="text-center small mb-0">
<div class="justify-content-center align-items-center d-flex text-center small">
<img src="../images/logo16.png" alt="SMWC Web Extension" class="me-1">
<a class="link-offset-2 link-underline link-underline-opacity-0 link-underline-opacity-75-hover" type="button" rel="noopener"
<a class="link-offset-2 link-underline link-underline-opacity-0 link-underline-opacity-75-hover mx-2" type="button" rel="noopener"
data-href="homepage">SMWC Web Extension</a> v<span id="version"></span>
</p>
</div>
</div>

<script type="text/javascript" src="../dist/jquery/jquery.min.js"></script>
Expand Down
29 changes: 21 additions & 8 deletions src/js/exports.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,29 +7,42 @@
*/
export async function saveOptions(event) {
console.log('saveOptions:', event)
let { options } = await chrome.storage.sync.get(['options'])
options[event.target.id] = event.target.checked
console.log(`Set: options[${event.target.id}]: ${options[event.target.id]}`)
await chrome.storage.sync.set({ options })
const { options } = await chrome.storage.sync.get(['options'])
let value
if (event.target.type === 'checkbox') {
value = event.target.checked
} else if (event.target.type === 'text') {
value = event.target.value
}
if (value !== undefined) {
options[event.target.id] = value
console.log(`Set: ${event.target.id}:`, value)
await chrome.storage.sync.set({ options })
}
}

/**
* Update Options
* Update Options based on typeof
* @function initOptions
* @param {Object} options
*/
export function updateOptions(options) {
for (const [key, value] of Object.entries(options)) {
// console.log(`${key}: ${value}`)
const element = document.getElementById(key)
if (element) {
element.checked = value
const el = document.getElementById(key)
if (el) {
if (typeof value === 'boolean') {
el.checked = value
} else if (typeof value === 'string') {
el.value = value
}
}
}
}

/**
* Patch ROM and open URL at key
* TODO: Make Source ROM an Option
* @param {String} url
* @param {String} key
* @param {Function} callback
Expand Down
5 changes: 3 additions & 2 deletions src/js/options.js
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,9 @@ document.addEventListener('DOMContentLoaded', initOptions)

chrome.storage.onChanged.addListener(onChanged)

const formInputs = document.querySelectorAll('.options')
formInputs.forEach((el) => el.addEventListener('change', saveOptions))
document
.querySelectorAll('#options-form input')
.forEach((el) => el.addEventListener('change', saveOptions))

// document.getElementById('advanced').addEventListener('submit', saveAdvanced)

Expand Down
23 changes: 12 additions & 11 deletions src/js/popup.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,14 +4,15 @@ import { patchRom, saveOptions, updateOptions } from './exports.js'

document.addEventListener('DOMContentLoaded', initPopup)

const popupLinks = document.querySelectorAll('[data-href]')
popupLinks.forEach((el) => el.addEventListener('click', popLinks))

const formInputs = document.querySelectorAll('.options')
formInputs.forEach((el) => el.addEventListener('change', saveOptions))

const searchTypes = document.getElementsByName('searchType')
searchTypes.forEach((el) => el.addEventListener('change', updateSearchType))
document
.querySelectorAll('[data-href]')
.forEach((el) => el.addEventListener('click', popupLinks))
document
.querySelectorAll('#options-form input')
.forEach((el) => el.addEventListener('change', saveOptions))
document
.getElementsByName('searchType')
.forEach((el) => el.addEventListener('change', updateSearchType))

document.getElementById('patch-form').addEventListener('submit', patchForm)

Expand All @@ -36,11 +37,11 @@ async function initPopup() {
/**
* Popup Links Click Callback
* Firefox requires a call to window.close()
* @function popLinks
* @function popupLinks
* @param {MouseEvent} event
*/
async function popLinks(event) {
console.log('popLinks:', event)
async function popupLinks(event) {
console.log('popupLinks:', event)
event.preventDefault()
const anchor = event.target.closest('a')
let url
Expand Down
Loading