Make tools optional

autoload.js

@@ -34,7 +34,8 @@ if (screen.width >= 768) {
 		initWidget({
 			waifuPath: live2d_path + "waifu-tips.json",
 			//apiPath: "https://live2d.fghrsh.net/api/",
-			cdnPath: "https://fastly.jsdelivr.net/gh/fghrsh/live2d_api/"
+			cdnPath: "https://fastly.jsdelivr.net/gh/fghrsh/live2d_api/",
+			tools: ["hitokoto", "asteroids", "switch-model", "switch-texture", "photo", "info", "quit"]
 		});
 	});
 }

waifu-tips.js

@@ -4,7 +4,7 @@
  */
 
 function loadWidget(config) {
-	let { waifuPath, apiPath, cdnPath } = config;
+	let { apiPath, cdnPath } = config;
 	let useCDN = false, modelList;
 	if (typeof cdnPath === "string") {
 		useCDN = true;
@@ -20,15 +20,7 @@ function loadWidget(config) {
 	document.body.insertAdjacentHTML("beforeend", `<div id="waifu">
 			<div id="waifu-tips"></div>
 			<canvas id="live2d" width="800" height="800"></canvas>
-			<div id="waifu-tool">
+			<div id="waifu-tool"></div>
-				<span class="fa fa-lg fa-comment"></span>
-				<span class="fa fa-lg fa-paper-plane"></span>
-				<span class="fa fa-lg fa-user-circle"></span>
-				<span class="fa fa-lg fa-street-view"></span>
-				<span class="fa fa-lg fa-camera-retro"></span>
-				<span class="fa fa-lg fa-info-circle"></span>
-				<span class="fa fa-lg fa-times"></span>
-			</div>
 		</div>`);
 	// https://stackoverflow.com/questions/24148403/trigger-css-transition-on-appended-element
 	setTimeout(() => {
@@ -58,8 +50,14 @@ function loadWidget(config) {
 	}, 1000);
 
 	(function registerEventListener() {
-		document.querySelector("#waifu-tool .fa-comment").addEventListener("click", showHitokoto);
+		const tools = {
-		document.querySelector("#waifu-tool .fa-paper-plane").addEventListener("click", () => {
+			"hitokoto": {
+				icon: "fa-comment",
+				callback: showHitokoto
+			},
+			"asteroids": {
+				icon: "fa-paper-plane",
+				callback: () => {
 					if (window.Asteroids) {
 						if (!window.ASTEROIDSPLAYERS) window.ASTEROIDSPLAYERS = [];
 						window.ASTEROIDSPLAYERS.push(new Asteroids());
@@ -68,18 +66,33 @@ function loadWidget(config) {
 						script.src = "https://fastly.jsdelivr.net/gh/stevenjoezhang/asteroids/asteroids.js";
 						document.head.appendChild(script);
 					}
-		});
+				}
-		document.querySelector("#waifu-tool .fa-user-circle").addEventListener("click", loadOtherModel);
+			},
-		document.querySelector("#waifu-tool .fa-street-view").addEventListener("click", loadRandModel);
+			"switch-model": {
-		document.querySelector("#waifu-tool .fa-camera-retro").addEventListener("click", () => {
+				icon: "fa-user-circle",
+				callback: loadOtherModel
+			},
+			"switch-texture": {
+				icon: "fa-street-view",
+				callback: loadRandModel
+			},
+			"photo": {
+				icon: "fa-camera-retro",
+				callback: () => {
 					showMessage("照好了嘛，是不是很可爱呢？", 6000, 9);
 					Live2D.captureName = "photo.png";
 					Live2D.captureFrame = true;
-		});
+				}
-		document.querySelector("#waifu-tool .fa-info-circle").addEventListener("click", () => {
+			},
+			"info": {
+				icon: "fa-info-circle",
+				callback: () => {
 					open("https://github.com/stevenjoezhang/live2d-widget");
-		});
+				}
-		document.querySelector("#waifu-tool .fa-times").addEventListener("click", () => {
+			},
+			"quit": {
+				icon: "fa-times",
+				callback: () => {
 					localStorage.setItem("waifu-display", Date.now());
 					showMessage("愿你有一天能与重要的人重逢。", 2000, 11);
 					document.getElementById("waifu").style.bottom = "-500px";
@@ -87,7 +100,20 @@ function loadWidget(config) {
 						document.getElementById("waifu").style.display = "none";
 						document.getElementById("waifu-toggle").classList.add("waifu-toggle-active");
 					}, 3000);
-		});
+				}
+			}
+		}
+		if (!Array.isArray(config.tools)) {
+			config.tools = Object.keys(tools);
+		}
+		for (let tool of config.tools) {
+			if (tools[tool]) {
+				const { icon, callback } = tools[tool];
+				document.getElementById("waifu-tool").insertAdjacentHTML("beforeend", `<span id="waifu-tool-${tool}" class="fa fa-lg ${icon}"></span>`);
+				document.getElementById(`waifu-tool-${tool}`).addEventListener("click", callback);
+			}
+		}
+
 		const devtools = () => {};
 		console.log("%c", devtools);
 		devtools.toString = () => {
@@ -166,7 +192,7 @@ function loadWidget(config) {
 			modelTexturesId = 53; // 材质 ID
 		}
 		loadModel(modelId, modelTexturesId);
-		fetch(waifuPath)
+		fetch(config.waifuPath)
 			.then(response => response.json())
 			.then(result => {
 				window.addEventListener("mouseover", event => {