Functions
-
floatRandomBetween(min, max) ⇒
number -
Generate a random float number max and min.
floatRandomBetween(-10, 20); // 12.513 -
randomBetween(min, max) ⇒
number -
Generate a random integer number max and min.
randomBetween(-10, 20); // 12 -
lerp(x, y, amount) ⇒
number -
Linearly interpolate between two values by a unit interval
lerp(100, 200, .5); // 150 -
clampfunction(min, max, value) ⇒
number -
Clamps a value between an upper and lower bound.
clamp(0, 1, 2); // 1 -
shuffleArray(array, [modifyOriginal]) ⇒
array Shuffle an array.
- fireCustomEvent(name, data, [bubbles], [cancelable])
-
Fire a custom event.
fireCustomEvent(name, data); -
getElementPosition(element, [toWorld]) ⇒
Object -
Get the position of the element relative to document or optionally to the nearest offset parent.
getElementPosition(element); // returns something like { top: 100, left: 500 } -
isChildOf(element, parentElement, [toWorld]) ⇒
Boolean -
Determines 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); - getSiblings(e) ⇒
-
Get siblings from element
getSiblings(e); - getAncestors(e, [toBody], [ancestors])
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.
-
getSelectorForElement(el) ⇒
String Returns the CSS selector for a provided element
- fixWidows()
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
-
serializeArray(form) ⇒
Array Returns the form data as an array of name/value pairs.
-
asyncImageLoadfunction(props) ⇒
Promise -
Asynchronous image loader. Returns a promise for an image allowing it to be used directly via
.then()or as a part of an async workload viaawait.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 }) { -
floatRandomBetween(min, max) ⇒
number -
Generate a random float number max and min.
floatRandomBetween(-10, 20); // 12.513 -
randomBetween(min, max) ⇒
number -
Generate a random integer number max and min.
randomBetween(-10, 20); // 12 -
lerp(x, y, amount) ⇒
number -
Linearly interpolate between two values by a unit interval
lerp(100, 200, .5); // 150 -
clampfunction(min, max, value) ⇒
number -
Clamps a value between an upper and lower bound.
clamp(0, 1, 2); // 1 -
shuffleArray(array, [modifyOriginal]) ⇒
array Shuffle an array.
- fireCustomEvent(name, data, [bubbles], [cancelable])
-
Fire a custom event.
fireCustomEvent(name, data); -
getElementPosition(element, [toWorld]) ⇒
Object -
Get the position of the element relative to document or optionally to the nearest offset parent.
getElementPosition(element); // returns something like { top: 100, left: 500 } -
isChildOf(element, parentElement, [toWorld]) ⇒
Boolean -
Determines 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); - getSiblings(e) ⇒
-
Get siblings from element
getSiblings(e); - getAncestors(e, [toBody], [ancestors])
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.
-
getSelectorForElement(el) ⇒
String Returns the CSS selector for a provided element
- fixWidows()
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
-
serializeArray(form) ⇒
Array Returns the form data as an array of name/value pairs.
-
asyncImageLoadfunction(props) ⇒
Promise -
Asynchronous image loader. Returns a promise for an image allowing it to be used directly via
.then()or as a part of an async workload viaawait.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 }) {
floatRandomBetween(min, max) ⇒ number
Generate 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. |
| max | number |
Maximum value. |
randomBetween(min, max) ⇒ number
Generate 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. |
| max | number |
Maximum value. |
lerp(x, y, amount) ⇒ number
Linearly 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 |
| y | number |
The upper value |
| amount | 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. |
clampfunction(min, max, value) ⇒ number
Clamps 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 |
| max | number |
The upper bound |
| value | number |
The value to clamp. |
shuffleArray(array, [modifyOriginal]) ⇒ array
Shuffle an array.
Kind: global function
Returns: array -
Shuffled array.
| Param | Type | Description |
|---|---|---|
| array | Array |
Arrray to be shuffled. |
| [modifyOriginal] | Boolean |
A boolean indicating whether the original array should be modified or whether a copy should be created. (default True) |
fireCustomEvent(name, data, [bubbles], [cancelable])
Fire a custom event.
fireCustomEvent(name, data);
Kind: global function
| Param | Type | Description |
|---|---|---|
| name | string |
Name of the event. |
| data | object |
Object to be passed to the event. |
| [bubbles] | Boolean |
Indicates whether the event bubbles (default True) |
| [cancelable] | Boolean |
Indicates whether the event is cancellable default True) |
getElementPosition(element, [toWorld]) ⇒ Object
Get 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. |
| [toWorld] | Boolean |
indicates whether the calculation of the element offset should be to the page or to the offset parent. (default True) |
isChildOf(element, parentElement, [toWorld]) ⇒ Boolean
Determines 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 |
| parentElement | DomNode |
The parent element to test against |
| [toWorld] | Boolean |
Whether to test this up the DOM hierarchy |
getSiblings(e) ⇒
Get siblings from element
getSiblings(e);
Kind: global function
Returns:
Returns a list with the element's siblings.
| Param | Type | Description |
|---|---|---|
| e | DOMElement |
Element |
getAncestors(e, [toBody], [ancestors])
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 |
| [toBody] | boolean |
whether to only test to the body (default True) |
| [ancestors] | array |
the list of already existing elements to pass. This is nromally only used internally |
getSelectorForElement(el) ⇒ String
Returns 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 |
fixWidows()
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
serializeArray(form) ⇒ Array
Returns the form data as an array of name/value pairs.
Kind: global function
Returns: Array -
Serialized data
| Param | Type | Description |
|---|---|---|
| form | DOMElement |
The DOM node |
asyncImageLoadfunction(props) ⇒ Promise
Asynchronous 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
}) {
Kind: global function
Returns: Promise -
A promise
| Param | Type | Description |
|---|---|---|
| props | Object |
Image properties |
| props.src | String |
The image SRC |
floatRandomBetween(min, max) ⇒ number
Generate 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. |
| max | number |
Maximum value. |
randomBetween(min, max) ⇒ number
Generate 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. |
| max | number |
Maximum value. |
lerp(x, y, amount) ⇒ number
Linearly 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 |
| y | number |
The upper value |
| amount | 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. |
clampfunction(min, max, value) ⇒ number
Clamps 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 |
| max | number |
The upper bound |
| value | number |
The value to clamp. |
shuffleArray(array, [modifyOriginal]) ⇒ array
Shuffle an array.
Kind: global function
Returns: array -
Shuffled array.
| Param | Type | Description |
|---|---|---|
| array | Array |
Arrray to be shuffled. |
| [modifyOriginal] | Boolean |
A boolean indicating whether the original array should be modified or whether a copy should be created. (default True) |
fireCustomEvent(name, data, [bubbles], [cancelable])
Fire a custom event.
fireCustomEvent(name, data);
Kind: global function
| Param | Type | Description |
|---|---|---|
| name | string |
Name of the event. |
| data | object |
Object to be passed to the event. |
| [bubbles] | Boolean |
Indicates whether the event bubbles (default True) |
| [cancelable] | Boolean |
Indicates whether the event is cancellable default True) |
getElementPosition(element, [toWorld]) ⇒ Object
Get 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. |
| [toWorld] | Boolean |
indicates whether the calculation of the element offset should be to the page or to the offset parent. (default True) |
isChildOf(element, parentElement, [toWorld]) ⇒ Boolean
Determines 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 |
| parentElement | DomNode |
The parent element to test against |
| [toWorld] | Boolean |
Whether to test this up the DOM hierarchy |
getSiblings(e) ⇒
Get siblings from element
getSiblings(e);
Kind: global function
Returns:
Returns a list with the element's siblings.
| Param | Type | Description |
|---|---|---|
| e | DOMElement |
Element |
getAncestors(e, [toBody], [ancestors])
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 |
| [toBody] | boolean |
whether to only test to the body (default True) |
| [ancestors] | array |
the list of already existing elements to pass. This is nromally only used internally |
getSelectorForElement(el) ⇒ String
Returns 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 |
fixWidows()
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
serializeArray(form) ⇒ Array
Returns the form data as an array of name/value pairs.
Kind: global function
Returns: Array -
Serialized data
| Param | Type | Description |
|---|---|---|
| form | DOMElement |
The DOM node |
asyncImageLoadfunction(props) ⇒ Promise
Asynchronous 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
}) {
Kind: global function
Returns: Promise -
A promise
| Param | Type | Description |
|---|---|---|
| props | Object |
Image properties |
| props.src | String |
The image SRC |