calculatePointerSpeed (event, previousEvent)
Calculates the velocity of the device pointer on the specified event.
Returns - String.
Argument
Type
Description
event
Event
The current event instance.
previousEvent
Event
The previously collected event instance.
<div class="area border-sm border-default width-xl height-lg"
id="examplePointerSpeed">
</div>
JS
webui.ready( () => {
var previousEvent = null;
var exampleArea = ui("#examplePointerSpeed");
exampleArea.mouseMove(function(e) {
e.time = Date.now();
var result = ui.calculatePointerSpeed(e, previousEvent);
previousEvent = e;
exampleArea.text("velocity: " + result);
});
});
JS
convertToDate (dateTimeString, format)
Converts a datetime string value to a valid Date object using the specified format.
Returns - Date object.
Argument
Type
Description
dateTimeString
String
A valid datetime string.
format
String
A valid datetime format.
webui.ready( () => {
var dt = ui.convertToDate("17/09/2018 12:00", "DD/MM/YYYY");
});
JS
copyTextToClipboard (textToCopy)
Copies the specified string to the platform clipboard.
Returns - Promise.
Argument
Type
Description
textToCopy
String
A string value.
ui(".code-copy").click( function() {
let el = ui(this).closest(".container").find("pre");
if (el && el.length) {
ui.copyTextToClipboard(el.text());
}
});
JS
copyToClipboard (valueOrSelector) DEPRECATED
Copies the text content of a selector or string value to the platform clipboard.
Returns - Void.
Argument
Type
Description
valueOrSelector
WebUI object or string value
A valid WebUI object or any string value.
<div class="area text-sm" id="exampleArea">
<button type="button" id="#clipboardExample"
class="button button-success place-top-right">Copy</button>
</div>
HTML
webui.ready( () => {
ui.copyToClipboard(ui("#exampleArea"));
});
JS
elementHoverAt (x, y)
Gets the element being hovered over at the specified coordinates.
Returns - WebUI object.
Argument
Type
Description
x
Numeric
A valid numeric value in pixels.
y
Numeric
A valid numeric value in pixels.
<div class="area text-sm" id="exampleArea">
<div class="flex-row gap-horizontal-sm">
<div class="width-lg height-lg control" id="exampleDiv"></div>
</div>
</div>
HTML
webui.ready( () => {
ui("#exampleDiv").hoverIn(function(e) {
var element = ui.elementHoverAt(e.clientX, e.clientY);
console.log(element);
});
});
JS
extend (object, objects...)
Used to add to the property list or transpose properties of the object passed as the first argument with those of objects passed as additional aguments.
Returns - Object.
Argument
Type
Description
-
Object
An object literal.
-
Object(s)
Any number of object literals.
webui.ready( () => {
let obj = new Object();
obj.firstName = "John";
obj.lastName = "Doe";
let newDataObj = function (firstName, lastName, addresses) {
this.firstName = firstName;
this.lastName = lastName;
this.addresses = addresses;
}
let newData = new newDataObj("Adam", "Smith", [ { address: "Example address 1" }, { address: "Example address 2" } ]);
let newObj = extend(obj, newData);
console.log(newObj);
});
JS
getAccessibilityContrastColor (hexColor)
Converts a hexidecimal color string to a high contrast black or white alternative.
Returns - String.
Argument
Type
Description
dateTimeString
String
A valid datetime string.
format
String
A valid datetime format.
webui.ready( () => {
var accessibilityColor = ui.getAccessibilityContrastColor("#854485");
});
JS
getAvgHeight (elements)
Gets the average height in pixels of a set of HTML elements.
Returns - Numeric.
Argument
Type
Description
elements
WebUI object or NodeList
A valid WebUI object or an array of HTML elements.
<div class="area text-sm" id="exampleArea">
<div class="flex-row gap-horizontal-sm">
<div class="width-lg height-sm control"></div>
<div class="width-lg height-sm-md control"></div>
<div class="width-lg height-md control"></div>
</div>
</div>
HTML
webui.ready( () => {
var avgHeight = ui.getAvgHeight(ui(".area .flex-row div"));
});
JS
getAvgWidth (elements)
Gets the average width in pixels of a set of HTML elements.
Returns - Numeric.
Argument
Type
Description
elements
WebUI object or NodeList
A valid WebUI object or an array of HTML elements.
<div class="area text-sm" id="exampleArea">
<div class="flex-row gap-horizontal-sm">
<div class="width-sm height-md control"></div>
<div class="width-sm-md height-md control"></div>
<div class="width-md height-md control"></div>
</div>
</div>
HTML
webui.ready( () => {
var avgWidth = ui.getAvgWidth(ui(".area .flex-row div"));
});
JS
getColorShade (hexColor, rgbValue)
Gets a the shade for the specified hexidecimal color adjusted to the intensity specified by the RGB value.
Returns - String.
Argument
Type
Description
hexColor
String
A valid 7 character hexidecimal value.
rgbValue
Integer
A valid interger RGB value between 0 and 255.
<div class="area text-sm" id="exampleArea">
<div class="flex-row gap-horizontal-sm">
<div class="width-sm height-sm control" id="exampleDiv1"></div>
<div class="width-sm height-sm control" id="exampleDiv2"></div>
<div class="width-sm height-sm control" id="exampleDiv3"></div>
<div class="width-sm height-sm control" id="exampleDiv4"></div>
<div class="width-sm height-sm control" id="exampleDiv5"></div>
<div class="width-sm height-sm control" id="exampleDiv6"></div>
</div>
</div>
HTML
webui.ready( () => {
ui("#exampleDiv1").css("background", ui.getColorShade("#000000", 50));
ui("#exampleDiv2").css("background", ui.getColorShade("#000000", 75));
ui("#exampleDiv3").css("background", ui.getColorShade("#000000", 100));
ui("#exampleDiv4").css("background", ui.getColorShade("#000000", 125));
ui("#exampleDiv5").css("background", ui.getColorShade("#000000", 150));
ui("#exampleDiv6").css("background", ui.getColorShade("#000000", 175));
});
JS
getElementViewportStatus (selector, requiredMargin)
Calculates whether any part of an element is positioned outside any of the 4 sides of the browser viewport, depending on the specified margin.
Returns - An object containing 5 boolean properties: result, topExceeded, leftExceeded, bottomExceeded, rightExceeded.
Argument
Type
Description
selector
String
A valid CSS selector expression.
requiredMargin
Integer
A valid interger in pixels.
webui.ready( () => {
var status = ui.getElementViewportStatus("#exampleElement", 50);
});
JS
getScrollbarWidth ()
Gets the browser scrollbar width in pixels.
Returns - Numeric.
webui.ready( () => {
var scrollbarWidth = ui.getScrollbarWidth();
});
JS
getTimeOffsetFromNow (dateTimeString, format)
Gets the time offset of the specified datetime string from now using the specified format.
Returns - Integer.
Argument
Type
Description
dateTimeString
String
A valid datetime string.
format
String
A valid datetime format.
webui.ready( () => {
var dt = ui.getTimeOffsetFromNow("17/09/2018 12:00", "DD/MM/YYYY");
});
JS
getUnitFromCssSize (cssSize)
Gets the unit part of size string returned from an element.css(ruleName, ruleValue) call.
Returns - String.
Argument
Type
Description
cssSize
String
A valid CSS size string.
webui.ready( () => {
let unit = ui.getUnitFromCssSize("35rem"); // Returns: "rem";
});
JS
getValueFromCssSize (cssSize)
Gets the value part of size string returned from an element.css(ruleName, ruleValue) call.
Returns - Numeric.
Argument
Type
Description
cssSize
String
A valid CSS size string.
webui.ready( () => {
let value = ui.getValueFromCssSize("35rem"); // Returns: 35;
});
JS
isWindowInBreakPointRange (breakPointRange)
Calculates whether the browser viewport is currently within the specified breakpoint range.
Returns - Boolean.
Argument
Type
Description
breakPointRange
Array
An array containg 2 valid WebUI breakpoint integers.
webui.ready( () => {
var isInRange = ui.isWindowInBreakPointRange([1, 3]);
});
JS
pxToRem (pxValue)
Converts pixels to rems using the currently set browser font size.
Returns - Numeric.
Argument
Type
Description
pxValue
String or Numeric
A valid numeric value.
webui.ready( () => {
var rems = ui.pxToRem(300);
});
JS
remToPx (remValue)
Converts rems to pixels using the currently set browser font size.
Returns - Numeric.
Argument
Type
Description
remValue
String or Numeric
A valid numeric value.
webui.ready( () => {
var rems = ui.remToPx(4);
});
JS
rgbStringToHex (rgb)
Converts a comma separated RGB string to a hexidecimal string equivalent.
Returns - String.
Argument
Type
Description
r
Integer
Red color value.
g
Integer
Green color value.
b
Integer
Blue color value.
webui.ready( () => {
var hexColorString = ui.rgbStringToHex ("85, 145, 108");
});
JS
rgbToHex (r, g, b)
Converts RGB values to a hexidecimal string equivalent.
Returns - String.
Argument
Type
Description
r
Integer
Red color value.
g
Integer
Green color value.
b
Integer
Blue color value.
webui.ready( () => {
var hexColorString = ui.rgbToHex (85, 145, 108);
});
JS