Skip to content

Commit 1706487

Browse files
cho45cho45
committed
i18n
1 parent 22ddf2b commit 1706487

File tree

1 file changed

+67
-13
lines changed

1 file changed

+67
-13
lines changed

‎misc/demo.html‎

Lines changed: 67 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -12,24 +12,24 @@
1212
</style>
1313
</head>
1414
<body>
15-
<h1>micro-template.js Demo</h1>
16-
<label for="template-select">テンプレート例</label>
15+
<h1 data-i18n="title">micro-template.js Demo</h1>
16+
<label id="template-select-label" for="template-select" data-i18n="templateSelect">Examples:</label>
1717
<select id="template-select">
18-
<option value="normal">通常（正常終了）</option>
19-
<option value="error">3行目でエラー</option>
20-
<option value="wrapper">wrapper() 使用例</option>
18+
<option value="normal" data-i18n="optionNormal">Success</option>
19+
<option value="error" data-i18n="optionError">Error on 3rd line</option>
20+
<option value="wrapper" data-i18n="optionWrapper">Example using wrapper()</option>
2121
</select>
2222

23-
<label for="template">Template</label>
23+
<label id="template-label" for="template" data-i18n="template">Template</label>
2424
<textarea id="template" placeholder="&lt;h1&gt;&lt;%= title %&gt;&lt;/h1&gt;\n&lt;p&gt;&lt;%= message %&gt;&lt;/p&gt;"></textarea>
2525

26-
<label for="stash">Stash (JSON)</label>
26+
<label id="stash-label" for="stash" data-i18n="stash">Stash (JSON)</label>
2727
<textarea id="stash" placeholder='{"title": "Hello", "message": "こんにちは micro-template.js!"}'></textarea>
2828

29-
<button id="render">Render</button>
29+
<button id="render" data-i18n="render">Render</button>
3030
<span id="status"></span>
3131

32-
<label for="output">Output</label>
32+
<label id="output-label" for="output" data-i18n="output">Output</label>
3333
<pre id="output"></pre>
3434

3535
<script type="module">
@@ -42,7 +42,6 @@ <h1>micro-template.js Demo</h1>
4242
}[name] || '';
4343
};
4444

45-
// テンプレート例
4645
const templates = {
4746
normal: `<h1><%= title %></h1>\n<p><%= message %></p>`,
4847
error: `<h1><%= title %></h1>\n<p><%= message %></p>\n<%= notfound %>`,
@@ -51,17 +50,68 @@ <h1>micro-template.js Demo</h1>
5150
const stashes = {
5251
normal: {
5352
title: "Hello",
54-
message: "こんにちは micro-template.js!"
53+
message: "Hello, micro-template.js!"
5554
},
5655
error: {
5756
title: "Hello",
58-
message: "これはエラー例です"
57+
message: "This is an error example"
5958
},
6059
wrapper: {
61-
foo: "タイトル（wrapper用）"
60+
foo: "FOO (for wrapper example)",
6261
}
6362
};
6463

64+
// 多言語化対応
65+
const I18N = {
66+
ja: {
67+
title: "micro-template.js デモ",
68+
templateSelect: "テンプレート例",
69+
template: "テンプレート",
70+
stash: "Stash (JSON)",
71+
render: "レンダー",
72+
output: "出力",
73+
optionNormal: "通常（正常終了）",
74+
optionError: "3行目でエラー",
75+
optionWrapper: "wrapper() 使用例",
76+
demoFooter: 'micro-template.jsのデモです。'
77+
},
78+
us: {
79+
title: "micro-template.js Demo",
80+
templateSelect: "Template Examples",
81+
template: "Template",
82+
stash: "Stash (JSON)",
83+
render: "Render",
84+
output: "Output",
85+
optionNormal: "Normal (Success)",
86+
optionError: "Error on 3rd line",
87+
optionWrapper: "Example using wrapper()",
88+
demoFooter: 'This is a demo of micro-template.js.'
89+
}
90+
};
91+
const AVAILABLE_LANGUAGES = new Set(["ja", "us"]);
92+
// location.hash でLANGをオーバーライド
93+
let langCode = navigator.language.slice(0, 2).toLowerCase();
94+
const hashLang = location.hash.replace(/^#/, '');
95+
if (hashLang && AVAILABLE_LANGUAGES.has(hashLang)) {
96+
langCode = hashLang;
97+
}
98+
const LANG = AVAILABLE_LANGUAGES.has(langCode) ? langCode : "us";
99+
100+
// data-i18n属性による一括置換
101+
document.querySelectorAll('[data-i18n]').forEach(el => {
102+
const key = el.getAttribute('data-i18n');
103+
if (I18N[LANG][key]) {
104+
if (el.tagName === 'INPUT' || el.tagName === 'TEXTAREA') {
105+
el.placeholder = I18N[LANG][key];
106+
} else {
107+
el.innerHTML = I18N[LANG][key];
108+
}
109+
}
110+
});
111+
112+
// hash変更時にリロードして言語切り替え
113+
window.addEventListener('hashchange', () => location.reload());
114+
65115
// UI
66116
const templateSelect = document.getElementById('template-select');
67117
const templateEl = document.getElementById('template');
@@ -110,5 +160,9 @@ <h1>micro-template.js Demo</h1>
110160
stashEl.value = JSON.stringify(stashes.normal, null, 2);
111161
render();
112162
</script>
163+
<footer>
164+
<p data-i18n="demoFooter"></p>
165+
<a href="https://github.com/cho45/micro-template.js>GitHub</a>
166+
</footer>
113167
</body>
114168
</html>

0 commit comments

Comments
 (0)