Archive/DiscordChatExporter
1
0
Fork 0
mirror of https://github.com/Tyrrrz/DiscordChatExporter.git synced 2026-02-14 15:53:30 -07:00
Code Issues Actions 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
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 114 additions and 11 deletions
Show stats 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 IsImage { get; }
public bool IsSpoiler { get; }
public FileSize FileSize { get; } public FileSize FileSize { get; }
public Attachment(string id, int? width, int? height, string url, string fileName, FileSize fileSize) public Attachment(string id, int? width, int? height, string url, string fileName, FileSize fileSize)
@ -32,6 +34,8 @@ namespace DiscordChatExporter.Core.Models
FileSize = fileSize; FileSize = fileSize;
IsImage = GetIsImage(fileName); IsImage = GetIsImage(fileName);
IsSpoiler = IsImage && FileName.StartsWith("SPOILER_", StringComparison.Ordinal);
} }
public override string ToString() => FileName; public override string ToString() => FileName;

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

@ -59,7 +59,7 @@ namespace DiscordChatExporter.Core.Rendering.Logic
// Spoiler // Spoiler
if (formattedNode.Formatting == TextFormatting.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 // Quote
if (formattedNode.Formatting == TextFormatting.Quote) if (formattedNode.Formatting == TextFormatting.Quote)

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

@ -57,6 +57,59 @@ img {
border-radius: 3px; 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 { .quote {
margin: 0.5em 0; margin: 0.5em 0;
padding-left: 0.6em; padding-left: 0.6em;
@ -197,7 +250,6 @@ img {
.chatlog__attachment-thumbnail { .chatlog__attachment-thumbnail {
margin-top: 0.3em; margin-top: 0.3em;
max-width: 50%;
max-height: 500px; max-height: 500px;
border-radius: 3px; 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); background-color: rgba(255, 255, 255, 0.1);
} }
.spoiler--hidden {
background-color: #202225;
}
.spoiler--hidden:hover {
background-color: rgba(32,34,37,.8);
}
.quote { .quote {
border-color: #4f545c; border-color: #4f545c;
} }

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

@ -44,6 +44,25 @@
}, 2000); }, 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> </script>
</head> </head>
<body> <body>

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

@ -14,6 +14,14 @@ a {
background-color: rgba(0, 0, 0, 0.1); background-color: rgba(0, 0, 0, 0.1);
} }
.spoiler--hidden {
background-color: #b9bbbe;
}
.spoiler--hidden:hover {
background-color: rgba(185,187,190,.8);
}
.quote { .quote {
border-color: #c7ccd1; border-color: #c7ccd1;
} }

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

@ -32,15 +32,27 @@
{{~ # Attachments ~}} {{~ # Attachments ~}}
{{~ for attachment in message.Attachments ~}} {{~ for attachment in message.Attachments ~}}
<div class="chatlog__attachment"> <div class="chatlog__attachment">
<a href="{{ attachment.Url }}"> {{ # Spoiler image }}
{{ # Image }} {{~ if attachment.IsSpoiler ~}}
{{~ if attachment.IsImage ~}} <div class="spoiler-image">
<img class="chatlog__attachment-thumbnail" src="{{ attachment.Url }}" alt="Attachment" /> <div class="spoiler-warning">Spoiler</div>
{{~ # Non-image ~}} <div class="spoiler-image-wrapper">
{{~ else ~}} <a href="{{ attachment.Url }}">
Attachment: {{ attachment.FileName }} ({{ attachment.FileSize }}) <img class="chatlog__attachment-thumbnail" src="{{ attachment.Url }}" alt="Attachment" />
{{~ end ~}} </a>
</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> </div>
{{~ end ~}} {{~ end ~}}