Media WebUI

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