re-designed options page
This commit is contained in:
parent
7fce2733dd
commit
acda89122e
BIN
base/favicon.ico
Normal file
BIN
base/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
56
base/options/options.css
Normal file
56
base/options/options.css
Normal file
@ -0,0 +1,56 @@
|
||||
body {
|
||||
color: #ffffff;
|
||||
font-family: 'Courier New', monospace;
|
||||
}
|
||||
|
||||
.stv-blurimagemask {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.stv-blurimagemask > img {
|
||||
filter: blur(2px);
|
||||
-webkit-filter: blur(2px);
|
||||
-moz-filter: blur(2px);
|
||||
-o-filter: blur(2px);
|
||||
-ms-filter: blur(2px);
|
||||
}
|
||||
|
||||
.stv-playlist {
|
||||
overflow: scroll hidden;
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
flex-flow: row;
|
||||
}
|
||||
|
||||
.stv-main-grid {
|
||||
display: grid;
|
||||
grid-template-areas:
|
||||
"player player clients"
|
||||
"player player clients"
|
||||
"playlist playlist clients";
|
||||
}
|
||||
|
||||
.stv-main-grid > .stv-player-grid {
|
||||
min-height: 721px;
|
||||
min-width: 1422px;
|
||||
padding-left: 128px;
|
||||
margin-bottom: 40px;
|
||||
grid-area: player;
|
||||
}
|
||||
|
||||
.stv-main-grid > .stv-clients-grid {
|
||||
padding-right: 20px;
|
||||
text-align: end;
|
||||
grid-area: clients;
|
||||
}
|
||||
|
||||
.stv-main-grid > .stv-playlist-grid {
|
||||
padding-left: 128px;
|
||||
min-width: 1422px;
|
||||
grid-area: playlist;
|
||||
}
|
||||
|
||||
#playlist > div > div.card-img-overlay.p-2 > h5 > a {
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
}
|
||||
@ -1,20 +1,44 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<title>Options for StammTV Chrome Extension</title>
|
||||
<link rel="icon" type="image/x-icon" href="../stammtv-bitty.png">
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"
|
||||
crossorigin="anonymous">
|
||||
<link rel="stylesheet" href="options.css"/>
|
||||
</head>
|
||||
<body>
|
||||
<div style="display: grid;">
|
||||
<label>
|
||||
StammTV Base URL: <input type="url" id="stammtv-base-url" style="min-width: 20rem;">
|
||||
</label>
|
||||
<label>
|
||||
StammTV WSS URL: <input type="url" id="stammtv-wss-url" style="min-width: 20rem;">
|
||||
</label>
|
||||
</div>
|
||||
<body class="bg-dark" style="width: 80%;margin: 0 auto ">
|
||||
<div style="display: grid">
|
||||
<h1 class="mb-5 text-center">StammTV Extension Settings <img src="../stammtv-large.png" alt="StammTV Logo"/></h1>
|
||||
|
||||
<div id="status" style="color: #259025"></div>
|
||||
<button id="save">Save</button>
|
||||
<form>
|
||||
<div class="form-group row mb-3">
|
||||
<label for="stammtv-base-url" class="col-sm-2 col-form-label">StammTV Base URL</label>
|
||||
<div class="col-sm-10">
|
||||
<input id="stammtv-base-url" type="url" class="form-control dark"
|
||||
placeholder="https://..." aria-label="Add" required>
|
||||
<small class="form-text text-white" id="stammtv-base-url-small">
|
||||
Enter the StammTV Base URL, beginning with http:// or https://
|
||||
</small>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="form-group row mb-3">
|
||||
<label for="stammtv-wss-url" class="col-sm-2 col-form-label">StammTV WSS URL</label>
|
||||
<div class="col-sm-10">
|
||||
<input id="stammtv-wss-url" type="url" class="form-control dark"
|
||||
placeholder="wss://..." aria-label="Add" required>
|
||||
<small class="form-text text-white" id="stammtv-wss-url-small">
|
||||
Enter the StammTV WSS URL, beginning with wss://
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
<div id="status" style="color: #259025"></div>
|
||||
<button class="btn btn-primary" type="button" id="save" title="Submit and save">
|
||||
Save
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<script src="options.js"></script>
|
||||
</body>
|
||||
|
||||
@ -1,32 +1,54 @@
|
||||
const stammTVBaseUrl = document.getElementById('stammtv-base-url');
|
||||
const stammTVWSSUrl = document.getElementById('stammtv-wss-url');
|
||||
const saveButton = document.getElementById('save');
|
||||
|
||||
// Saves options to chrome.storage
|
||||
function save_options() {
|
||||
var stammTVBaseUrl = document.getElementById('stammtv-base-url').value;;
|
||||
var stammTVWSSUrl = document.getElementById('stammtv-wss-url').value;;
|
||||
chrome.storage.local.set({
|
||||
baseURL: stammTVBaseUrl,
|
||||
wssURL: stammTVWSSUrl
|
||||
}, function () {
|
||||
// Update status to let user know options were saved.
|
||||
var status = document.getElementById('status');
|
||||
status.textContent = 'Saved.';
|
||||
status.style.color = '00FF00';
|
||||
setTimeout(function () {
|
||||
status.textContent = '';
|
||||
}, 1500);
|
||||
});
|
||||
let valid = true;
|
||||
if (stammTVBaseUrl.value.startsWith('http')) {
|
||||
stammTVBaseUrl.classList.add('is-valid');
|
||||
valid = valid && true;
|
||||
} else {
|
||||
stammTVBaseUrl.classList.add('is-invalid');
|
||||
valid = false;
|
||||
}
|
||||
|
||||
if (stammTVWSSUrl.value.startsWith('wss://')) {
|
||||
stammTVWSSUrl.classList.add('is-valid');
|
||||
valid = valid && true;
|
||||
} else {
|
||||
stammTVWSSUrl.classList.add('is-invalid');
|
||||
valid = false;
|
||||
}
|
||||
|
||||
if(valid) {
|
||||
chrome.storage.local.set({
|
||||
baseURL: stammTVBaseUrl.value,
|
||||
wssURL: stammTVWSSUrl.value
|
||||
}, function () {
|
||||
// Update form controls to let user know options were saved.
|
||||
saveButton.classList.replace('btn-primary', 'btn-success');
|
||||
saveButton.classList.replace('btn-danger', 'btn-success');
|
||||
saveButton.textContent = '... saved!';
|
||||
});
|
||||
} else {
|
||||
saveButton.classList.replace('btn-primary', 'btn-danger');
|
||||
saveButton.classList.replace('btn-success', 'btn-danger');
|
||||
saveButton.textContent = '... failed to save!';
|
||||
}
|
||||
}
|
||||
|
||||
// Restores select box and checkbox state using the preferences
|
||||
// stored in chrome.storage.
|
||||
function restore_options() {
|
||||
function load_options() {
|
||||
chrome.storage.local.get({
|
||||
baseURL: 'Please fill in.',
|
||||
wssURL: 'Please fill in.'
|
||||
}, function (items) {
|
||||
document.getElementById('stammtv-base-url').value = items.baseURL;
|
||||
document.getElementById('stammtv-wss-url').value = items.wssURL;
|
||||
stammTVBaseUrl.value = items.baseURL;
|
||||
stammTVWSSUrl.value = items.wssURL;
|
||||
});
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', restore_options);
|
||||
document.getElementById('save').addEventListener('click', save_options);
|
||||
document.addEventListener('DOMContentLoaded', load_options);
|
||||
saveButton.addEventListener('click', save_options);
|
||||
@ -2,19 +2,43 @@
|
||||
<html>
|
||||
<head>
|
||||
<title>Options for StammTV Chrome Extension</title>
|
||||
<link rel="icon" type="image/x-icon" href="../stammtv-bitty.png">
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"
|
||||
crossorigin="anonymous">
|
||||
<link rel="stylesheet" href="options.css"/>
|
||||
</head>
|
||||
<body>
|
||||
<div style="display: grid;">
|
||||
<label>
|
||||
StammTV Base URL: <input type="url" id="stammtv-base-url" style="min-width: 20rem;">
|
||||
</label>
|
||||
<label>
|
||||
StammTV WSS URL: <input type="url" id="stammtv-wss-url" style="min-width: 20rem;">
|
||||
</label>
|
||||
</div>
|
||||
<body class="bg-dark" style="width: 80%;margin: 0 auto ">
|
||||
<div style="display: grid">
|
||||
<h1 class="mb-5 text-center">StammTV Extension Settings <img src="../stammtv-large.png"/></h1>
|
||||
|
||||
<div id="status" style="color: #259025"></div>
|
||||
<button id="save">Save</button>
|
||||
<form>
|
||||
<div class="form-group row mb-3">
|
||||
<label for="stammtv-base-url" class="col-sm-2 col-form-label">StammTV Base URL</label>
|
||||
<div class="col-sm-10">
|
||||
<input id="stammtv-base-url" type="url" class="form-control dark"
|
||||
placeholder="https://..." aria-label="Add" required>
|
||||
<small class="form-text text-white" id="stammtv-base-url-small">
|
||||
Enter the StammTV Base URL, beginning with http:// or https://
|
||||
</small>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="form-group row mb-3">
|
||||
<label for="stammtv-wss-url" class="col-sm-2 col-form-label">StammTV WSS URL</label>
|
||||
<div class="col-sm-10">
|
||||
<input id="stammtv-wss-url" type="url" class="form-control dark"
|
||||
placeholder="wss://..." aria-label="Add" required>
|
||||
<small class="form-text text-white" id="stammtv-wss-url-small">
|
||||
Enter the StammTV WSS URL, beginning with wss://
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
<div id="status" style="color: #259025"></div>
|
||||
<button class="btn btn-primary" type="button" id="save" title="Submit and save">
|
||||
Save
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<script src="options.js"></script>
|
||||
</body>
|
||||
|
||||
@ -1,19 +1,41 @@
|
||||
// Saves options to chrome.storage
|
||||
function save_options() {
|
||||
var stammTVBaseUrl = document.getElementById('stammtv-base-url').value;;
|
||||
var stammTVWSSUrl = document.getElementById('stammtv-wss-url').value;;
|
||||
chrome.storage.local.set({
|
||||
baseURL: stammTVBaseUrl,
|
||||
wssURL: stammTVWSSUrl
|
||||
}, function () {
|
||||
// Update status to let user know options were saved.
|
||||
var status = document.getElementById('status');
|
||||
status.textContent = 'Saved.';
|
||||
status.style.color = '00FF00';
|
||||
setTimeout(function () {
|
||||
status.textContent = '';
|
||||
}, 1500);
|
||||
});
|
||||
let stammTVBaseUrl = document.getElementById('stammtv-base-url');
|
||||
let stammTVWSSUrl = document.getElementById('stammtv-wss-url');
|
||||
let saveButton = document.getElementById('save');
|
||||
|
||||
let valid = true;
|
||||
if (stammTVBaseUrl.value.startsWith('http')) {
|
||||
stammTVBaseUrl.classList.add('is-valid');
|
||||
valid = valid && true;
|
||||
} else {
|
||||
stammTVBaseUrl.classList.add('is-invalid');
|
||||
valid = false;
|
||||
}
|
||||
|
||||
if (stammTVWSSUrl.value.startsWith('wss://')) {
|
||||
stammTVWSSUrl.classList.add('is-valid');
|
||||
valid = valid && true;
|
||||
} else {
|
||||
stammTVWSSUrl.classList.add('is-invalid');
|
||||
valid = false;
|
||||
}
|
||||
|
||||
if(valid) {
|
||||
chrome.storage.local.set({
|
||||
baseURL: stammTVBaseUrl.value,
|
||||
wssURL: stammTVWSSUrl.value
|
||||
}, function () {
|
||||
// Update form controls to let user know options were saved.
|
||||
saveButton.classList.replace('btn-primary', 'btn-success');
|
||||
saveButton.classList.replace('btn-danger', 'btn-success');
|
||||
saveButton.textContent = '... saved!';
|
||||
});
|
||||
} else {
|
||||
saveButton.classList.replace('btn-primary', 'btn-danger');
|
||||
saveButton.classList.replace('btn-success', 'btn-danger');
|
||||
saveButton.textContent = '... failed to save!';
|
||||
}
|
||||
}
|
||||
|
||||
// Restores select box and checkbox state using the preferences
|
||||
|
||||
Loading…
Reference in New Issue
Block a user