WebUI mobile-first CSS

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

});