mirror of
https://github.com/chylex/Discord-History-Tracker.git
synced 2025-04-11 11:15:42 +02:00
Compare commits
2 Commits
868ba38bd3
...
41cb25f15d
| Author | SHA1 | Date | |
|---|---|---|---|
|
41cb25f15d | ||
|
|
7ba012ef5c |
@ -1,96 +1,91 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="referrer" content="no-referrer">
|
||||
|
||||
<title>Discord Offline History</title>
|
||||
|
||||
<link rel="icon" href="favicon.ico">
|
||||
|
||||
<link rel="stylesheet" href="styles/main.css">
|
||||
<link rel="stylesheet" href="styles/menu.css">
|
||||
<link rel="stylesheet" href="styles/channels.css">
|
||||
<link rel="stylesheet" href="styles/servers.css">
|
||||
<link rel="stylesheet" href="styles/messages.css">
|
||||
<link rel="stylesheet" href="styles/modal.css">
|
||||
|
||||
<script type="text/javascript">
|
||||
const query = new URLSearchParams(location.search);
|
||||
window.DHT_SERVER_TOKEN = query.get("token");
|
||||
window.DHT_SERVER_SESSION = query.get("session");
|
||||
</script>
|
||||
<script type="module" src="scripts/bootstrap.mjs"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="menu">
|
||||
<button id="btn-settings">Settings</button>
|
||||
|
||||
<div class="splitter"></div>
|
||||
|
||||
<div> <!-- needed to stop the select from messing up -->
|
||||
<select id="opt-messages-per-page">
|
||||
<option value="50">50 messages per page </option>
|
||||
<option value="100">100 messages per page </option>
|
||||
<option value="250">250 messages per page </option>
|
||||
<option value="500">500 messages per page </option>
|
||||
<option value="1000">1000 messages per page </option>
|
||||
<option value="0">All messages </option>
|
||||
</select>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="referrer" content="no-referrer">
|
||||
|
||||
<title>Discord Offline History</title>
|
||||
|
||||
<link rel="icon" href="favicon.ico">
|
||||
|
||||
<link rel="stylesheet" href="styles/main.css">
|
||||
<link rel="stylesheet" href="styles/menu.css">
|
||||
<link rel="stylesheet" href="styles/servers.css">
|
||||
<link rel="stylesheet" href="styles/channels.css">
|
||||
<link rel="stylesheet" href="styles/messages.css">
|
||||
<link rel="stylesheet" href="styles/modal.css">
|
||||
|
||||
<script type="text/javascript">
|
||||
const query = new URLSearchParams(location.search);
|
||||
window.DHT_SERVER_TOKEN = query.get("token");
|
||||
window.DHT_SERVER_SESSION = query.get("session");
|
||||
</script>
|
||||
<script type="module" src="scripts/bootstrap.mjs"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="menu">
|
||||
<button id="btn-settings">Settings</button>
|
||||
|
||||
<div class="splitter"></div>
|
||||
|
||||
<div> <!-- needed to stop the select from messing up -->
|
||||
<select id="opt-messages-per-page">
|
||||
<option value="50">50 messages per page </option>
|
||||
<option value="100">100 messages per page </option>
|
||||
<option value="250">250 messages per page </option>
|
||||
<option value="500">500 messages per page </option>
|
||||
<option value="1000">1000 messages per page </option>
|
||||
<option value="0">All messages </option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="nav">
|
||||
<button id="nav-first" data-nav="first" class="icon">«</button>
|
||||
<button id="nav-prev" data-nav="prev" class="icon">‹</button>
|
||||
<button id="nav-pick" data-nav="pick">Page <span id="nav-page-current">1</span>/<span id="nav-page-total">?</span></button>
|
||||
<button id="nav-next" data-nav="next" class="icon">›</button>
|
||||
<button id="nav-last" data-nav="last" class="icon">»</button>
|
||||
</div>
|
||||
|
||||
<div class="splitter"></div>
|
||||
|
||||
<div> <!-- needed to stop the select from messing up -->
|
||||
<select id="opt-messages-filter">
|
||||
<option value="">No filter </option>
|
||||
<option value="user">Filter messages by user </option>
|
||||
<option value="contents">Filter messages by contents </option>
|
||||
<option value="withimages">Only messages with images </option>
|
||||
<option value="withdownloads">Only messages with downloads </option>
|
||||
<option value="edited">Only edited messages </option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div id="opt-filter-list">
|
||||
<select id="opt-filter-user" data-filter-type="user">
|
||||
<option value="">Select user...</option>
|
||||
</select>
|
||||
<input id="opt-filter-contents" type="text" data-filter-type="contents" placeholder="Messages containing...">
|
||||
<input type="hidden" data-filter-type="withimages" value="1">
|
||||
<input type="hidden" data-filter-type="withdownloads" value="1">
|
||||
<input type="hidden" data-filter-type="edited" value="1">
|
||||
</div>
|
||||
|
||||
<div class="separator"></div>
|
||||
|
||||
<button id="btn-about">About</button>
|
||||
</div>
|
||||
|
||||
<div class="nav">
|
||||
<button id="nav-first" data-nav="first" class="icon">«</button>
|
||||
<button id="nav-prev" data-nav="prev" class="icon">‹</button>
|
||||
<button id="nav-pick" data-nav="pick">Page <span id="nav-page-current">1</span>/<span
|
||||
id="nav-page-total">?</span></button>
|
||||
<button id="nav-next" data-nav="next" class="icon">›</button>
|
||||
<button id="nav-last" data-nav="last" class="icon">»</button>
|
||||
|
||||
<div id="app">
|
||||
<div id="servers"></div>
|
||||
<div id="channels">
|
||||
<div class="loading"></div>
|
||||
</div>
|
||||
<div id="messages"></div>
|
||||
</div>
|
||||
|
||||
<div class="splitter"></div>
|
||||
|
||||
<div> <!-- needed to stop the select from messing up -->
|
||||
<select id="opt-messages-filter">
|
||||
<option value="">No filter </option>
|
||||
<option value="user">Filter messages by user </option>
|
||||
<option value="contents">Filter messages by contents </option>
|
||||
<option value="withimages">Only messages with images </option>
|
||||
<option value="withdownloads">Only messages with downloads </option>
|
||||
<option value="edited">Only edited messages </option>
|
||||
</select>
|
||||
|
||||
<div id="modal">
|
||||
<div id="overlay"></div>
|
||||
<div id="dialog"></div>
|
||||
</div>
|
||||
|
||||
<div id="opt-filter-list">
|
||||
<select id="opt-filter-user" data-filter-type="user">
|
||||
<option value="">Select user...</option>
|
||||
</select>
|
||||
<input id="opt-filter-contents" type="text" data-filter-type="contents" placeholder="Messages containing...">
|
||||
<input type="hidden" data-filter-type="withimages" value="1">
|
||||
<input type="hidden" data-filter-type="withdownloads" value="1">
|
||||
<input type="hidden" data-filter-type="edited" value="1">
|
||||
</div>
|
||||
|
||||
<div class="separator"></div>
|
||||
|
||||
<button id="btn-about">About</button>
|
||||
</div>
|
||||
|
||||
<div id="app">
|
||||
<div id="servers">
|
||||
</div>
|
||||
<div id="channels">
|
||||
<div class="loading"></div>
|
||||
</div>
|
||||
<div id="messages"></div>
|
||||
</div>
|
||||
|
||||
<div id="modal">
|
||||
<div id="overlay"></div>
|
||||
<div id="dialog"></div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -157,32 +157,32 @@ export default (function() {
|
||||
|
||||
// noinspection HtmlUnknownTarget
|
||||
templateAttachmentDownload = new template([
|
||||
"<a href='{url}' class='embed download'>Download {name}</a>"
|
||||
"<a href='{url}' class='embed download'>Download {name}</a>"
|
||||
].join(""));
|
||||
|
||||
// noinspection HtmlUnknownTarget
|
||||
templateEmbedImage = new template([
|
||||
"<a href='{url}' class='embed thumbnail loading'><img src='{src}' alt='' onload='window.DISCORD.handleImageLoad(this)' onerror='window.DISCORD.handleImageLoadError(this)'></a><br>"
|
||||
"<a href='{url}' class='embed thumbnail loading'><img src='{src}' alt='' onload='window.DISCORD.handleImageLoad(this)' onerror='window.DISCORD.handleImageLoadError(this)'></a><br>"
|
||||
].join(""));
|
||||
|
||||
// noinspection HtmlUnknownTarget
|
||||
templateEmbedImageWithSize = new template([
|
||||
"<a href='{url}' class='embed thumbnail loading'><img src='{src}' width='{width}' alt='' onload='window.DISCORD.handleImageLoad(this)' onerror='window.DISCORD.handleImageLoadError(this)'></a><br>"
|
||||
"<a href='{url}' class='embed thumbnail loading'><img src='{src}' width='{width}' alt='' onload='window.DISCORD.handleImageLoad(this)' onerror='window.DISCORD.handleImageLoadError(this)'></a><br>"
|
||||
].join(""));
|
||||
|
||||
// noinspection HtmlUnknownTarget
|
||||
templateEmbedRich = new template([
|
||||
"<div class='embed download'><a href='{url}' class='title'>{title}</a><p class='desc'>{description}</p></div>"
|
||||
"<div class='embed download'><a href='{url}' class='title'>{title}</a><p class='desc'>{description}</p></div>"
|
||||
].join(""));
|
||||
|
||||
// noinspection HtmlUnknownTarget
|
||||
templateEmbedRichNoDescription = new template([
|
||||
"<div class='embed download'><a href='{url}' class='title'>{title}</a></div>"
|
||||
"<div class='embed download'><a href='{url}' class='title'>{title}</a></div>"
|
||||
].join(""));
|
||||
|
||||
// noinspection HtmlUnknownTarget
|
||||
templateEmbedUrl = new template([
|
||||
"<a href='{url}' class='embed download'>{url}</a>"
|
||||
"<a href='{url}' class='embed download'>{url}</a>"
|
||||
].join(""));
|
||||
|
||||
templateEmbedUnsupported = new template([
|
||||
|
||||
@ -59,9 +59,9 @@ export default (function() {
|
||||
const linkGH = "https://github.com/chylex/Discord-History-Tracker";
|
||||
|
||||
showModal(560, `
|
||||
<p>Discord History Tracker is developed by <a href='https://chylex.com'>chylex</a> as an <a href='${linkGH}/blob/master/LICENSE.md'>open source</a> project.</p>
|
||||
<p>Please, report any issues and suggestions to the <a href='${linkGH}/issues'>tracker</a>. If you want to support the development, please spread the word and consider <a href='https://www.patreon.com/chylex'>becoming a patron</a> or <a href='https://ko-fi.com/chylex'>buying me a coffee</a>. Any support is appreciated!</p>
|
||||
<p><a href='${linkGH}/issues'>Issue Tracker</a> — <a href='${linkGH}'>GitHub Repository</a> — <a href='https://twitter.com/chylexmc'>Developer's Twitter</a></p>`);
|
||||
<p>Discord History Tracker is developed by <a href='https://chylex.com'>chylex</a> as an <a href='${linkGH}/blob/master/LICENSE.md'>open source</a> project.</p>
|
||||
<p>Please, report any issues and suggestions to the <a href='${linkGH}/issues'>tracker</a>. If you want to support the development, please spread the word and consider <a href='https://www.patreon.com/chylex'>becoming a patron</a> or <a href='https://ko-fi.com/chylex'>buying me a coffee</a>. Any support is appreciated!</p>
|
||||
<p><a href='${linkGH}/issues'>Issue Tracker</a> — <a href='${linkGH}'>GitHub Repository</a> — <a href='https://twitter.com/chylexmc'>Developer's Twitter</a></p>`);
|
||||
};
|
||||
|
||||
return {
|
||||
|
||||
@ -187,7 +187,7 @@ export default (function () {
|
||||
"nsfw": channels[key].nsfw || false,
|
||||
"icon": getServer(channels[key].server).type === "group"
|
||||
? `<!--<span>${channels[key].name.split(" ").map(word => word[0]).join("")}</span>-->` //Discord default naming without a icon
|
||||
: `<img src='${fileUrlProcessor("https://cdn.discordapp.com/avatars/" + getUserIDByName(channels[key].name) + "/" + getUserByName(channels[key].name).avatar)}'>`
|
||||
: `<img src='${fileUrlProcessor("https://cdn.discordapp.com/avatars/" + getUserIDByName(channels[key].name) + "/" + getUserByName(channels[key].name).avatar+".webp")}'>`
|
||||
})).sort((ac, bc) => {
|
||||
return channelOrder[ac.id] - channelOrder[bc.id];
|
||||
});
|
||||
|
||||
@ -6,7 +6,7 @@ export default class {
|
||||
constructor(contents) {
|
||||
this.contents = contents;
|
||||
};
|
||||
7
|
||||
|
||||
apply(obj, processor) {
|
||||
|
||||
//Keys to not escape
|
||||
@ -14,7 +14,7 @@ export default class {
|
||||
|
||||
return this.contents.replace(TEMPLATE_REGEX, (full, match) => {
|
||||
const value = match.split(".").reduce((o, property) => o[property], obj);
|
||||
|
||||
|
||||
if (processor) {
|
||||
const updated = processor(match, value);
|
||||
return typeof updated === "undefined" ? (allowHTMLKeys.has(match) ? value : dom.escapeHTML(value)) : updated;
|
||||
|
||||
@ -9,22 +9,22 @@
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
#channels>div.loading {
|
||||
#channels > div.loading {
|
||||
margin: 0 auto;
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
}
|
||||
|
||||
#channels>div.loading {
|
||||
#channels > div.loading {
|
||||
background-color: rgba(0, 0, 0, 0) !important;
|
||||
}
|
||||
|
||||
|
||||
#channels>div.channel.visible {
|
||||
#channels > div.channel.visible {
|
||||
display: flex !important;
|
||||
}
|
||||
|
||||
#channels>div.channel {
|
||||
#channels > div.channel {
|
||||
display: none !important;
|
||||
|
||||
cursor: pointer;
|
||||
@ -50,12 +50,12 @@
|
||||
padding: 8px 8px !important;
|
||||
}
|
||||
|
||||
#channels>div.channel:hover,
|
||||
#channels>div.channel.active {
|
||||
#channels > div.channel:hover,
|
||||
#channels > div.channel.active {
|
||||
background-color: rgba(78, 80, 88, 0.6);
|
||||
}
|
||||
|
||||
#channels>div.channel.active>.info>.name {
|
||||
#channels > div.channel.active > .info > .name {
|
||||
color: oklab(0.999994 0.0000455678 0.0000200868);
|
||||
}
|
||||
|
||||
@ -65,11 +65,11 @@
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.ServerChannel>.info {
|
||||
.ServerChannel > .info {
|
||||
padding: 0px !important;
|
||||
}
|
||||
|
||||
.UserChannel>.info {
|
||||
.UserChannel > .info {
|
||||
align-self: center;
|
||||
padding-left: 6px !important;
|
||||
align-items: center;
|
||||
@ -78,13 +78,13 @@
|
||||
}
|
||||
|
||||
|
||||
[server-type="group"]>.info {
|
||||
[server-type="group"] > .info {
|
||||
padding: 6px;
|
||||
|
||||
width: 172px !important;
|
||||
}
|
||||
|
||||
.UserChannel>.info>.name {
|
||||
.UserChannel > .info > .name {
|
||||
min-height: 18px;
|
||||
}
|
||||
|
||||
@ -115,17 +115,17 @@
|
||||
}
|
||||
|
||||
|
||||
#channels>div:hover,
|
||||
#channels>div.active {
|
||||
#channels > div:hover,
|
||||
#channels > div.active {
|
||||
background-color: #404249
|
||||
}
|
||||
|
||||
#channels>div>.avatar {
|
||||
#channels > div > .avatar {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#channels>div>.avatar>* {
|
||||
#channels > div > .avatar > * {
|
||||
width: 30px;
|
||||
|
||||
min-width: 30px;
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
body {
|
||||
font-family: Whitney, "Helvetica Neue", Helvetica, Verdana, "Lucida Grande", sans-serif;
|
||||
line-height: 1;
|
||||
line-height: 1;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
gap: 8px;
|
||||
padding: 8px;
|
||||
background-color: #313338;
|
||||
border-bottom: 2px solid #27292D
|
||||
border-bottom: 2px solid #27292D;
|
||||
}
|
||||
|
||||
#menu .splitter {
|
||||
@ -56,27 +56,27 @@
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
#menu .nav>button {
|
||||
#menu .nav > button {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
#menu .nav>button.icon {
|
||||
#menu .nav > button.icon {
|
||||
font-family: Lucida Console, monospace;
|
||||
font-size: 17px;
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
||||
#menu .nav>button,
|
||||
#menu .nav>p {
|
||||
#menu .nav > button,
|
||||
#menu .nav > p {
|
||||
margin: 0 1px;
|
||||
}
|
||||
|
||||
#opt-filter-list>select,
|
||||
#opt-filter-list>input {
|
||||
#opt-filter-list > select,
|
||||
#opt-filter-list > input {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#opt-filter-list>.active {
|
||||
#opt-filter-list > .active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
||||
@ -4,14 +4,14 @@
|
||||
background-color: #36393e;
|
||||
}
|
||||
|
||||
#messages>div {
|
||||
#messages > div {
|
||||
padding: 0 4px 0 24px;
|
||||
|
||||
margin-bottom: 17px;
|
||||
}
|
||||
|
||||
|
||||
#messages>div:hover {
|
||||
#messages > div:hover {
|
||||
background-color: oklab(0.0846607 0.00000385568 0.00000169128 / 0.06);
|
||||
}
|
||||
|
||||
@ -30,7 +30,7 @@
|
||||
|
||||
|
||||
|
||||
#messages .avatar-wrapper>div {
|
||||
#messages .avatar-wrapper > div {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
|
||||
@ -15,6 +15,7 @@
|
||||
background-color: #313338;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.Server:hover {
|
||||
@ -44,6 +45,7 @@ svg.ServerImg {
|
||||
font-size: 1.5em;
|
||||
text-align: center;
|
||||
word-wrap: break-word;
|
||||
word-break: break-all;
|
||||
white-space: normal;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user