From d8bf8d6a89ce08693868fa7fac5d18d6d31256ce Mon Sep 17 00:00:00 2001
From: =?utf8?q?David=20=E2=80=98Bombe=E2=80=99=20Roden?=
 <bombe@pterodactylus.net>
Date: Fri, 11 Nov 2016 20:20:31 +0100
Subject: [PATCH] Show linked images under posts and replies

---
 .../net/pterodactylus/sone/web/WebInterface.java   |  5 +++-
 src/main/resources/static/css/sone.css             | 30 ++++++++++++++++++++++
 src/main/resources/templates/include/viewPost.html | 12 +++++++++
 .../resources/templates/include/viewReply.html     | 12 +++++++++
 4 files changed, 58 insertions(+), 1 deletion(-)

diff --git a/src/main/java/net/pterodactylus/sone/web/WebInterface.java b/src/main/java/net/pterodactylus/sone/web/WebInterface.java
index 45b8307..046a377 100644
--- a/src/main/java/net/pterodactylus/sone/web/WebInterface.java
+++ b/src/main/java/net/pterodactylus/sone/web/WebInterface.java
@@ -40,6 +40,7 @@ import javax.annotation.Nonnull;
 import javax.annotation.Nullable;
 
 import net.pterodactylus.sone.core.Core;
+import net.pterodactylus.sone.core.ImageLoader;
 import net.pterodactylus.sone.core.event.ImageInsertAbortedEvent;
 import net.pterodactylus.sone.core.event.ImageInsertFailedEvent;
 import net.pterodactylus.sone.core.event.ImageInsertFinishedEvent;
@@ -84,6 +85,7 @@ import net.pterodactylus.sone.template.IdentityAccessor;
 import net.pterodactylus.sone.template.ImageAccessor;
 import net.pterodactylus.sone.template.ImageLinkFilter;
 import net.pterodactylus.sone.template.JavascriptFilter;
+import net.pterodactylus.sone.template.LinkedImagesFilter;
 import net.pterodactylus.sone.template.ParserFilter;
 import net.pterodactylus.sone.template.PostAccessor;
 import net.pterodactylus.sone.template.ProfileAccessor;
@@ -256,7 +258,7 @@ public class WebInterface {
 	 *            The Sone plugin
 	 */
 	@Inject
-	public WebInterface(SonePlugin sonePlugin, Loaders loaders, ListNotificationFilter listNotificationFilter, PostVisibilityFilter postVisibilityFilter, ReplyVisibilityFilter replyVisibilityFilter) {
+	public WebInterface(SonePlugin sonePlugin, Loaders loaders, ListNotificationFilter listNotificationFilter, PostVisibilityFilter postVisibilityFilter, ReplyVisibilityFilter replyVisibilityFilter, ImageLoader imageLoader) {
 		this.sonePlugin = sonePlugin;
 		this.loaders = loaders;
 		this.listNotificationFilter = listNotificationFilter;
@@ -291,6 +293,7 @@ public class WebInterface {
 		templateContextFactory.addFilter("parse", parserFilter = new ParserFilter(getCore(), soneTextParser));
 		templateContextFactory.addFilter("shorten", shortenFilter = new ShortenFilter());
 		templateContextFactory.addFilter("render", renderFilter = new RenderFilter(getCore(), templateContextFactory));
+		templateContextFactory.addFilter("linked-images", new LinkedImagesFilter(imageLoader));
 		templateContextFactory.addFilter("reparse", new ReparseFilter());
 		templateContextFactory.addFilter("unknown", new UnknownDateFilter(getL10n(), "View.Sone.Text.UnknownDate"));
 		templateContextFactory.addFilter("format", new FormatFilter());
diff --git a/src/main/resources/static/css/sone.css b/src/main/resources/static/css/sone.css
index 1767090..8e008c7 100644
--- a/src/main/resources/static/css/sone.css
+++ b/src/main/resources/static/css/sone.css
@@ -440,6 +440,21 @@ textarea {
 	color: green;
 }
 
+#sone .post .linked-images {
+	margin-top: 1ex;
+}
+
+#sone .post .linked-image {
+	display: inline-block;
+	border: solid 1px black;
+	width: 160px;
+	height: 120px;
+	background-size: cover;
+	background-position: center;
+	margin-right: 1ex;
+	margin-bottom: 1ex;
+}
+
 #sone .post .replies {
 	clear: both;
 	padding-top: 0.2ex;
@@ -496,6 +511,21 @@ textarea {
 	font-size: inherit;
 }
 
+#sone .post .reply .linked-images {
+	margin-top: 1ex;
+}
+
+#sone .post .reply .linked-image {
+	display: inline-block;
+	border: solid 1px black;
+	width: 120px;
+	height: 90px;
+	background-size: cover;
+	background-position: center;
+	margin-right: 1ex;
+	margin-bottom: 1ex;
+}
+
 #sone .post .show-reply-form {
 	display: inline;
 }
diff --git a/src/main/resources/templates/include/viewPost.html b/src/main/resources/templates/include/viewPost.html
index 7cba220..ac149f8 100644
--- a/src/main/resources/templates/include/viewPost.html
+++ b/src/main/resources/templates/include/viewPost.html
@@ -35,6 +35,18 @@
 			<div class="post-text short-text<%if raw> hidden<%/if><%if shortText|match key=renderedText> hidden<%/if>"><% shortText></div>
 			<%if !shortText|match value=renderedText><%if !raw><a class="expand-post-text" href="viewPost.html?post=<% post.id|html>&amp;raw=true"><%= View.Post.ShowMore|l10n|html></a><%/if><%/if>
 			<%if !shortText|match value=renderedText><%if !raw><a class="shrink-post-text hidden"><%= View.Post.ShowLess|l10n|html></a><%/if><%/if>
+			<% parsedText|linked-images|store key==linkedImages>
+			<% foreach linkedImages linkedImage>
+				<% first>
+					<div class="linked-images">
+				<%/first>
+				<a href="/<% linkedImage.link|html>">
+					<span class="linked-image" title="<% linkedImage.link|html>" style="background-image: url('/<% linkedImage.link|html>')"/>
+				</a>
+				<% last>
+					</div>
+				<%/last>
+			<%/foreach>
 		</div>
 		<div class="post-status-line status-line<%if !post.loaded> hidden<%/if>">
 			<div class="bookmarks">
diff --git a/src/main/resources/templates/include/viewReply.html b/src/main/resources/templates/include/viewReply.html
index 1ef8f13..cd56e32 100644
--- a/src/main/resources/templates/include/viewReply.html
+++ b/src/main/resources/templates/include/viewReply.html
@@ -23,6 +23,18 @@
 			<div class="reply-text short-text<%if raw> hidden<%/if><%if shortText|match key=renderedText> hidden<%/if>"><% shortText></div>
 			<%if !shortText|match value=renderedText><%if !raw><a class="expand-reply-text" href="viewPost.html?post=<% reply.postId|html>&amp;raw=true"><%= View.Post.ShowMore|l10n|html></a><%/if><%/if>
 			<%if !shortText|match value=renderedText><%if !raw><a class="shrink-reply-text hidden"><%= View.Post.ShowLess|l10n|html></a><%/if><%/if>
+			<% parsedText|linked-images|store key==linkedImages>
+			<% foreach linkedImages linkedImage>
+				<% first>
+					<div class="linked-images">
+				<%/first>
+				<a href="/<% linkedImage.link|html>">
+					<span class="linked-image" title="<% linkedImage.link|html>" style="background-image: url('/<% linkedImage.link|html>')"/>
+				</a>
+				<% last>
+					</div>
+				<%/last>
+			<%/foreach>
 		</div>
 		<div class="reply-status-line status-line">
 			<div class="time"><% reply.time|date format=="MMM d, yyyy, HH:mm:ss"></div>
-- 
2.7.4