Documentation

Namespace

tools

kiss.tools

Misc tools & helpers

View Source client/core/modules/tools.js, line 8

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

View Source client/core/modules/tools.js, line 17

The element found

HTMLElement

# 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

View Source client/core/modules/tools.js, line 399

  • 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

View Source client/core/modules/tools.js, line 367

  • 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

View Source client/core/modules/tools.js, line 791

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

View Source client/core/modules/tools.js, line 282

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

View Source client/core/modules/tools.js, line 267

# static copyTextToClipboard(text)

Copy a text to the clipboard

Parameters:
Name Type Description
text string

View Source client/core/modules/tools.js, line 121

# 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

View Source client/core/modules/tools.js, line 148

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"

View Source client/core/modules/tools.js, line 177

# static fileToIcon(fileType) → {object}

Return the icon and color of a file type

Parameters:
Name Type Description
fileType string

View Source client/core/modules/tools.js, line 425

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.

View Source client/core/modules/tools.js, line 579

Geolocation: {latitude: X, longitude: Y}

object

# async static getGeolocationFromAddress(address) → {object|boolean}

Get the geolocation from an address

Parameters:
Name Type Description
address string

View Source client/core/modules/tools.js, line 564

  • Geolocation object like {lat: ..., lon: ...}, or false if not found
object | boolean

# async static getGeolocationFromIP() → {object}

Get an approximate geolocation from the IP address

View Source client/core/modules/tools.js, line 545

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

View Source client/core/modules/tools.js, line 411

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

View Source client/core/modules/tools.js, line 133

Object

# static getUrlParameter(name, url) → {string}

Get an URL parameter

Parameters:
Name Type Description
name string
url string

View Source client/core/modules/tools.js, line 107

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

View Source client/core/modules/tools.js, line 683

# 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

View Source client/core/modules/tools.js, line 768

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

View Source client/core/modules/tools.js, line 232

# 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.

View Source client/core/modules/tools.js, line 619

  • Returns an object with the latitude and longitude if the string represents a valid geolocation, otherwise false.
object | boolean

# static isMobile() → {boolean}

Check if the page is visited by a mobile device

View Source client/core/modules/tools.js, line 654

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

View Source client/core/modules/tools.js, line 252

element

HTMLElement

# 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

View Source client/core/modules/tools.js, line 671

# 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 :)

View Source client/core/modules/tools.js, line 823

# 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

View Source client/core/modules/tools.js, line 489

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

View Source client/core/modules/tools.js, line 335

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:

View Source client/core/modules/tools.js, line 45

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

View Source client/core/modules/tools.js, line 209

The found element

HTMLElement
Example
kiss.tools.waitForElement("#my-element-id").then(() => doSomething())