calvin.erfmann/DiscordChatExporter
1
0
Fork 0
mirror of https://github.com/Tyrrrz/DiscordChatExporter.git synced 2026-02-09 11:22:28 +00:00
Code Issues Packages Projects Releases Wiki Activity

[HTML] Full spoiler support (#285)

Browse Source
This commit is contained in:
FM-96
2020-04-05 20:30:15 +02:00
committed by GitHub
parent 5bce4b52ff
commit 18979c6a38
7 changed files with 114 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
DiscordChatExporter.Core.Models/Attachment.cs
View File

@@ -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;

2
DiscordChatExporter.Core.Rendering/Logic/HtmlRenderingLogic.cs
View File

@@ -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)

54
DiscordChatExporter.Core.Rendering/Resources/HtmlCore.css
View File

@@ -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;
}

8
DiscordChatExporter.Core.Rendering/Resources/HtmlDark.css
View File

@@ -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;
}

19
DiscordChatExporter.Core.Rendering/Resources/HtmlLayoutTemplate.html
View File

@@ -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>

8
DiscordChatExporter.Core.Rendering/Resources/HtmlLight.css
View File

@@ -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;
}

30
DiscordChatExporter.Core.Rendering/Resources/HtmlMessageGroupTemplate.html
View File

@@ -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 ~}}