Misc tools & helpers
Methods
# static $(id, parentNode) → {HTMLElement}
Returns a DOM node from a simple and basic id selector. Just work with ids because everything useful should be uniquely identified to get things simpler.
Parameters:
Name | Type | Description |
---|---|---|
id |
string
|
id of the target node |
parentNode |
HTMLElement
|
Root node to start lookup from |
The element found
# static CSSGradient(hexColor, angle, lum) → {string}
Generate a CSS gradient (for backgrounds)
Parameters:
Name | Type | Description |
---|---|---|
hexColor |
string
|
Color in hexa RGB: #00aaee |
angle |
number
|
Gradient orientation in degrees (0-360) |
lum |
number
|
luminance adjustment, from -1 to 1 |
- The CSS gradient
string
Example
kiss.tools.CSSGradient("#6699cc", 90, -0.5) // returns "linear-gradient(90deg, #6699cc 0%, #334d66 100%)"
# static adjustColor(hex, lum) → {string}
Adjust the luminance of an RGB color and output a new RGB
Parameters:
Name | Type | Description |
---|---|---|
hex |
string
|
Color in hexa RGB: #00aaee |
lum |
number
|
luminance adjustment, from -1 to 1 |
- The output color in hexa RGB
string
Example
kiss.tools.adjustColor("#69c", 0) // returns "#6699cc"
kiss.tools.adjustColor("6699CC", 0.2) // "#7ab8f5" - 20% lighter
kiss.tools.adjustColor("69C", -0.5) // "#334d66" - 50% darker
kiss.tools.adjustColor("000", 1) // "#000000" - true black cannot be made lighter
# static animateElement(id, animation, delay) → {number}
Animate an element with a sequence of animations
Parameters:
Name | Type | Description |
---|---|---|
id |
string
|
The id of the element to animate |
animation |
string
|
The animation name to apply (check Component available animations) |
delay |
number
|
The delay between each animation, in milliseconds |
The interval id
number
# static benchmark(numberOfFields, fieldTypeopt, targetDomElementIdopt) → {integer}
Benchmark the creation of Fields
Parameters:
Name | Type | Attributes | Description |
---|---|---|---|
numberOfFields |
integer
|
The number of fields to insert in the DOM |
|
fieldType |
string
|
<optional> |
The field type: "string" | "number" | "date" | "textarea"... |
targetDomElementId |
string
|
<optional> |
The id of the node where the components must be inserted |
The number of milliseconds taken
integer
# static closeAllWindows(exceptionsopt)
Close all the panels and menus at once, except the login window
Parameters:
Name | Type | Attributes | Description |
---|---|---|---|
exceptions |
Array.<string>
|
<optional> |
Don't close winddows which id is in the list of exceptions |
# static copyTextToClipboard(text)
Copy a text to the clipboard
Parameters:
Name | Type | Description |
---|---|---|
text |
string
|
# static createFileURL(file, thumbopt) → {string}
Return the URL to access a file object on Amazon S3. The file can be either public or private.
Parameters:
Name | Type | Attributes | Default | Description |
---|---|---|---|---|
file |
Object
|
|||
thumb |
string
|
null
|
<optional> |
null |
string
# static downloadFile()
Given some text content, generates a download window for this content
Parameters:
Name | Type | Attributes | Description |
---|---|---|---|
config.content |
string
|
||
config.mimeType |
string
|
<optional> |
Defaults to "application/json" |
config.title |
string
|
<optional> |
Defaults to "Download" |
config.filename |
string
|
<optional> |
Defaults to "file.json" |
# static fileToIcon(fileType) → {object}
Return the icon and color of a file type
Parameters:
Name | Type | Description |
---|---|---|
fileType |
string
|
The icon and color for the file type
object
Example
kiss.tools.fileToIcon("xls") // => {icon: "fas fa-file-excel", color: "#09c60B"}
# async static getGeolocation() → {object}
Get the current geolocation. Try with the native browser geolocation, and if not available, use an external service to get an approximate location from the IP address.
Geolocation: {latitude: X, longitude: Y}
object
# async static getGeolocationFromAddress(address) → {object|boolean}
Get the geolocation from an address
Parameters:
Name | Type | Description |
---|---|---|
address |
string
|
- Geolocation object like {lat: ..., lon: ...}, or false if not found
object
|
boolean
# async static getGeolocationFromIP() → {object}
Get an approximate geolocation from the IP address
Geolocation: {latitude: X, longitude: Y}
object
# static getRandomColor(fromColorIndexopt, toColorIndexopt) → {string}
Get a random color from the global palette
Parameters:
Name | Type | Attributes | Description |
---|---|---|---|
fromColorIndex |
number
|
<optional> |
Restrict the palette from this color index |
toColorIndex |
number
|
<optional> |
Restrict the palette up to this color index |
A random color in hexa RGG. Ex: "#00aaee"
string
# static getThumbnail(file, thumbCode) → {Object}
Given a file, return the required thumbnail. If thumbCode is not found, returns the original file
Parameters:
Name | Type | Description |
---|---|---|
file |
Object
|
|
thumbCode |
string
|
null
|
Object
# static getUrlParameter(name, url) → {string}
Get an URL parameter
Parameters:
Name | Type | Description |
---|---|---|
name |
string
|
|
url |
string
|
string
# static highlight(element, text)
Highlight an element buy building an overlay around it and a legend under it.
Parameters:
Name | Type | Description |
---|---|---|
element |
string
|
HTMLElement to highlight |
text |
string
|
The legend |
# static highlightElements(elements, callback)
Highlight a sequence of elements. Useful to create a quick tutorial.
Parameters:
Name | Type | Description |
---|---|---|
elements |
Array.<object>
|
Array of elements to highlight sequentially, and corresponding legend |
callback |
function
|
Function executed when the list of elements to highlight is done |
Example
kiss.tools.highlightElements([
{
element: document.querySelector("#A"),
text: "Help for element A"
},
{
element: document.querySelector("#B"),
text: "Help for element B"
}
])
# static isEventInElement(event, element, delta)
Check whether an event occurred inside an element
Parameters:
Name | Type | Description |
---|---|---|
event |
Event
|
Event to check |
element |
Node
|
Element to check |
delta |
number
|
Tolerance in pixels |
# static isGeolocation(input) → {object|boolean}
Check if a string represents a valid geolocation (latitude, longitude).
Parameters:
Name | Type | Description |
---|---|---|
input |
string
|
The string to check. |
- Returns an object with the latitude and longitude if the string represents a valid geolocation, otherwise false.
object
|
boolean
# static moveToViewport(element) → {HTMLElement}
Move an element inside the viewport
It's useful to recenter an element like a dropdown list or a menu when it's not completely visible inside the viewport
Parameters:
Name | Type | Description |
---|---|---|
element |
HTMLElement
|
The element to move |
element
# static outlineDOM(state)
Outline all DOM elements in the page, mainly to debug the layout
Parameters:
Name | Type | Description |
---|---|---|
state |
boolean
|
true to display, false to hide |
# static showFormulae()
Show the list of formulae available for computed fields, inside a selectable textarea. Just used to build the Markdown documentation that feeds our AI assistant :)
# static snapshot(object) → {object}
Return the same object with only the properties which type is:
- string
- number
- boolean
- Array
Parameters:
Name | Type | Description |
---|---|---|
object |
object
|
Object to convert |
The converted object
object
# static treeify(list, idAttr, parentAttr, childrenAttr) → {object}
Convert a flat array of objects into a tree structure
Parameters:
Name | Type | Description |
---|---|---|
list |
Array.<object>
|
The flat array to transform into a tree structure |
idAttr |
string
|
Name of the id attribute |
parentAttr |
string
|
Name of the parent attribute |
childrenAttr |
string
|
Name of the children attribute |
The tree structure
object
Example
flat input: [ { id: "123", parent: "456" }, { id: "456", parent: "" } ]
tree output: [ { id: "456", parent: "", children: [ { id: "123", parent: "456" } ] } ]
# static uid() → {string}
As per RFC4122 DRAFT for UUID v7, the UUID bits layout:
0 1 2 3
0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
| unix_ts_ms |
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
| unix_ts_ms | ver | rand_a |
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
|var| rand_b |
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
| rand_b |
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
- See:
The GUID xxxxxxxx-xxxx-7xxx-xxxx-xxxxxxxxxxxx
string
# static waitForElement(selector) → {HTMLElement}
Async function that waits for an Element to be rendered in the DOM
Parameters:
Name | Type | Description |
---|---|---|
selector |
string
|
The selector |
The found element
Example
kiss.tools.waitForElement("#my-element-id").then(() => doSomething())