[HTML] Full spoiler support (#285)

pull/287/head
FM-96 5 years ago committed by GitHub
parent 5bce4b52ff
commit 18979c6a38
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

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

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

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

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

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

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

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

Loading…
Cancel
Save