diff --git a/frontend/index.html b/frontend/index.html index a5e4d3f..34851a0 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -109,18 +109,13 @@

Preferences

- - diff --git a/frontend/src/main.js b/frontend/src/main.js index f7066d3..79c64bf 100644 --- a/frontend/src/main.js +++ b/frontend/src/main.js @@ -12,6 +12,7 @@ const menuItems = document.querySelectorAll('#menu a'); const modals = document.querySelectorAll('dialog'); const saveStatus = document.querySelector('#save-status'); const lineCount = document.querySelector('#line-count'); +const showLangModalToggle = document.querySelector('a[href="##lang"]'); const modalPrefs = document.querySelector('#modal-prefs'); const modalLang = document.querySelector('#modal-language'); @@ -247,29 +248,23 @@ function readPrefs() { function showLangOpts() { modalLang.setAttribute('open', ''); + /** @type {HTMLSelectElement | null} */ const langSelect = modalLang.querySelector('#language-select'); - // A helper to respond to modal actions - function handleAction(action) { - if(new URL(action.href).hash === '#confirm') { - setLanguage(langSelect.value); - - // Update default filename - const language = supportedLangs.find(lang => lang.id === langSelect.value); - UpdateDefaultName(`*${language.extensions[0]}`); - } - + function onSelect() { + setLanguage(langSelect.value); + + // Update default filename + const language = supportedLangs.find(lang => lang.id === langSelect.value); + UpdateDefaultName(`*${language.extensions[0]}`); + modalLang.removeAttribute('open'); } // Update the form to match the current option values langSelect.value = currentLang; - // Respond to the modal actions - const actions = modalLang.querySelectorAll('footer a'); - actions.forEach(action => { - action.onclick = () => handleAction(action); - }); + langSelect.addEventListener('change', onSelect); } function initModal(modal) { @@ -337,12 +332,17 @@ function initMenuItem(item) { function setLanguage(langId) { currentLang = langId; setEditorLang(langId); + + const language = supportedLangs.find(lang => lang.id === langId); + + showLangModalToggle.textContent = language.aliases[0]; } function initLanguages() { // Emit an event with the supported languages to notify the backend EventsEmit('onLanguagesLoaded', JSON.stringify(supportedLangs)); + /** @type {HTMLSelectElement | null} */ const langSelect = document.querySelector('#language-select'); // Populate languages modal menu @@ -386,6 +386,11 @@ OnFileDrop((x, y, paths) => console.log(`wails onfiledrop:`, {x, y}, paths), tru readPrefs(); initLanguages(); +showLangModalToggle.addEventListener('click', (event) => { + event.preventDefault(); + showLangOpts(); +}); + // Listen for resizes on the editor's parent container resizeObserver.observe(document.querySelector('body > main')); diff --git a/frontend/src/styles.css b/frontend/src/styles.css index dd89a33..605e727 100644 --- a/frontend/src/styles.css +++ b/frontend/src/styles.css @@ -92,6 +92,20 @@ body > footer * { min-width: 5rem; } +footer small:has(a[href="##lang"]) { + text-align: right; +} + +a[href="##lang"] { + padding: calc(var(--pico-spacing) * 0.1) calc(var(--pico-spacing) * 0.25); + border-radius: calc(var(--pico-spacing) * 0.2); + text-decoration: none; +} + +a[href="##lang"]:hover { + background-color: var(--pico-dropdown-hover-background-color); +} + dialog > article { min-width: 35vw; } diff --git a/wails.json b/wails.json index 9feefd4..0618b0f 100644 --- a/wails.json +++ b/wails.json @@ -1,4 +1,5 @@ { + "$schema": "https://wails.io/schemas/config.v2.json", "name": "gotepad", "outputfilename": "gotepad", "frontend:install": "npm install", @@ -7,6 +8,6 @@ "frontend:dev:serverUrl": "auto", "author": { "name": "Sammy-T", - "email": "cyam9019@aim.com" + "email": "cyam9019@gmail.com" } }