JavaScript.utils/ReadMe.md

JavaScript Utils

Collection of Javascript functions. This will build into a single js file that was formaly known as "edit.js" (edit.jq.js).

List of modules

In alphabetical order

ActionBox.mjs

floating fixed window overlay over page.

This is a class that needs to be called as

let ab = new ActionBox(new HtmlElementCreator(), new l10nTranslation(translationHashKeyValue));

ActionIndicatorOverlayBox.mjs

dimmer background calls and spinner for running indicator

DateTimeHelpers.mjs

Date/Time support functions

DomHelpers.mjs

Various support calls like load an element with throwing error or element exists check

FormatBytes.mjs

Format bytes as human readable

HtmlElementCreator.mjs

Create HTML elements as an Object tree and convert to HTML string

This is an object

let hec = new HtmlElementCreator();

[!notice] It is recommended to build all HTML in the backend or in templates

HtmlHelpers.mjs

Build HTML option entries or escape/unescape HTML

JavaScriptHelpers.mjs

JavaScript support like errorCatch calls, various object key lookup, checks and copy, function exections from name

l10nTranslation.mjs

Simpl translation via object key lookup

This class named "l10nTranslation" must be called with an Object that has a list of key values

var i18n = {
    "Original": "Translated"
};

LoginLogout.mjs

Function to call the logout action for the CoreLibs LoginAcl class

LoginNavMenu.mjs

Functions to build logout and navigation menu based on the CoreLibs LoginAcl and EditBase classes

MathHelpers.mjs

Various math support functions like rounding with precision or decimal to hex convert

ResizingAndMove.mjs

Calls like getting window size, scroll offset, center an element or scroll to a position

StringHelpers.mjs

Various string format calls, also convert line break to HTML "<br>"

UniqIdGenerators.mjs

Simple random id generate methods

UrlParser.mjs

Parse URL for looking up entries in the paramegter list

Build

Build with the following commands, the output will be stored in "build/js/output/utils.js" and "build/js/output/utils.min.js"

For full not minified version

npm build utils-build

For minified build (but keeps the function names as is)

npm build utils-min-build

Or build both at the same time

npm build utils-build-all

Develop

Install the core npm modules

npm install

Run watch

npm run utils-develop

Test

A simple test script is located in "build/test.html"

General function tests

vitest is used for all usage tests

npx vitest

Currently covered:

• FormatBytes
• MathHelpers

TODO:

• JavaScriptHelpers
• StringHelpers
• UniqIdGenerators
• UrlParser