StaticCanvas ESM Utilities

Collection of utilities for the StaticCanvas project.

🪛 Quick Start

git clone https://github.com/staticcanvas/esmutils.git
cd esmutils
# copy scripts you need to your project
# see the docs for more info on which dependencies you need

// --------------------------IMPORTS--------------------------
import { logd, logc } from 'esmutils/gen/logcad.mjs';
import { lsm } from 'esmutils/utils/lsm.mjs';
import { elapsedtime } from 'esmutils/gen/elapsedtime.mjs';
import { dtoc } from 'esmutils/utils/dtoc.mjs';
import { littleMouse } from 'esmutils/breadcrums/littlemouse.mjs';
import { jsonManager } from 'esmutils/gen/json_manager.mjs';
import { rougeExtrasInjector } from 'esmutils/gen/rougeExtrasInjector.mjs';
import { fetchGitHubWorkflowStatus } from 'esmutils/gen/fetchGitHubWorkflowStatus.mjs';
import { createToc, createTocScrollEvent } from 'esmutils/utils/dtoc.mjs';
import { fetchGitLabPipelineStatus } from 'esmutils/gen/fetchGitLabPipelineStatus.mjs'

Functions and Classes

Generics

🔷 Elapsed Time

elapsedtime(start, end)

Returns the elapsed time between two dates, in seconds, minutes, hours, days, weeks, months, years.

Example:

import { elapsedtime } from 'esmutils/generics/elapsedtime.mjs';

const start = new Date();
const end = new Date();
const time = elapsedTime(start, end);
console.log(time);

---

🔷 Breadcrumbs

littleMouse(activeSelector, breadcrumbsSelector)

Generates and renders breadcrumb navigation based on the current URL path.

🔺 Dependancies

• LocalStorageManager lib/generics/lsm.mjs
• logcad lib/generics/logcad.mjs

Example:

import { littleMouse } from 'esmutils/breadcrums/littlemouse.mjs';

littleMouse('.main .nav', '.main .breadcrumbs');

---

Table of Contents utilities

🔷 dtoc

dtoc(headings, contentSelector, tocSelector)

Creates a dynamic table of contents for a given html element.

🔺 Dependancies

• LocalStorageManager lib/gen/lsm.mjs
• logcad lib/generics/logcad.mjs

Example:

import { dtoc } from 'esmutils/utilities/dtoc.mjs';

dtoc(['h1', 'h2', 'h3'], '.main .content', '.main .toc');

---

🔷 createTocScrollEvent

createTocScrollEvent(headings, contentSelector, tocSelector)

Creates a scroll event listener for the table of contents.

Properties:

• headings: An array of heading tags to search for.
• contentSelector: The selector for the content element.
• tocSelector: The selector for the table of contents element.

🔺 Dependancies

• LocalStorageManager lib/generics/lsm.mjs
• logcad lib/generics/logcad.mjs
• isElementInViewport lib/utilities/dtoc.mjs

Example:

import { createTocScrollEvent } from 'esmutils/utilities/dtoc.mjs';

createTocScrollEvent(['h1', 'h2', 'h3'], '.main .content', '.main .toc');

---

🔷 isElementInViewport

isElementInViewport({element})

Checks if an element is in the viewport.

Example:

import { isElementInViewport } from 'esmutils/generics/isElementInViewport.mjs';

const element = document.querySelector('.main .content');
const isInViewport = isElementInViewport(element);
console.log(isInViewport);

---

JSON

🔷 jsonManager

jsonman{options}

Manages json strings, including reading, writing, updating, deleting, and searching.

Methods:

new jsonman({ key: "value" }); // Create a new jsonman instance
jsonman.get("key"); // Get the value at the specified property path
jsonman.remove("key"); // Remove the value at the specified property path
jsonman.update("key", "new value"); // Update the value at the specified property path
jsonman.delete("key"); // Delete the value at the specified property path
jsonman.debug = true; // Enable debug mode
jsonman.parse('{"key": "value"}'); // Parse a json string
jsonman.stringify(); // Return the json object as a string

Example:

import { jsonManager } from 'esmutils/generics/jsonman.mjs';

const json = jsonManager.read('test.json');
json.find('name', 'John');
json.update('name', 'John');
json.write('test.json');
json.delete('name');
json.search('name', 'John');

Local Storage

🔷 localStorageManager

localStorageManager{options}

Manages local storage, including reading, writing, updating, deleting, and searching.

Methods:

new lsm({ key: "value" }); // Create a new localStorageManager instance
lsm.get("key"); // Get the value at the specified property path
lsm.remove("key"); // Remove the value at the specified property path
lsm.update("key", "new value"); // Update the value at the specified property path
lsm.delete("key"); // Delete the value at the specified property path
lsm.debug = true; // Enable debug mode
lsm.parse('{"key": "value"}'); // Parse a json string
lsm.stringify(); // Return the json object as a string

Example:

import { localStorageManager as lsm } from 'esmutils/generics/lsm.mjs';

const localStorage = localStorageManager.read('test');
console.log(localStorage);

---

Logging

🔷 Logc

Logs console messages with css styles.

logc([{object}])

Properties:

• [].text: The text to be logged.
• [].c: The color of the text. Default is black.
• [].bg: The background color of the text. Default is white.
• [].b: Whether the text should be bold. Default is false.
• [].u: Whether the text should be underlined. Default is false.
• [].i: Whether the text should be italic. Default is false.
• [].d: Whether the text should be dimmed. Default is false.
• [].border: The border style of the text. Default is none.

Example:

import { logc } from 'esmutils/generics/logcad.mjs';

logc({ text: 'Hello, world!', c: 'red', bg: 'white', b: true, u: true, i: true, d: true, border: '1px solid black' });

Logd

Logs debug messages with css styles.

logd(name, action, message, args, trace=false)

Properties:

• name: The name of the debug message.
• action: The action of the debug message.
• message: The message of the debug message.
• args: The arguments of the debug message.
• trace: Whether to log the trace of the function call. Default is false.

Example:

import { logd } from 'esmutils/generics/logcad.mjs';

logd({name: 'logd'}, 'logd', 'logging debug message', {arg1: 'value1', arg2: 'value2'}, true);

Custom Object Map

CustomObjectMap (WIP)

Creates a map of objects with dot notation access.

Example:

import { CustomObjectMap as coms } from 'esmutils/generics/~wip/custom_object_map.mjs';

const map = new coms();
map.set('test', 'test');
console.log(map.get('test'));

TODO

• Add tests
• Encapsulate all classes and functions into a singular module with multiple exports using, so dev can import { * } from './esmutils.mjs';
  • rollup
  • jest
  • eslint
  • babel

License: MIT 2023 © Static Canvas