1.0.2-2 • Published 4 years ago
@knownout/utils v1.0.2-2
knownOut's utils
Assembly of useful stuff containing various functions to simplify web applications creation
Constants
| Constant | Methods | Description |
|---|---|---|
| _.Time | second, minute, hour, day, week, month, year | Time constants in milliseconds |
| _.formatters | codeString, displayString | List of fuctions for formatString method |
// String format examle
_.formatString("sample-string", _.formatters.displayString); // Sample string
_.formatString("Sample string", _.formatters.codeString); // sample-stringMethods
| Method | Description |
|---|---|
_.$ (selector: string | HTMLElement, from?: HTMLElement | null, count?: number): HTMLElementNext | HTMLElementNext[] | Get one or more elements from DOM tree as HTMLElementNext or convert HTMLElement to HTMLNextElement |
_.create (tag: string | HTMLElement, attributes?: object, parent?: HTMLElement): HTMLElementNext | Creates an HTMLElementNext with provided tagName and attributes and append it to parent HTMLElement if provided or converts HTMLElement to HTMLElementNext (html and text in attributes list are abbreviations for innerHTML and innerText, to avoid this use "!" before attribute name: "!text", "!html") |
_.fetch (url: string, method: string, body?: any, cacheKey?: string, expires?: number): Promise | Asynchronously sends fetch request with specific params to given URL and then returns and cache result to the storage |
_.formatString (string: string, formatter: (str: string) => string): string | Format string with provided formatter function |
// Get all div.sample elements from DOM tree
let e = _.$("div.sample", null, -1);
e = _.$("div.sample", null, 10); // Get first 10 div.sample elements// Create HTMLElementNext with innerText
const ne = _.create("span.title", { text: "Hello world" });// Fetch data and cache it to the localStorage for one day
const toLS = await _.fetch("http://example.com/", "GET", null, "dataFromExample", _.Time.day);
// ... or to sessionStorage
const toSS = await _.fetch("http://example.com/", "GET", null, "dataFromExample");
// Cache from sessionStorage can be cleared by reloading with CTRL + F5HTMLElementNext
HTMLElementNext is a type for extended html elements. All HTMLElementNext-specific methods can be written in chain
| Method | Description |
|---|---|
attr (attributes: string | any, value?: string): any | Set or get provided attribute from the element (html and text in attributes list are abbreviations for innerHTML and innerText, to avoid this use “!” before attribute name: “!text”, “!html”) |
event (events: keyof HTMLElementEventMap | string | object, value?: Function): HTMLElementNext | Append event listener to the parent element |
find (selector: string, all?: true): any | Finds all elements by selector in the parent element DOM tree (querySelector shortcut) |
const e = _.$("div.sample").attr("text") // innerText of div.spample
.attr("!text"); // div.sample text attribute
e.event("click", function () {
console.log(this);
}); // Push this element to console on click
e.event({
click: () => console.log("Hello world"),
hover: function () { this.attr("hover", "true"); }
}); // Add multiple events