47 lines
2.4 KiB
HTML
47 lines
2.4 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>GoOmni language example</title>
|
|
<style>
|
|
body{font:17px system-ui,sans-serif;max-width:620px;margin:60px auto;padding:0 24px;color:#172c36;background:#f6f8fa}h1{font-size:30px}label{display:block;margin:24px 0 8px}input,select,button{font:inherit;padding:10px;border:1px solid #9babb3;border-radius:6px}input{box-sizing:border-box;width:100%}button{margin-top:16px;background:#17627a;color:white}p{min-height:24px}#status{color:#a12626}
|
|
</style>
|
|
<main>
|
|
<select id="language" aria-label="Language"><option value="en">English</option><option value="zh-Hans">简体中文</option></select>
|
|
<h1 id="title">Language example</h1>
|
|
<form id="form">
|
|
<label id="draftLabel" for="draft">Your draft</label>
|
|
<input id="draft" name="draft" autocomplete="off">
|
|
<button id="submit" type="submit">Submit demo</button>
|
|
</form>
|
|
<p id="count" aria-live="polite"></p>
|
|
<p id="status" role="status"></p>
|
|
</main>
|
|
<script type="module">
|
|
import {createLanguageController, fetchPack} from '/runtime.mjs';
|
|
const select=document.querySelector('#language'), status=document.querySelector('#status');
|
|
const controller=createLanguageController(await fetchPack('/locales/en.json'), locale=>fetchPack(`/locales/${encodeURIComponent(locale)}.json`));
|
|
let count=0;
|
|
function paint(){
|
|
const {t,locale}=controller.current;
|
|
document.documentElement.lang=locale;
|
|
document.querySelector('#title').textContent=t('ui','title');
|
|
document.querySelector('#draftLabel').textContent=t('ui','draft');
|
|
document.querySelector('#submit').textContent=t('ui','submit');
|
|
document.querySelector('#count').textContent=t('ui','submitted',{count});
|
|
select.value=locale;
|
|
}
|
|
select.addEventListener('change',async()=>{
|
|
status.textContent='';
|
|
try{if(await controller.setLanguage(select.value))paint();}
|
|
catch{select.value=controller.current.locale;status.textContent='Language could not be loaded. / 语言加载失败。';}
|
|
});
|
|
document.querySelector('#form').addEventListener('submit',async event=>{
|
|
event.preventDefault();
|
|
const response=await fetch('/api/action',{method:'POST',headers:{'Content-Type':'application/json','Accept-Language':controller.current.locale},body:JSON.stringify({draft:document.querySelector('#draft').value})});
|
|
if(response.ok){count++;paint();}
|
|
});
|
|
paint();
|
|
</script>
|
|
</html>
|