Add "shorten long posts" toggle

wovenstarlight · Apr 17, 2024 · e025d21 · e025d21
1 parent 7463641
commit e025d21
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 2 deletions.
diff --git a/theme13/theme13.css b/theme13/theme13.css
@@ -1063,6 +1063,29 @@ body.hasnotes #posts { margin-right: 1.25em }
 }
 /* #endregion */
 
+/* #region Shortened posts */
+.expandable.post .body {
+	max-height: calc(100vh - (3.75em * 2) - (3.7em * 2));
+	overflow-y: clip;
+	position: relative;
+}
+.expandable.post button.expand {
+	position: absolute;
+	bottom: 0;
+	left: -5%;
+	width: 110%;
+	background: linear-gradient(rgba(var(--post-bg--rgb), 0) 0%, rgba(var(--post-bg--rgb), 0.8) 1em, rgba(var(--post-bg--rgb), 1));
+	color: var(--text);
+	border: none;
+	padding: 1.5em 1em 0.5em;
+	font-weight: 600;
+}
+.expandable.post button.expand:focus {
+	text-decoration: 0.15em solid var(--accent) underline;
+	text-underline-offset: 0.35em;
+}
+/* #endregion */
+
 /* #endregion */
 
 

diff --git a/theme13/theme13.html b/theme13/theme13.html
@@ -9,7 +9,7 @@
 		Tippy.js tooltips by atomiks: https://atomiks.github.io/tippyjs
 		Expanded Tumblr localization by codematurgy: https://github.com/boscoxvi/expandedtumblrlocalization
 	
-	Last updated 13 April 2024.
+	Last updated 17 April 2024.
 -->
 <!DOCTYPE html>
 <html lang="en" class="{select:Default palette}">
@@ -68,6 +68,7 @@
 	<meta name="if:Day page links" content="1">
 	<meta name="if:Post tags" content="1">
 	<meta name="text:Filtered tags" content="text post, long post">
+	<meta name="if:Shorten long posts" content="0">
 
 	<!-- Other -->
 	<meta name="text:FAQ" content="This will go on your ask page, above your ask box.&NewLine;Add whatever HTML or plain text you want. If you don't want an FAQ, leave this field blank!">
@@ -833,6 +834,23 @@ <h2>
 // Prepare variables for notes section's tooltips
 var notesTooltipInstances, notesTooltips;
 // #endregion
+
+{block:IfShortenLongPosts}
+// Shorten long posts
+Array.from(document.querySelectorAll(".post")).filter(el => el.clientHeight >= 2 * window.innerHeight).forEach(post => {
+	let btn = document.createElement("button");
+	btn.classList.add("expand");
+	btn.innerText = "Expand";
+
+	post.classList.add("expandable");
+	post.querySelector(".body").append(btn);
+
+	btn.addEventListener("click", e => {
+		post.classList.remove("expandable");
+		e.currentTarget.remove();
+	})
+});
+{/block:IfShortenLongPosts}
 // #endregion
 
 // Set up keyboard navigation