Javascript helpers, perfect for non-jquery projects.
npm install wtc-utility-helpersnumberGenerate a random float number max and min.
floatRandomBetween(-10, 20); // 12.513
numberGenerate a random integer number max and min.
randomBetween(-10, 20); // 12
numberLinearly interpolate between two values by a unit interval
lerp(100, 200, .5); // 150
numberClamps a value between an upper and lower bound.
clamp(0, 1, 2); // 1
arrayShuffle an array.
Fire a custom event.
fireCustomEvent(name, data);
ObjectGet the position of the element relative to document or optionally to the nearest offset parent.
getElementPosition(element); // returns something like { top: 100, left: 500 }
BooleanDetermines whether the element is a child 0 ancestor of the other.
If the toWorld flag is true (default), this will test recursively
up the node hierarchy.
This method can be used to determine whether a node is detached
by something like:
attached = isChildOf(element, document.body);
Get siblings from element
getSiblings(e);
Retrieves all of the ancestors of an element, optionally to
the document body (true by default). The list that is
returned is the list of ancestors in order from the oldest
to youngest.
StringReturns the CSS selector for a provided element
Fix widows replaces the last space in a sentence with a non-breaking space
This function is a little dangerous at the moment so we should revisit it at some point in the future
ArrayReturns the form data as an array of name/value pairs.
PromiseAsynchronous image loader. Returns a promise for an image
allowing it to be used directly via .then() or as a part
of an async workload via await.
The then returns the provided image for use in the promise
fulfullment.
Usage:
try {
const img = asyncImageLoad({ src: '/assets/images/cool_image.png', alt: 'Cool Cats', crossOrigin: "anonymous" })
// do something cool with img
} catch(err) {
// Something happened and img didn't load
}
Without async/await:
const img = asyncImageLoad({ src: '/assets/images/cool_image.png', alt: 'Cool Cats', crossOrigin: "anonymous" }).then((img) => {
// do something cool with img
return img
}).catch((err) => {
// Something happened and img didn't load
}) {
numberGenerate a random float number max and min.
floatRandomBetween(-10, 20); // 12.513
numberGenerate a random integer number max and min.
randomBetween(-10, 20); // 12
numberLinearly interpolate between two values by a unit interval
lerp(100, 200, .5); // 150
numberClamps a value between an upper and lower bound.
clamp(0, 1, 2); // 1
arrayShuffle an array.
Fire a custom event.
fireCustomEvent(name, data);
ObjectGet the position of the element relative to document or optionally to the nearest offset parent.
getElementPosition(element); // returns something like { top: 100, left: 500 }
BooleanDetermines whether the element is a child 0 ancestor of the other.
If the toWorld flag is true (default), this will test recursively
up the node hierarchy.
This method can be used to determine whether a node is detached
by something like:
attached = isChildOf(element, document.body);
Get siblings from element
getSiblings(e);
Retrieves all of the ancestors of an element, optionally to
the document body (true by default). The list that is
returned is the list of ancestors in order from the oldest
to youngest.
StringReturns the CSS selector for a provided element
Fix widows replaces the last space in a sentence with a non-breaking space
This function is a little dangerous at the moment so we should revisit it at some point in the future
ArrayReturns the form data as an array of name/value pairs.
PromiseAsynchronous image loader. Returns a promise for an image
allowing it to be used directly via .then() or as a part
of an async workload via await.
The then returns the provided image for use in the promise
fulfullment.
Usage:
try {
const img = asyncImageLoad({ src: '/assets/images/cool_image.png', alt: 'Cool Cats', crossOrigin: "anonymous" })
// do something cool with img
} catch(err) {
// Something happened and img didn't load
}
Without async/await:
const img = asyncImageLoad({ src: '/assets/images/cool_image.png', alt: 'Cool Cats', crossOrigin: "anonymous" }).then((img) => {
// do something cool with img
return img
}).catch((err) => {
// Something happened and img didn't load
}) {
numberGenerate a random float number max and min.
floatRandomBetween(-10, 20); // 12.513
Kind: global function
Returns: number -
Random number.
| Param | Type | Description |
| --- | --- | --- |
| min | number |
Minimum value.
|number | Maximum value.
|numberGenerate a random integer number max and min.
randomBetween(-10, 20); // 12
Kind: global function
Returns: number -
Random number.
| Param | Type | Description |
| --- | --- | --- |
| min | number |
Minimum value.
|number | Maximum value.
|numberLinearly interpolate between two values by a unit interval
lerp(100, 200, .5); // 150
Kind: global function
Returns: number -
The interpolated value
| Param | Type | Description |
| --- | --- | --- |
| x | number |
The lower value
|number | The upper value
|number | the amount to interpolate. The expected value is a unit interval (a float between 0 and 1), but this will work with higher and lower values as well.
|numberClamps a value between an upper and lower bound.
clamp(0, 1, 2); // 1
Kind: global function
Returns: number -
A number in the range [min, max]
| Param | Type | Description |
| --- | --- | --- |
| min | number |
The lower bound
|number | The upper bound
|number | The value to clamp.
|arrayShuffle an array.
Kind: global function
Returns: array -
Shuffled array.
| Param | Type | Description |
| --- | --- | --- |
| array | Array |
Arrray to be shuffled.
|Boolean | A boolean indicating whether the original array should be modified or whether a copy should be created. (default True)
|Fire a custom event.
fireCustomEvent(name, data);
Kind: global function
| Param | Type | Description |
| --- | --- | --- |
| name | string |
Name of the event.
|object | Object to be passed to the event.
|Boolean | Indicates whether the event bubbles (default True)
|Boolean | Indicates whether the event is cancellable default True)
|ObjectGet the position of the element relative to document or optionally to the nearest offset parent.
getElementPosition(element); // returns something like { top: 100, left: 500 }
Kind: global function
Returns: Object -
the element coordinates.
| Param | Type | Description |
| --- | --- | --- |
| element | DOMNode |
Element.
|Boolean | indicates whether the calculation of the element offset should be to the page or to the offset parent. (default True)
|BooleanDetermines whether the element is a child 0 ancestor of the other.
If the toWorld flag is true (default), this will test recursively
up the node hierarchy.
This method can be used to determine whether a node is detached
by something like:
attached = isChildOf(element, document.body);
Kind: global function
Returns: Boolean -
true is the parentElement is parent (or ancestor) to Element
| Param | Type | Description |
| --- | --- | --- |
| element | DomNode |
The element to test with
|DomNode | The parent element to test against
|Boolean | Whether to test this up the DOM hierarchy
|Get siblings from element
getSiblings(e);
Kind: global function
Returns:
Returns a list with the element's siblings.
| Param | Type | Description |
| --- | --- | --- |
| e | DOMElement |
Element
|Retrieves all of the ancestors of an element, optionally to
the document body (true by default). The list that is
returned is the list of ancestors in order from the oldest
to youngest.
Kind: global function
| Param | Type | Description |
| --- | --- | --- |
| e | DOMElement |
The element to retrieve the ancestors for
|boolean | whether to only test to the body (default True)
|array | the list of already existing elements to pass. This is nromally only used internally
|StringReturns the CSS selector for a provided element
Kind: global function
Returns: String -
The CSS selector the describes exactly where to find the element
| Param | Type | Description |
| --- | --- | --- |
| el | DOMElement |
The DOM node to find a selector for
|Fix widows replaces the last space in a sentence with a non-breaking space
This function is a little dangerous at the moment so we should revisit it at some point in the future
ArrayReturns the form data as an array of name/value pairs.
Kind: global function
Returns: Array -
Serialized data
| Param | Type | Description |
| --- | --- | --- |
| form | DOMElement |
The