Update frontend.js
This commit is contained in:
parent
5a67b8097a
commit
c7aa9f17c9
1 changed files with 450 additions and 447 deletions
135
frontend.js
135
frontend.js
|
@ -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)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
Loading…
Reference in a new issue