new

2025-06-01 11:35:11 +08:00
commit 318bbf3be2
423 changed files with 13900 additions and 0 deletions
@@ -0,0 +1,132 @@
+var node, tips;
+var currentImageIndex;
+var isHidingTips = false;
+var show = true;
+var anim;
+var tipTexts = [""];
+
+function showOtto(callback) {
+    node.style.opacity = 1;
+    anim = node.animate([
+        { bottom: "-100%", transform: "rotate(-30deg)", easing: "cubic-bezier(0.16, 1, 0.3, 1)", offset: 0 },
+        { bottom: 0, offset: 1 },
+    ], 750);
+    anim.onfinish = function () {
+        if (callback) {
+            callback();
+        }
+    }
+}
+function hideOtto(callback) {
+    anim = node.animate([
+        { bottom: 0, transform: "rotate(0deg)", easing: "cubic-bezier(0.7, 0, 0.84, 0)", offset: 0 },
+        { bottom: "-100%", transform: "rotate(-30deg)", offset: 1 },
+    ], 750);
+    anim.onfinish = function () {
+        node.style.opacity = 0;
+        if (callback) {
+            callback();
+        }
+    }
+}
+
+window.onload = function () {
+    fetch("tips.json").then(response => response.json()).then(data => {
+        tipTexts = data;
+    });
+    addOtto(document);
+    showOtto()
+}
+
+window.$docsify.onLightDarkModeChange = function () {
+    if (show) {
+        if (anim.playState != "running")
+            hideOtto(() => {
+                image.src = getCurrentImage();
+                showOtto();
+            });
+    }
+    else
+        image.src = getCurrentImage();
+}
+window.$docsify.onOttoShow = function () {
+    if (!anim.playState || anim.playState != "finished") {
+        return;
+    }
+    show = !show;
+    if (show) {
+        showOtto();
+    } else {
+        hideOtto();
+    }
+}
+function addOtto(document) {
+    node = document.createElement("div");
+    node.className = "otto";
+    image = document.createElement("img");
+    image.src = getCurrentImage();
+    image.alt = "Otto";
+    tips = document.createElement("div");
+    tips.className = "tips";
+    tips.style.opacity = 0;
+    tips.style.transition = "transform 0.5s";
+    node.appendChild(tips);
+    node.appendChild(image);
+    node.addEventListener("click", clickOtto);
+    document.body.appendChild(node);
+}
+function clickOtto() {
+    switch (anim.playState) {
+        case "running":
+            if (isHidingTips) {
+                return;
+            }
+            isHidingTips = true;
+            anim.pause();
+            temp = anim;
+            anim = tips.animate([
+                { transform: "translateY(0) rotate(0deg)", opacity: 100, offset: 0.5, easing: "ease-in" },
+                { transform: "translateY(-10px) rotate(-3deg)", opacity: 0 }
+            ], 400);
+            anim.onfinish = function () {
+                temp.cancel();
+                tips.innerHTML = randomTips();
+                isHidingTips = false;
+                playTips();
+            }
+            break;
+        case "paused":
+            break;
+        case "finished":
+            tips.innerHTML = randomTips();
+            playTips();
+            break;
+    }
+}
+
+function playTips() {
+    anim = tips.animate([
+        { transform: "translateY(-10px) rotate(3deg)", opacity: 0, offset: 0, easing: "ease-out" },
+        { transform: "translateY(0) rotate(0deg)", opacity: 100, offset: 0.1 },
+        { transform: "translateY(0) rotate(0deg)", opacity: 100, offset: 0.9, easing: "ease-in" },
+        { transform: "translateY(-10px) rotate(-3deg)", opacity: 0, offset: 1 }
+    ], 4000);
+    anim.onfinish = function () {
+    }
+}
+
+function randomTips() {
+    return tipTexts[Math.floor(Math.random() * tipTexts.length)];
+}
+
+function getCurrentImage() {
+    currentImageIndex = window.$docsify.currentThemeModeIndex;
+    switch (currentImageIndex) {
+        case 0: //light
+            return "/images/otto-rd2.png";
+        case 1: //dark
+            return "/images/otto-rd2-xmas-compressed.png";
+        case 2: //default
+            return "/images/otto-wyym.png";
+    }
+}