Translations, improved Plugin Action Logging, Improved Accessibility …

…on Plugin Repo and Settings Page, reduced font size, fix translations provided
confused-Techie · Dec 29, 2021 · 2f18665 · 2f18665
1 parent 9db3332
commit 2f18665
Show file tree

Hide file tree

Showing 10 changed files with 176 additions and 83 deletions.
diff --git a/assets/css/home.css b/assets/css/home.css
@@ -108,7 +108,8 @@ As to be honest I've hated CSS for years. */
 
 .itemName {
   /* Targets the Friendly Name of the Item */
-  font-size: 1.5vw; /* Font size based on viewport width */
+  /*font-size: 1.5vw; /* Font size based on viewport width */
+  font-size: 1.4em;
 
   margin-bottom: 5px; /* spacing outside the border of the text */
   grid-column: 2;

diff --git a/assets/css/pluginRepo.css b/assets/css/pluginRepo.css
@@ -63,7 +63,7 @@
 }
 
 .plugin-title {
-  font-size: 2vw;
+  font-size: 2em;
   margin-bottom: 5px;
   grid-column: 2;
   grid-row: 1;
@@ -80,7 +80,7 @@
 }
 
 .plugin-description {
-  font-size: 1.5vw;
+  font-size: 1.5em;
   grid-column: 3;
   grid-row: 1/3;
 

diff --git a/assets/css/settings.css b/assets/css/settings.css
@@ -58,7 +58,7 @@
   grid-row: 1;
   margin-right: auto;
   margin-left: auto;
-  font-size: 2vw;
+  font-size: 2em;
   align-self: center;
 }
 
@@ -67,7 +67,7 @@
   grid-row: 1;
   margin-right: auto;
   margin-left: auto;
-  font-size: 1.5vw;
+  font-size: 1.5em;
   align-self: center;
 }
 

diff --git a/assets/js/langHandler.js b/assets/js/langHandler.js
@@ -14,100 +14,131 @@ var langHandler = {
 
     fetch(`/assets/lang/${resourceName}`)
       .then(response => {
-        if (response.ok) {
-          return [response.json(), response.status];
-        } else {
-          // this is triggered by a 404 response or anything but 200
-          // intended to catch a case where the language file does not exist.
-          console.log(`Language file seemed to fail with: ${response.status}`);
-          console.log(`Providing default language strings...`);
-          fetch(`/assets/lang/strings.en.json`)
-            .then(res => res.json())
-            .then(defaultData => {
-              if (defaultData[id]) {
-                element.textContent = defaultData[id];
-              } else {
-                console.log(`Default Translation for this item does not exist: ${id}`);
-                element.textContent = "Translations coudln't be found!";
-              }
-            });
-          return [response, response.status];
-        }
-      })
-      .then(passThru => {
-        // now we can see if the id exists in this lang
-        var data = passThru[0];
-        var status = passThru[1];
-        if (status == 200) {
-          if (data[id]) {
-            element.textContent = data[id];
+        response.json().then(res => {
+          // stringing in this way, allows us to work with the JSON formatted response without having to build in another wait for the promise to resolve
+          // like the previous implementation
+          if (response.ok) {
+            if (res[id]) {
+              element.textContent = res[id];
+            } else {
+              console.log(`Translation for this item does not exist: ${id}`);
+              fetch(`/assets/lang/strings.en.json`)
+                .then(defaultRes => defaultRes.json())
+                .then(defaultData => {
+                  if (defaultData[id]) {
+                    element.textContent = defaultData[id];
+                  } else {
+                    console.log(`Default Translation for this item does not exist: ${id}`);
+                    element.textContent = "Translations Missing!";
+                  }
+                });
+            }
           } else {
-            console.log(`Translation for this item does not exist: ${id}`);
-            // if the translation doesn't exist, default to english translation.
+            console.log(`Language file seemed to fail with: ${response.status}`);
+            console.log(`Providing default language strings...`);
             fetch(`/assets/lang/strings.en.json`)
-              .then(res => res.json())
+              .then(defaultRes => defaultRes.json())
               .then(defaultData => {
                 if (defaultData[id]) {
                   element.textContent = defaultData[id];
                 } else {
                   console.log(`Default Translation for this item does not exist: ${id}`);
-                  element.textContent = "Translations couldn't be found!";
+                  element.textContent = "Translations missing!";
                 }
               });
           }
-        } else {
-          console.log(`Status: ${status} should be handled by initial then...`);
-        }
+        });
       });
   },
   ProvideStringRaw: function ProvideStringRaw(id) {
     // This will be used for providing strings of generated content, where its not possible to then change the string wtihin the DOM
     return new Promise(function (resolve, reject) {
+
       var resourceName = `strings.${currentLang}.json`;
 
       fetch(`/assets/lang/${resourceName}`)
         .then(response => {
-          if (response.ok) {
-            return [response.json(), response.status];
-          } else {
-            return [response, response.status];
-          }
-        })
-        .then(passThru => {
-          var data = passThru[0];
-          var status = passThru[1];
-          if (status == 200) {
-            if (data[id]) {
-              resolve(data[id]);
+          response.json().then(res => {
+            if (response.ok) {
+              if (res[id]) {
+                resolve(res[id]);
+              } else {
+                console.log(`Translation for this item does not exist: ${id}`);
+                fetch(`/assets/lang/strings.en.json`)
+                  .then(defaultRes => defaultRes.json())
+                  .then(defaultData => {
+                    if (defaultData[id]) {
+                      resolve(defaultData[id]);
+                    } else {
+                      console.log(`Default Translation for this item does not exist: ${id}`);
+                      reject("Translations Missing!");
+                    }
+                  });
+              }
             } else {
-              console.log(`Translation for this item does not exist: ${id}; within: /assets/lang/${resourceName}`);
-              // if the translation doesn't exist, default to english translation
+              // requested language file isn't available
+              console.log(`Language file seemed to fail with: ${response.status}`);
+              console.log('Providing default langauge stirngs...');
               fetch(`/assets/lang/strings.en.json`)
-                .then(res => res.json())
+                .then(defaultRes => defaultRes.json())
                 .then(defaultData => {
                   if (defaultData[id]) {
                     resolve(defaultData[id]);
                   } else {
-                    console.log(`Default Translation for this item does not exist: ${id}; within: /assets/lang/strings.en.json`);
-                    reject("Translations coudln't be found!");
+                    console.log(`Default Translation for this item does not exist: ${id}`);
+                    reject("Translations Missing!");
                   }
                 });
             }
-          } else {
-            console.log(`Response for declared language string: ${status}`);
-            console.log(`Moving to default strings.`);
-            fetch(`/assets/lang/strings.en.json`)
-              .then(res => res.json())
-              .then(defaultData => {
-                if (defaultData[id]) {
-                  resolve(defaultData[id]);
-                } else {
-                  console.log(`Default Translation for this item does not exist: ${id}; within: /assets/lang/strings.en.json`);
-                  reject("Translations couldn't be found!");
-                }
-              });
-          }
+          });
         });
+
+
+      //var resourceName = `strings.${currentLang}.json`;
+
+      //fetch(`/assets/lang/${resourceName}`)
+      //  .then(response => {
+      //    if (response.ok) {
+      //      return [response.json(), response.status];
+      //    } else {
+      //      return [response, response.status];
+      //    }
+      //  })
+      //  .then(passThru => {
+      //    var data = passThru[0];
+      //    var status = passThru[1];
+      //    if (status == 200) {
+      //      if (data[id]) {
+      //        resolve(data[id]);
+      //      } else {
+      //        console.log(`Translation for this item does not exist: ${id}; within: /assets/lang/${resourceName}`);
+              // if the translation doesn't exist, default to english translation
+        //      fetch(`/assets/lang/strings.en.json`)
+        //        .then(res => res.json())
+        //        .then(defaultData => {
+        //          if (defaultData[id]) {
+        //            resolve(defaultData[id]);
+        //          } else {
+        //            console.log(`Default Translation for this item does not exist: ${id}; within: /assets/lang/strings.en.json`);
+        //            reject("Translations coudln't be found!");
+        //          }
+        //        });
+        //    }
+        //  } else {
+        //    console.log(`Response for declared language string: ${status}`);
+        //    console.log(`Moving to default strings.`);
+        //    fetch(`/assets/lang/strings.en.json`)
+        //      .then(res => res.json())
+        //      .then(defaultData => {
+        //        if (defaultData[id]) {
+        //          resolve(defaultData[id]);
+        //        } else {
+        //          console.log(`Default Translation for this item does not exist: ${id}; within: /assets/lang/strings.en.json`);
+        //          reject("Translations couldn't be found!");
+        //        }
+        //      });
+        //  }
+        //});
     });
   },
   DetermineLang: function DetermineLang() {

diff --git a/assets/js/pluginRepo.js b/assets/js/pluginRepo.js
@@ -82,8 +82,9 @@ function modalResults(content, status) {
     .then(resString => {
 
       buttonText = resString;
+      var formattedContent = formatModalContent(content);
 
-      var insertHTML = `<div class="modal-content"> <h3>${status}</h3> <p>${content}</p> <button id="clearModal" class="clearModal">${buttonText}</button> </div>`;
+      var insertHTML = `<div class="modal-content"> <h3>${status}</h3> <p>${formattedContent}</p> <button id="clearModal" class="clearModal">${buttonText}</button> </div>`;
       modal.innerHTML = insertHTML;
 
       var clearModal = document.getElementById("clearModal");
@@ -95,3 +96,18 @@ function modalResults(content, status) {
       modal.style.display = "block";
     });
 }
+
+function formatModalContent(text) {
+  var splitText = text.split("...");
+  var newText = "";
+  for (let i = 0; i < splitText.length; i++) {
+    if (splitText[i].includes("\\n")) {
+      // Using \\ here to escape the newline character 
+      var tmpString = splitText[i].replace("\\n", "");
+      newText += tmpString + "<br>";
+    } else {
+      newText += splitText[i] + "<br>";
+    }
+  }
+  return newText;
+}
diff --git a/assets/lang/strings.es.json b/assets/lang/strings.es.json
@@ -1,5 +1,50 @@
 {
   "i18n-footerSourceCode": "Código fuente",
   "i18n-footerContribute": "Contribuir",
-  "i18n-footerThanksFeather": "Gracias Feather Icons"
+  "i18n-footerThanksFeather": "Gracias Feather Icons",
+  "i18n-modalDeleteConfirmationMessage": "¿Estás seguro de que quieres eliminar este artículo?",
+  "i18n-modalDeleteConfirm": "Confirmar",
+  "i18n-modalDeleteNevermind": "No importa",
+  "i18n-AddNewItem": "Agregar ítem nuevo",
+  "i18n-ShowAllCategorySelector": "Mostrar todas las categorías",
+  "i18n-headerEditItem": "Editar artículo",
+  "i18n-labelNewFriendlyName": "Ingrese un nuevo nombre descriptivo:",
+  "i18n-labelNewLink": "Ingrese un nuevo enlace:",
+  "i18n-labelNewCategory": "Ingrese una nueva categoría",
+  "i18n-labelChooseLeftPlugin": "Elija su complemento izquierdo",
+  "i18n-labelOptionsLeftPlugin": "Defina las opciones necesarias para su complemento izquierdo.",
+  "i18n-labelChooseCenterPlugin": "Elija su complemento Center",
+  "i18n-labelOptionsCenterPlugin": "Defina las opciones necesarias para su complemento Center.",
+  "i18n-labelChooseRightPlugin": "Elija su complemento adecuado",
+  "i18n-labelOptionsRightPlugin": "Defina las opciones necesarias para su complemento adecuado.",
+  "i18n-buttonGoBack": "Regresa",
+  "i18n-buttonUpdateAvailablePlugins": "Actualizar complementos disponibles",
+  "i18n-headerInstalled": "Instalado",
+  "i18n-headerAvaialble": "Disponible",
+  "i18n-headerSummary": "Summary",
+  "i18n-headerTools": "Instrumentos",
+  "i18n-toolNamePluginRepo": "Plugin Repo",
+  "i18n-toolDescriptionPluginRepo": "Un lugar para obtener nuevos complementos",
+  "i18n-toolNameLinkHealth": "Link Health",
+  "i18n-toolDescriptionLinkHealth": "Un lugar para verificar la salud y cualquier duplicado de elementos",
+  "i18n-toolNameBackgroundImage": "Background Image",
+  "i18n-toolDescriptionBackgroundImage": "Herramienta para subir nuevas imágenes de fondo y cambiar la actual.",
+  "i18n-serverSummaryServerName": "Nombre del servidor",
+  "i18n-serverSummaryServerVersion": "Versión del servidor",
+  "i18n-serverSummaryGoPageAuthor": "GoPage Autor",
+  "i18n-headerNewItem": "Datos del nuevo artículo",
+  "i18n-labelFriendlyName": "Enter Friendly Name",
+  "i18n-labelLink": "Ingrese un nombre descriptivo",
+  "i18n-labelCategory": "Ingrese Categoría",
+  "i18n-pluginRepoVersion": "Versión",
+  "i18n-pluginRepoLicense": "Licencia",
+  "i18n-generatedSettingsHostName": "Nombre de host del servidor",
+  "i18n-generatedSettingsOperatingSystem": "Sistema operativo del servidor",
+  "i18n-generatedRepoButtonOkay": "Okey",
+  "i18n-generatedLHMatchType": "Tipo de concordancia",
+  "i18n-generatedLHMatchedItem": "Elemento coincidente",
+  "i18n-generatedLHLinkItem": "Vincular elementos",
+  "i18n-generatedUploadSuccessSnackbar": "Se configuró correctamente '{0}' como imagen de fondo. (Puede que necesites actualizar...)",
+  "i18n-generatedRemoveImageSuccess": "Desarmar la imagen de fondo. (Puede que necesites actualizar...)",
+  "i18n-edgeCaseTextEnableJS": "Habilite JavaScript en su navegador para que GoPage funcione como se espera."
 }
diff --git a/installer/GoPage.iss b/installer/GoPage.iss
@@ -6,7 +6,7 @@
 ; (To generate a new GUID, click Tools | Generate GUID inside the IDE.)
 AppId={{4322BAAB-9BD4-47F4-8F3C-471B1951D1F8}
 AppName=GoPage
-AppVersion=0.3
+AppVersion=0.3.1
 AppPublisher=LHBasics
 AppPublisherURL=https://www.lhbasics.com/
 AppSupportURL=https://github.com/confused-Techie/GoPage
@@ -29,7 +29,7 @@ Name: "english"; MessagesFile: "compiler:Default.isl"
 Name: "desktopicon"; Description: "{cm:CreateDesktopIcon}"; GroupDescription: "{cm:AdditionalIcons}"; Flags: unchecked
 
 [Files]
-Source: "D:\Personal Documents\Github Repositories\GoPage\binaries\GoPage-v0.3.exe"; DestDir: "{app}"; DestName: "GoPage.exe"; Flags: ignoreversion
+Source: "D:\Personal Documents\Github Repositories\GoPage\binaries\GoPage-v0.3.1.exe"; DestDir: "{app}"; DestName: "GoPage.exe"; Flags: ignoreversion
 ; NOTE: Don't use "Flags: ignoreversion" on any shared system files
 ; Below we will instead specify directories instead of individual files 
 Source: "D:\Personal Documents\Github Repositories\GoPage\templates\*"; DestDir: "{app}\templates"; Flags: ignoreversion

diff --git a/settings/serverSettings.json b/settings/serverSettings.json
@@ -1,6 +1,6 @@
 {
   "name": "GoPage",
-  "version": "0.3",
+  "version": "0.3.1",
   "author": "confused-Techie",
   "lang": "en"
 }
diff --git a/templates/pluginRepo.html b/templates/pluginRepo.html
@@ -31,7 +31,7 @@
           <div class="plugin-icon">
             {{if .Icon.Available}}
               {{if eq .Icon.Type "image"}}
-                <img src="{{.Icon.Source}}">
+                <img src="{{.Icon.Source}}" alt="Icon specified by Plugin Creator to represent their Plugin">
               {{end}}
               {{if eq .Icon.Type "raw"}}
                 {{if eq .Icon.Style "GreenCircle"}}
@@ -64,7 +64,7 @@
           </div>
           <div class="plugin-action">
             <div class="plugin-uninstall" onclick="uninstallPlugin({{.Name}})">
-              <img src="/assets/images/minus-circle.svg">
+              <img src="/assets/images/minus-circle.svg" alt="Minus Sign Icon Indicating Button to Uninstall Plugin">
             </div>
           </div>
         </div>
@@ -81,7 +81,7 @@
         <div class="plugin-icon">
           {{if .Icon.Available}}
             {{if eq .Icon.Type "image"}}
-              <img src="{{.Icon.Source}}">
+              <img src="{{.Icon.Source}}" alt="Icon specified by Plugin Creator to represent their Plugin">
             {{end}}
             {{if eq .Icon.Type "raw"}}
               {{if eq .Icon.Style "GreenCircle"}}
@@ -114,11 +114,11 @@
         <div class="plugin-action">
           {{if .Installed}}
           <div class="plugin-uninstall" onclick="uninstallPlugin({{.Name}})">
-            <img src="/assets/images/minus-circle.svg">
+            <img src="/assets/images/minus-circle.svg" alt="Minus Sign Icon Indicating Button to Uninstall Plugin">
           </div>
           {{else}}
           <div class="plugin-install" onclick="installPlugin({{.DownloadLink}}, {{.Name}})">
-            <img src="/assets/images/download.svg">
+            <img src="/assets/images/download.svg" alt="Arrow Pointing Down Icon Indicating Button to Install Plugin">
           </div>
           {{end}}
         </div>