mirror of
https://github.com/caojiezi2003/live2d-widget.git
synced 2024-11-10 04:49:47 +00:00
Make tools optional
This commit is contained in:
parent
cfafafaa51
commit
d3a2a8ba48
@ -34,7 +34,8 @@ if (screen.width >= 768) {
|
|||||||
initWidget({
|
initWidget({
|
||||||
waifuPath: live2d_path + "waifu-tips.json",
|
waifuPath: live2d_path + "waifu-tips.json",
|
||||||
//apiPath: "https://live2d.fghrsh.net/api/",
|
//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"]
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
@ -4,7 +4,7 @@
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
function loadWidget(config) {
|
function loadWidget(config) {
|
||||||
let { waifuPath, apiPath, cdnPath } = config;
|
let { apiPath, cdnPath } = config;
|
||||||
let useCDN = false, modelList;
|
let useCDN = false, modelList;
|
||||||
if (typeof cdnPath === "string") {
|
if (typeof cdnPath === "string") {
|
||||||
useCDN = true;
|
useCDN = true;
|
||||||
@ -20,15 +20,7 @@ function loadWidget(config) {
|
|||||||
document.body.insertAdjacentHTML("beforeend", `<div id="waifu">
|
document.body.insertAdjacentHTML("beforeend", `<div id="waifu">
|
||||||
<div id="waifu-tips"></div>
|
<div id="waifu-tips"></div>
|
||||||
<canvas id="live2d" width="800" height="800"></canvas>
|
<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>`);
|
</div>`);
|
||||||
// https://stackoverflow.com/questions/24148403/trigger-css-transition-on-appended-element
|
// https://stackoverflow.com/questions/24148403/trigger-css-transition-on-appended-element
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
@ -58,8 +50,14 @@ function loadWidget(config) {
|
|||||||
}, 1000);
|
}, 1000);
|
||||||
|
|
||||||
(function registerEventListener() {
|
(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.Asteroids) {
|
||||||
if (!window.ASTEROIDSPLAYERS) window.ASTEROIDSPLAYERS = [];
|
if (!window.ASTEROIDSPLAYERS) window.ASTEROIDSPLAYERS = [];
|
||||||
window.ASTEROIDSPLAYERS.push(new Asteroids());
|
window.ASTEROIDSPLAYERS.push(new Asteroids());
|
||||||
@ -68,18 +66,33 @@ function loadWidget(config) {
|
|||||||
script.src = "https://fastly.jsdelivr.net/gh/stevenjoezhang/asteroids/asteroids.js";
|
script.src = "https://fastly.jsdelivr.net/gh/stevenjoezhang/asteroids/asteroids.js";
|
||||||
document.head.appendChild(script);
|
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);
|
showMessage("照好了嘛,是不是很可爱呢?", 6000, 9);
|
||||||
Live2D.captureName = "photo.png";
|
Live2D.captureName = "photo.png";
|
||||||
Live2D.captureFrame = true;
|
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");
|
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());
|
localStorage.setItem("waifu-display", Date.now());
|
||||||
showMessage("愿你有一天能与重要的人重逢。", 2000, 11);
|
showMessage("愿你有一天能与重要的人重逢。", 2000, 11);
|
||||||
document.getElementById("waifu").style.bottom = "-500px";
|
document.getElementById("waifu").style.bottom = "-500px";
|
||||||
@ -87,7 +100,20 @@ function loadWidget(config) {
|
|||||||
document.getElementById("waifu").style.display = "none";
|
document.getElementById("waifu").style.display = "none";
|
||||||
document.getElementById("waifu-toggle").classList.add("waifu-toggle-active");
|
document.getElementById("waifu-toggle").classList.add("waifu-toggle-active");
|
||||||
}, 3000);
|
}, 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 = () => {};
|
const devtools = () => {};
|
||||||
console.log("%c", devtools);
|
console.log("%c", devtools);
|
||||||
devtools.toString = () => {
|
devtools.toString = () => {
|
||||||
@ -166,7 +192,7 @@ function loadWidget(config) {
|
|||||||
modelTexturesId = 53; // 材质 ID
|
modelTexturesId = 53; // 材质 ID
|
||||||
}
|
}
|
||||||
loadModel(modelId, modelTexturesId);
|
loadModel(modelId, modelTexturesId);
|
||||||
fetch(waifuPath)
|
fetch(config.waifuPath)
|
||||||
.then(response => response.json())
|
.then(response => response.json())
|
||||||
.then(result => {
|
.then(result => {
|
||||||
window.addEventListener("mouseover", event => {
|
window.addEventListener("mouseover", event => {
|
||||||
|
Loading…
Reference in New Issue
Block a user