From f1b39aaaa5b577e550a6a44f4b36e2f414b34a3a Mon Sep 17 00:00:00 2001 From: and94x Date: Mon, 15 Aug 2022 14:20:04 +0200 Subject: [PATCH] i18n and re-design of settings and popup --- .idea/inspectionProfiles/Project_Default.xml | 36 ++++++++++ base/_locales/de/messages.json | 46 ++++++++++++ base/_locales/en/messages.json | 46 ++++++++++++ base/i18n.js | 8 +++ base/options/options.js | 63 ----------------- base/popup/popup.html | 19 ++--- base/popup/popup.js | 13 +++- base/script.js | 16 ++--- .../options.html => settings/settings.html} | 29 +++++--- base/settings/settings.js | 70 +++++++++++++++++++ base/{options/options.css => style.css} | 0 chrome/manifest.json | 5 +- firefox/manifest.json | 2 +- 13 files changed, 256 insertions(+), 97 deletions(-) create mode 100644 .idea/inspectionProfiles/Project_Default.xml create mode 100644 base/_locales/de/messages.json create mode 100644 base/_locales/en/messages.json create mode 100644 base/i18n.js delete mode 100644 base/options/options.js rename base/{options/options.html => settings/settings.html} (51%) create mode 100644 base/settings/settings.js rename base/{options/options.css => style.css} (100%) diff --git a/.idea/inspectionProfiles/Project_Default.xml b/.idea/inspectionProfiles/Project_Default.xml new file mode 100644 index 0000000..3018bff --- /dev/null +++ b/.idea/inspectionProfiles/Project_Default.xml @@ -0,0 +1,36 @@ + + + + \ No newline at end of file diff --git a/base/_locales/de/messages.json b/base/_locales/de/messages.json new file mode 100644 index 0000000..787f9bb --- /dev/null +++ b/base/_locales/de/messages.json @@ -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" + } +} \ No newline at end of file diff --git a/base/_locales/en/messages.json b/base/_locales/en/messages.json new file mode 100644 index 0000000..5027e7f --- /dev/null +++ b/base/_locales/en/messages.json @@ -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" + } +} \ No newline at end of file diff --git a/base/i18n.js b/base/i18n.js new file mode 100644 index 0000000..d964d5a --- /dev/null +++ b/base/i18n.js @@ -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); +} \ No newline at end of file diff --git a/base/options/options.js b/base/options/options.js deleted file mode 100644 index 64e8105..0000000 --- a/base/options/options.js +++ /dev/null @@ -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); \ No newline at end of file diff --git a/base/popup/popup.html b/base/popup/popup.html index 020c02e..95351e7 100644 --- a/base/popup/popup.html +++ b/base/popup/popup.html @@ -1,20 +1,23 @@ - + - Popup + StammTV Helper β€” QuickMenu + - + - StammTV Logo + StammTV Logo -βš™ Settings + width: max-content; +"> + βš™ Settings + + \ No newline at end of file diff --git a/base/popup/popup.js b/base/popup/popup.js index 857c049..dca19b1 100644 --- a/base/popup/popup.js +++ b/base/popup/popup.js @@ -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); diff --git a/base/script.js b/base/script.js index e1c7c8c..30c5297 100644 --- a/base/script.js +++ b/base/script.js @@ -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...", diff --git a/base/options/options.html b/base/settings/settings.html similarity index 51% rename from base/options/options.html rename to base/settings/settings.html index 00e9a10..f226625 100644 --- a/base/options/options.html +++ b/base/settings/settings.html @@ -1,43 +1,50 @@ - Options for StammTV Chrome Extension + StammTV Helper β€” Dashboard + - + - +
-

StammTV Extension Settings StammTV Logo

+

StammTV Helper β€” Settings StammTV Logo

- +
- Enter the StammTV Base URL, beginning with http:// or https:// + Enter the StammTV Base URL, beginning with http:// or https://
- +
- Enter the StammTV WSS URL, beginning with wss:// + Enter the StammTV WSS URL, beginning with wss://
-
- + + \ No newline at end of file diff --git a/base/settings/settings.js b/base/settings/settings.js new file mode 100644 index 0000000..fa5e743 --- /dev/null +++ b/base/settings/settings.js @@ -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); \ No newline at end of file diff --git a/base/options/options.css b/base/style.css similarity index 100% rename from base/options/options.css rename to base/style.css diff --git a/chrome/manifest.json b/chrome/manifest.json index bd4be07..4000bf7 100644 --- a/chrome/manifest.json +++ b/chrome/manifest.json @@ -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" } \ No newline at end of file diff --git a/firefox/manifest.json b/firefox/manifest.json index 0ada2a8..cd2b9a7 100644 --- a/firefox/manifest.json +++ b/firefox/manifest.json @@ -10,7 +10,7 @@ "persistent": true }, "options_ui":{ - "page": "options/options.html", + "page": "settings/settings.html", "open_in_tab": true }, "permissions": [