From b52911f4d545d77dd05675ff2dde9ea226938e2b Mon Sep 17 00:00:00 2001
From: Super12138 <70494801+Super12138@users.noreply.github.com>
Date: Fri, 30 Aug 2024 21:34:30 +0800
Subject: [PATCH] Add loading tip for list & add animations
---
list.html | 4 ++++
src/index.css | 13 +++++++++++++
src/list/index.ts | 11 ++++++++++-
src/settings/index.ts | 4 ++--
src/test/index.ts | 35 ++++++++++++++++++++---------------
5 files changed, 49 insertions(+), 18 deletions(-)
diff --git a/list.html b/list.html
index b9127fe..d97f0ef 100644
--- a/list.html
+++ b/list.html
@@ -1,2 +1,6 @@
+
\ No newline at end of file
diff --git a/src/index.css b/src/index.css
index c8db10a..e5330a5 100644
--- a/src/index.css
+++ b/src/index.css
@@ -66,6 +66,8 @@ strong {
/* 答题页面样式 */
#testContainer {
display: none;
+ opacity: 0;
+ transition: 0.1s opacity;
/*
display: flex;
flex-direction: column;
@@ -77,6 +79,17 @@ strong {
margin: 5% 2% 26% 2%;
}
+#loadingTip {
+ opacity: 1;
+ transition: 0.1s opacity;
+}
+
+#questionnaireList {
+ display: none;
+ opacity: 0;
+ transition: 0.1s opacity;
+}
+
a {
text-overflow: ellipsis;
overflow: hidden;
diff --git a/src/list/index.ts b/src/list/index.ts
index 7f2b93a..81a6ee8 100644
--- a/src/list/index.ts
+++ b/src/list/index.ts
@@ -8,7 +8,7 @@ import type { Badge } from 'mdui/components/badge.js';
import type { ListSubheader } from 'mdui/components/list-subheader.js';
import type { List } from 'mdui/components/list.js';
import { Category, QuestionnaireList, QuestionnaireListItem, QuestionnairesList } from '../interfaces';
-import { hide } from '../utils/element';
+import { hide, show } from '../utils/element';
// import { TextField } from 'mdui/components/text-field.js';
import { LogHelper } from '../utils/LogHelper';
import { getFile } from '../utils/network';
@@ -18,6 +18,8 @@ const logHelper = LogHelper.getInstance();
document.addEventListener('listPageLoaded', async () => {
const mduiList: List = document.querySelector('#questionnaireList')!;
+ const loadingTip: HTMLDivElement = document.querySelector('#loadingTip')!;
+ hide(mduiList);
// const searchBar: TextField = document.querySelector('#searchBar')!;
getFile(`https://cdn.jsdelivr.net/gh/Super12138/AY-Questionnaires-DB@main/list.json?${new Date().getTime()}`)
.then((response: string) => {
@@ -38,6 +40,12 @@ document.addEventListener('listPageLoaded', async () => {
mduiList.appendChild(subheader); // 添加子标题
mduiList.appendChild(listContainer); // 添加列表项
}
+ loadingTip.style.opacity = "0";
+ setTimeout(() => {
+ hide(loadingTip);
+ mduiList.style.opacity = "1";
+ }, 100)
+ show(mduiList);
})
.catch((error) => {
logHelper.error(error);
@@ -46,6 +54,7 @@ document.addEventListener('listPageLoaded', async () => {
errorElement.style.textAlign = 'center';
errorElement.innerHTML = `加载列表时出现问题：${error}`
document.querySelector('#container')!.appendChild(errorElement);
+ hide(loadingTip);
hide(mduiList);
})
});
diff --git a/src/settings/index.ts b/src/settings/index.ts
index 903ff64..280b839 100644
--- a/src/settings/index.ts
+++ b/src/settings/index.ts
@@ -9,10 +9,10 @@ import type { Button } from 'mdui/components/button.js';
import type { Dialog } from 'mdui/components/dialog.js';
import type { ListItem } from 'mdui/components/list-item.js';
-import { showClearAllDataDialog } from '../utils/notices';
-import { getFile } from '../utils/network';
import { QuestionnairesList } from '../interfaces';
import { LogHelper } from '../utils/LogHelper';
+import { getFile } from '../utils/network';
+import { showClearAllDataDialog } from '../utils/notices';
const logHelper = LogHelper.getInstance();
diff --git a/src/test/index.ts b/src/test/index.ts
index 6c0bd05..dceb833 100644
--- a/src/test/index.ts
+++ b/src/test/index.ts
@@ -16,11 +16,11 @@ import '@mdui/icons/check--outlined.js';
import { RadioGroup } from 'mdui/components/radio-group.js';
import { ButtonType, Criterion, GroupedData, QuestionnaireFile, QuestionResult, Ranges, ScoreResult, Scoring } from '../interfaces';
import { hide, show } from '../utils/element';
+import { LogHelper } from '../utils/LogHelper';
+import { getFile } from '../utils/network';
import { showKeyboardNotice } from '../utils/notices';
import { Question } from './question';
import { getScore, SCL90Score } from './scoring';
-import { LogHelper } from '../utils/LogHelper';
-import { getFile } from '../utils/network';
const appTitle: TopAppBarTitle = document.querySelector('#appTitle')!;
const url: URL = new URL(window.location.href);
@@ -29,9 +29,9 @@ const backBtn: ButtonIcon = document.querySelector('#backBtn')!;
const logHelper = LogHelper.getInstance();
let nextButtonType: number = 1; // 1: 下一题 | 2: 开始 | 3: 提交
-let currentQuestion: number = 0;
+let currentQuestion: number = 0; // 当前题目
-let questions = [];
+let questions = []; // 所有题目对象
const buttonType: ButtonType[] = [
{
@@ -67,6 +67,13 @@ document.addEventListener('testPageLoaded', async () => {
const introPart: HTMLDivElement = document.querySelector('#introPart')!;
const resultArea: HTMLDivElement = document.querySelector('#resultArea')!;
+ // 首先判断有没有试题，减少不必要的网络请求
+ if (questionnaire === null) {
+ hide(loadingTip);
+ show(nullTip);
+ return;
+ }
+
// 将“下一题”按钮设置为“开始”
setUpNextButton(nextBtn, 2);
@@ -74,8 +81,12 @@ document.addEventListener('testPageLoaded', async () => {
getFile(`https://cdn.jsdelivr.net/gh/Super12138/AY-Questionnaires-DB@main/questionnaires/${questionnaire}.json?${new Date().getTime()}`)
.then((response: string) => {
// 加载完了显示答题页面，隐藏加载提示
+ loadingTip.style.opacity = "0";
+ setTimeout(() => {
+ hide(loadingTip);
+ container.style.opacity = "1";
+ }, 100)
show(container);
- hide(loadingTip);
const json: QuestionnaireFile = JSON.parse(response); // 解析量表json
const jsonName: string = json.name;
appTitle.textContent = jsonName; // 将标题设置为问卷名称
@@ -293,16 +304,10 @@ document.addEventListener('testPageLoaded', async () => {
})
.catch((error: any) => {
- if (questionnaire === null) {
- hide(container);
- show(nullTip);
- return;
- } else {
- hide(container);
- nullTip.innerHTML = `错误：${error}`;
- show(nullTip);
- return;
- }
+ hide(container);
+ nullTip.innerHTML = `错误：${error}`;
+ show(nullTip);
+ return;
});
});