Update frontend.js

This commit is contained in:
Sam Sneed 2024-05-28 18:26:22 +00:00 committed by GitHub
parent 5a67b8097a
commit c7aa9f17c9
No known key found for this signature in database
GPG key ID: B5690EEEBB952194

View file

@ -1,16 +1,35 @@
class JSPlusPlus {
General = class {
//Eval alternative
//Example: exec("alert('Hello, world!')")
exec(jsCode) {
let js = jsCode.toString();
Function(js)()
}
require(jsURI) {
try {
let req = JSPlusPlus.Frontend.readInternetText(jsURI);
JSPlusPlus.General.exec(req);
} catch {
console.log(`Error! (Using Node.JS?)
If on NodeJS or equivalent try:
'let ${jsURI} = require("${jsURI}")'`)
}
}
}
Frontend = class {
// Created by Samuel Lord (NodeMixaholic/Sparksammy) // Created by Samuel Lord (NodeMixaholic/Sparksammy)
// Now Maintained by Maxwell (GOrwell1984) // Now Maintained by Maxwell (GOrwell1984)
// Licensed under Samuel Public License with <3 // Licensed under Samuel Public License with <3
// Functions for commonly used elements
// Get element by ID // Get element by ID
function getElementById(elementID) { getElementById(elementID) {
return document.getElementById(elementID) return document.getElementById(elementID)
} }
//Convert markdown to HTML and back //Convert markdown to HTML and back
function markdownToHTML(markdown) { markdownToHTML(markdown) {
// Replace headers (h1, h2, h3) with corresponding HTML tags // Replace headers (h1, h2, h3) with corresponding HTML tags
markdown = markdown.replace(/^# (.*$)/gim, '<h1>$1</h1>'); markdown = markdown.replace(/^# (.*$)/gim, '<h1>$1</h1>');
markdown = markdown.replace(/^## (.*$)/gim, '<h2>$1</h2>'); markdown = markdown.replace(/^## (.*$)/gim, '<h2>$1</h2>');
@ -48,7 +67,7 @@ function markdownToHTML(markdown) {
return markdown; return markdown;
} }
function htmlToMarkdown(html) { htmlToMarkdown(html) {
// Replace headers (h1, h2, h3) with corresponding Markdown tags // Replace headers (h1, h2, h3) with corresponding Markdown tags
html = html.replace(/<h1>(.*?)<\/h1>/gim, '# $1'); html = html.replace(/<h1>(.*?)<\/h1>/gim, '# $1');
html = html.replace(/<h2>(.*?)<\/h2>/gim, '## $1'); html = html.replace(/<h2>(.*?)<\/h2>/gim, '## $1');
@ -95,7 +114,7 @@ function htmlToMarkdown(html) {
} }
// Generalized element creation // Generalized element creation
function createElement(tagName, elementID, attributes = {}) { createElement(tagName, elementID, attributes = {}) {
const element = document.createElement(tagName); const element = document.createElement(tagName);
element.id = elementID; element.id = elementID;
for (const [name, value] of Object.entries(attributes)) { for (const [name, value] of Object.entries(attributes)) {
@ -105,17 +124,17 @@ function createElement(tagName, elementID, attributes = {}) {
return element; return element;
} }
function createDiv(elementID) { createDiv(elementID) {
createElement("div", elementID); createElement("div", elementID);
} }
function createParagraph(elementID, text) { createParagraph(elementID, text) {
let elem = createElement("p", elementID); let elem = createElement("p", elementID);
elem.innerText = `${text}` elem.innerText = `${text}`
return elem return elem
} }
function initHead(pageTitle = "") { initHead(pageTitle = "") {
// Create head element // Create head element
let head = document.createElement("head"); let head = document.createElement("head");
@ -145,7 +164,7 @@ function initHead(pageTitle = "") {
} }
function initBody(bodyID = "body") { initBody(bodyID = "body") {
// Create a new body element with the desired id // Create a new body element with the desired id
const newBody = document.createElement("body"); const newBody = document.createElement("body");
newBody.id = bodyID; newBody.id = bodyID;
@ -162,7 +181,7 @@ function initBody(bodyID = "body") {
} }
} }
function createButton(elementID, text, attributes = {}) { createButton(elementID, text, attributes = {}) {
let elem = createElement("button", elementID); let elem = createElement("button", elementID);
elem.innerText = `${text}` elem.innerText = `${text}`
for (const [name, value] of Object.entries(attributes)) { for (const [name, value] of Object.entries(attributes)) {
@ -172,7 +191,7 @@ function createButton(elementID, text, attributes = {}) {
} }
// Insert element with ID to element with ID // Insert element with ID to element with ID
function insertElementIntoId(elementIdOuter, elementIdSelf, tagName) { insertElementIntoId(elementIdOuter, elementIdSelf, tagName) {
const element = document.createElement(tagName); const element = document.createElement(tagName);
element.id = elementIdSelf; element.id = elementIdSelf;
for (const [name, value] of Object.entries(attributes)) { for (const [name, value] of Object.entries(attributes)) {
@ -183,28 +202,28 @@ function insertElementIntoId(elementIdOuter, elementIdSelf, tagName) {
} }
// Insert HTML to element with ID // Insert HTML to element with ID
function insertHTMLIntoId(elementIdOuter, html) { insertHTMLIntoId(elementIdOuter, html) {
getElementById(elementIdOuter).innerHTML = `${String(html)}`; getElementById(elementIdOuter).innerHTML = `${String(html)}`;
return element; return element;
} }
function changeAttributes(element, attributes = {}) { changeAttributes(element, attributes = {}) {
for (const [name, value] of Object.entries(attributes)) { for (const [name, value] of Object.entries(attributes)) {
element.setAttribute(name, value); element.setAttribute(name, value);
} }
} }
function createImage(elementID, src) { createImage(elementID, src) {
return createElement("img", elementID, { src: src }); return createElement("img", elementID, { src: src });
} }
// Get URL parameters // Get URL parameters
function getURLParameters() { getURLParameters() {
return new URLSearchParams(window.location.search); return new URLSearchParams(window.location.search);
} }
// Read file contents // Read file contents
function readFileContents(file) { readFileContents(file) {
file = file.toString(); file = file.toString();
const fileToRead = new File([""], file); const fileToRead = new File([""], file);
const reader = new FileReader(); const reader = new FileReader();
@ -216,7 +235,7 @@ function readFileContents(file) {
} }
// Read data file as data URL // Read data file as data URL
function readDataFile(file) { readDataFile(file) {
file = file.toString(); file = file.toString();
const fileToRead = new File([""], file); const fileToRead = new File([""], file);
const reader = new FileReader(); const reader = new FileReader();
@ -227,28 +246,28 @@ function readDataFile(file) {
}); });
} }
function writeToBody(html) { writeToBody(html) {
document.body.innerHTML += html.toString(); document.body.innerHTML += html.toString();
} }
function overwriteBody(html) { overwriteBody(html) {
document.body.innerHTML = html.toString(); document.body.innerHTML = html.toString();
} }
function randomPOS(elementID) { randomPOS(elementID) {
const top = Math.floor(Math.random() * 90); const top = Math.floor(Math.random() * 90);
const left = Math.floor(Math.random() * 90); const left = Math.floor(Math.random() * 90);
document.getElementById(elementID).style.top = `${top}%`; document.getElementById(elementID).style.top = `${top}%`;
document.getElementById(elementID).style.left = `${left}%`; document.getElementById(elementID).style.left = `${left}%`;
} }
function pos(elementID, x, y) { pos(elementID, x, y) {
document.getElementById(elementID).style.top = `${y}%`; document.getElementById(elementID).style.top = `${y}%`;
document.getElementById(elementID).style.left = `${x}%`; document.getElementById(elementID).style.left = `${x}%`;
} }
// Select a random value in an array (handles non-arrays) // Select a random value in an array (handles non-arrays)
function randomSelectArray(array) { randomSelectArray(array) {
if (Array.isArray(array)) { if (Array.isArray(array)) {
const randomIndex = Math.floor(Math.random() * array.length); const randomIndex = Math.floor(Math.random() * array.length);
return array[randomIndex]; return array[randomIndex];
@ -258,50 +277,50 @@ function randomSelectArray(array) {
} }
} }
function sleep(ms) { sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms)); return new Promise(resolve => setTimeout(resolve, ms));
} }
async function asyncSleep(ms) { async asyncSleep(ms) {
await new Promise(r => setTimeout(r, ms)); await new Promise(r => setTimeout(r, ms));
} }
// Check if a variable is a function // Check if a variable is a function
function isFunction(item) { isFunction(item) {
return typeof item === 'function'; return typeof item === 'function';
} }
function applyCSS(elementID, prop, value) { applyCSS(elementID, prop, value) {
document.getElementById(elementID).style[prop] = value; document.getElementById(elementID).style[prop] = value;
} }
function writeTimeAndDate(elementID, hourFormat) { writeTimeAndDate(elementID, hourFormat) {
const element = document.getElementById(elementID); const element = document.getElementById(elementID);
const date = new Date(); const date = new Date();
const locale = hourFormat === 24 ? "en-GB" : "en-US"; const locale = hourFormat === 24 ? "en-GB" : "en-US";
element.innerText = date.toLocaleString(locale); element.innerText = date.toLocaleString(locale);
} }
function writeText(elementID, str) { writeText(elementID, str) {
document.getElementById(elementID).innerText = String(str); document.getElementById(elementID).innerText = String(str);
} }
function writeHTML(elementID, str) { writeHTML(elementID, str) {
document.getElementById(elementID).innerHTML = String(str); document.getElementById(elementID).innerHTML = String(str);
} }
function clearPage() { clearPage() {
document.body.innerHTML = ""; document.body.innerHTML = "";
} }
function createList(listID, items) { createList(listID, items) {
const list = document.createElement("ul"); const list = document.createElement("ul");
list.id = listID; list.id = listID;
document.body.appendChild(list); document.body.appendChild(list);
items.forEach(item => (list.innerHTML += `<li>${item}</li>`)); items.forEach(item => (list.innerHTML += `<li>${item}</li>`));
} }
function addToList(listID, jsArray) { addToList(listID, jsArray) {
let listParent = document.getElementById(listID); let listParent = document.getElementById(listID);
jsArray.forEach(item => { jsArray.forEach(item => {
listParent.innerHTML += `<li>${item}</li>`; listParent.innerHTML += `<li>${item}</li>`;
@ -310,14 +329,14 @@ function addToList(listID, jsArray) {
// Gets the value of an attribute // Gets the value of an attribute
// Example: getAttribute(document.getElementById("link"), "href"); // Example: getAttribute(document.getElementById("link"), "href");
function getAttribute(element, attribute) { getAttribute(element, attribute) {
let result = element.getAttribute(attribute); let result = element.getAttribute(attribute);
return result; return result;
} }
// Show/Hide Elements // Show/Hide Elements
// Example: hideShow(element) // Example: hideShow(element)
function hideShow(element) { hideShow(element) {
if (element.style.display == 'none') { if (element.style.display == 'none') {
element.style.display = ''; element.style.display = '';
} else{ } else{
@ -326,7 +345,7 @@ function hideShow(element) {
} }
// Example: fadeOut(element, 1000) // Example: fadeOut(element, 1000)
function fadeOut(element, ms) { fadeOut(element, ms) {
let elem = getElementById(element); let elem = getElementById(element);
ms = parseInt(ms); ms = parseInt(ms);
for (i = 0; i < (ms + 1); i++) { for (i = 0; i < (ms + 1); i++) {
@ -336,7 +355,7 @@ function fadeOut(element, ms) {
} }
// Example: fadeIn(element, 1000); // Example: fadeIn(element, 1000);
function fadeIn(element, ms) { fadeIn(element, ms) {
elem = getElementById(element); elem = getElementById(element);
elem.style.opacity = 0; elem.style.opacity = 0;
ms = parseInt(ms); ms = parseInt(ms);
@ -346,7 +365,7 @@ function fadeIn(element, ms) {
} }
} }
function spin(elementID, duration) { spin(elementID, duration) {
const element = document.getElementById(elementID); const element = document.getElementById(elementID);
if (!element) { if (!element) {
console.error(`Element with ID '${elementID}' not found.`); console.error(`Element with ID '${elementID}' not found.`);
@ -371,18 +390,7 @@ function spin(elementID, duration) {
requestAnimationFrame(animate); requestAnimationFrame(animate);
} }
readInternetText(url) {
//Eval alternative
//Example: exec("alert('Hello, world!')")
function exec(jsCode) {
let js = jsCode.toString();
Function(js)()
}
function readInternetText(url) {
var request = new XMLHttpRequest(); // Create a new XMLHttpRequest object var request = new XMLHttpRequest(); // Create a new XMLHttpRequest object
request.open('GET', url, false); // Open the request with synchronous mode request.open('GET', url, false); // Open the request with synchronous mode
request.send(null); // Send the request with no additional data request.send(null); // Send the request with no additional data
@ -394,40 +402,33 @@ function readInternetText(url) {
} }
} }
function requir3(jsURL) {
let req = readInternetText(jsURL);
exec(req);
}
// Example: getFileSize(path/to/file) // Example: getFileSize(path/to/file)
function getFileSize(file) { getFileSize(file) {
file = file.toString(); file = file.toString();
file = new File([""], file); file = new File([""], file);
return file.getFileSize; return file.getFileSize;
} }
function lastModified(file) { lastModified(file) {
file = file.toString(); file = file.toString();
file = new File([""], file); file = new File([""], file);
return file.lastModified; return file.lastModified;
} }
// Example: playAudio("https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3", 0.4); // Example: playAudio("https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3", 0.4);
function playAudio(audio, speed) { playAudio(audio, speed) {
let ma = new Audio(audio); let ma = new Audio(audio);
ma.playbackRate = speed; ma.playbackRate = speed;
ma.play(); ma.play();
} }
// Example: redir(url); // Example: redir(url);
function redir(url) { redir(url) {
window.location.href = url.toString(); window.location.href = url.toString();
} }
// Function to import Google Fonts via name // to import Google Fonts via name
function importGoogleFont(fontName) { importGoogleFont(fontName) {
// Create a new link element // Create a new link element
const link = document.createElement('link'); const link = document.createElement('link');
@ -442,9 +443,11 @@ function importGoogleFont(fontName) {
} }
requir3("https://cdn.jsdelivr.net/npm/gun/gun.js") //Add Gun.JS support. initGun(relays = []) {
JSPlusPlus.General.require("https://cdn.jsdelivr.net/npm/gun/gun.js")
function initGun(relays = []) {
return Gun(relays) return Gun(relays)
} }
}
}