Animate <details> on open and replace link icon

godotengine · Nov 25, 2024 · d7a3694 · d7a3694
1 parent 8b2ac93
commit d7a3694
Show file tree

Hide file tree

Showing 4 changed files with 134 additions and 38 deletions.
diff --git a/assets/css/priorities/base.scss b/assets/css/priorities/base.scss
@@ -74,6 +74,26 @@ $outline: .125rem solid #4080ff;
 	}
 }
 
+// ---
+
+@mixin anchor-icon($icon-color) {
+	.anchor-icon {
+		display: inline-block;
+
+		$size: 0.8rem;
+		$min-size: 24px;
+		mask-image: url(/assets/icons/link.svg);
+		mask-size: 100% 100%;
+		mask-repeat: no-repeat;
+		height: $size;
+		width: $size;
+		min-height: $min-size;
+		min-width: $min-size;
+
+		background-color: $icon-color;
+	}
+}
+
 //
 // General
 //
@@ -85,7 +105,9 @@ html {
 	scroll-padding-top: $gap;
 }
 
-// Priorities container.
+//
+// Main content.
+//
 .priorities-container {
 	font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
 	background-color: var(--card-background-color);
@@ -251,7 +273,10 @@ html {
 
 							background-color: var(--background-color);
 							&:hover {
-								background-color: var(--base-color);
+								filter: brightness(117.5%);
+								@include is-light() {
+									filter: brightness(105%);
+								}
 							}
 
 							border-radius: $border-radius;
@@ -337,43 +362,46 @@ html {
 
 						// .category.level-1
 						@at-root #{selector-replace(&, ".category", ".category.level-1")} {
-							background-color: var(--primary-color);
 							font-size: 3rem;
+							background-color: var(--primary-color);
 						}
 						// .category.level-2
 						@at-root #{selector-replace(&, ".category", ".category.level-2")} {
-							background-color: var(--background-color);
 							font-size: 2.125rem;
+							background-color: var(--background-color);
+							@include is-light() {
+								&:hover {
+									filter: brightness(105%);
+								}
+							}
+						}
+
+						&:hover {
+							filter: brightness(117.5%);
 						}
 
 						> .category-anchor-container {
 							grid-area: anchor;
 
-							&:focus-within {
-								outline: $outline;
-							}
+							display: flex;
+							flex-direction: column;
+							align-items: center;
+							justify-content: center;
 
 							> .category-anchor {
 								display: block;
+								position: relative;
 								text-decoration: none;
 								color: white;
 
-								$size: 0.8rem;
-								$min-size: 24px;
-								mask-image: url(/assets/icons/link.svg);
-								mask-size: 100% 100%;
-								mask-repeat: no-repeat;
-								height: $size;
-								width: $size;
-								min-height: $min-size;
-								min-width: $min-size;
-
 								opacity: 0;
-								background-color: white;
-
-								@at-root #{selector-replace(&, ".category-summary", ".category-summary:hover")}, &:focus {
+								@at-root #{selector-replace(&, ".category-summary", ".category-summary:hover")},
+								&:focus {
 									opacity: 1;
 								}
+
+								$anchor-icon-color: white;
+								@include anchor-icon($icon-color: white);
 							}
 						}
 
@@ -486,12 +514,17 @@ html {
 
 										cursor: pointer;
 										border-radius: $border-radius;
+										color: var(--base-color-text);
 
 										margin-top: -$gap;
 										padding: $gap;
 
 										&:hover {
 											background-color: var(--background-color);
+											filter: brightness(117.5%);
+											@include is-light() {
+												filter: brightness(105%);
+											}
 										}
 
 										list-style: none;
@@ -512,9 +545,10 @@ html {
 											display: inline-block;
 											height: 100%;
 
-											&:focus-within {
-												outline: $outline;
-											}
+											display: flex;
+											flex-direction: column;
+											align-items: center;
+											justify-content: center;
 
 											.element-title-anchor {
 												flex-grow: 0;
@@ -525,22 +559,13 @@ html {
 
 												text-decoration: none;
 
-												$size: 0.8rem;
-												$min-size: 24px;
-												mask-image: url(/assets/icons/link.svg);
-												mask-size: 100% 100%;
-												mask-repeat: no-repeat;
-												height: $size;
-												width: $size;
-												min-height: $min-size;
-												min-width: $min-size;
-
 												opacity: 0;
-												background-color: var(--base-color-text);
-
-												@at-root #{selector-replace(&, ".element-title", ".element-title:hover")}, &:focus {
+												@at-root #{selector-replace(&, ".element-title", ".element-title:hover")},
+												&:focus {
 													opacity: 1;
 												}
+
+												@include anchor-icon($icon-color: var(--base-color-text));
 											}
 
 											.element-title-text {
@@ -693,6 +718,33 @@ html {
 			}
 		}
 	}
+
+	details {
+		@keyframes opening {
+			from {
+				transform:
+					translateY(-50px);
+				opacity: 0;
+			}
+
+			to {
+				transform:
+					translateY(0);
+				opacity: 1;
+			}
+		}
+
+		> summary {
+			z-index: 100;
+		}
+
+		&.opening {
+			> *:not(summary) {
+				animation:
+					opening 0.4s ease 1 normal;
+			}
+		}
+	}
 }
 
 #scroll-to-top {

diff --git a/assets/js/priorities.mjs b/assets/js/priorities.mjs
@@ -227,6 +227,49 @@ function convertAbsoluteDatesToRelativeDates() {
 	}
 }
 
+// =================
+// Animate <details>
+// =================
+function animateDetailsTag() {
+	const prioritiesContainer = document.querySelector(".priorities-container");
+	if (!(prioritiesContainer instanceof HTMLElement)) {
+		throw new Error("Couldn't find .priorities-container");
+	}
+
+	/**
+	 * Triggered on opening animation end.
+	 * @param {AnimationEvent} event
+	 */
+	const onAnimationEnd = (event) => {
+		const target = event.target;
+		if (!(target instanceof HTMLDetailsElement)) {
+			return;
+		}
+		target.classList.remove("opening");
+	};
+
+	const mutationObserver = new MutationObserver((mutationList, _) => {
+		for (const mutation of mutationList) {
+			const target = mutation.target;
+			if (!(target instanceof HTMLDetailsElement)) {
+				continue;
+			}
+			if (mutation.attributeName === "open") {
+				target.removeEventListener("animationend", onAnimationEnd);
+
+				if (target.open) {
+					// Just opened.
+					target.classList.add("opening");
+					target.addEventListener("animationend", onAnimationEnd);
+				} else {
+					target.classList.remove("opening");
+				}
+			}
+		}
+	});
+	mutationObserver.observe(prioritiesContainer, { attributes: true, subtree: true });
+}
+
 // ====
 // Main
 // ====
@@ -240,5 +283,6 @@ function main() {
 	openDetailsSelectedInUrl();
 	handleNavigateEvent();
 	convertAbsoluteDatesToRelativeDates();
+	animateDetailsTag();
 }
 main();
diff --git a/pages/priorities/_includes/category.html b/pages/priorities/_includes/category.html
@@ -7,7 +7,7 @@
 				<summary class="category-summary">
 					<div class="category-anchor-container">
 						<a class="category-anchor" href="#{{ include.id }}">
-							<!-- Anchor link. -->
+							<span class="anchor-icon"></span>
 						</a>
 					</div>
 					{% assign header_number = include.level | to_i | plus: 1 %}

diff --git a/pages/priorities/_includes/element.html b/pages/priorities/_includes/element.html
@@ -9,7 +9,7 @@
 				</div>
 				<div class="element-title-container element-title-container-anchor">
 					<a class="element-title-anchor" href="#{{ element.anchor }}">
-						<!-- Anchor icon. -->
+						<span class="anchor-icon"></span>
 					</a>
 				</div>
 			</div>