1
0
mirror of https://github.com/lus/pasty.git synced 2023-08-10 21:13:09 +03:00
pasty/web/assets/js/autoload.js
Lukas Schulte Pelkum 90f25ec220
Improve the web frontend (#9)
* Fix line flowing out of div

* Revert line highlighting

* Fix tab key behaviour

* Move links and version information to a footer

* Fix footer hiding last code line

* Calculate line number offset based on line overflow

* Refactor some code
2021-06-20 15:58:36 +02:00

113 lines
3.9 KiB
JavaScript

// Import the used modules
import * as api from "./api.js";
import * as buttons from "./buttons.js";
import * as spinner from "./spinner.js";
import * as notifications from "./notifications.js";
// Set up the buttons
buttons.setupButtons();
buttons.setupKeybinds();
// Define element handles
const versionElement = document.getElementById("version");
const lineNOsElement = document.getElementById("linenos");
const codeElement = document.getElementById("code");
const inputElement = document.getElementById("input");
// Load the API information
async function loadAPIInformation() {
const response = await api.getAPIInformation();
if (!response.ok) {
const data = await response.text();
notifications.error("Failed fetching the API information: <b>" + data + "</b>");
return;
}
const data = await response.json();
versionElement.innerText = data.version;
}
loadAPIInformation();
// Try to load a paste if one exists
export let PASTE_ID;
let CODE;
async function loadPaste() {
if (location.pathname !== "/") {
// Define the paste ID and language
const split = location.pathname.replace("/", "").split(".");
const pasteID = split[0];
const language = split[1];
// Retrieve the paste from the API and redirect the user to the main page if it could not be found
const response = await api.getPaste(pasteID);
if (!response.ok) {
location.replace(location.protocol + "//" + location.host);
return;
}
CODE = (await response.json()).content;
// Adjust the button states
document.getElementById("btn_save").setAttribute("disabled", true);
document.getElementById("btn_delete").removeAttribute("disabled");
document.getElementById("btn_copy").removeAttribute("disabled");
// Set the paste content to the DOM
codeElement.innerHTML = language
? hljs.highlight(language, CODE).value
: hljs.highlightAuto(CODE).value;
// Display the line numbers
renderLineNumbers();
window.addEventListener("resize", renderLineNumbers);
// Set the PASTE_ID variable
PASTE_ID = pasteID;
} else {
inputElement.classList.remove("hidden");
inputElement.focus();
window.addEventListener("keydown", function (event) {
if (event.keyCode != 9) return;
event.preventDefault();
insertTextAtCursor(inputElement, " ");
});
}
}
spinner.surround(loadPaste);
function renderLineNumbers() {
lineNOsElement.innerHTML = CODE.split(/\n/).map((line, index) => {
let lineWidth = getTextWidth(line, "16px Source Code Pro");
let linesSpace = Math.ceil(lineWidth / codeElement.offsetWidth);
let result = `<span>${index+1}</span>`;
if (linesSpace > 1) {
result += "<span></span>".repeat(linesSpace - 1);
}
return result;
}).join("");
}
// 1:1 skid from https://stackoverflow.com/questions/7404366/how-do-i-insert-some-text-where-the-cursor-is
function insertTextAtCursor(element, text) {
let value = element.value, endIndex, range, doc = element.ownerDocument;
if (typeof element.selectionStart == "number"
&& typeof element.selectionEnd == "number") {
endIndex = element.selectionEnd;
element.value = value.slice(0, endIndex) + text + value.slice(endIndex);
element.selectionStart = element.selectionEnd = endIndex + text.length;
} else if (doc.selection != "undefined" && doc.selection.createRange) {
element.focus();
range = doc.selection.createRange();
range.collapse(false);
range.text = text;
range.select();
}
}
// Also a kind of skid
function getTextWidth(text, font) {
let canvas = getTextWidth.canvas || (getTextWidth.canvas = document.createElement("canvas"));
let context = canvas.getContext("2d");
context.font = font;
return context.measureText(text).width;
}