feat: add i18n support (#13, resolve #6)

KnowsCount · Jun 19, 2021 · 84a2d9b · 84a2d9b
1 parent 6f7aaed
commit 84a2d9b
Show file tree

Hide file tree

Showing 12 changed files with 2,400 additions and 391 deletions.
diff --git a/lib/LICENSE b/lib/LICENSE
diff --git a/lib/README.md b/lib/README.md
diff --git a/lib/autoload.js b/lib/autoload.js
@@ -0,0 +1,85 @@
+/*
+ * @Date: 15/02/2021 16.05.35 +0800
+ * @Author: KnowsCount
+ * @LastEditTime: 19/06/2021 23.11.56 +0800
+ * @FilePath: /@knowscount:live2d-widget/autoload.js
+ */
+// 注意：live2d_path 参数应使用绝对路径
+// const live2d_path = "https://cdn.jsdelivr.net/gh/nonsoft-dev/live2d-widget@master/";
+const live2d_path = '../'
+
+// 封装异步加载资源的方法
+function loadExternalResource(url, type) {
+	return new Promise((resolve, reject) => {
+		let tag
+
+		if (type === 'css') {
+			tag = document.createElement('link')
+			tag.rel = 'stylesheet'
+			tag.href = url
+			tag.id = 'live2d_css'
+		} else if (type === 'js') {
+			tag = document.createElement('script')
+			tag.src = url
+		}
+		if (tag) {
+			tag.onload = () => resolve(url)
+			tag.onerror = () => reject(url)
+			document.head.appendChild(tag)
+		}
+	})
+}
+
+// 加载 waifu.css live2d.min.js waifu-tips.js
+//if (screen.width >= 768) {
+// "768"为最低显示宽度，单位为像素
+Promise.all([
+	loadExternalResource(live2d_path + 'waifu_left.css', 'css'),
+	loadExternalResource(live2d_path + 'live2d.min.js', 'js'),
+	loadExternalResource(live2d_path + 'waifu-tips.js', 'js'),
+]).then(() => {
+	initWidget({
+		waifuPath: live2d_path + 'waifu-tips.json',
+		// apiPath: "https://live2d.fghrsh.net/api/",
+		cdnPath: 'https://cdn.jsdelivr.net/gh/fghrsh/live2d_api/',
+	})
+})
+//}
+
+// initWidget 第一个参数为 waifu-tips.json 的路径，第二个参数为 API 地址
+// API 后端可自行搭建，参考 https://github.com/fghrsh/live2d_api
+// 初始化看板娘会自动加载指定目录下的 waifu-tips.json
+
+console.log(`
+  く__,.ヘヽ.        /  ,ー､ 〉
+           ＼ ', !-─‐-i  /  /´
+           ／｀ｰ'       L/／｀ヽ､
+         /   ／,   /|   ,   ,       ',
+       ｲ   / /-‐/  ｉ  L_ ﾊ ヽ!   i
+        ﾚ ﾍ 7ｲ｀ﾄ   ﾚ'ｧ-ﾄ､!ハ|   |
+          !,/7 '0'     ´0iソ|    |
+          |.从"    _     ,,,, / |./    |
+          ﾚ'| i＞.､,,__  _,.イ /   .i   |
+            ﾚ'| | / k_７_/ﾚ'ヽ,  ﾊ.  |
+              | |/i 〈|/   i  ,.ﾍ |  i  |
+             .|/ /  ｉ：    ﾍ!    ＼  |
+              kヽ>､ﾊ    _,.ﾍ､    /､!
+              !'〈//｀Ｔ´', ＼ ｀'7'ｰr'
+              ﾚ'ヽL__|___i,___,ンﾚ|ノ
+                  ﾄ-,/  |___./
+                  'ｰ'    !_,.:
+`)
+
+I18n.defaultLocale = 'en-US'
+I18n.locale = 'en-US'
+
+I18n.translations = {}
+
+fetch('../i18n.json')
+	.then((res) => res.json())
+	.then((data) => {
+		Object.keys(data).forEach((key) => {
+			console.log('key', key)
+			I18n.translations[key] = data[key]
+		})
+	})
diff --git a/lib/demo/demo.html b/lib/demo/demo.html
@@ -0,0 +1,81 @@
+<!--
+ * @Date: 19/06/2021 23.11.38 +0800
+ * @Author: KnowsCount
+ * @LastEditTime: 19/06/2021 23.13.04 +0800
+ * @FilePath: /@knowscount:live2d-widget/demo/demo.html
+-->
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="UTF-8" />
+		<title>Live2D 看板娘 / Demo</title>
+		<link
+			rel="stylesheet"
+			href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css"
+		/>
+		<script src="https://cdn.jsdelivr.net/npm/[email protected]/app/assets/javascripts/i18n.min.js"></script>
+		<style>
+			#github svg {
+				transition: all 1s;
+				fill: #222;
+				color: #fff;
+				position: absolute;
+				top: 0;
+				right: 0;
+				border: 0;
+				width: 80px;
+				height: 80px;
+			}
+			#github:hover svg {
+				width: 160px;
+				height: 160px;
+			}
+		</style>
+	</head>
+	<body>
+		Language:
+		<select class="select">
+			<option value="en-US">English</option>
+			<option value="zh-CN">Chinese</option>
+		</select>
+		<button class="btn">Apply</button>
+		<a
+			id="github"
+			href="https://github.com/stevenjoezhang/live2d-widget"
+			target="_blank"
+			title="Visit the open-source code on GitHub!"
+		>
+			<svg viewBox="0 0 250 250" aria-hidden="true">
+				<path
+					d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"
+				></path>
+				<path
+					d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
+					fill="currentColor"
+					class="octo-arm"
+				></path>
+				<path
+					d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
+					fill="currentColor"
+					class="octo-body"
+				></path>
+			</svg>
+		</a>
+		<script>
+			/* Switch language on select (ignore me) */
+			let btn = document.querySelector('.btn')
+			let select = document.querySelector('.select')
+			btn.addEventListener(
+				'click',
+				() => {
+					I18n.locale = select.value
+					alert(
+						`Language changed to ${select.value}. Hover to the waifu again to see result.`
+					)
+				},
+				false
+			)
+		</script>
+		<script src="../autoload.js"></script>
+	</body>
+</html>