Stammtisch/stammtv-helper
3
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

i18n and re-design of settings and popup

Browse Source
This commit is contained in:
and94x 2022-08-15 14:20:04 +02:00
parent 2d587cd9e2
commit f1b39aaaa5
13 changed files with 256 additions and 97 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
.idea/inspectionProfiles/Project_Default.xml generated Normal file
View File

@ -0,0 +1,36 @@
<component name="InspectionProjectProfileManager">
<profile version="1.0">
<option name="myName" value="Project Default" />
<inspection_tool class="HttpUrlsUsage" enabled="true" level="WEAK WARNING" enabled_by_default="true">
<option name="ignoredUrls">
<list>
<option value="http://localhost" />
<option value="http://127.0.0.1" />
<option value="http://0.0.0.0" />
<option value="http://www.w3.org/" />
<option value="http://json-schema.org/draft" />
<option value="http://java.sun.com/" />
<option value="http://xmlns.jcp.org/" />
<option value="http://javafx.com/javafx/" />
<option value="http://javafx.com/fxml" />
<option value="http://maven.apache.org/xsd/" />
<option value="http://maven.apache.org/POM/" />
<option value="http://www.springframework.org/schema/" />
<option value="http://www.springframework.org/tags" />
<option value="http://www.springframework.org/security/tags" />
<option value="http://www.thymeleaf.org" />
<option value="http://www.jboss.org/j2ee/schema/" />
<option value="http://www.jboss.com/xml/ns/" />
<option value="http://www.ibm.com/webservices/xsd" />
<option value="http://activemq.apache.org/schema/" />
<option value="http://schema.cloudfoundry.org/spring/" />
<option value="http://schemas.xmlsoap.org/" />
<option value="http://cxf.apache.org/schemas/" />
<option value="http://primefaces.org/ui" />
<option value="http://tiles.apache.org/" />
<option value="http://" />
</list>
</option>
</inspection_tool>
</profile>
</component>

46
base/_locales/de/messages.json Normal file
View File

@ -0,0 +1,46 @@
{
"language": {
"message": "Deutsch (de_DE)",
"description": "Current Language"
},
"settingsHeading": {
"message": "StammTV Helper — Einstellungen",
"description": "Heading on settings page"
},
"settingsFormLabelBaseURL": {
"message": "StammTV Basis URL",
"description": "Label for form input on settings page"
},
"settingsFormHelptextBaseURL": {
"message": "Gib die StammTV Basis URL ein, beginnend mit http:// oder https://",
"description": "Helptext for form input on settings page"
},
"settingsFormLabelWSSURL": {
"message": "StammTV WSS URL",
"description": "Label for form input on settings page"
},
"settingsFormHelptextWSSURL": {
"message": "Gib die StammTV WSS URL ein, beginnend mit wss://",
"description": "Helptext for form input on settings page"
},
"settingsSaveButtonCaption": {
"message": "💾 Speichern",
"description": "Button caption for form button on settings page"
},
"settingsSaveButtonCaptionSuccess": {
"message": "✔ gespeichert!",
"description": "Button caption for form button on settings page when save succeeeded"
},
"settingsSaveButtonCaptionFailure": {
"message": "❌ fehlgeschlagen!",
"description": "Button caption for form button on settings page when save failed"
},
"settingsFormInputRequired": {
"message": "Bitte trage die Daten ein.",
"description": "Shows that input on this field is required"
},
"popupSettingsButtonCaption": {
"message": "⚙ Einstellungen",
"description": "Button caption for settings quickLink in popup"
}
}

46
base/_locales/en/messages.json Normal file
View File

@ -0,0 +1,46 @@
{
"language": {
"message": "English (en_US)",
"description": "Current Language"
},
"settingsHeading": {
"message": "StammTV Helper — Settings",
"description": "Heading on settings page"
},
"settingsFormLabelBaseURL": {
"message": "StammTV Base URL",
"description": "Label for form input on settings page"
},
"settingsFormHelptextBaseURL": {
"message": "Enter the StammTV Base URL, beginning with http:// or https://",
"description": "Helptext for form input on settings page"
},
"settingsFormLabelWSSURL": {
"message": "StammTV WSS URL",
"description": "Label for form input on settings page"
},
"settingsFormHelptextWSSURL": {
"message": "Enter the StammTV WSS URL, beginning with wss://",
"description": "Helptext for form input on settings page"
},
"settingsSaveButtonCaption": {
"message": "💾 Save",
"description": "Button caption for form button on settings page"
},
"settingsSaveButtonCaptionSuccess": {
"message": "✔ saved!",
"description": "Button caption for form button on settings page when save succeeeded"
},
"settingsSaveButtonCaptionFailure": {
"message": "❌ failed!",
"description": "Button caption for form button on settings page when save failed"
},
"settingsFormInputRequired": {
"message": "Please fill in.",
"description": "Shows that input on this field is required"
},
"popupSettingsButtonCaption": {
"message": "⚙ Settings",
"description": "Button caption for settings quickLink in popup"
}
}

8
base/i18n.js Normal file
View File

@ -0,0 +1,8 @@
let translatableSpans = document.querySelectorAll('.i18n-target');
for (let t of translatableSpans) {
t.innerHTML = getMessage(t.attributes['data-id'].value);
}
function getMessage(id){
return chrome.i18n.getMessage(id);
}

63
base/options/options.js
View File

@ -1,63 +0,0 @@
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() {
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) {
if(chrome && chrome.storage && chrome.storage.local) {
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 {
console.error('Unsupported browser or no access to localStorage')
}
} else {
console.error('Failed to save - wrong information given.')
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 load_options() {
if(chrome && chrome.storage && chrome.storage.local) {
chrome.storage.local.get({
baseURL: 'Please fill in.',
wssURL: 'Please fill in.'
}, function (items) {
stammTVBaseUrl.value = items.baseURL;
stammTVWSSUrl.value = items.wssURL;
});
} else {
console.error('Unsupported browser or no access to localStorage')
}
}
document.addEventListener('DOMContentLoaded', load_options);
saveButton.addEventListener('click', save_options);

19
base/popup/popup.html
View File

@ -1,20 +1,23 @@
<!DOCTYPE html>
<html lang="en">
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Popup</title>
<title>StammTV Helper — QuickMenu</title>
<link rel="stylesheet" href="/style.css" />
</head>
<body style="min-width: 8rem; display: flex; align-items: center;">
<body style="min-width: fit-content; margin: 0.5rem; display: flex; align-items: center; justify-content: space-evenly">
<a href="" id="open-stammtv" target="_blank">
<img src="/stammtv-large.png" alt="StammTV Logo" height="128px" width="128px"/>
<img src="/stammtv-small.png" alt="StammTV Logo" height="48px" width="48px"/>
</a>
<a href="/options/options.html" id="open-settings" target="_blank" style="
<a href="/settings/settings.html" id="open-settings" target="_blank" class="text-white" style="
text-decoration: none;
font-weight: 400;
font-size: 1rem;
width: 6rem;
color: black;
">⚙ Settings</a>
width: max-content;
">
<span class="i18n-target" data-id="popupSettingsButtonCaption">⚙ Settings</span>
</a>
<script src="/i18n.js"></script>
<script src="popup.js"></script>
</body>
</html>

13
base/popup/popup.js
View File

@ -1,7 +1,18 @@
function restore_options() {
chrome.storage.local.get('baseURL', function (result) {
document.getElementById('open-stammtv').href = result.baseURL;
if(result && result.baseURL.startsWith('http')) {
document.getElementById('open-stammtv').href = result.baseURL;
} else {
openSettings();
}
});
}
function openSettings() {
chrome.tabs.create({
active: true,
url: 'settings/settings.html'
}, null);
}
document.addEventListener('DOMContentLoaded', restore_options);

16
base/script.js
View File

@ -11,7 +11,9 @@ chrome.storage.local.get('firstRun', function (result) {
chrome.storage.local.get(['baseURL', 'wssURL'], function (items) {
if (items.wssURL !== undefined && items.wssURL.startsWith('wss://')) {
WEBSOCKET_URL = items.wssURL;
handleValidityCheckResult(true)
init();
} else {
openSettings();
}
});
}
@ -20,19 +22,11 @@ chrome.storage.local.get('firstRun', function (result) {
function openSettings() {
chrome.tabs.create({
active: true,
url: 'options/options.html'
url: 'settings/settings.html'
}, null);
}
function handleValidityCheckResult(validSettings) {
if (validSettings) {
addContextMenuItem();
} else {
openSettings();
}
}
function addContextMenuItem() {
function init() {
chrome.contextMenus.removeAll(function() {
chrome.contextMenus.create({
title: "Zu StammTV Playlist hinzufügen...",

29
base/options/options.html → base/settings/settings.html
View File

@ -1,43 +1,50 @@
<!DOCTYPE html>
<html lang="de">
<head>
<title>Options for StammTV Chrome Extension</title>
<title>StammTV Helper — Dashboard</title>
<meta charset="UTF-8"/>
<link rel="icon" type="image/x-icon" href="../stammtv-bitty.png">
<link rel="stylesheet" href="options.css"/>
<link rel="stylesheet" href="/style.css"/>
</head>
<body style="width: 80%; margin: 0 auto ">
<body 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>
<h1 class="mb-5 text-center"><span class="i18n-target"
data-id="settingsHeading">StammTV Helper — Settings</span> <img
src="/stammtv-large.png" alt="StammTV Logo"/></h1>
<form>
<div class="form-group row mb-3">
<label for="stammtv-base-url" class="col-sm-2 col-form-label">StammTV Base URL</label>
<label for="stammtv-base-url" class="col-sm-2 col-form-label">
<span class="i18n-target" data-id="settingsFormLabelBaseURL">StammTV Base URL</span>
</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://
<span class="i18n-target" data-id="settingsFormHelptextBaseURL">Enter the StammTV Base URL, beginning with http:// or https://</span>
</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>
<label for="stammtv-wss-url" class="col-sm-2 col-form-label">
<span class="i18n-target" data-id="settingsFormLabelWSSURL">StammTV WSS URL</span>
</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://
<span class="i18n-target" data-id="settingsFormHelptextWSSURL">Enter the StammTV WSS URL, beginning with wss://</span>
</small>
</div>
</div>
<div id="status" style="color: #259025"></div>
<button class="btn btn-primary" type="button" id="save" title="Submit and save">
Save
<span class="i18n-target" data-id="settingsSaveButtonCaption">💾 Save</span>
</button>
</form>
</div>
<script src="options.js"></script>
<script src="/i18n.js"></script>
<script src="settings.js"></script>
</body>
</html>

70
base/settings/settings.js Normal file
View File

@ -0,0 +1,70 @@
const stammTVBaseUrl = document.getElementById('stammtv-base-url');
const stammTVWSSUrl = document.getElementById('stammtv-wss-url');
const saveButton = document.getElementById('save');
function validateAndSave() {
let valid = true;
if (stammTVBaseUrl.value.startsWith('http://') || stammTVBaseUrl.value.startsWith('https://')) {
stammTVBaseUrl.classList.remove('is-invalid');
stammTVBaseUrl.classList.add('is-valid');
valid = valid && true;
} else {
stammTVBaseUrl.classList.remove('is-valid');
stammTVBaseUrl.classList.add('is-invalid');
valid = false;
}
if (stammTVWSSUrl.value.startsWith('wss://')) {
stammTVWSSUrl.classList.remove('is-invalid');
stammTVWSSUrl.classList.add('is-valid');
valid = valid && true;
} else {
stammTVWSSUrl.classList.remove('is-valid');
stammTVWSSUrl.classList.add('is-invalid');
valid = false;
}
if (valid) {
save();
} else {
console.log('Failed to save settings - form validation was not successful.')
saveButton.classList.replace('btn-primary', 'btn-danger');
saveButton.classList.replace('btn-success', 'btn-danger');
saveButton.textContent = getMessage('settingsSaveButtonCaptionFailure');
}
}
// Saves options to chrome.storage
function save() {
if (chrome && chrome.storage && chrome.storage.local) {
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 = getMessage('settingsSaveButtonCaptionSuccess');
});
} else {
console.error('Unsupported browser or no access to localStorage')
}
}
// Restores select box and checkbox state using the preferences
// stored in chrome.storage.
function load() {
if (chrome && chrome.storage && chrome.storage.local) {
chrome.storage.local.get({
baseURL: getMessage("settingsFormInputRequired"),
wssURL: getMessage("settingsFormInputRequired")
}, function (items) {
stammTVBaseUrl.value = items.baseURL;
stammTVWSSUrl.value = items.wssURL;
});
} else {
console.error('Unsupported browser or no access to localStorage')
}
}
document.addEventListener('DOMContentLoaded', load);
saveButton.addEventListener('click', validateAndSave);

0
base/options/options.css → base/style.css
View File

5
chrome/manifest.json
View File

@ -6,7 +6,7 @@
"background": {
"service_worker": "script.js"
},
"options_page": "options/options.html",
"options_page": "settings/settings.html",
"permissions": [
"storage",
"contextMenus"
@ -18,5 +18,6 @@
"16": "stammtv-bitty.png",
"48": "stammtv-small.png",
"128": "stammtv-large.png"
}
},
"default_locale": "en"
}

2
firefox/manifest.json
View File

@ -10,7 +10,7 @@
"persistent": true
},
"options_ui":{
"page": "options/options.html",
"page": "settings/settings.html",
"open_in_tab": true
},
"permissions": [