refactored translations functions to translation method

novcmbro · Jun 6, 2024 · af4e2c0 · af4e2c0
1 parent 24320c6
commit af4e2c0
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 30 deletions.
diff --git a/src/js/copyOutputText.js b/src/js/copyOutputText.js
@@ -1,10 +1,10 @@
-import { translation } from "./translation.js"
+import translation from "./translation.js"
 
 const copyOutputText = (outputField) => {
   const message = {
-    success: translation("output.copy.success"),
-    error: translation("output.copy.error"),
-    unsupported: translation("output.copy.unsupported")
+    success: translation.get("output.copy.success"),
+    error: translation.get("output.copy.error"),
+    unsupported: translation.get("output.copy.unsupported")
   }
 
   if (navigator.clipboard) {

diff --git a/src/js/index.js b/src/js/index.js
@@ -1,11 +1,11 @@
 import theme from "./theme.js"
-import { changeLanguage, initTranslation, translation } from "./translation.js"
+import translation from "./translation.js"
 import cryptographyEntries from "./cryptographyEntries.js"
 import copyOutputText from "./copyOutputText.js"
 
 document.addEventListener("DOMContentLoaded", () => {
   theme.init()
-  initTranslation()
+  translation.init()
 
   const inputField = document.querySelector("#input-field")
   const inputSectionClasses = inputField.parentElement.classList
@@ -31,10 +31,10 @@ document.addEventListener("DOMContentLoaded", () => {
 
   const validateField = (target) => {
     const validations = {
-      empty: () => inputField.value.trim() || translation("input.validations.empty"),
-      invalidChars: () => inputField.value.trim() && inputField.value.match(/^[a-z.,!?\s]+$/) || translation("input.validations.invalid_chars"),
-      noCompatibleChars: () => inputField.value.match(cryptography(target).keys) || (target === encryptButton ? translation("input.validations.no_compatible_chars.encrypt") : translation("input.validations.no_compatible_chars.decrypt")),
-      alreadyDecoded: () => outputField.value !== cryptography(target).result || (target === encryptButton ? translation("input.validations.already_decoded.encrypt") : translation("input.validations.already_decoded.decrypt"))
+      empty: () => inputField.value.trim() || translation.get("input.validations.empty"),
+      invalidChars: () => inputField.value.trim() && inputField.value.match(/^[a-z.,!?\s]+$/) || translation.get("input.validations.invalid_chars"),
+      noCompatibleChars: () => inputField.value.match(cryptography(target).keys) || (target === encryptButton ? translation.get("input.validations.no_compatible_chars.encrypt") : translation.get("input.validations.no_compatible_chars.decrypt")),
+      alreadyDecoded: () => outputField.value !== cryptography(target).result || (target === encryptButton ? translation.get("input.validations.already_decoded.encrypt") : translation.get("input.validations.already_decoded.decrypt"))
     }
 
     for (const [name, validation] of Object.entries(validations)) {
@@ -77,11 +77,11 @@ document.addEventListener("DOMContentLoaded", () => {
   themeLinkLight.addEventListener("click", theme.change)
   themeLinkDark.addEventListener("click", theme.change)
   languageLinkEN.addEventListener("click", (e) => {
-    changeLanguage(e)
+    translation.change(e)
     clearInputFieldError()
   })
   languageLinkPT.addEventListener("click", (e) => {
-    changeLanguage(e)
+    translation.change(e)
     clearInputFieldError()
   })
   inputField.addEventListener("focus", toggleInputFocusClass)

diff --git a/src/js/translation.js b/src/js/translation.js
@@ -5,10 +5,17 @@ const languages = { en: enUS, pt: ptBR }
 const localStorageKey = "novcmbro_decoder_language"
 const separator = { nesting: ".", word: "_" }
 
-export const translation = (key) => {
+const translation = {
+  language: () => localStorage.getItem(localStorageKey),
+  get: undefined,
+  translateElements: undefined,
+  init: undefined,
+  change: undefined
+}
+
+translation.get = (key) => {
   const nestedId = key.split(separator.nesting)
-  const language = localStorage.getItem(localStorageKey)
-  let text = languages[language]
+  let text = languages[translation.language()]
 
   for (let i = 0; i < nestedId.length; i++) {
     const key = nestedId[i]
@@ -18,26 +25,25 @@ export const translation = (key) => {
   return text
 }
 
-const translateElements = () => {
-  document.querySelectorAll("meta[name='description']").forEach(description => description.content = translation("description"))
-  document.querySelector("meta[name='keywords']").content = translation("keywords")
-  document.querySelector("#input-field").placeholder = translation("input.placeholder")
-  document.querySelector("#output-placeholder-image").alt = translation("output.placeholder.image")
+translation.translateElements = () => {
+  document.querySelectorAll("meta[name='description']").forEach(description => description.content = translation.get("description"))
+  document.querySelector("meta[name='keywords']").content = translation.get("keywords")
+  document.querySelector("#input-field").placeholder = translation.get("input.placeholder")
+  document.querySelector("#output-placeholder-image").alt = translation.get("output.placeholder.image")
 }
 
-export const initTranslation = () => {
+translation.init = () => {
   const navigatorLanguage = navigator.language.split("-")[0].toLowerCase()
   const navigatorOrFallbackLanguage = (navigatorLanguage === "en" || navigatorLanguage === "pt") ? navigatorLanguage : "en"
-  const language = localStorage.getItem(localStorageKey)
   const elements = document.querySelectorAll("[data-translation]")
 
-  if (!language) {
+  if (!translation.language()) {
     localStorage.setItem(localStorageKey, navigatorOrFallbackLanguage)
     window.location.href = "/"
   }
 
-  document.documentElement.lang = language
-  document.querySelector("meta[http-equiv='Content-Language']").content = language
+  document.documentElement.lang = translation.language()
+  document.querySelector("meta[http-equiv='Content-Language']").content = translation.language()
 
   for (const element of elements) {
     const id = element.dataset.translation
@@ -46,15 +52,18 @@ export const initTranslation = () => {
 
     if (hasId && !hasInvalidId) {
       element.ariaLive = "polite"
-      element.textContent = translation(id)
+      element.textContent = translation.get(id)
     }
   }
 
-  translateElements()
+  translation.translateElements()
 }
 
-export const changeLanguage = ({ target }) => {
+translation.change = ({ target }) => {
   localStorage.setItem(localStorageKey, target.textContent.toLowerCase())
-  initTranslation()
-  translateElements()
+  translation.init()
+  translation.translateElements()
 }
+
+const { language, translateElements, ...methods } = translation
+export default methods