he4et/browser-milje-2077
1
0
Fork 0
mirror of https://github.com/He4eT/browser-milje-2077.git synced 2026-05-04 17:07:24 +00:00
Code Issues Projects Releases Packages Wiki Activity

options: add options page

Browse source
This commit is contained in:
He4eT 2024-08-15 19:43:33 +02:00
commit f41cb32e81
5 changed files with 136 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

3
manifest.json
View file

@ -10,6 +10,9 @@
"js": ["content_scripts/milje.js"], "js": ["content_scripts/milje.js"],
"matches": ["<all_urls>", "file:///"] "matches": ["<all_urls>", "file:///"]
}], }],
"options_ui": {
"page": "pages/options/options.html"
},
"permissions": [ "permissions": [
"storage" "storage"
] ]

17
pages/options/optionSliders.js Normal file
View file

@ -0,0 +1,17 @@
function syncSliders(sliderId, numberInputId) {
const slider = document.getElementById(sliderId)
const numberInput = document.getElementById(numberInputId)
slider.addEventListener('input', () => {
numberInput.value = slider.value
})
numberInput.addEventListener('input', () => {
slider.value = numberInput.value
})
}
syncSliders('density', 'densityValue')
syncSliders('red', 'redValue')
syncSliders('green', 'greenValue')
syncSliders('blue', 'blueValue')

114
pages/options/options.html Normal file
View file

@ -0,0 +1,114 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form Example</title>
<style>
.form {
width: 100%;
}
.form hr {
margin: 16px 0;
}
.form-group {
margin-bottom: 8px;
}
.form-group label {
display: block;
}
.form-group input, .form button {
display: block;
width: 100%;
box-sizing: border-box;
}
.color-slider {
width: 100%;
}
</style>
</head>
<body>
<form id="settingsForm" class="form">
<div class="form-group">
<label for="randomSeed">
<strong>Pattern Seed</strong>
<small>Set to 0 for the "random" seed</small>
</label>
<input type="number" id="randomSeed" name="randomSeed" min="1" step="1" required>
</div>
<div class="form-group">
<label for="halfPatternSize">
<strong>Pattern Size</strong>
<small>The pattern will be mirrored horizontally and vertically</small>
</label>
<input type="number" id="halfPatternSize" name="halfPatternSize" min="1" step="1" required>
</div>
<div class="form-group">
<label for="scaleFactor">
<strong>Scale Factor</strong>
<small>Size of the smallest dot in the pattern</small>
</label>
<input type="number" id="scaleFactor" name="scaleFactor" min="1" step="1" required>
</div>
<div class="form-group">
<label for="gridSize">
<strong>Grid Size</strong>
<small>Additional grid for the pattern</small>
</label>
<input type="number" id="gridSize" name="gridSize" min="1" step="1" required>
</div>
<div class="form-group">
<label for="density">
<strong>Density</strong>
<small>Probability of holes</small>
</label>
<input type="number" id="densityValue" name="densityValue" min="0" max="1" step="0.1" required>
<input type="range" id="density" name="density" min="0" max="1" step="0.1" value="0" class="color-slider">
</div>
<hr/>
<div class="form-group">
<label for="red">
<strong>Red</strong>
<small></small>
</label>
<input type="number" id="redValue" name="redValue" min="0" max="255" value="0" step="1">
<input type="range" id="red" name="red" min="0" max="255" value="0" class="color-slider">
</div>
<div class="form-group">
<label for="green">
<strong>Green</strong>
<small></small>
</label>
<input type="number" id="greenValue" name="greenValue" min="0" max="255" value="0" step="1">
<input type="range" id="green" name="green" min="0" max="255" value="0" class="color-slider">
</div>
<div class="form-group">
<label for="blue">
<strong>Blue</strong>
<small></small>
</label>
<input type="number" id="blueValue" name="blueValue" min="0" max="255" value="0" step="1">
<input type="range" id="blue" name="blue" min="0" max="255" value="0" class="color-slider">
</div>
<hr/>
<button type="submit">Save</button>
</form>
<script type="module" src="./optionSliders.js"></script>
<script type="module" src="./options.js"></script>
</body>
</html>

1
pages/options/options.js Normal file
View file

@ -0,0 +1 @@
// browser.storage.local.set({'params': {scaleFactor: 16}})

3
pages/popup/popup.js
View file

@ -8,6 +8,5 @@ document.getElementById('toggleMiljeButton').onclick = () => {
} }
document.getElementById('openSettingsButton').onclick = () => { document.getElementById('openSettingsButton').onclick = () => {
browser.storage.local.set({'params': {scaleFactor: 16}}) browser.runtime.openOptionsPage()
console.log('openSettingsButton')
} }