From 97af3801c435f42f041a6372af5779b2003babcb Mon Sep 17 00:00:00 2001
From: Oliver-Akins <Oliver.akins1999@gmail.com>
Date: Mon, 25 Mar 2024 19:05:01 -0600
Subject: [PATCH] Make it so we don't need to re-render the sheet on collapse
 toggle

---
 module/sheets/GenericActorSheet.mjs           |  8 +--
 .../actor/char-sheet/v2/pages/inventory.scss  | 49 ++++++++++++-------
 .../partials/inventory/items/aspect.v2.pc.hbs | 19 ++++---
 .../inventory/items/untyped.v2.pc.hbs         | 19 ++++---
 .../partials/inventory/items/weapon.v2.pc.hbs | 19 ++++---
 5 files changed, 63 insertions(+), 51 deletions(-)

diff --git a/module/sheets/GenericActorSheet.mjs b/module/sheets/GenericActorSheet.mjs
index 3975d90..660233e 100644
--- a/module/sheets/GenericActorSheet.mjs
+++ b/module/sheets/GenericActorSheet.mjs
@@ -114,19 +114,19 @@ export class GenericActorSheet extends ActorSheet {
 	};
 
 	async _handleSummaryToggle($e) {
+		$e.stopPropagation();
 		let target = $e.currentTarget;
-		let parent = target.parentElement;
+		let parent = target.closest(`.collapse`);
 		let data = target.dataset;
 		console.debug(`.dungeon | Collapse ID: ${data.collapseId}`);
 
 		if (!this._expanded.has(data.collapseId)) {
 			this._expanded.add(data.collapseId);
+			parent.setAttribute(`open`, ``);
 		} else {
 			this._expanded.delete(data.collapseId);
+			parent.removeAttribute(`open`, ``);
 		};
-		if (parent.nodeName !== "DETAILS") {
-			this.render();
-		}
 	};
 
 	async openEmbeddedSheet($event) {
diff --git a/styles/sheets/actor/char-sheet/v2/pages/inventory.scss b/styles/sheets/actor/char-sheet/v2/pages/inventory.scss
index 514ff77..8581328 100644
--- a/styles/sheets/actor/char-sheet/v2/pages/inventory.scss
+++ b/styles/sheets/actor/char-sheet/v2/pages/inventory.scss
@@ -128,6 +128,38 @@
 		}
 	}
 
+	.collapse {
+		&__header {
+			display: flex;
+			gap: 8px;
+			align-items: center;
+			justify-content: space-between;
+
+			&:hover {
+				cursor: pointer;
+			}
+
+		}
+		&__toggle {
+			color: var(--inventory-material-color);
+			transition: transform 200ms ease-in-out;
+			&:focus-visible {
+				box-shadow: 0 0 10px var(--color-shadow-highlight);
+			}
+		}
+
+		&__content { display: none; visibility: hidden; }
+		&[open] .collapse{
+			&__toggle {
+				transform: rotate(90deg);
+			}
+			&__content {
+				display: unset;
+				visibility: visible;
+			}
+		}
+	}
+
 	.material {
 		@include material.elevate(1);
 		padding: 8px;
@@ -192,23 +224,6 @@
 		border-radius: 4px;
 		color: var(--inventory-material-color);
 
-		&__header {
-			display: flex;
-			gap: 8px;
-			align-items: center;
-			justify-content: space-between;
-
-			&:hover {
-				cursor: pointer;
-			}
-
-			button {
-				color: var(--inventory-material-color);
-				&:focus-visible {
-					box-shadow: 0 0 10px var(--color-shadow-highlight);
-				}
-			}
-		}
 		&__name {
 			flex-grow: 1;
 			cursor: inherit;
diff --git a/templates/actors/char-sheet/v2/partials/inventory/items/aspect.v2.pc.hbs b/templates/actors/char-sheet/v2/partials/inventory/items/aspect.v2.pc.hbs
index 210e31b..9381ec4 100644
--- a/templates/actors/char-sheet/v2/partials/inventory/items/aspect.v2.pc.hbs
+++ b/templates/actors/char-sheet/v2/partials/inventory/items/aspect.v2.pc.hbs
@@ -1,28 +1,27 @@
-<section class="aspect">
+<section
+	class="aspect collapse"
+	{{dd-expanded meta.expanded item.uuid}}
+>
 	<div
-		class="aspect__header"
+		class="collapse__header"
 		data-collapse-id="{{item.uuid}}"
 	>
 		<button
 			type="button"
-			class="equal-padding reduced-padding"
+			class="collapse__toggle equal-padding reduced-padding"
 			data-collapse-id="{{item.uuid}}"
 			tabindex="0"
 			aria-label="{{dd-i18n 'dotdungeon.sheet.actor.v2.toggle-item-information' item}}"
 		>
 			<div aria-hidden="true" class="icon icon--12">
-				{{#if (dd-set-has meta.expanded item.uuid)}}
-					{{{ icons.caret-down }}}
-				{{else}}
-					{{{ icons.caret-right }}}
-				{{/if}}
+				{{{ icons.caret-right }}}
 			</div>
 		</button>
 		<h3 class="aspect__name">
 			{{item.name}}
 		</h3>
 	</div>
-	{{#if (dd-set-has meta.expanded item.uuid)}}
+	<div class="collapse__content">
 		<hr>
 		<div class="aspect__content">
 			<div class="aspect__field editable">
@@ -95,5 +94,5 @@
 				</div>
 			</button>
 		</div>
-	{{/if}}
+	</div>
 </section>
diff --git a/templates/actors/char-sheet/v2/partials/inventory/items/untyped.v2.pc.hbs b/templates/actors/char-sheet/v2/partials/inventory/items/untyped.v2.pc.hbs
index 4a62455..03a6269 100644
--- a/templates/actors/char-sheet/v2/partials/inventory/items/untyped.v2.pc.hbs
+++ b/templates/actors/char-sheet/v2/partials/inventory/items/untyped.v2.pc.hbs
@@ -1,21 +1,20 @@
-<section class="untyped">
+<section
+	class="untyped collapse"
+	{{dd-expanded meta.expanded item.uuid}}
+>
 	<div
-		class="untyped__header"
+		class="collapse__header"
 		data-collapse-id="{{item.uuid}}"
 	>
 		<button
 			type="button"
-			class="equal-padding reduced-padding"
+			class="collapse__toggle equal-padding reduced-padding"
 			data-collapse-id="{{item.uuid}}"
 			tabindex="0"
 			aria-label="{{dd-i18n 'dotdungeon.sheet.actor.v2.toggle-item-information' item}}"
 		>
 			<div aria-hidden="true" class="icon icon--12">
-				{{#if (dd-set-has meta.expanded item.uuid)}}
-					{{{ icons.caret-down }}}
-				{{else}}
-					{{{ icons.caret-right }}}
-				{{/if}}
+				{{{ icons.caret-right }}}
 			</div>
 		</button>
 		<h3 class="untyped__name">
@@ -25,7 +24,7 @@
 			(x {{item.system.quantity}})
 		</div>
 	</div>
-	{{#if (dd-set-has meta.expanded item.uuid)}}
+	<div class="collapse__content">
 		<hr>
 		<div class="untyped__content">
 			<div class="untyped__field editable">
@@ -98,5 +97,5 @@
 				</div>
 			</button>
 		</div>
-	{{/if}}
+	</div>
 </section>
diff --git a/templates/actors/char-sheet/v2/partials/inventory/items/weapon.v2.pc.hbs b/templates/actors/char-sheet/v2/partials/inventory/items/weapon.v2.pc.hbs
index 5eeab46..c51f578 100644
--- a/templates/actors/char-sheet/v2/partials/inventory/items/weapon.v2.pc.hbs
+++ b/templates/actors/char-sheet/v2/partials/inventory/items/weapon.v2.pc.hbs
@@ -1,21 +1,20 @@
-<section class="weapon">
+<section
+	class="weapon collapse"
+	{{dd-expanded meta.expanded item.uuid}}
+>
 	<div
-		class="weapon__header"
+		class="collapse__header"
 		data-collapse-id="{{item.uuid}}"
 	>
 		<button
 			type="button"
-			class="equal-padding reduced-padding"
+			class="collapse__toggle equal-padding reduced-padding"
 			data-collapse-id="{{item.uuid}}"
 			tabindex="0"
 			aria-label="{{dd-i18n 'dotdungeon.sheet.actor.v2.toggle-item-information' item}}"
 		>
 			<div aria-hidden="true" class="icon icon--12">
-				{{#if (dd-set-has meta.expanded item.uuid)}}
-					{{{ icons.caret-down }}}
-				{{else}}
-					{{{ icons.caret-right }}}
-				{{/if}}
+				{{{ icons.caret-right }}}
 			</div>
 		</button>
 		<h3 class="weapon__name">
@@ -25,7 +24,7 @@
 			(x {{item.system.quantity}})
 		</div>
 	</div>
-	{{#if (dd-set-has meta.expanded item.uuid)}}
+	<div class="collapse__content">
 		<hr>
 		<div class="weapon__content">
 			<div class="weapon__field editable">
@@ -113,5 +112,5 @@
 				</div>
 			</button>
 		</div>
-	{{/if}}
+	</div>
 </section>