mirror of
https://github.com/chylex/Discord-History-Tracker.git
synced 2025-04-19 13:15:44 +02:00
Compare commits
1 Commits
41cb25f15d
...
868ba38bd3
| Author | SHA1 | Date | |
|---|---|---|---|
|
868ba38bd3 |
@ -1,91 +1,96 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<meta name="referrer" content="no-referrer">
|
|
||||||
|
|
||||||
<title>Discord Offline History</title>
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="referrer" content="no-referrer">
|
||||||
|
|
||||||
<link rel="icon" href="favicon.ico">
|
<title>Discord Offline History</title>
|
||||||
|
|
||||||
<link rel="stylesheet" href="styles/main.css">
|
<link rel="icon" href="favicon.ico">
|
||||||
<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">
|
<link rel="stylesheet" href="styles/main.css">
|
||||||
const query = new URLSearchParams(location.search);
|
<link rel="stylesheet" href="styles/menu.css">
|
||||||
window.DHT_SERVER_TOKEN = query.get("token");
|
<link rel="stylesheet" href="styles/channels.css">
|
||||||
window.DHT_SERVER_SESSION = query.get("session");
|
<link rel="stylesheet" href="styles/servers.css">
|
||||||
</script>
|
<link rel="stylesheet" href="styles/messages.css">
|
||||||
<script type="module" src="scripts/bootstrap.mjs"></script>
|
<link rel="stylesheet" href="styles/modal.css">
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div id="menu">
|
|
||||||
<button id="btn-settings">Settings</button>
|
|
||||||
|
|
||||||
<div class="splitter"></div>
|
<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>
|
||||||
|
|
||||||
<div> <!-- needed to stop the select from messing up -->
|
<body>
|
||||||
<select id="opt-messages-per-page">
|
<div id="menu">
|
||||||
<option value="50">50 messages per page </option>
|
<button id="btn-settings">Settings</button>
|
||||||
<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">
|
<div class="splitter"></div>
|
||||||
<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-per-page">
|
||||||
<div> <!-- needed to stop the select from messing up -->
|
<option value="50">50 messages per page </option>
|
||||||
<select id="opt-messages-filter">
|
<option value="100">100 messages per page </option>
|
||||||
<option value="">No filter </option>
|
<option value="250">250 messages per page </option>
|
||||||
<option value="user">Filter messages by user </option>
|
<option value="500">500 messages per page </option>
|
||||||
<option value="contents">Filter messages by contents </option>
|
<option value="1000">1000 messages per page </option>
|
||||||
<option value="withimages">Only messages with images </option>
|
<option value="0">All messages </option>
|
||||||
<option value="withdownloads">Only messages with downloads </option>
|
</select>
|
||||||
<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>
|
||||||
|
|
||||||
<div id="app">
|
<div class="nav">
|
||||||
<div id="servers"></div>
|
<button id="nav-first" data-nav="first" class="icon">«</button>
|
||||||
<div id="channels">
|
<button id="nav-prev" data-nav="prev" class="icon">‹</button>
|
||||||
<div class="loading"></div>
|
<button id="nav-pick" data-nav="pick">Page <span id="nav-page-current">1</span>/<span
|
||||||
</div>
|
id="nav-page-total">?</span></button>
|
||||||
<div id="messages"></div>
|
<button id="nav-next" data-nav="next" class="icon">›</button>
|
||||||
|
<button id="nav-last" data-nav="last" class="icon">»</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="modal">
|
<div class="splitter"></div>
|
||||||
<div id="overlay"></div>
|
|
||||||
<div id="dialog"></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>
|
||||||
</body>
|
|
||||||
|
<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>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
@ -157,32 +157,32 @@ export default (function() {
|
|||||||
|
|
||||||
// noinspection HtmlUnknownTarget
|
// noinspection HtmlUnknownTarget
|
||||||
templateAttachmentDownload = new template([
|
templateAttachmentDownload = new template([
|
||||||
"<a href='{url}' class='embed download'>Download {name}</a>"
|
"<a href='{url}' class='embed download'>Download {name}</a>"
|
||||||
].join(""));
|
].join(""));
|
||||||
|
|
||||||
// noinspection HtmlUnknownTarget
|
// noinspection HtmlUnknownTarget
|
||||||
templateEmbedImage = new template([
|
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(""));
|
].join(""));
|
||||||
|
|
||||||
// noinspection HtmlUnknownTarget
|
// noinspection HtmlUnknownTarget
|
||||||
templateEmbedImageWithSize = new template([
|
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(""));
|
].join(""));
|
||||||
|
|
||||||
// noinspection HtmlUnknownTarget
|
// noinspection HtmlUnknownTarget
|
||||||
templateEmbedRich = new template([
|
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(""));
|
].join(""));
|
||||||
|
|
||||||
// noinspection HtmlUnknownTarget
|
// noinspection HtmlUnknownTarget
|
||||||
templateEmbedRichNoDescription = new template([
|
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(""));
|
].join(""));
|
||||||
|
|
||||||
// noinspection HtmlUnknownTarget
|
// noinspection HtmlUnknownTarget
|
||||||
templateEmbedUrl = new template([
|
templateEmbedUrl = new template([
|
||||||
"<a href='{url}' class='embed download'>{url}</a>"
|
"<a href='{url}' class='embed download'>{url}</a>"
|
||||||
].join(""));
|
].join(""));
|
||||||
|
|
||||||
templateEmbedUnsupported = new template([
|
templateEmbedUnsupported = new template([
|
||||||
|
|||||||
@ -59,9 +59,9 @@ export default (function() {
|
|||||||
const linkGH = "https://github.com/chylex/Discord-History-Tracker";
|
const linkGH = "https://github.com/chylex/Discord-History-Tracker";
|
||||||
|
|
||||||
showModal(560, `
|
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>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>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><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 {
|
return {
|
||||||
|
|||||||
@ -187,7 +187,7 @@ export default (function () {
|
|||||||
"nsfw": channels[key].nsfw || false,
|
"nsfw": channels[key].nsfw || false,
|
||||||
"icon": getServer(channels[key].server).type === "group"
|
"icon": getServer(channels[key].server).type === "group"
|
||||||
? `<!--<span>${channels[key].name.split(" ").map(word => word[0]).join("")}</span>-->` //Discord default naming without a icon
|
? `<!--<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+".webp")}'>`
|
: `<img src='${fileUrlProcessor("https://cdn.discordapp.com/avatars/" + getUserIDByName(channels[key].name) + "/" + getUserByName(channels[key].name).avatar)}'>`
|
||||||
})).sort((ac, bc) => {
|
})).sort((ac, bc) => {
|
||||||
return channelOrder[ac.id] - channelOrder[bc.id];
|
return channelOrder[ac.id] - channelOrder[bc.id];
|
||||||
});
|
});
|
||||||
|
|||||||
@ -6,7 +6,7 @@ export default class {
|
|||||||
constructor(contents) {
|
constructor(contents) {
|
||||||
this.contents = contents;
|
this.contents = contents;
|
||||||
};
|
};
|
||||||
|
7
|
||||||
apply(obj, processor) {
|
apply(obj, processor) {
|
||||||
|
|
||||||
//Keys to not escape
|
//Keys to not escape
|
||||||
|
|||||||
@ -9,22 +9,22 @@
|
|||||||
padding: 2px;
|
padding: 2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#channels > div.loading {
|
#channels>div.loading {
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
width: 150px;
|
width: 150px;
|
||||||
height: 150px;
|
height: 150px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#channels > div.loading {
|
#channels>div.loading {
|
||||||
background-color: rgba(0, 0, 0, 0) !important;
|
background-color: rgba(0, 0, 0, 0) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
#channels > div.channel.visible {
|
#channels>div.channel.visible {
|
||||||
display: flex !important;
|
display: flex !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
#channels > div.channel {
|
#channels>div.channel {
|
||||||
display: none !important;
|
display: none !important;
|
||||||
|
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
@ -50,12 +50,12 @@
|
|||||||
padding: 8px 8px !important;
|
padding: 8px 8px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
#channels > div.channel:hover,
|
#channels>div.channel:hover,
|
||||||
#channels > div.channel.active {
|
#channels>div.channel.active {
|
||||||
background-color: rgba(78, 80, 88, 0.6);
|
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);
|
color: oklab(0.999994 0.0000455678 0.0000200868);
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -65,11 +65,11 @@
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ServerChannel > .info {
|
.ServerChannel>.info {
|
||||||
padding: 0px !important;
|
padding: 0px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.UserChannel > .info {
|
.UserChannel>.info {
|
||||||
align-self: center;
|
align-self: center;
|
||||||
padding-left: 6px !important;
|
padding-left: 6px !important;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@ -78,13 +78,13 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
[server-type="group"] > .info {
|
[server-type="group"]>.info {
|
||||||
padding: 6px;
|
padding: 6px;
|
||||||
|
|
||||||
width: 172px !important;
|
width: 172px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.UserChannel > .info > .name {
|
.UserChannel>.info>.name {
|
||||||
min-height: 18px;
|
min-height: 18px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -115,17 +115,17 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
#channels > div:hover,
|
#channels>div:hover,
|
||||||
#channels > div.active {
|
#channels>div.active {
|
||||||
background-color: #404249
|
background-color: #404249
|
||||||
}
|
}
|
||||||
|
|
||||||
#channels > div > .avatar {
|
#channels>div>.avatar {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
#channels > div > .avatar > * {
|
#channels>div>.avatar>* {
|
||||||
width: 30px;
|
width: 30px;
|
||||||
|
|
||||||
min-width: 30px;
|
min-width: 30px;
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
body {
|
body {
|
||||||
font-family: Whitney, "Helvetica Neue", Helvetica, Verdana, "Lucida Grande", sans-serif;
|
font-family: Whitney, "Helvetica Neue", Helvetica, Verdana, "Lucida Grande", sans-serif;
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
|||||||
@ -5,7 +5,7 @@
|
|||||||
gap: 8px;
|
gap: 8px;
|
||||||
padding: 8px;
|
padding: 8px;
|
||||||
background-color: #313338;
|
background-color: #313338;
|
||||||
border-bottom: 2px solid #27292D;
|
border-bottom: 2px solid #27292D
|
||||||
}
|
}
|
||||||
|
|
||||||
#menu .splitter {
|
#menu .splitter {
|
||||||
@ -56,27 +56,27 @@
|
|||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
}
|
}
|
||||||
|
|
||||||
#menu .nav > button {
|
#menu .nav>button {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#menu .nav > button.icon {
|
#menu .nav>button.icon {
|
||||||
font-family: Lucida Console, monospace;
|
font-family: Lucida Console, monospace;
|
||||||
font-size: 17px;
|
font-size: 17px;
|
||||||
padding: 0 8px;
|
padding: 0 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#menu .nav > button,
|
#menu .nav>button,
|
||||||
#menu .nav > p {
|
#menu .nav>p {
|
||||||
margin: 0 1px;
|
margin: 0 1px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#opt-filter-list > select,
|
#opt-filter-list>select,
|
||||||
#opt-filter-list > input {
|
#opt-filter-list>input {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
#opt-filter-list > .active {
|
#opt-filter-list>.active {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -4,14 +4,14 @@
|
|||||||
background-color: #36393e;
|
background-color: #36393e;
|
||||||
}
|
}
|
||||||
|
|
||||||
#messages > div {
|
#messages>div {
|
||||||
padding: 0 4px 0 24px;
|
padding: 0 4px 0 24px;
|
||||||
|
|
||||||
margin-bottom: 17px;
|
margin-bottom: 17px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
#messages > div:hover {
|
#messages>div:hover {
|
||||||
background-color: oklab(0.0846607 0.00000385568 0.00000169128 / 0.06);
|
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;
|
flex: 1 1 auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -15,7 +15,6 @@
|
|||||||
background-color: #313338;
|
background-color: #313338;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
overflow: hidden;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.Server:hover {
|
.Server:hover {
|
||||||
@ -45,7 +44,6 @@ svg.ServerImg {
|
|||||||
font-size: 1.5em;
|
font-size: 1.5em;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
word-wrap: break-word;
|
word-wrap: break-word;
|
||||||
word-break: break-all;
|
|
||||||
white-space: normal;
|
white-space: normal;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user