Merge pull request #80 from Sammy-T/filetype

Add language toggle to footer
Sammy-T · Aug 2, 2024 · 24d3de2 · 24d3de2
2 parents c6fae5b + 0a63055
commit 24d3de2
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 22 deletions.
diff --git a/frontend/index.html b/frontend/index.html
@@ -109,18 +109,13 @@ <h3>Preferences</h3>
                     <label for="language-select">Language</label>
                     <select id="language-select" name="language-select"></select>
                 </form>
-
-                <footer>
-                    <a href="#cancel" role="button" class="secondary">Cancel</a>
-                    <a href="#confirm" role="button">Confirm</a>
-                </footer>
             </article>
         </dialog>
 
         <footer>
             <small id="save-status">unsaved</small>
             <small id="line-count">line 1, col 0 - 1 line</small>
-            <div></div>
+            <small><a href="##lang">Plain Text</a></small>
         </footer>
     </body>
 </html>
diff --git 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
@@ -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
@@ -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"
   }
 }