DSMsaveload/content_scripts/saveload.js
2022-12-30 13:32:28 -05:00

96 lines
3.7 KiB
JavaScript

(function () {
if (window.hasRun) {
return;
}
window.hasRun = true;
setTimeout(checkIfReady, 200);
function checkIfReady() {
console.log("DSMsaveload trying to attach to desmos...");
if (document.getElementById("dcg-header-container").querySelector(".align-right-container")) {
console.log("DSMsaveload attached!");
return makeButtonContainers();
}
setTimeout(checkIfReady, 200);
}
const expressionImport = document.createElement("div");
expressionImport.id = "IMPORTEXPRESSION";
expressionImport.style.display = "none";
document.body.appendChild(expressionImport);
function download(filename, textInput) {
var element = document.createElement('a');
element.setAttribute('href', 'data:text/plain;charset=utf-8, ' + encodeURIComponent(textInput));
element.setAttribute('download', filename);
document.body.appendChild(element);
element.click();
}
function makeButtonContainers() {
const buttonContainer = document.createElement("span");
buttonContainer.style = "display: inline-block; position: relative; font-size: 90%;";
const saveButton = document.createElement("div");
saveButton.classList.add("dcg-btn-primary");
saveButton.style = "line-height: 34px; display: inline-block;";
saveButton.textContent = "Save JSON";
saveButton.addEventListener("click", () => { saveExpr(); });
const loadContainer = document.createElement("div");
loadContainer.classList.add("dcg-btn-primary");
loadContainer.style = "lineHeight: 34px; postion: relative; display: inline-block; margin-left: 3px;";
const loadButtonLabel = document.createElement("label");
loadButtonLabel.for = "loadJSON";
loadButtonLabel.textContent = "Load JSON";
const loadButton = document.createElement("input");
loadButton.type = "file";
loadButton.style = "opacity: 0.0; position: absolute; top:0; left: 0; bottom: 0; right:0; width: 100%; height:100%; ";
loadButton.id = "loadJSON";
loadButton.accept = ".json";
loadButton.onchange = () => {
const selectedFile = loadButton.files[0];
new Response(selectedFile).json().then(json => {
console.log(json);
loadExpr(json);
}, err => {
alert("Invalid JSON file");
});
};
loadContainer.appendChild(loadButtonLabel);
loadContainer.appendChild(loadButton);
const buttonContainer2 = document.createElement("span");
buttonContainer2.style = "display: inline-block; position: relative; font-size: 90%;";
const loadURLButton = document.createElement("div");
buttonContainer.appendChild(saveButton);
buttonContainer2.appendChild(loadContainer);
buttonContainer.appendChild(buttonContainer2);
document.getElementById("dcg-header-container").querySelector(".align-right-container").appendChild(buttonContainer);
}
// creates a script in the document to interact with the page variables.
// the IMPORTEXPRESSION div is used as an interface to carry the data from this script to the injected script
function loadExpr(json) {
const expressions = JSON.stringify(json);
var scriptTag = document.createElement('script');
scriptTag.src = browser.runtime.getURL('inject_scripts/load.js');
scriptTag.onload = function () { this.parentNode.removeChild(this); };
document.getElementById("IMPORTEXPRESSION").textContent = expressions;
document.body.append(scriptTag);
}
function saveExpr() {
const expressions = window.wrappedJSObject.Calc.getExpressions();
const graphTitle = document.querySelector(".align-left-container").querySelector(".dcg-variable-title").textContent + ".json";
const expressionsString = JSON.stringify(expressions);
download(graphTitle, expressionsString);
}
})();