Add experimental viewer feature to embed archives

References #20

https://github.com/chylex/Discord-History-Tracker/issues/20#issuecomment-528690867
This commit is contained in:
chylex 2019-09-06 05:27:55 +02:00
parent 6d4edcc17e
commit 4c9539d98a
5 changed files with 111 additions and 35 deletions

View File

@ -9,6 +9,7 @@ _enableImagePreviews
enableFormatting
_enableFormatting
DHT_LOADED
DHT_EMBEDDED
meta
data
users

View File

@ -15,9 +15,9 @@
<body>
<div id="menu">
<input id="uploaded-file" type="file" style="display:none">
<button id="btn-upload-file">Load File</button>
<button id="btn-upload-file" class="hide-embedded">Load File</button>
<div class="splitter"></div>
<div class="splitter hide-embedded"></div>
<button id="btn-settings">Settings</button>

58
src/renderer/scr.embed.js Normal file
View File

@ -0,0 +1,58 @@
var EMBED = (function(){
var enabled = false;
var html;
var generated;
var downloadTextFile = function(fileName, fileContents){
var blob = new Blob([fileContents], { "type": "octet/stream" });
if ("msSaveBlob" in window.navigator){
return window.navigator.msSaveBlob(blob, fileName);
}
var url = window.URL.createObjectURL(blob);
var ele = DOM.createElement("a", document.body);
ele.href = url;
ele.download = fileName;
ele.style.display = "none";
ele.click();
document.body.removeChild(ele);
window.URL.revokeObjectURL(url);
};
var utoa = function(str){
return window.btoa(unescape(encodeURIComponent(str)));
};
var atou = function(str){
return decodeURIComponent(escape(window.atob(str)));
};
return {
setup: function(){
enabled = true;
html = "<!DOCTYPE html>\n" + document.documentElement.outerHTML;
DOM.id("btn-upload-file").insertAdjacentHTML("afterend", `<button id="btn-embed-file" disabled>Embed File</button>`);
DOM.id("btn-embed-file").addEventListener("click", () => downloadTextFile("embed.html", generated));
},
onFileRead: function(json){
if (!enabled){
return;
}
DOM.id("btn-embed-file").disabled = false;
generated = html.replace("</title>", `</title>\n<script type="text/javascript">window.DHT_EMBEDDED = "${utoa(json)}";<\/script>`).replace(`<${document.body.tagName.toLowerCase()}>`, `<body class="embedded">`);
},
getEmbeddedJSON: function(){
var embed = window.DHT_EMBEDDED;
return embed ? atou(embed) : null;
}
};
})();

View File

@ -1,40 +1,13 @@
document.addEventListener("DOMContentLoaded", () => {
var embedded = EMBED.getEmbeddedJSON();
if (location.search === "?embed" && !embedded){
EMBED.setup();
}
DISCORD.setup();
GUI.setup();
GUI.onFileUploaded(files => {
if (files.length === 1){
var file = files[0];
var reader = new FileReader();
reader.onload = function(){
var obj;
try{
obj = JSON.parse(reader.result);
}catch(e){
console.error(e);
alert("Could not parse '"+file.name+"', see console for details.");
return;
}
if (SAVEFILE.isValid(obj)){
STATE.uploadFile(new SAVEFILE(obj));
}
else{
alert("File '"+file.name+"' has an invalid format.");
}
};
reader.readAsText(file, "UTF-8");
}
else{
alert("Please, select only one file.");
}
return true;
});
GUI.onOptionMessagesPerPageChanged(() => {
STATE.setMessagesPerPage(GUI.getOptionMessagesPerPage());
});
@ -62,4 +35,44 @@ document.addEventListener("DOMContentLoaded", () => {
GUI.updateMessageList(messages);
GUI.scrollMessagesToTop();
});
var loadJSON = function(json, errParse, errInvalid){
var obj;
try{
obj = JSON.parse(json);
EMBED.onFileRead(json);
}catch(e){
console.error(e);
alert(errParse);
return;
}
if (SAVEFILE.isValid(obj)){
STATE.uploadFile(new SAVEFILE(obj));
}
else{
alert(errInvalid);
}
};
if (embedded){
loadJSON(embedded, "Could not parse embedded file, see console for details.", "Embedded file has an invalid format.");
}
else{
GUI.onFileUploaded(files => {
if (files.length === 1){
var file = files[0];
var reader = new FileReader();
reader.onload = () => loadJSON(reader.result, "Could not parse '"+file.name+"', see console for details.", "File '"+file.name+"' has an invalid format.");
reader.readAsText(file, "UTF-8");
}
else{
alert("Please, select only one file.");
}
return true;
});
}
});

View File

@ -6,6 +6,10 @@ body {
overflow: hidden;
}
body.embedded .hide-embedded {
display: none;
}
#menu {
width: 100%;
height: 48px;