Media WebUI

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.
Script
webui.ready(function() {

  var dt = ui.convertToDate("17/09/2018 12:00", "DD/MM/YYYY");

});

copyToClipboard (valueOrSelector)

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.
Markup
<div class="area text-sm" id="exampleArea">
  <button type="button" id="#clipboardExample" class="button button-success place-top-right">Copy</button>
</div>
Script
webui.ready(function() {

  ui.copyToClipboard(ui("#exampleArea"));

});

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.
Markup
<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>
Script
webui.ready(function() {

  ui("#exampleDiv").hoverIn(function(e) {
    var element = ui.elementHoverAt(e.clientX, e.clientY);
    console.log(element);
  });

});

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.
Script
webui.ready(function() {

  var accessibilityColor = ui.getAccessibilityContrastColor("#854485");

});

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.
Markup
<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>
Script
webui.ready(function() {

  var avgHeight = ui.getAvgHeight(ui(".area .flex-row div"));

});

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.
Markup
<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>
Script
webui.ready(function() {

  var avgWidth = ui.getAvgWidth(ui(".area .flex-row div"));

});

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.
Markup
<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>
Script
webui.ready(function() {

  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));

});

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.
Script
webui.ready(function() {

  var status = ui.getElementViewportStatus("#exampleElement", 50);

});

getScrollbarWidth ()

Gets the browser scrollbar width in pixels.

Returns - Numeric.
Script
webui.ready(function() {

  var scrollbarWidth = ui.getScrollbarWidth();

});

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.
Script
webui.ready(function() {

  var dt = ui.getTimeOffsetFromNow("17/09/2018 12:00", "DD/MM/YYYY");

});

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.
Script
webui.ready(function() {

  var isInRange = ui.isWindowInBreakPointRange([1, 3]);

});

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.
Script
webui.ready(function() {

  var rems = ui.pxToRem(300);

});

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.
Script
webui.ready(function() {

  var rems = ui.remToPx(4);

});

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.
Script
webui.ready(function() {

  var hexColorString = ui.rgbStringToHex ("85, 145, 108");

});

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.
Script
webui.ready(function() {

  var hexColorString = ui.rgbToHex (85, 145, 108);

});

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.
Markup
<div class="area border-sm border-default width-xl height-lg" id="examplePointerSpeed"></div>
Script
webui.ready(function() {

  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);    
  });

});