From 18979c6a382a0745495139c48847457cd5f4baf4 Mon Sep 17 00:00:00 2001
From: FM-96 <felix.muellner.96@gmail.com>
Date: Sun, 5 Apr 2020 20:30:15 +0200
Subject: [PATCH] [HTML] Full spoiler support (#285)

---
 DiscordChatExporter.Core.Models/Attachment.cs |  4 ++
 .../Logic/HtmlRenderingLogic.cs               |  2 +-
 .../Resources/HtmlCore.css                    | 54 ++++++++++++++++++-
 .../Resources/HtmlDark.css                    |  8 +++
 .../Resources/HtmlLayoutTemplate.html         | 19 +++++++
 .../Resources/HtmlLight.css                   |  8 +++
 .../Resources/HtmlMessageGroupTemplate.html   | 30 +++++++----
 7 files changed, 114 insertions(+), 11 deletions(-)

diff --git a/DiscordChatExporter.Core.Models/Attachment.cs b/DiscordChatExporter.Core.Models/Attachment.cs
index 5510445..2365e46 100644
--- a/DiscordChatExporter.Core.Models/Attachment.cs
+++ b/DiscordChatExporter.Core.Models/Attachment.cs
@@ -20,6 +20,8 @@ namespace DiscordChatExporter.Core.Models
 
         public bool IsImage { get; }
 
+        public bool IsSpoiler { get; }
+
         public FileSize FileSize { get; }
 
         public Attachment(string id, int? width, int? height, string url, string fileName, FileSize fileSize)
@@ -32,6 +34,8 @@ namespace DiscordChatExporter.Core.Models
             FileSize = fileSize;
 
             IsImage = GetIsImage(fileName);
+
+            IsSpoiler = IsImage && FileName.StartsWith("SPOILER_", StringComparison.Ordinal);
         }
 
         public override string ToString() => FileName;
diff --git a/DiscordChatExporter.Core.Rendering/Logic/HtmlRenderingLogic.cs b/DiscordChatExporter.Core.Rendering/Logic/HtmlRenderingLogic.cs
index 6b8951c..34ec8b8 100644
--- a/DiscordChatExporter.Core.Rendering/Logic/HtmlRenderingLogic.cs
+++ b/DiscordChatExporter.Core.Rendering/Logic/HtmlRenderingLogic.cs
@@ -59,7 +59,7 @@ namespace DiscordChatExporter.Core.Rendering.Logic
 
                 // Spoiler
                 if (formattedNode.Formatting == TextFormatting.Spoiler)
-                    return $"<span class=\"spoiler\">{innerHtml}</span>";
+                    return $"<span class=\"spoiler spoiler--hidden\"><span class=\"spoiler-text\">{innerHtml}</span></span>";
 
                 // Quote
                 if (formattedNode.Formatting == TextFormatting.Quote)
diff --git a/DiscordChatExporter.Core.Rendering/Resources/HtmlCore.css b/DiscordChatExporter.Core.Rendering/Resources/HtmlCore.css
index 217dee1..2c5ec9c 100644
--- a/DiscordChatExporter.Core.Rendering/Resources/HtmlCore.css
+++ b/DiscordChatExporter.Core.Rendering/Resources/HtmlCore.css
@@ -57,6 +57,59 @@ img {
     border-radius: 3px;
 }
 
+.spoiler--hidden {
+    cursor: pointer;
+}
+
+.spoiler--hidden .spoiler-text {
+    opacity: 0;
+}
+
+.spoiler-image {
+    margin-top: 0.3em;
+    border-radius: 3px;
+    box-shadow: 0.5px 0.5px 1px 1px rgba(0,0,0,.1);
+    cursor: pointer;
+    overflow: hidden;
+    position: relative;
+    width: fit-content;
+}
+
+.spoiler-image:hover .spoiler-warning {
+    color: #fff;
+    background-color: rgba(0,0,0,.9);
+}
+
+.spoiler-warning {
+    color: #dcddde;
+    background-color: rgba(0,0,0,.6);
+
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%,-50%);
+    text-transform: uppercase;
+    display: flex;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+    flex-direction: column;
+    align-items: center;
+    font-weight: 600;
+    cursor: pointer;
+    z-index: 1;
+    padding: 8px 12px;
+    border-radius: 20px;
+    letter-spacing: .5px;
+    font-size: 15px;
+    user-select: none;
+}
+
+.spoiler-image-wrapper {
+    margin-top: -0.3em;
+    filter: blur(44px);
+    pointer-events: none;
+}
+
 .quote {
     margin: 0.5em 0;
     padding-left: 0.6em;
@@ -197,7 +250,6 @@ img {
 
 .chatlog__attachment-thumbnail {
     margin-top: 0.3em;
-    max-width: 50%;
     max-height: 500px;
     border-radius: 3px;
 }
diff --git a/DiscordChatExporter.Core.Rendering/Resources/HtmlDark.css b/DiscordChatExporter.Core.Rendering/Resources/HtmlDark.css
index 5627b47..0df690c 100644
--- a/DiscordChatExporter.Core.Rendering/Resources/HtmlDark.css
+++ b/DiscordChatExporter.Core.Rendering/Resources/HtmlDark.css
@@ -13,6 +13,14 @@ a {
     background-color: rgba(255, 255, 255, 0.1);
 }
 
+.spoiler--hidden {
+    background-color: #202225;
+}
+
+.spoiler--hidden:hover {
+    background-color: rgba(32,34,37,.8);
+}
+
 .quote {
     border-color: #4f545c;
 }
diff --git a/DiscordChatExporter.Core.Rendering/Resources/HtmlLayoutTemplate.html b/DiscordChatExporter.Core.Rendering/Resources/HtmlLayoutTemplate.html
index 9707528..9fc5ad9 100644
--- a/DiscordChatExporter.Core.Rendering/Resources/HtmlLayoutTemplate.html
+++ b/DiscordChatExporter.Core.Rendering/Resources/HtmlLayoutTemplate.html
@@ -44,6 +44,25 @@
                 }, 2000);
             }
         }
+
+        // unhiding text spoilers on click
+        document.addEventListener('click', (e) => {
+            var spoilerTag = e.target.closest('.spoiler--hidden');
+            if (!spoilerTag) {
+                return;
+            }
+            spoilerTag.classList.remove('spoiler--hidden');
+        });
+
+        // unhiding image spoilers on click
+        document.addEventListener('click', (e) => {
+            var spoilerImage = e.target.closest('.spoiler-image');
+            if (!spoilerImage) {
+                return;
+            }
+            var image = spoilerImage.querySelector('a');
+            spoilerImage.replaceWith(image);
+        });
     </script>
 </head>
 <body>
diff --git a/DiscordChatExporter.Core.Rendering/Resources/HtmlLight.css b/DiscordChatExporter.Core.Rendering/Resources/HtmlLight.css
index dc61779..c98ba24 100644
--- a/DiscordChatExporter.Core.Rendering/Resources/HtmlLight.css
+++ b/DiscordChatExporter.Core.Rendering/Resources/HtmlLight.css
@@ -14,6 +14,14 @@ a {
     background-color: rgba(0, 0, 0, 0.1);
 }
 
+.spoiler--hidden {
+    background-color: #b9bbbe;
+}
+
+.spoiler--hidden:hover {
+    background-color: rgba(185,187,190,.8);
+}
+
 .quote {
     border-color: #c7ccd1;
 }
diff --git a/DiscordChatExporter.Core.Rendering/Resources/HtmlMessageGroupTemplate.html b/DiscordChatExporter.Core.Rendering/Resources/HtmlMessageGroupTemplate.html
index 6db118e..cd3ab88 100644
--- a/DiscordChatExporter.Core.Rendering/Resources/HtmlMessageGroupTemplate.html
+++ b/DiscordChatExporter.Core.Rendering/Resources/HtmlMessageGroupTemplate.html
@@ -32,15 +32,27 @@
             {{~ # Attachments ~}}
             {{~ for attachment in message.Attachments ~}}
                 <div class="chatlog__attachment">
-                    <a href="{{ attachment.Url }}">
-                        {{ # Image }}
-                        {{~ if attachment.IsImage ~}}
-                            <img class="chatlog__attachment-thumbnail" src="{{ attachment.Url }}" alt="Attachment" />
-                        {{~ # Non-image ~}}
-                        {{~ else ~}}
-                            Attachment: {{ attachment.FileName }} ({{ attachment.FileSize }})
-                        {{~ end ~}}
-                    </a>
+                    {{ # Spoiler image }}
+                    {{~ if attachment.IsSpoiler ~}}
+                        <div class="spoiler-image">
+                            <div class="spoiler-warning">Spoiler</div>
+                            <div class="spoiler-image-wrapper">
+                                <a href="{{ attachment.Url }}">
+                                    <img class="chatlog__attachment-thumbnail" src="{{ attachment.Url }}" alt="Attachment" />
+                                </a>
+                            </div>
+                        </div>
+                    {{~ else ~}}
+                        <a href="{{ attachment.Url }}">
+                            {{ # Non-spoiler image }}
+                            {{~ if attachment.IsImage ~}}
+                                <img class="chatlog__attachment-thumbnail" src="{{ attachment.Url }}" alt="Attachment" />
+                            {{~ # Non-image ~}}
+                            {{~ else ~}}
+                                Attachment: {{ attachment.FileName }} ({{ attachment.FileSize }})
+                            {{~ end ~}}
+                        </a>
+                    {{~ end ~}}
                 </div>
             {{~ end ~}}