Class: ResponsiveUtils

Oracle® JavaScript Extension Toolkit (JET)
3.2.0

E87541-01

QuickNav

Fields

oj. ResponsiveUtils

Version:
  • 3.2.0
Since:
  • 1.1.0
Utilities for responsive pages.

Constructor

new ResponsiveUtils()

Source:

Fields

<static, constant> FRAMEWORK_QUERY_KEY :string

In the jet sass files there are variables for responsive screen widths, see oj.ResponsiveUtils.SCREEN_RANGE for details. The jet sass files also has variables for responsive queries like $responsiveQuerySmallUp, $responsiveQuerySmallOnly, $responsiveQueryMediumUp, etc.

These constants are used to identify these queries.

Properties:
Name Type Default Description
SM_UP string sm-up Matches screen width small and wider
MD_UP string md-up matches screen width medium and wider
LG_UP string lg-up matches screen width large and wider
XL_UP string xl-up matches screen width extra-large and wider
XXL_UP string xxl-up matches screen width extra-extra-large and wider
SM_ONLY string sm-only matches screen width small only
MD_ONLY string md-only matches screen width medium only
LG_ONLY string lg-only matches screen width large only
XL_ONLY string xl-only matches screen width extra-large only
MD_DOWN string md-down matches screen width medium and narrower
LG_DOWN string lg-down matches screen width large and narrower
XL_DOWN string xl-down matches screen width extra-large and narrower
HIGH_RESOLUTION string high-resolution matches high resolution screens
Source:

<static, constant> SCREEN_RANGE :string

In the jet sass files there are variables for responsive screen widths, these look something like

  • $screenSmallRange: 0, 767px;
  • $screenMediumRange: 768px, 1023px;
  • $screenLargeRange: 1024px, 1280px;
  • $screenXlargeRange: 1281px, null;

These constants are used to identify these ranges.

Properties:
Name Type Default
SM string sm
MD string md
LG string lg
XL string xl
XXL string xxl
Source:

Methods

<static> compare(size1, size2) → {number}

Parameters:
Name Type Description
size1 oj.ResponsiveUtils.SCREEN_RANGE one of the screen size constants, for example oj.ResponsiveUtils.SCREEN_RANGE.MD
size2 oj.ResponsiveUtils.SCREEN_RANGE one of the screen size constants, for example oj.ResponsiveUtils.SCREEN_RANGE.LG
Source:
Returns:
a negative integer if the first argument is less than the second. Zero if the two are equal. 1 or greater if the first argument is more than the second.
Type
number

<static> getFrameworkQuery(frameworkQueryKey) → {string|null}

Get a framweork (built in) media query
Parameters:
Name Type Description
frameworkQueryKey oj.ResponsiveUtils.FRAMEWORK_QUERY_KEY one of the FRAMEWORK_QUERY_KEY constants, for example oj.ResponsiveUtils.FRAMEWORK_QUERY_KEY.MD_UP
Source:
Returns:
the media query to use for the framework query key passed in
Type
string | null