From 05cc012374a4b0e85fd1470063082b8f835e264b Mon Sep 17 00:00:00 2001 From: StevenJoeZhang <1119186082@qq.com> Date: Sun, 14 Jul 2019 10:36:53 +0800 Subject: [PATCH] New feature: Show toggle button after hiding the widget --- waifu-tips.js | 39 ++++++++++++++++++++++++++++++++++----- waifu.css | 20 +++++++++++++++++--- 2 files changed, 51 insertions(+), 8 deletions(-) diff --git a/waifu-tips.js b/waifu-tips.js index 5528f56..34b6b1e 100755 --- a/waifu-tips.js +++ b/waifu-tips.js @@ -23,10 +23,7 @@ console.log(` * https://www.fghrsh.net/post/123.html */ -function initWidget(waifuPath = "/waifu-tips.json", apiPath = "") { - if (screen.width <= 768 || (localStorage.getItem("waifu-display") && new Date().getTime() - localStorage.getItem("waifu-display") <= 86400000)) { - return; - } +function loadWidget(waifuPath, apiPath) { localStorage.removeItem("waifu-display"); sessionStorage.removeItem("waifu-text"); $("body").append(`
@@ -42,13 +39,14 @@ function initWidget(waifuPath = "/waifu-tips.json", apiPath = "") {
`); + $("#waifu").show().animate({ bottom: 0 }, 3000); function registerEventListener() { $("#waifu-tool .fa-comment").click(showHitokoto); $("#waifu-tool .fa-paper-plane").click(function() { var s = document.createElement("script"); document.body.appendChild(s); - s.src = "https://galaxymimi.com/js/asteroids.js"; + s.src = "https://cdn.jsdelivr.net/gh/GalaxyMimi/CDN/asteroids.js"; }); $("#waifu-tool .fa-user-circle").click(loadOtherModel); $("#waifu-tool .fa-street-view").click(loadRandModel); @@ -65,6 +63,7 @@ function initWidget(waifuPath = "/waifu-tips.json", apiPath = "") { showMessage("愿你有一天能与重要的人重逢。", 2000, 11); $("#waifu").animate({ bottom: -500 }, 3000, function() { $("#waifu").hide(); + $("#waifu-toggle").show().animate({ "margin-left": -50 }, 1000); }); }); var re = /x/; @@ -238,3 +237,33 @@ function initWidget(waifuPath = "/waifu-tips.json", apiPath = "") { }); } } + +function initWidget(waifuPath = "/waifu-tips.json", apiPath = "") { + if (screen.width <= 768) return; + $("body").append(`
+ 看板娘 +
`); + $("#waifu-toggle").hover(function() { + $("#waifu-toggle").animate({ "margin-left": -30 }, 500); + }, function() { + $("#waifu-toggle").animate({ "margin-left": -50 }, 500); + }).click(function() { + $("#waifu-toggle").animate({ "margin-left": -100 }, 1000, function() { + $("#waifu-toggle").hide(); + }); + if ($("#waifu-toggle").attr("first-time")) { + loadWidget(waifuPath, apiPath); + $("#waifu-toggle").attr("first-time", false); + } + else { + localStorage.removeItem("waifu-display"); + $("#waifu").show().animate({ bottom: 0 }, 3000); + } + }); + if (localStorage.getItem("waifu-display") && new Date().getTime() - localStorage.getItem("waifu-display") <= 86400000) { + $("#waifu-toggle").attr("first-time", true).css({ "margin-left": -50 }); + } + else { + loadWidget(waifuPath, apiPath); + } +} diff --git a/waifu.css b/waifu.css index f527825..67b5bd2 100755 --- a/waifu.css +++ b/waifu.css @@ -1,13 +1,27 @@ +#waifu-toggle { + position: fixed; + writing-mode: vertical-rl; + bottom: 10px; + left: 0px; + background-color: #fa0; + color: #fff; + border-radius: 5px; + padding: 5px; + font-size: 12px; + width: 60px; + cursor: pointer; +} #waifu { position: fixed; - bottom: -3px; + bottom: -1000px; left: 0; z-index: 1; line-height: 0; - transition: bottom .3s ease-in-out; + transition: transform .3s ease-in-out; + transform: translateY(3px); } #waifu:hover { - bottom: 0; + transform: translateY(0); } @media (max-width: 768px) { #waifu {