Documentation

Namespace

tools

kiss.tools

Misc tools & helpers

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

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 16

The element found, or null

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 501

  • 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 430

  • 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 1033

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 345

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 330

# static copyTextToClipboard(text)

Copy a text to the clipboard

Parameters:
Name Type Description
text string

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

# static createFileURL(file, thumbopt) → {string}

Return the URL to access a file object on S3 compatible storage. 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 147

string

# static debugDOM(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 815

# static downloadFile(config)

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"
config

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

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

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 701

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 683

  • 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 664

Geolocation: {latitude: X, longitude: Y}

object

# static getIconByType(type) → {string}

Get the icon of a field or element type

Parameters:
Name Type Description
type string

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

icon font class

string
Example
kiss.tools.getIconByType("text") // => "fas fa-font"

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

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 132

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 106

string

# static highlight(config)

Highlight an element buy building an overlay around it and a legend under it.

Parameters:
Name Type Description
config object
element string

HTMLElement to highlight
text string

The legend
position string

The position of the legend: "top" | "right" | "bottom" | "left"

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

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

Example
kiss.tools.highlightElements([
 {
     element: document.querySelector("#A"),
     text: "Help for element A",
     position: "bottom"
 },
 {
     element: document.querySelector("#B"),
     text: "Help for element B",
     position: "left"
 }
])

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

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

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

# static isHexColor(value) → {boolean}

Check if a value is a valid hex color

Parameters:
Name Type Description
value string

The value to check, which can be like: #RGB, #RGBA, #RRGGBB

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

  • True if the value is a valid hex color, false otherwise
boolean
Example
kiss.tools.isHexColor("#00aaee") // returns true
kiss.tools.isHexColor("#ggg")    // returns false
kiss.tools.isHexColor("00aaee")  // returns false
kiss.tools.isHexColor("#1234")  // returns true
kiss.tools.isHexColor("#12345")  // returns false

# static isMobile() → {boolean}

Check if the page is visited by a mobile device

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

boolean

# static mergeTags(text, record, context) → {string}

Merge tags in a text with the values from a record + values from kiss.context

Parameters:
Name Type Description
text string
record kiss.data.Record

The record to use for merging
context

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

The text with merged tags

string

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

element

HTMLElement

# static pxToRem(number) → {number}

Convert a number of rem to pixels

Parameters:
Name Type Description
number number

The number of rem

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

The number in pixels

number

# static remToPx(number) → {number}

Convert a number of pixels to rem

Parameters:
Name Type Description
number number

The number of pixels

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

The number in rem

number

# static showFormulae()

Show the list of formulae available for computed fields, inside a selectable textarea. This tool is a helper used to build the Markdown documentation that feeds our AI assistant.

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

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

The converted object

object

# static startSpeechRecognition(targetFieldId)

  • Start the speech recognition if it's available in the browser
  • Inserts the recognized text in the target field
Parameters:
Name Type Description
targetFieldId string

The id of the field where to insert the recognized text

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

# static toRgb(hexaColor, opacity) → {string}

Convert a hexa RGB color to an RGBa color

Parameters:
Name Type Description
hexaColor string
opacity number

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

The RGBa color

string
Example
kiss.tools.toRgb("#00aaee", 0.5) // returns "rgba(0, 170, 238, 0.5)"

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

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 44

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 215

The found element

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

# static waitUntil(conditionFn, checkInterval, timeout) → {Promise}

Function to wait until a condition is met

Parameters:
Name Type Description
conditionFn function

The condition to check
checkInterval number

The interval to check the condition, in milliseconds
timeout number

The maximum time to wait for the condition, in milliseconds

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

A promise that resolves when the condition is met, or rejects if the timeout is reached

Promise
Example
kiss.tools.waitUntil(() => this.isRendered == true, 100, 5000)

Methods