b.JS

About b.js

b.JS provides additional functions and prototypes for javascript To use b.JS in your project, just add the following script reference to your project:

<script src="https://mo-hi.github.io/basis/js/b.js"></script>

basis functions #

clsBasis functions #

clsDOM functions #

AutoFill | DownloadHTML | ExposeHTML | RemoveWithClass |

custom Elements #

SelectionPill |

basis functions

functions that enhance the functionality of javascript for easier development and are not directly related to the user experience.

typ ()

typ (variable) returns the type of a variable as a string. The following types are recognized: list, div, dict, str, int, float, bool, null, undefined and functions

typ(1) == "int"
typ(1.5) == "float"
typ("abc") == "str"
typ(true) == "bool"
typ([]) == "list"
typ({}) == "dict"
typ(null) == "null"
typ(undefined) == "undefined"
typ(function() {}) == "function"

wenn ()

wenn (condition, trueValue, falseValue) is a short hand notation / better readability for 'return condition ? trueValue : falseValue';

wenn(1 < a, "yes", "no") == "yes"
wenn(1 > a, "yes", "no") == "no"

assert ()

assert (condition, message) throws an error if the condition is false

assert(2 + 2 == 4, "should not throw")     // will do nothing
assert(2 + 2 == 5, "should throw")         // will write "should throw" to console log

allEqual ()

allEqual (...values) returns true if all values are equal

allEqual(1, 1, 1) == true
allEqual(1, 1, 2) == false
allEqual("a", "a", "a") == true
allEqual("a", "a", "b") == false

byVal ()

byVal (data) creates a hard copy of a variable (instead of just creating a reference in case of list and dictionaries). It is equivalent to structuredClone and mimics the 'byVal' operater in VBA, hence the name

let original = [1, 2, 3];
let copy = original;
let byValCopy = byVal(original);

original[0] = 99;
copy[1] = 88;
byValCopy[2] = 77;
original == [99, 88, 3];
copy == [99, 88, 3];
byValCopy == [1, 2, 77];

clsBasis

function that will in general directly affect the user experience.

download ()

download (fileContent, filename, mimeType = 'text/plain;charset=utf-8') triggers a download of a file with the specified content and filename. The mimeType can be specified, default is 'text/plain;charset=utf-8'.

clsBasis.download("Hello, World!", "hello.txt", "text/plain")

upload ()

upload (multiple=false, readAs = 'text') triggers a file upload dialog and returns a Promise of a listof dictionaries [{file, content}, {...}, .... ]. If multiple is true, multiple files can be selected.

let uploadFiles = await clsBasis.upload()
if (uploadFiles.length > 0) {
    let {file, content} = uploadFiles[0];
    console.log("Uploaded file:", file.name);
}

let uploadMultipleFiles = await clsBasis.upload(true)
if (uploadMultipleFiles.length > 0) {
    for (let i = 0; i < uploadMultipleFiles.length; i++) {
        let {file, content} = uploadMultipleFiles[i];
        console.log("Uploaded file:", file.name);
    }
}

debounce ()

debounce (func, delay) delays a function call.

function myFunctionToDemonstrateDebounce() { console.log("Hello after 2 seconds"); }
clsBasis.debounce(myFunctionToDemonstrateDebounce, 2000)()

formatBracketText ()

formatBracketText (text, options = {}) Formats text with proper bracket indentation.

let input = 'function example() { if (true) { console.log("Hello"); } else { console.log("Goodbye"); } }'
console.log(clsBasis.formatBracketText(input, { indentStr: "    ", newlineAfter: ["{", "}", ";"] }))

formatTagText ()

formatTagText (text, options = {}) Formats text with proper HTML tag indentation.

let input = '<div><p>Hello</p><p>World</p></div>'
console.log(clsBasis.formatTagText(input, { indentStr: "    " }))

popup (header, message) creates a pop-up window with a header and message. The pop-up can be closed by clicking the close button, clicking outside the pop-up, or pressing the Escape key.

clsBasis.popup("Hello World", "This is a popup message.")

clsDOM

functions that will in general directly affect the user experience. See clsDOM for more details

AutoFill ()

AutoFill (listOfDictionaries, elementId, config) Modifies your HTML page by filling in the values of the provided list of dictionaries.
1) Reads div(elementId).innerHTML as template
2) Clears div(elementId).innerHTML = ''
3) Fills everything in one pass by replacing {{key}} with the corresponding value from each dictionary
Options:
- append: boolean, if true, appends to existing content instead of clearing it first

clsDOM.AutoFill([{ text: "World" }, { text: "Universe" }, { text: "Everyone" }], "id-multiple-entries");

DownloadHTML ()

DownloadHTML (filename = 'document.html') Downloads the current HTML document as a file with the specified filename.

clsDOM.DownloadHTML("my-document.html");

ExposeHTML ()

ExposeHTML (config) Exposes the HTML of a given element (div, script) in a textarea, allowing for easy viewing of its content. The function takes a configuration object that specifies the div to expose, the div to append the textarea to, and various options for formatting and behavior.

clsDOM.ExposeHTML({
   divToExpose: document.getElementById(`id-1`)
   divToAppend: document.getElementById(`id-1-show`)
   outer: false
   pretty: true
   textAreaClassName: "code"
   lineNumbers: false
   synchWithTarget: true
   defineRows: true
});

RemoveWithClass ()

RemoveWithClass (className) Removes all elements from the DOM that have the specified class name.

clsDOM.RemoveWithClass("remove-me");

Custom Elements

custom HTML elements that can be used in your project.

SelectionPill ()

SelectionPill () creates a selection of options in the form of "pills" (buttons). The color of the selection-pill can be customized using CSS variables. You can also use your custom colors

<selection-pill 
        name="my-selection" 
        class-name="selection-pill mr-80"
        type="radio" 
        checked="Option 2" 
        options='["Option 1", "Option 2", "Option 3"]'
        on-change="const val = new FormData(this).get('my-selection');clsBasis.popup('Selection changed!', 'You selected ' + val);"
        in-style="--bg: var(--color-gray-50); --color: var(--color-gray-500);
        --active-bg: var(--color-cyan-100); --active-color: var(--color-cyan-800);"
></selection-pill>

<selection-pill 
        name="my-selection2" 
        class-name="selection-pill"
        type="checkbox" 
        options='["Option"]'
        in-style="--bg:var(--color-cyan-50);--color: var(--color-cyan-600); 
        --active-bg: var(--color-cyan-600); --active-color: white;"
    "
></selection-pill>