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

```js
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

```js
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

```js
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

```sh
npm build utils-build
```

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

```sh
npm build utils-min-build
```

Or build both at the same time

```sh
npm build utils-build-all
```

## Develop

Install the core npm modules

```sh
npm install
```

Run watch

```sh
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

```sh
npx vitest
```

Currently covered:

- FormatBytes
- MathHelpers

TODO:

- JavaScriptHelpers
- StringHelpers
- UniqIdGenerators
- UrlParser