Class: ResponsiveUtils

Oracle® JavaScript Extension Toolkit (JET)
4.2.0

E91398-01

QuickNav

Fields

oj. ResponsiveUtils

Version:
  • 4.2.0
Since:
  • 1.1.0
Utilities for working with the framework's responsive screen widths and ranges. Often used in conjunction with oj.ResponsiveKnockoutUtils to create knockout observables that can be used to drive responsive page behavior. See the method doc below for specific examples.

Constructor

new ResponsiveUtils()

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

<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

Methods

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

Compare can be used in conjunction with oj.ResponsiveKnockoutUtils.createScreenRangeObservable

Example:


       // create an observable which returns the current screen range
       self.screenRange = oj.ResponsiveKnockoutUtils.createScreenRangeObservable();

       self.label2 = ko.computed(function() {
         var range = self.screenRange();

         if ( oj.ResponsiveUtils.compare( 
                      range, oj.ResponsiveUtils.SCREEN_RANGE.MD) <= 0) { code for when screen is in small or medium range } else if (range="=" oj.responsiveutils.screen_range.xl) xl }); <>
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
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 framework (built in) media query string, see oj.ResponsiveUtils.FRAMEWORK_QUERY_KEY for details on framework queries. The media query string returned can be passed to oj.ResponsiveKnockoutUtils.createMediaQueryObservable to create a knockout observable, which in turn can be used to drive responsive page behavior.

Example:



    var lgQuery = oj.ResponsiveUtils.getFrameworkQuery(
                            oj.ResponsiveUtils.FRAMEWORK_QUERY_KEY.LG_UP);
       
    self.large = oj.ResponsiveKnockoutUtils.createMediaQueryObservable(lgQuery);
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
Returns:
the media query to use for the framework query key passed in
Type
string | null