Skip to content

Commit

Permalink
34 web language support (#35)
Browse files Browse the repository at this point in the history
* Language support structuring

* Add basic chinese translation

* Remove unused code
  • Loading branch information
DjCrqss authored Jan 13, 2025
1 parent 649bece commit 4bafac4
Show file tree
Hide file tree
Showing 3 changed files with 183 additions and 39 deletions.
76 changes: 44 additions & 32 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -26,14 +26,14 @@

<!-- popup to add more keys to screen -->
<section id="keyPool" class="tabmenu">
<h2>Add keys</h2>
<input type="search" id="keyPoolInput" placeholder="Search" oninput="buildOptions()">
<h2 data-i18n="menus.addkeys.title">Add keys</h2>
<input type="search" id="keyPoolInput" placeholder="🔎︎ Search" oninput="buildOptions()">
<div id="keyPoolOptions"></div>
</section>

<!-- optional logging information -->
<div id="optionalInfo">
<h1 id="values">Start pressing!</h1>
<h1 id="values" data-i18n="menus.extrainfo.initialhint">Start pressing!</h1>
<hr>
<h2 id="output"></h2>
</div>
Expand All @@ -42,44 +42,44 @@ <h2 id="output"></h2>
<div id="toolbar" class="mouseOver">
<!-- settings popup menu -->
<div id="settings" class="tabmenu">
<h2>Customisation</h2>
<h2 data-i18n="menus.customise.title">Customise</h2>
<section class="flexRows">
<div>Active:
<div><span data-i18n="menus.customise.active">Active:</span>
<input type="color" id="activeColorPicker" >
</div>
<div>Inactive:
<div><span data-i18n="menus.customise.inactive">Inactive:</span>
<input type="color" id="inactiveColorPicker">
</div>
<div>Accent:
<div><span data-i18n="menus.customise.accent">Accent:</span>
<input type="color" id="accentColorPicker">
</div>
<div>Key Background:
<div><span data-i18n="menus.customise.keybackground">Key Background:</span>
<input type="color" id="keyBgColorPicker">
</div>
<div>Key Opacity:
<div><span data-i18n="menus.customise.keyopacity">Key Opacity:</span>
<input type="range" step=0.1 min=0 max=1 id="keyBgOpacityPicker">
</div>
<div>Background:
<div><span data-i18n="menus.customise.background">Background:</span>
<input type="color" id="backgroundColorPicker">
</div>
</section>

<hr>

<section class="flexRows">
<div>Accessiblity mode:
<div><span data-i18n="menus.customise.accessiblitymode">Accessiblity mode:</span>
<label class="switch">
<input type="checkbox" id="inputCheckbox">
<span class="slider round"></span>
</label>
</div>
<div>Round progress:
<div><span data-i18n="menus.customise.roundprogress">Round progress:</span>
<label class="switch">
<input type="checkbox" id="roundingCheckbox">
<span class="slider round"></span>
</label>
</div>
<div>Instant transitions:
<div><span data-i18n="menus.customise.instanttransitions">Instant transitions:</span>
<label class="switch">
<input type="checkbox" id="transitionCheckbox">
<span class="slider round"></span>
Expand All @@ -90,53 +90,61 @@ <h2>Customisation</h2>
</div>

<div id="presets" class="tabmenu">
<h2>Presets</h2>
<h2 data-i18n="menus.presets.title">Presets</h2>
<textarea id="presetInput" placeholder="Paste preset here"></textarea>
<button onclick="loadState()">Save</button>
<button onclick="copyToClipboard()">Copy to clipboard</button>
<button onclick="pasteFromClipboard()">Load from clipboard</button>
<button onclick="loadState()" data-i18n="menus.presets.save">Save</button>
<button onclick="copyToClipboard()" data-i18n="menus.presets.copytoclipboard">Copy to clipboard</button>
<button onclick="pasteFromClipboard()" data-i18n="menus.presets.loadclipboard">Load from clipboard</button>
<hr>
<h3>Saved</h3>
<h3 data-i18n="menus.presets.saved">Saved</h3>
<div id="savedPresets">
<button onclick="loadPreset(0)" id="preset0Name">Empty</button> <button onclick="savePreset(0)">💾</button>
<button onclick="loadPreset(1)" id="preset1Name">Empty</button> <button onclick="savePreset(1)">💾</button>
<button onclick="loadPreset(2)" id="preset2Name">Empty</button> <button onclick="savePreset(2)">💾</button>
</div>
<hr>
<h3>Wooting layouts</h3>
<h3 data-i18n="menus.presets.wootinglayouts">Wooting layouts</h3>
<div id="defaultPresets">

</div>
<a href="https://github.com/DjCrqss/Woot-verlay/wiki/Presets" target="_blank">Community presets</a>
<a href="https://github.com/DjCrqss/Woot-verlay/wiki/Presets" target="_blank" data-i18n="menus.presets.communitypresets">Community presets</a>
</div>

<div id="lanSettings" class="tabmenu">
<h2>Lan Connection</h2>
<p>Connect to external client.<br>Press connect and wait ~3 seconds.</p>
<h2 data-i18n="menus.lanconnection.title">Lan Connection</h2>
<p data-i18n="menus.lanconnection.desc">Connect to external client.<br>Press connect and wait ~3 seconds.</p>
<input type="text" id="lanInput" placeholder="192.168.x.x">
<button onclick="connectToExternalLan()">Connect</button>
<button onclick="connectToExternalLan()" data-i18n="menus.lanconnection.connect">Connect</button>
</div>

<div id="languages" class="tabmenu">
<h2 data-i18n="menus.language.title">Language</h2>
<button data-lang="en">English</button>
<button data-lang="zh">Chinese (简体字)</button>
</div>

<!-- icons -->
<i class="material-symbols-outlined" onclick="toggleVisiblity('keyPool')">add_circle<span class="infoField">Add
keys</span></i>
<i class="material-symbols-outlined" onclick="toggleVisiblity('keyPool')">add_circle
<span class="infoField" data-i18n="menus.addkeys.title">Add keys</span></i>
<i class="material-symbols-outlined" onclick="toggleVisiblity('settings')">settings<span
class="infoField">Customise</span></i>
class="infoField" data-i18n="menus.customise.title">Customise</span></i>
<i class="material-symbols-outlined" onclick="toggleVisiblity('presets')">bookmarks<span
class="infoField">Presets</span></i>
class="infoField" data-i18n="menus.presets.title">Presets</span></i>
<i class="material-symbols-outlined" onclick="toggleVisiblity('lanSettings')">magic_tether<span
class="infoField">LAN connection</span></i>
class="infoField" data-i18n="menus.lanconnection.title">LAN connection</span></i>
<i class="material-symbols-outlined" onclick="toggleVisiblity('optionalInfo')">visibility<span
class="infoField">Toggle info</span></i>
class="infoField" data-i18n="menus.extrainfo.title">Toggle info</span></i>
<i class="material-symbols-outlined" onclick="toggleVisiblity('languages')">translate<span
class="infoField" data-i18n="menus.language.title">Language</span></i>
</div>

<!-- Key option dialog -->
<div id="keyOptionDialog">
<span>Rename:
<span data-i18n="edit.rename">Rename:
<input type="text" id="keyLabel" placeholder="New name" style="width: 100%"
onkeydown="if(event.keyCode === 13) updateKeyLabel(this)">
</span>
<span>Fill dir.
<span data-i18n="edit.filldir">Fill dir.
<table class="directions">
<tr>
<td id="topLeft" onclick=updateKeySettings(this.id)>🡦</td>
Expand All @@ -162,7 +170,7 @@ <h2>Lan Connection</h2>
</table>
</span>

<span class="deleteButton" onclick=removeKey()>Remove</span>
<span class="deleteButton" onclick=removeKey() data-i18n="edit.remove">Remove</span>
</div>
</body>

Expand All @@ -186,4 +194,8 @@ <h2>Lan Connection</h2>
<!-- toolbar settings related scripts -->
<script type="text/javascript" src="pages/globaldefault/js/toolbarfunctions.js"></script>

<!-- translations -->
<script src="https://unpkg.com/@andreasremdt/simple-translator@latest/dist/umd/translator.min.js"></script>
<script type="text/javascript" src="pages/globaldefault/data/languages.js" defer></script>

</html>
125 changes: 125 additions & 0 deletions pages/globaldefault/data/languages.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,125 @@
var english = {
menus: {
// addkeys
addkeys: {
title: "Add Keys",
},
// customise
customise: {
title: "Customise",
active: "Active",
inactive: "Inactive",
accent: "Accent",
keybackground: "Key Background",
keyopacity: "Key Opacity",
background: "Background",
accessiblitymode: "Accessiblity Mode",
roundprogress: "Rounded Progress",
instanttransitions: "Instant Transitions",
},
// presets
presets: {
title: "Presets",
save: "Save",
loadclipboard: "Load from Clipboard",
copytoclipboard: "Copy to Clipboard",
saved: "Saved",
wootinglayouts: "Wooting Layouts",
communitypresets: "Community Presets",
},
// lanconnection
lanconnection: {
title: "LAN Connection",
desc: "Connect to an external client.<br>Please connect and wait ~3 seconds.",
connect: "Connect",
},
//extra info
extrainfo: {
title: "Toggle Info",
initialhint: "Start typing!",
acitvekeys: "Active Keys",
},
// edit right click
edit: {
rename: "Rename",
filldir: "Fill dir.",
remove: "Remove",
},
// language
language: {
title: "Language",
}
}

}

var chinese = {
menus: {
addkeys: {
title: "添加键",
},
// customise
customise: {
title: "定制",
active: "积极的",
inactive: "不活跃",
accent: "口音",
keybackground: "主要背景",
keyopacity: "键不透明度",
background: "背景",
accessiblitymode: "无障碍模式",
roundprogress: "全面进展",
instanttransitions: "即时转换",
},
// presets
presets: {
title: "预设",
save: "保存",
loadclipboard: "从剪贴板加载",
copytoclipboard: "复制到剪贴板",
saved: "保存的布局",
wootinglayouts: "Wooting 布局",
communitypresets: "社区布局",
},
// lanconnection
lanconnection: {
title: "LAN 联系",
desc: "连接到外部客户端。<br>请连接并等待约 3 秒",
connect: "连接",
},
//extra info
extrainfo: {
title: "切换信息",
initialhint: "开始打字!",
acitvekeys: "活动键",
},
// edit right click
edit: {
rename: "重命名",
filldir: "填充方向",
remove: "消除",
},
// language
language: {
title: "改变语言",
}
}
}

var translator = new Translator({
defaultLanguage: 'en',
detectLanguage: true,
persist : true,
persistKey: 'userLanguage',
});
translator.add('en', english);
translator.add('zh', chinese);

// translate the page to the detected language
translator.translatePageTo();

for (let button of document.querySelectorAll('button')) {
button.addEventListener('click', (evt) => {
translator.translatePageTo(evt.target.dataset.lang);
});
}
21 changes: 14 additions & 7 deletions pages/globaldefault/styles.css
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
--app-bg: #181818;
--elem-prim-bg: #212121b3;
--elem-prim-border: #353b44;
--elem-sec-bg: #212121;
--elem-sec-bg: rgba(33, 33, 33, 0.98);
--elem-sec-border: #555555;
--elem-tert-bg: #4d4d4d;

Expand All @@ -32,7 +32,8 @@
body {
background-color: var(--app-bg);
color: white;
font-family: monospace;
/* find monospace sans serif font famil */
font-family: Consolas, monospace;
-webkit-user-select: none;
/* Safari */
-ms-user-select: none;
Expand All @@ -44,7 +45,7 @@ body {

/* Universal */
* {
transition: color 0.5s, background-color 0.5s;
transition: background-color 0.5s;
color: var(--fg-color);
}

Expand Down Expand Up @@ -150,10 +151,12 @@ h2, h3 {
display: flex;
flex-direction: column;
gap: 1em;

overflow: auto;
}

#presets,
#lanSettings {
#lanSettings, #languages {
visibility: hidden;
background-color: var(--elem-sec-bg);
border: 1px solid var(--elem-sec-border);
Expand All @@ -172,6 +175,8 @@ h2, h3 {
display: flex;
flex-direction: column;
gap: 0.5em;

overflow: auto
}

#savedPresets{
Expand Down Expand Up @@ -213,6 +218,7 @@ textarea {
flex-shrink: 1;
max-width: 100%;
min-width: 0;
transition: color 0s;
}

input[type="text"] {
Expand Down Expand Up @@ -277,10 +283,10 @@ hr {
#keyPool {
/* width: 28vw; */
width: min(420px, 32vw);
height: 90vh;
height: 94vh;
position: fixed;
top: 5vmin;
right: 5vmin;
top: 3vh;
right: 3vh;
background-color: var(--elem-prim-bg);
border: 1px solid var(--elem-sec-border);
backdrop-filter: blur(12px);
Expand Down Expand Up @@ -366,6 +372,7 @@ hr {
.label {
z-index: 0;
text-shadow: 2px 2px 6px #1312123c;
transition: color 0.5s;
}

/* Pressure progress on keys */
Expand Down

0 comments on commit 4bafac4

Please sign in to comment.