add: base functional for lang system; fix: weird issue related to js

2025-09-06 06:37:01 +00:00 · 2024-06-30 22:16:21 +07:00
parent ce080dff8f
commit a337b55efd
18 changed files with 122 additions and 57 deletions
--- a/module/build.gradle.kts
+++ b/module/build.gradle.kts
@@ -167,6 +167,7 @@ androidComponents.onVariants { variant ->
                    set.add(Pair(root.file("webroot/js/main.js").asFile, null))
                    set.add(Pair(root.file("webroot/js/kernelsu.js").asFile, null))
                    set.add(Pair(root.file("webroot/js/theme.js").asFile, null))
+                    set.add(Pair(root.file("webroot/js/language.js").asFile, null))

                    set.add(Pair(root.file("webroot/js/list/module.js").asFile, null))
                    set.add(Pair(root.file("webroot/js/list/settings.js").asFile, null))
@@ -178,11 +179,7 @@ androidComponents.onVariants { variant ->

                    set.add(Pair(root.file("webroot/js/modal/lang.js").asFile, null))

-                    set.add(Pair(root.file("webroot/fonts/ProductSans-Regular.ttf").asFile, null))
-                    set.add(Pair(root.file("webroot/fonts/ProductSans-Italic.ttf").asFile, null))
-
                    set.add(Pair(root.file("webroot/css/index.css").asFile, null))
-                    set.add(Pair(root.file("webroot/css/fonts.css").asFile, null))
                    
                    set.add(Pair(root.file("webroot/assets/mark.svg").asFile, null))
                    set.add(Pair(root.file("webroot/assets/tick.svg").asFile, null))
--- a/module/src/customize.sh
+++ b/module/src/customize.sh
@@ -118,6 +118,7 @@ extract "$ZIPFILE" 'webroot/index.html' "$MODPATH/webroot" true
 extract "$ZIPFILE" 'webroot/js/main.js' "$MODPATH/webroot/js" true
 extract "$ZIPFILE" 'webroot/js/kernelsu.js' "$MODPATH/webroot/js" true
 extract "$ZIPFILE" 'webroot/js/theme.js' "$MODPATH/webroot/js" true
+extract "$ZIPFILE" 'webroot/js/language.js' "$MODPATH/webroot/js" true

 extract "$ZIPFILE" 'webroot/js/list/module.js' "$MODPATH/webroot/js/list" true
 extract "$ZIPFILE" 'webroot/js/list/settings.js' "$MODPATH/webroot/js/list" true
@@ -129,11 +130,7 @@ extract "$ZIPFILE" 'webroot/js/lang/index.js' "$MODPATH/webroot/js/lang" true

 extract "$ZIPFILE" 'webroot/js/modal/lang.js' "$MODPATH/webroot/js/modal" true

-extract "$ZIPFILE" 'webroot/fonts/ProductSans-Regular.ttf' "$MODPATH/webroot/fonts" true
-extract "$ZIPFILE" 'webroot/fonts/ProductSans-Italic.ttf' "$MODPATH/webroot/fonts" true
-
 extract "$ZIPFILE" 'webroot/css/index.css' "$MODPATH/webroot/css" true
-extract "$ZIPFILE" 'webroot/css/fonts.css' "$MODPATH/webroot/css" true

 extract "$ZIPFILE" 'webroot/assets/mark.svg' "$MODPATH/webroot/assets" true
 extract "$ZIPFILE" 'webroot/assets/tick.svg' "$MODPATH/webroot/assets" true
--- a/webroot/css/fonts.css
+++ b/webroot/css/fonts.css
@@ -1,9 +0,0 @@
-@font-face {
-  font-family: "ProductSans Regular";
-  src: url("../fonts/ProductSans-Regular.ttf");
-}
-
-@font-face {
-  font-family: "ProductSans Italic";
-  src: url("../fonts/ProductSans-Regular.ttf");
-}
--- a/webroot/css/index.css
+++ b/webroot/css/index.css
@@ -18,7 +18,7 @@
 * {
  background-color: var(--background);
  color: var(--font);
-  font-family: 'ProductSans Regular', 'ProductSans Italic', sans-serif
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif
 }

 body {
--- a/webroot/fonts/ProductSans-Italic.ttf
+++ b/webroot/fonts/ProductSans-Italic.ttf
--- a/webroot/fonts/ProductSans-Regular.ttf
+++ b/webroot/fonts/ProductSans-Regular.ttf
--- a/webroot/index.html
+++ b/webroot/index.html
@@ -11,7 +11,6 @@
    <script src="js/list/lang.js" type="module"></script>
    <script src="js/main.js" type="module"></script>
    <script src="js/modal/lang.js" type="module"></script>
-    <link rel="stylesheet" href="css/fonts.css">
    <link rel="stylesheet" href="css/index.css">
  </head>
  <body id="main_body">
@@ -26,7 +25,7 @@
        <img src="assets/close.svg">
      </div>
      <div style="padding-left: 25px;">
-        <h1>Choose your new language</h1>
+        <h1 id="lang_modal_title">Choose your new language</h1>
      </div>
      <div id="lang_modal_list" style="padding-left: 25px; padding-right: 25px;">
        <!-- N/A -->
@@ -59,20 +58,20 @@
        </div>
      </div>
      <div class="brightc content">
-        <div class="brightc lock" style="font-size: 1.1em">Version</div>
+        <div id="version_info_title" class="brightc lock" style="font-size: 1.1em">Version</div>
        <div class="brightc desc lockd" id="version_code" style="font-size: 0.9em; margin-top: 3px;">Unknown</div>
      </div>
      <div class="brightc content">
-        <div class="brightc lock" style="font-size: 1.1em">Root Implementation</div>
+        <div id="root_info_title" class="brightc lock" style="font-size: 1.1em">Root Implementation</div>
        <div class="brightc desc lockd" id="root_impl" style="font-size: 0.9em; margin-top: 3px;">Unknown</div>
      </div>
-      <div class="brightc content" id="zygote64">
+      <div class="brightc content">
        <div class="brightc lock" style="font-size: 1.1em">Zygote64</div>
-        <div class="brightc desc lockd" id="zygote64_status" style="font-size: 0.9em; margin-top: 3px;">Unknown</div>
+        <div class="brightc desc lockd" id="is_zygote64_injected" style="font-size: 0.9em; margin-top: 3px;">Unknown</div>
      </div>
-      <div class="brightc content lock" id="zygote32">
+      <div class="brightc content lock">
        <div class="brightc lock" style="font-size: 1.1em">Zygote32</div>
-        <div class="brightc desc lockd" id="zygote32_status" style="font-size: 0.9em; margin-top: 3px;">Unknown</div>
+        <div class="brightc desc lockd" id="is_zygote32_injected" style="font-size: 0.9em; margin-top: 3px;">Unknown</div>
      </div>
    </div>

@@ -84,7 +83,7 @@
          <div id="modules_list_icon" class="dimc">
            <img class="dimc" src="assets/module.svg">
          </div>
-          <div class="dimc" style="padding-bottom: 4px; padding-left: 5px;">Modules</div>
+          <div id="module_card_title" class="dimc" style="padding-bottom: 4px; padding-left: 5px;">Modules</div>
        </div>

        <div class="dimc">
@@ -108,7 +107,7 @@
          <div class="dimc" id="setting_icon">
            <img class="dimc" src="assets/settings.svg">
          </div>
-          <div class="dimc content" style="padding-left: 5px; font-size: 1.2em;">
+          <div id="settings_card_title" class="dimc content" style="padding-left: 5px; font-size: 1.2em;">
            Settings
          </div>
        </div>
@@ -120,21 +119,21 @@
        </div>
      </div>
      <!-- INFO: Settings card body (Daemon32) -->
-      <div class="small_card" id="daemon64">
+      <div class="small_card">
        <div class="small_card_bg content" style="font-size: 1.1em; padding-left: 5px; padding-top: 6px; padding-bottom: 14px;">Daemon (32 bit)</div>
        <div class="small_card_bg content button_list">
-          <div class="center button">Stop</div>
-          <div class="center button">Start</div>
-          <div class="center button">Exit</div>
+          <div id="daemon32_stop_button" class="center button">Stop</div>
+          <div id="daemon32_start_button" class="center button">Start</div>
+          <div id="daemon32_exit_button" class="center button">Exit</div>
        </div>
      </div>
      <!-- INFO: Settings card body (Daemon64) -->
-      <div class="small_card" style="margin-top: 15px;" id="daemon32">
+      <div class="small_card" style="margin-top: 15px;">
        <div class="small_card_bg content" style="font-size: 1.1em; padding-left: 5px; padding-top: 6px; padding-bottom: 14px;">Daemon (64 bit)</div>
        <div class="small_card_bg content button_list">
-          <div class="center button">Stop</div>
-          <div class="center button">Start</div>
-          <div class="center button">Exit</div>
+          <div id="daemon64_stop_button" class="center button">Stop</div>
+          <div id="daemon64_start_button" class="center button">Start</div>
+          <div id="daemon64_exit_button" class="center button">Exit</div>
        </div>
      </div>
    </div>
--- a/webroot/js/lang/en_US.js
+++ b/webroot/js/lang/en_US.js
@@ -1,5 +1,10 @@
+/* INFO: Translated by @PerformanC (The PerformanC Organization) */
+
 export const en_US = {
  langName: 'English (United States)',
+  langModal: {
+    header: "Choose your new language"
+  },
  infoCard: {
    status: {
      unknown: 'ReZygisk is at an unknown state!',
@@ -20,6 +25,7 @@ export const en_US = {
    arch: 'Arch: '
  },
  settings: {
+    header: "Settings",
    daemonButton: {
      start: 'Start',
      stop: 'Stop',
--- a/webroot/js/lang/index.js
+++ b/webroot/js/lang/index.js
@@ -3,7 +3,7 @@ import { vi_VN } from './vi_VN.js'
 import { pt_BR } from './pt_BR.js'

 export const lang = {
-  vi_VN,
  en_US,
-  pt_BR
+  pt_BR,
+  vi_VN,
 }
--- a/webroot/js/lang/pt_BR.js
+++ b/webroot/js/lang/pt_BR.js
@@ -1,5 +1,10 @@
+/* INFO: Translated by @ThePedroo */
+
 export const pt_BR = {
  langName: 'Português (Brasil)',
+  langModal: {
+    header: "Choose your new language"
+  },
  infoCard: {
    status: {
      unknown: 'ReZygisk está em um estado desconhecido!',
@@ -20,6 +25,7 @@ export const pt_BR = {
    arch: 'Arquitetura: '
  },
  settings: {
+    header: "Configurações",
    daemonButton: {
      start: 'Iniciar',
      stop: 'Parar',
--- a/webroot/js/lang/vi_VN.js
+++ b/webroot/js/lang/vi_VN.js
@@ -1,5 +1,10 @@
+/* INFO: Translated by @RainyXeon */
+
 export const vi_VN = {
  langName: 'Tiếng Việt',
+  langModal: {
+    header: "Chọn ngôn ngữ mới của bạn"
+  },
  infoCard: {
    status: {
      unknown: 'ReZygisk đang ở trạng thái không xác định!',
@@ -20,6 +25,7 @@ export const vi_VN = {
    arch: 'Loại: '
  },
  settings: {
+    header: "Cài đặt",
    daemonButton: {
      start: 'Chạy',
      stop: 'Dừng',
--- a/webroot/js/language.js
+++ b/webroot/js/language.js
@@ -0,0 +1,40 @@
+import { lang } from './lang/index.js'
+
+/* INFO: info card */
+const version_info_title = document.getElementById('version_info_title')
+const root_info_title = document.getElementById('root_info_title')
+/* INFO: module card */
+const module_card_title = document.getElementById('module_card_title')
+/* INFO: settings card */
+const settings_card_title = document.getElementById('settings_card_title')
+/* INFO: daemon32 small card */
+const daemon32_stop_button = document.getElementById('daemon32_stop_button')
+const daemon32_start_button = document.getElementById('daemon32_start_button')
+const daemon32_exit_button = document.getElementById('daemon32_exit_button')
+/* INFO: daemon64 small card */
+const daemon64_stop_button = document.getElementById('daemon64_stop_button')
+const daemon64_start_button = document.getElementById('daemon64_start_button')
+const daemon64_exit_button = document.getElementById('daemon64_exit_button')
+/* INFO: lang modal */
+const lang_modal_title = document.getElementById('lang_modal_title')
+
+export function setNewLang(locate) {
+  const new_lang = lang[locate]
+  /* INFO: info card */
+  version_info_title.innerHTML = new_lang.infoCard.version
+  root_info_title.innerHTML = new_lang.infoCard.root
+  /* INFO: module card */
+  module_card_title.innerHTML = new_lang.moduleCard.header
+  /* INFO: settings card */
+  settings_card_title.innerHTML = new_lang.settings.header
+  /* INFO: daemon32 small card */
+  daemon32_stop_button.innerHTML = new_lang.settings.daemonButton.stop
+  daemon32_start_button.innerHTML = new_lang.settings.daemonButton.start
+  daemon32_exit_button.innerHTML = new_lang.settings.daemonButton.exit
+  /* INFO: daemon64 small card */
+  daemon64_stop_button.innerHTML = new_lang.settings.daemonButton.stop
+  daemon64_start_button.innerHTML = new_lang.settings.daemonButton.start
+  daemon64_exit_button.innerHTML = new_lang.settings.daemonButton.exit
+  /* INFO: lang modal */
+  lang_modal_title.innerHTML = new_lang.langModal.header
+}
--- a/webroot/js/list/lang.js
+++ b/webroot/js/list/lang.js
@@ -1,6 +1,8 @@
 import { lang } from '../lang/index.js'
+import { setNewLang } from '../language.js'

 const lang_list = document.getElementById('lang_modal_list')
+const target = document.getElementById('lang_modal')
 const key_list = Object.keys(lang)
 let index = 0

@@ -9,7 +11,16 @@ for (const lang_key of key_list) {

  const value = lang[lang_key]
  lang_list.innerHTML += `
-    <div class="${index === key_list.length ? '' : 'spliter'}" style="padding-top: 25px; padding-bottom: 25px; font-size: 1.3em;">
+    <div lang_section="true" id="${lang_key}" class="${index === key_list.length ? '' : 'spliter'}" style="padding-top: 25px; padding-bottom: 25px; font-size: 1.3em;">
      ${value.langName}
    </div>`
-}
+}
+
+document.addEventListener('click', function (event) {
+  if (!event.target.getAttribute('lang_section')) return
+  setNewLang(event.target.id)
+
+  target.style.display = 'none'
+  localStorage.setItem('/cache/modal/language/state', 'closed')
+  localStorage.setItem('/system/language', event.target.id)
+}, false);
--- a/webroot/js/list/module.js
+++ b/webroot/js/list/module.js
@@ -2,7 +2,7 @@ const button = document.getElementById('modules_header')
 const icon = document.getElementById('module_expand_icon')
 const card = document.getElementById('modules_card')

-let sys_module_mode = localStorage.getItem('system-module-mode')
+let sys_module_mode = localStorage.getItem('/cache/list/module/state')
 sys_module_mode = setData('closed')

 button.addEventListener('click', () => {
@@ -20,7 +20,7 @@ button.addEventListener('click', () => {
 })

 function setData(mode) {
-  localStorage.setItem('system-module-mode', mode)
+  localStorage.setItem('/cache/list/module/state', mode)

-  return localStorage.getItem('system-module-mode')
+  return localStorage.getItem('/cache/list/module/state')
 }
--- a/webroot/js/list/settings.js
+++ b/webroot/js/list/settings.js
@@ -2,8 +2,8 @@ const button = document.getElementById('settings_header')
 const icon = document.getElementById('settings_expand_icon')
 const card = document.getElementById('rezygisk_settings')

-let sys_module_mode = localStorage.getItem('system-settings-expand-mode')
-setData('closed')
+let sys_module_mode = localStorage.getItem('/cache/list/settings/state')
+sys_module_mode = setData('closed')

 button.addEventListener('click', () => {
  if (sys_module_mode === 'closed') {
@@ -20,7 +20,7 @@ button.addEventListener('click', () => {
 })

 function setData(mode) {
-  localStorage.setItem('system-settings-expand-mode', mode)
+  localStorage.setItem('/cache/list/settings/state', mode)

-  return localStorage.getItem('system-settings-expand-mode')
+  return localStorage.getItem('/cache/list/settings/state')
 }
--- a/webroot/js/main.js
+++ b/webroot/js/main.js
@@ -1,11 +1,14 @@
 import { fullScreen, exec, toast } from './kernelsu.js'
-
-const EXPECTED = 1
-const UNEXPECTED_FAIL = 2
+import { setNewLang } from './language.js'

 (async () => {
+  const EXPECTED = 1
+  const UNEXPECTED_FAIL = 2
+
  fullScreen(true)

+  let sys_lang = localStorage.getItem('/system/language')
+
  const loading_screen = document.getElementById('loading_screen')

  const rootCss = document.querySelector(':root')
@@ -29,6 +32,9 @@ const UNEXPECTED_FAIL = 2
  let zygote64_status = EXPECTED
  let zygote32_status = EXPECTED

+  if (!sys_lang) sys_lang = setLangData("en_US")
+  if (sys_lang !== "en_US") setNewLang(sys_lang)
+
  const ptrace64Cmd = await exec('/data/adb/modules/zygisksu/bin/zygisk-ptrace64 info')

  if (ptrace64Cmd.errno === 0) {
@@ -137,4 +143,10 @@ const UNEXPECTED_FAIL = 2
  } else {
    toast(`find error (${findModulesCmd.errno}): ${findModulesCmd.stderr}`)
  }
-})()
+})()
+
+function setLangData(mode) {
+  localStorage.setItem('/system/language', mode)
+
+  return localStorage.getItem('/system/language')
+}
--- a/webroot/js/modal/lang.js
+++ b/webroot/js/modal/lang.js
@@ -2,7 +2,7 @@ const button = document.getElementById('lang_switcher')
 const target = document.getElementById('lang_modal')
 const close_button = document.getElementById('lang_modal_close')

-let sys_module_mode = localStorage.getItem('lang-modal')
+let sys_module_mode = localStorage.getItem('/cache/modal/language/state')
 sys_module_mode = setData('closed')

 button.addEventListener('click', () => {
@@ -18,7 +18,7 @@ close_button.addEventListener('click', () => {
 })

 function setData(mode) {
-  localStorage.setItem('lang-modal', mode)
+  localStorage.setItem('/cache/modal/language/state', mode)

-  return localStorage.getItem('lang-modal')
+  return localStorage.getItem('/cache/modal/language/state')
 }
--- a/webroot/js/theme.js
+++ b/webroot/js/theme.js
@@ -40,7 +40,7 @@ const settings_icon = document.getElementById('setting_icon')
 const lang_switcher = document.getElementById('lang_switcher')
 const close_icons = document.getElementsByClassName('close_icon')

-let sys_theme = localStorage.getItem('system-theme')
+let sys_theme = localStorage.getItem('/system/theme')
 if (!sys_theme) sys_theme = setData('dark')

 if (sys_theme === 'light') setLight()
@@ -101,7 +101,7 @@ function setLight() {
 }

 function setData(mode) {
-  localStorage.setItem('system-theme', mode)
+  localStorage.setItem('/system/theme', mode)

-  return localStorage.getItem('system-theme')
+  return localStorage.getItem('/system/theme')
 }