diff --git a/autoload.js b/autoload.js index 3f585a6..8f1b0b9 100644 --- a/autoload.js +++ b/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"] }); }); } diff --git a/waifu-tips.js b/waifu-tips.js index a2de9aa..e69f38d 100755 --- a/waifu-tips.js +++ b/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", `
-
- - - - - - - -
+
`); // https://stackoverflow.com/questions/24148403/trigger-css-transition-on-appended-element setTimeout(() => { @@ -58,36 +50,70 @@ function loadWidget(config) { }, 1000); (function registerEventListener() { - document.querySelector("#waifu-tool .fa-comment").addEventListener("click", showHitokoto); - document.querySelector("#waifu-tool .fa-paper-plane").addEventListener("click", () => { - if (window.Asteroids) { - if (!window.ASTEROIDSPLAYERS) window.ASTEROIDSPLAYERS = []; - window.ASTEROIDSPLAYERS.push(new Asteroids()); - } else { - const script = document.createElement("script"); - script.src = "https://fastly.jsdelivr.net/gh/stevenjoezhang/asteroids/asteroids.js"; - document.head.appendChild(script); + const tools = { + "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()); + } else { + const script = document.createElement("script"); + script.src = "https://fastly.jsdelivr.net/gh/stevenjoezhang/asteroids/asteroids.js"; + document.head.appendChild(script); + } + } + }, + "switch-model": { + 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; + } + }, + "info": { + icon: "fa-info-circle", + callback: () => { + open("https://github.com/stevenjoezhang/live2d-widget"); + } + }, + "quit": { + icon: "fa-times", + callback: () => { + localStorage.setItem("waifu-display", Date.now()); + showMessage("愿你有一天能与重要的人重逢。", 2000, 11); + document.getElementById("waifu").style.bottom = "-500px"; + setTimeout(() => { + document.getElementById("waifu").style.display = "none"; + document.getElementById("waifu-toggle").classList.add("waifu-toggle-active"); + }, 3000); + } } - }); - document.querySelector("#waifu-tool .fa-user-circle").addEventListener("click", loadOtherModel); - document.querySelector("#waifu-tool .fa-street-view").addEventListener("click", loadRandModel); - document.querySelector("#waifu-tool .fa-camera-retro").addEventListener("click", () => { - showMessage("照好了嘛,是不是很可爱呢?", 6000, 9); - Live2D.captureName = "photo.png"; - Live2D.captureFrame = true; - }); - document.querySelector("#waifu-tool .fa-info-circle").addEventListener("click", () => { - open("https://github.com/stevenjoezhang/live2d-widget"); - }); - document.querySelector("#waifu-tool .fa-times").addEventListener("click", () => { - localStorage.setItem("waifu-display", Date.now()); - showMessage("愿你有一天能与重要的人重逢。", 2000, 11); - document.getElementById("waifu").style.bottom = "-500px"; - setTimeout(() => { - 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", ``); + 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 => {