[HTML] Full spoiler support (#285)

5 years ago · 18979c6a38
parent 5bce4b52ff
commit 18979c6a38
7 changed files with 114 additions and 11 deletions
--- 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;
--- 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)
--- 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;
 }
--- 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;
 }
--- 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>
--- 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;
 }
--- 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 ~}}