增加侧栏模式的启用开关

2025-05-13 21:53:07 +08:00 · 2025-05-13 21:53:07 +08:00 · 3d28f4fba0
parent 534a07e53d
commit 3d28f4fba0
9 changed files with 72 additions and 32 deletions
--- a/languages/en.css
+++ b/languages/en.css
@ -217,6 +217,9 @@ label[for="screenshot-transparent"]::after{
 .control-box .config-display-list summary::before{
 	content:"Displayed Information Switchs List";
 }
+label[for="use-side-mode"]::after{
+	content:"Use side mode in edit interface";
+}
 label[for="show-card-id"]::after{
 	content:"Card's ID";
 }
--- a/languages/ja.css
+++ b/languages/ja.css
@ -216,7 +216,9 @@ label[for="screenshot-transparent"]::after{
 .control-box .config-display-list summary::before{
 	content:"情報表示内容の開閉器一覧";
 }
-
+label[for="use-side-mode"]::after{
+	content:"編集画面でサイドバーモードを使用";
+}
 label[for="show-card-id"]::after{
 	content:"カード番号";
 }
--- a/languages/ko.css
+++ b/languages/ko.css
@ -212,6 +212,9 @@ label[for="screenshot-transparent"]::after{
 .control-box .config-display-list summary::before{
 	content:"표시된 정보 전환 목록";
 }
+label[for="use-side-mode"]::after{
+	content:"편집 인터페이스에서 사이드바 모드 사용";
+}
 label[for="show-card-id"]::after{
 	content:"카드 ID";
 }
--- a/languages/zh-hans.css
+++ b/languages/zh-hans.css
@ -218,6 +218,9 @@ label[for="screenshot-transparent"]::after{
 .control-box .config-display-list summary::before{
 	content:"展示信息开关列表";
 }
+label[for="use-side-mode"]::after{
+	content:"编辑界面使用侧栏模式";
+}
 label[for="show-card-id"]::after{
 	content:"卡片ID";
 }
--- a/languages/zh-hant.css
+++ b/languages/zh-hant.css
@ -218,6 +218,9 @@ label[for="screenshot-transparent"]::after{
 .control-box .config-display-list summary::before{
 	content:"展示信息開關列表";
 }
+label[for="use-side-mode"]::after{
+	content:"編輯界面使用側欄模式";
+}
 label[for="show-card-id"]::after{
 	content:"卡片ID";
 }
--- a/multi.html
+++ b/multi.html
@ -81,6 +81,10 @@ const teamsCount = 2;
 		</div>
 		<details class="config-display-list">
 			<summary></summary>
+			<div class="setting">
+				<label for="default-level"></label><input id="default-level" type="number" min="1" max="120" placeholder="120"/>
+				<input type="checkbox" id="use-side-mode"><label for="use-side-mode"></label>
+			</div>
 			<div class="in-card">
 				<div class="monster allowable-assist" title="No.99999 博丽灵梦">
 					<div class="attrs">
@ -103,14 +107,16 @@ const teamsCount = 2;
 					<input type="checkbox" class="switch-ipt" id="show-member-skill-cd"><label for="show-member-skill-cd"></label>
 				</div>
 			</div>
-			<input type="checkbox" class="switch-ipt" id="show-member-ability"><label for="show-member-ability"></label>
-			<input type="checkbox" class="switch-ipt" id="show-member-types"><label for="show-member-types"></label>
-			<input type="checkbox" class="switch-ipt" id="show-member-awoken"><label for="show-member-awoken"></label>
-			<input type="checkbox" class="switch-ipt" id="show-team-total-info"><label for="show-team-total-info"></label>
-			<input type="checkbox" class="switch-ipt" id="show-team-attrtype-count"><label for="show-team-attrtype-count"></label>
-			<input type="checkbox" class="switch-ipt" id="show-team-awoken-effect"><label for="show-team-awoken-effect"></label>
-			<input type="checkbox" class="switch-ipt" id="show-meter"><label for="show-meter"></label>
-			<input type="checkbox" class="switch-ipt" id="show-team-awoken-count"><label for="show-team-awoken-count"></label>
+			<div class="in-team">
+				<input type="checkbox" class="switch-ipt" id="show-member-ability"><label for="show-member-ability"></label>
+				<input type="checkbox" class="switch-ipt" id="show-member-types"><label for="show-member-types"></label>
+				<input type="checkbox" class="switch-ipt" id="show-member-awoken"><label for="show-member-awoken"></label>
+				<input type="checkbox" class="switch-ipt" id="show-team-total-info"><label for="show-team-total-info"></label>
+				<input type="checkbox" class="switch-ipt" id="show-team-attrtype-count"><label for="show-team-attrtype-count"></label>
+				<input type="checkbox" class="switch-ipt" id="show-team-awoken-effect"><label for="show-team-awoken-effect"></label>
+				<input type="checkbox" class="switch-ipt" id="show-meter"><label for="show-meter"></label>
+				<input type="checkbox" class="switch-ipt" id="show-team-awoken-count"><label for="show-team-awoken-count"></label>
+			</div>
 		</details>
 		<div class="status"></div>
 		<div class="formation-control">
--- a/script.js
+++ b/script.js
@ -2636,11 +2636,10 @@ function initialize() {
 	// }


-	const drawScreenshot = document.querySelector("#draw-screenshot");
-	const screenshotTransparent = document.querySelector("#screenshot-transparent");
+	const drawScreenshot = document.getElementById("draw-screenshot");
 	drawScreenshot.onclick = function(event) {
 		if (event.target == this) {
-			captureScreenshot(formationBox, document.title, screenshotTransparent.checked);
+			captureScreenshot(formationBox, document.title, document.getElementById("screenshot-transparent").checked);
 		}
 	}

@ -2710,6 +2709,13 @@ function initialize() {
 		return checkbox;
 	}
 	const displaySwitchList = Array.from(document.querySelectorAll(".config-display-list .switch-ipt"));
+
+	displaySwitchList.push(...[
+			// "screenshot-transparent",
+			// "change-swap-to-copy",
+			"use-side-mode",
+		].map(id=>document.getElementById(id))
+	);
 	displaySwitchList.forEach(initializeSwitch);

 	//默认等级
@ -3844,7 +3850,9 @@ function initialize() {
 		const arr = getMemberArrayIndexFromMonHead(this);
 		editBox.editMon(arr[0], arr[1], arr[2]);
 		allMembers.forEach(member=>member.classList.remove("hightlight"));
-		this.classList.add("hightlight");
+		if (document.getElementById("use-side-mode").checked) {
+			this.classList.add("hightlight");
+		}
 		return false; //没有false将会打开链接
 	}
 	//编辑界面每个怪物的头像的拖动
@ -4338,7 +4346,9 @@ function initialize() {
 	editBox.memberIdx = []; //储存队伍数组下标
 	editBox.show = function() {
 		this.classList.remove(className_displayNone);
-		document.body.classList.add("side-mode");
+		if (document.getElementById("use-side-mode").checked) {
+			document.body.classList.add("side-mode");
+		}
 		//解决SVG问题
 		// const activeSkillTitle = skillBox.querySelector("#active-skill-title");
 		// const evolvedSkillTitle = skillBox.querySelector("#evolved-skill-title");
--- a/solo.html
+++ b/solo.html
@ -55,12 +55,14 @@ const teamsCount = 1;
 		<div>
 			<button id="draw-screenshot"></button>
 			<input type="checkbox" id="screenshot-transparent"><label for="screenshot-transparent"></label>
-
-			<label for="default-level"></label><input id="default-level" type="number" min="1" max="120" placeholder="120"/>
 			<input type="checkbox" name="change-swap-to-copy" id="change-swap-to-copy"><label for="change-swap-to-copy"></label>
 		</div>
 		<details class="config-display-list">
 			<summary></summary>
+			<div class="setting">
+				<label for="default-level"></label><input id="default-level" type="number" min="1" max="120" placeholder="120"/>
+				<input type="checkbox" id="use-side-mode"><label for="use-side-mode"></label>
+			</div>
 			<div class="in-card">
 				<div class="monster allowable-assist" title="No.99999 博丽灵梦">
 					<div class="attrs">
@ -83,14 +85,16 @@ const teamsCount = 1;
 					<input type="checkbox" class="switch-ipt" id="show-member-skill-cd"><label for="show-member-skill-cd"></label>
 				</div>
 			</div>
-			<input type="checkbox" class="switch-ipt" id="show-member-ability"><label for="show-member-ability"></label>
-			<input type="checkbox" class="switch-ipt" id="show-member-types"><label for="show-member-types"></label>
-			<input type="checkbox" class="switch-ipt" id="show-member-awoken"><label for="show-member-awoken"></label>
-			<input type="checkbox" class="switch-ipt" id="show-team-total-info"><label for="show-team-total-info"></label>
-			<input type="checkbox" class="switch-ipt" id="show-team-attrtype-count"><label for="show-team-attrtype-count"></label>
-			<input type="checkbox" class="switch-ipt" id="show-team-awoken-effect"><label for="show-team-awoken-effect"></label>
-			<input type="checkbox" class="switch-ipt" id="show-meter"><label for="show-meter"></label>
-			<input type="checkbox" class="switch-ipt" id="show-team-awoken-count"><label for="show-team-awoken-count"></label>
+			<div class="in-team">
+				<input type="checkbox" class="switch-ipt" id="show-member-ability"><label for="show-member-ability"></label>
+				<input type="checkbox" class="switch-ipt" id="show-member-types"><label for="show-member-types"></label>
+				<input type="checkbox" class="switch-ipt" id="show-member-awoken"><label for="show-member-awoken"></label>
+				<input type="checkbox" class="switch-ipt" id="show-team-total-info"><label for="show-team-total-info"></label>
+				<input type="checkbox" class="switch-ipt" id="show-team-attrtype-count"><label for="show-team-attrtype-count"></label>
+				<input type="checkbox" class="switch-ipt" id="show-team-awoken-effect"><label for="show-team-awoken-effect"></label>
+				<input type="checkbox" class="switch-ipt" id="show-meter"><label for="show-meter"></label>
+				<input type="checkbox" class="switch-ipt" id="show-team-awoken-count"><label for="show-team-awoken-count"></label>
+			</div>
 		</details>
 		<div class="status"></div>
 		<div class="formation-control">
--- a/triple.html
+++ b/triple.html
@ -67,6 +67,10 @@ const teamsCount = 3;
 		</div>
 		<details class="config-display-list">
 			<summary></summary>
+			<div class="setting">
+				<label for="default-level"></label><input id="default-level" type="number" min="1" max="120" placeholder="120"/>
+				<input type="checkbox" id="use-side-mode"><label for="use-side-mode"></label>
+			</div>
 			<div class="in-card">
 				<div class="monster allowable-assist" title="No.99999 博丽灵梦">
 					<div class="attrs">
@ -89,14 +93,16 @@ const teamsCount = 3;
 					<input type="checkbox" class="switch-ipt" id="show-member-skill-cd"><label for="show-member-skill-cd"></label>
 				</div>
 			</div>
-			<input type="checkbox" class="switch-ipt" id="show-member-ability"><label for="show-member-ability"></label>
-			<input type="checkbox" class="switch-ipt" id="show-member-types"><label for="show-member-types"></label>
-			<input type="checkbox" class="switch-ipt" id="show-member-awoken"><label for="show-member-awoken"></label>
-			<input type="checkbox" class="switch-ipt" id="show-team-total-info"><label for="show-team-total-info"></label>
-			<input type="checkbox" class="switch-ipt" id="show-team-attrtype-count"><label for="show-team-attrtype-count"></label>
-			<input type="checkbox" class="switch-ipt" id="show-team-awoken-effect"><label for="show-team-awoken-effect"></label>
-			<input type="checkbox" class="switch-ipt" id="show-meter"><label for="show-meter"></label>
-			<input type="checkbox" class="switch-ipt" id="show-team-awoken-count"><label for="show-team-awoken-count"></label>
+			<div class="in-team">
+				<input type="checkbox" class="switch-ipt" id="show-member-ability"><label for="show-member-ability"></label>
+				<input type="checkbox" class="switch-ipt" id="show-member-types"><label for="show-member-types"></label>
+				<input type="checkbox" class="switch-ipt" id="show-member-awoken"><label for="show-member-awoken"></label>
+				<input type="checkbox" class="switch-ipt" id="show-team-total-info"><label for="show-team-total-info"></label>
+				<input type="checkbox" class="switch-ipt" id="show-team-attrtype-count"><label for="show-team-attrtype-count"></label>
+				<input type="checkbox" class="switch-ipt" id="show-team-awoken-effect"><label for="show-team-awoken-effect"></label>
+				<input type="checkbox" class="switch-ipt" id="show-meter"><label for="show-meter"></label>
+				<input type="checkbox" class="switch-ipt" id="show-team-awoken-count"><label for="show-team-awoken-count"></label>
+			</div>
 		</details>
 		<div class="status"></div>
 		<div class="formation-control">