From 7c604ae5b76c518d1f6ae16dca1654f27e89dd8b Mon Sep 17 00:00:00 2001
From: Mimi <1119186082@qq.com>
Date: Mon, 20 Jan 2020 17:28:22 +0800
Subject: [PATCH] Drop jQuery in demo

---
 demo/demo1.html |  1 -
 demo/demo2.html | 42 +++++++++++++++++++++++-------------------
 2 files changed, 23 insertions(+), 20 deletions(-)
diff --git a/demo/demo1.html b/demo/demo1.html
index 49fd54e..ccb2d11 100755
--- a/demo/demo1.html
+++ b/demo/demo1.html
@@ -3,7 +3,6 @@
 <head>
 <meta charset="UTF-8">
 <title>Live2D 看板娘 / Demo</title>
-<script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css">
 <style>
 #github svg {
diff --git a/demo/demo2.html b/demo/demo2.html
index 0d84afb..c3358d3 100755
--- a/demo/demo2.html
+++ b/demo/demo2.html
@@ -6,7 +6,6 @@
 <title>看板娘登陆平台</title>
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap/dist/css/bootstrap.min.css">
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css">
-<script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
 <script src="../live2d.min.js"></script>
 <style>
 html, body {
@@ -151,15 +150,15 @@ body {
 	<p class="mt-5 mb-3 text-muted">Copyleft &copy; Mimi 2019</p>
 </form>
 <script>
-$(function() {
+window.addEventListener("load", () => {
 	"use strict";
 
 	if (!CSS.supports("clip-path", "circle(120px at center)") && !CSS.supports("-webkit-clip-path", "circle(120px at center)")) {
-		$("#stage").html('<img src="../assets/screenshot-1.png">');
+		document.getElementById("stage").innerHTML = '<img src="../assets/screenshot-1.png">';
 		return;
 	}
 
-	var apiURL = "https://live2d.fghrsh.net/api", state = 0,
+	var apiPath = "https://live2d.fghrsh.net/api", state = 0,
 		modelId = localStorage.getItem("modelId"),
 		modelTexturesId = localStorage.getItem("modelTexturesId");
 	if (modelId == null) {
@@ -172,10 +171,10 @@ $(function() {
 		localStorage.setItem("modelId", modelId);
 		if (modelTexturesId === undefined) modelTexturesId = 0;
 		localStorage.setItem("modelTexturesId", modelTexturesId);
-		loadlive2d("live2d", `${apiURL}/get/?id=${modelId}-${modelTexturesId}`, null);
+		loadlive2d("live2d", `${apiPath}/get/?id=${modelId}-${modelTexturesId}`, null);
 		console.log("live2d", `模型 ${modelId}-${modelTexturesId} 加载完成`);
-		setTimeout(function() {
-			$("#cover").css("bottom", "80%");
+		setTimeout(() => {
+			coverPosition("80%");
 			state = 2;
 		}, 2000);
 	}
@@ -187,10 +186,10 @@ $(function() {
 			.then(response => response.json())
 			.then(result => {
 				loadModel(modelId, result.textures.id);
-				setTimeout(function() {
+				setTimeout(() => {
 					state = 2;
-					$("#cover").css("bottom", "80%");
-					$("#refresh").attr("href", "javascript:refresh()");
+					coverPosition("80%");
+					document.getElementById("refresh").setAttribute("href", "javascript:refresh()");
 				}, 1000);
 			});
 	}
@@ -204,6 +203,10 @@ $(function() {
 			});
 	}
 
+	function coverPosition(pos) {
+		document.getElementById("cover").style.bottom = pos;
+	}
+
 	window.info = function() {
 		fetch("https://v1.hitokoto.cn")
 			.then(response => response.json())
@@ -214,31 +217,32 @@ $(function() {
 
 	window.refresh = function() {
 		state = 0;
-		$("#cover").css("bottom", "10%");
-		$("#refresh").attr("href", "javascript:void(0)");
+		coverPosition("10%");
+		document.getElementById("refresh").setAttribute("href", "javascript:void(0)");
 		setTimeout(loadRandModel, 1000);
 	}
 
-	$("#handle").click(function() {
+	document.getElementById("handle").addEventListener("click", () => {
 		if (state == 1) {
 			state = 2;
-			$("#cover").css("bottom", "80%");
+			coverPosition("80%");
 		}
 		else if (state == 2) {
 			state = 1;
-			$("#cover").css("bottom", "20%");
+			coverPosition("20%");
 		}
 	});
 
-	$("input[type=password]").focus(function() {
+	document.querySelector("input[type=password]").addEventListener("focus", () => {
 		if (state == 2) {
 			state = 1;
-			$("#cover").css("bottom", "20%");
+			coverPosition("20%");
 		}
-	}).blur(function() {
+	});
+	document.querySelector("input[type=password]").addEventListener("blur", () => {
 		if (state == 1) {
 			state = 2;
-			$("#cover").css("bottom", "80%");
+			coverPosition("80%");
 		}
 	});
 });
