Skip to content

Commit

Permalink
readme uses mjs.
Browse files Browse the repository at this point in the history
  • Loading branch information
bengarrett committed Apr 9, 2024
1 parent 75b9988 commit 72aab2c
Show file tree
Hide file tree
Showing 13 changed files with 184 additions and 161 deletions.
122 changes: 122 additions & 0 deletions assets/js/helper.mjs
Original file line number Diff line number Diff line change
@@ -0,0 +1,122 @@
// helper.mjs

/**
* Copies the text content of an HTML element to the clipboard.
* @async
* @function clipText
* @param {string} [id=""] - The ID of the HTML element to copy the text from.
* @throws {Error} Throws an error if the specified element is missing.
* @returns {Promise<void>} A Promise that resolves when the text has been copied to the clipboard.
*/
export async function clipText(id = ``) {
const element = document.getElementById(id);
if (element === null) {
throw Error(`select text element "${id}" is missing`);
}
element.focus(); // select the element to avoid NotAllowedError: Clipboard write is not allowed in this context
await navigator.clipboard.writeText(`${element.textContent}`).then(
function () {
console.log(
`Copied ${humanFilesize(element.textContent.length)} to the clipboard`
);
const button = document.getElementById(`copyReadme`),
oneSecond = 1000;
if (button === null) return;
const save = button.textContent;
button.textContent = `✓ Copied`;
window.setTimeout(() => {
button.textContent = `${save}`;
}, oneSecond);
},
function (err) {
console.error(`could not save any text to the clipboard: ${err}`);
}
);
}

/**
* Retrieves an element from the DOM using its ID.
*
* @param {string} elementId - The ID of the element to retrieve.
* @returns {HTMLElement} - The retrieved element.
* @throws {Error} - If the element is not found in the DOM.
*/
export function getElmById(elementId) {
const element = document.getElementById(elementId);
if (element == null) {
throw new Error(`The ${elementId} element is null.`);
}
return element;
}

/**
* Converts a file size in bytes to a human-readable format.
*
* @param {number} size - The file size in bytes.
* @returns {string} A human-readable string representation of the file size.
*/
export function humanFilesize(size = 0) {
const three = 3,
round = 100,
kB = 1000,
MB = Math.pow(kB, 2),
GB = Math.pow(kB, three);
if (size > GB)
return `${(Math.round((size * round) / GB) / round).toFixed(2)} GB`;
if (size > MB)
return `${(Math.round((size * round) / MB) / round).toFixed(1)} MB`;
if (size > kB)
return `${(Math.round((size * round) / kB) / round).toFixed()} kB`;
return `${Math.round(size).toFixed()} bytes`;
}

/**
* Checks if a given year is valid, i.e. between 1980 and the current year.
* @param {number} year - The year to be validated.
* @returns {boolean} - Returns true if the year is valid, false otherwise.
*/
export function validYear(year) {
if (`${year}` == "") {
return true;
}
const epochYear = 1980;
const currentYear = new Date().getFullYear();
if (year < epochYear || year > currentYear) {
return false;
}
return true;
}

/**
* Checks if a given month is valid.
* @param {number} month - The month to be validated.
* @returns {boolean} - Returns true if the month is valid, false otherwise.
*/
export function validMonth(month) {
if (`${month}` == "") {
return true;
}
const jan = 1,
dec = 12;
if (month < jan || month > dec) {
return false;
}
return true;
}

/**
* Checks if a given day is valid.
* @param {number} day - The day to be checked.
* @returns {boolean} - Returns true if the day is valid, false otherwise.
*/
export function validDay(day) {
if (`${day}` == "") {
return true;
}
const first = 1,
last = 31;
if (day < first || day > last) {
return false;
}
return true;
}
84 changes: 15 additions & 69 deletions assets/js/readme.js
Original file line number Diff line number Diff line change
@@ -1,75 +1,19 @@
/**
* Immediately invoked function expression that sets up the functionality for the readme text page.
* @function
*/
// readme.js

import { clipText, getElmById } from "./helper.mjs";

(() => {
"use strict";
const hide = `d-none`;
const preLatin1 = document.getElementById("readmeLatin1");
const pre437 = document.getElementById("readmeCP437");
const copyBtn = document.getElementById(`copyReadme`);
const openSans = document.getElementById(`openSansFont`);
const topaz = document.getElementById(`topazFont`);
const vga = document.getElementById(`vgaFont`);
const blackBG = ["reader-invert", "border", "border-black", "rounded-1"];

/**
* Converts a file size in bytes to a human-readable format.
*
* @param {number} size - The file size in bytes.
* @returns {string} A human-readable string representation of the file size.
*/
function humanFilesize(size = 0) {
const three = 3,
round = 100,
kB = 1000,
MB = Math.pow(kB, 2),
GB = Math.pow(kB, three);
if (size > GB)
return `${(Math.round((size * round) / GB) / round).toFixed(2)} GB`;
if (size > MB)
return `${(Math.round((size * round) / MB) / round).toFixed(1)} MB`;
if (size > kB)
return `${(Math.round((size * round) / kB) / round).toFixed()} kB`;
return `${Math.round(size).toFixed()} bytes`;
}

/**
* Copies the text content of an HTML element to the clipboard.
* @async
* @function clipText
* @param {string} [id=""] - The ID of the HTML element to copy the text from.
* @throws {Error} Throws an error if the specified element is missing.
* @returns {Promise<void>} A Promise that resolves when the text has been copied to the clipboard.
*/
async function clipText(id = ``) {
const element = document.getElementById(id);
if (element === null) throw Error(`select text element "${id}" is missing`);
element.focus(); // select the element to avoid NotAllowedError: Clipboard write is not allowed in this context
await navigator.clipboard.writeText(`${element.textContent}`).then(
function () {
console.log(
`Copied ${humanFilesize(element.textContent.length)} to the clipboard`
);
const button = document.getElementById(`copyReadme`),
oneSecond = 1000;
if (button === null) return;
const save = button.textContent;
button.textContent = `✓ Copied`;
window.setTimeout(() => {
button.textContent = `${save}`;
}, oneSecond);
},
function (err) {
console.error(`could not save any text to the clipboard: ${err}`);
}
);
}
const preLatin1 = getElmById("readmeLatin1"),
pre437 = getElmById("readmeCP437");

/**
* Event listener for the Open Sans font radio button.
* @function
*/
const openSans = document.getElementById(`openSansFont`);
if (openSans !== null) {
openSans.addEventListener("click", () => {
preLatin1.classList.remove(hide, "font-amiga", ...blackBG);
Expand All @@ -82,6 +26,7 @@
* Event listener for the Topaz font radio button.
* @function
*/
const topaz = document.getElementById(`topazFont`);
if (topaz !== null) {
topaz.addEventListener("click", () => {
preLatin1.classList.remove(hide, "font-opensans");
Expand All @@ -94,21 +39,22 @@
* Event listener for the VGA font radio button.
* @function
*/
const vga = document.getElementById(`vgaFont`);
if (vga !== null) {
vga.addEventListener("click", () => {
preLatin1.classList.add(hide);
pre437.classList.remove(hide);
});
}

if (typeof navigator.clipboard === `undefined`) copyBtn.classList.add(hide);
/**
* Event listener for the copy button.
* @function
*/ else
copyBtn.addEventListener(`click`, () => {
const copier = getElmById(`copyReadme`);
if (typeof navigator.clipboard === `undefined`) {
copier.classList.add(hide);
} else {
copier.addEventListener(`click`, () => {
if (topaz !== null && topaz.checked) clipText(`readmeLatin1`);
else if (vga !== null && vga.checked) clipText(`readmeCP437`);
else clipText(`readmeCP437`);
});
}
})();
2 changes: 1 addition & 1 deletion assets/js/uploader-advanced.mjs
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { validYear, validMonth, validDay } from "./uploader.mjs";
import { validYear, validMonth, validDay } from "./helper.mjs";

export default advancedUploader;

Expand Down
2 changes: 1 addition & 1 deletion assets/js/uploader-image.mjs
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { validYear, validMonth } from "./uploader.mjs";
import { validYear, validMonth } from "./helper.mjs";
export default imageSubmit;

const imgFile = document.getElementById("imageFile");
Expand Down
2 changes: 1 addition & 1 deletion assets/js/uploader-intro.mjs
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { validYear, validMonth } from "./uploader.mjs";
import { validYear, validMonth } from "./helper.mjs";
export default introSubmit;

const introFrm = document.getElementById("introUploader");
Expand Down
2 changes: 1 addition & 1 deletion assets/js/uploader-magazine.mjs
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { validYear, validMonth, validDay } from "./uploader.mjs";
import { validYear, validMonth, validDay } from "./helper.mjs";
export default magazineSubmit;
// Elements for the magazine uploader
const magFile = document.getElementById("magFile");
Expand Down
7 changes: 4 additions & 3 deletions assets/js/uploader-text.mjs
Original file line number Diff line number Diff line change
@@ -1,14 +1,15 @@
// uploader-text.mjs
import { getElmById, validYear, validMonth } from "./uploader.mjs";
export default textSubmit;

import { getElmById, validYear, validMonth } from "./helper.mjs";
export default textUploader;

/**
* Submits the text form when the specified element is clicked.
* @param {string} elementId - The ID of the element that triggers the form submission.
* @param {string} formId - The ID of the form to be submitted.
* @throws {Error} If the specified element or form is null.
*/
export function textSubmit(elementId, formId) {
export function textUploader(elementId, formId) {
const element = document.getElementById(elementId);
if (element == null) {
throw new Error(`The ${elementId} element is null.`);
Expand Down
14 changes: 5 additions & 9 deletions assets/js/uploader.js
Original file line number Diff line number Diff line change
@@ -1,16 +1,12 @@
/**
* This module handles the uploader functionality for the website.
* It contains functions to validate client input and show/hide modals.
* @module uploader
* @requires bootstrap
*/
// uploader.js

import { advancedUploader } from "./uploader-advanced.mjs";
import { imageSubmit } from "./uploader-image.mjs";
import { introSubmit } from "./uploader-intro.mjs";
import { keyboardShortcuts } from "./uploader-keyboard.mjs";
import { magazineSubmit } from "./uploader-magazine.mjs";
import { textSubmit } from "./uploader-text.mjs";
import { pagination } from "./uploader.mjs";
import { keyboardShortcuts } from "./uploader-keyboard.mjs";
import { textUploader } from "./uploader-text.mjs";

(() => {
"use strict";
Expand All @@ -20,5 +16,5 @@ import { keyboardShortcuts } from "./uploader-keyboard.mjs";
imageSubmit(`imageSubmit`);
introSubmit(`introSubmit`);
magazineSubmit(`magSubmit`);
textSubmit(`textSubmit`, `textUploader`);
textUploader(`textSubmit`, `textUploader`);
})();
68 changes: 2 additions & 66 deletions assets/js/uploader.mjs
Original file line number Diff line number Diff line change
@@ -1,19 +1,6 @@
export default getElmById;
// uploader.mjs

/**
* Retrieves an element from the DOM using its ID.
*
* @param {string} elementId - The ID of the element to retrieve.
* @returns {HTMLElement} - The retrieved element.
* @throws {Error} - If the element is not found in the DOM.
*/
export function getElmById(elementId) {
const element = document.getElementById(elementId);
if (element == null) {
throw new Error(`The ${elementId} element is null.`);
}
return element;
}
import { getElmById } from "./helper.mjs";

/**
* Retrieves a modal object by its element ID.
Expand Down Expand Up @@ -86,54 +73,3 @@ export function pagination(elementId) {
pageRangeLabel.textContent = "Jump to page " + pageRange.value;
});
}

/**
* Checks if a given year is valid, i.e. between 1980 and the current year.
* @param {number} year - The year to be validated.
* @returns {boolean} - Returns true if the year is valid, false otherwise.
*/
export function validYear(year) {
if (`${year}` == "") {
return true;
}
const epochYear = 1980;
const currentYear = new Date().getFullYear();
if (year < epochYear || year > currentYear) {
return false;
}
return true;
}

/**
* Checks if a given month is valid.
* @param {number} month - The month to be validated.
* @returns {boolean} - Returns true if the month is valid, false otherwise.
*/
export function validMonth(month) {
if (`${month}` == "") {
return true;
}
const jan = 1,
dec = 12;
if (month < jan || month > dec) {
return false;
}
return true;
}

/**
* Checks if a given day is valid.
* @param {number} day - The day to be checked.
* @returns {boolean} - Returns true if the day is valid, false otherwise.
*/
export function validDay(day) {
if (`${day}` == "") {
return true;
}
const first = 1,
last = 31;
if (day < first || day > last) {
return false;
}
return true;
}
Loading

0 comments on commit 72aab2c

Please sign in to comment.