Namespace: ResponsiveUtils

Oracle® JavaScript Extension Toolkit (JET)
11.0.0

F37993-01

Since:
  • 1.1.0
Module:
  • ojresponsiveutils

QuickNav

Fields

Description

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.


Usage

Typescript Import Format
//This namespace exports multiple static methods or members. To import 
import * as ResponsiveUtils from "ojs/ojresponsiveutils";

//Now you can access the methods as ResponsiveUtils.methodName and so on

For additional information visit:


Fields

(static, constant) FRAMEWORK_QUERY_KEY :Object

In the jet sass files there are variables for responsive screen widths, see 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 Description
HIGH_RESOLUTION ResponsiveUtils.FrameworkQueryKey matches high resolution screens
LG_DOWN ResponsiveUtils.FrameworkQueryKey Matches screen width large and narrower
LG_ONLY ResponsiveUtils.FrameworkQueryKey Matches screen width smalargell only
LG_UP ResponsiveUtils.FrameworkQueryKey Matches screen width large and wider
MD_DOWN ResponsiveUtils.FrameworkQueryKey Matches screen width medium and narrower
MD_ONLY ResponsiveUtils.FrameworkQueryKey Matches screen width medium only
MD_UP ResponsiveUtils.FrameworkQueryKey Matches screen width medium and wider
SM_ONLY ResponsiveUtils.FrameworkQueryKey Matches screen width small only
SM_UP ResponsiveUtils.FrameworkQueryKey Matches screen width small and wider
XL_DOWN ResponsiveUtils.FrameworkQueryKey Matches screen width extra-large and narrower
XL_ONLY ResponsiveUtils.FrameworkQueryKey Matches screen width extra-large only
XL_UP ResponsiveUtils.FrameworkQueryKey Matches screen width extra-large and wider
XXL_UP ResponsiveUtils.FrameworkQueryKey Matches screen width extra-extra-large and wider

(static, constant) SCREEN_RANGE :Object

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
LG ResponsiveUtils.ScreenRange
MD ResponsiveUtils.ScreenRange
SM ResponsiveUtils.ScreenRange
XL ResponsiveUtils.ScreenRange
XXL ResponsiveUtils.ScreenRange

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)
         {
           // code for when screen is in XL range
         }
       });
Parameters:
Name Type Description
size1 ResponsiveUtils.ScreenRange one of the screen size constants, for example oj.ResponsiveUtils.SCREEN_RANGE.MD
size2 ResponsiveUtils.ScreenRange 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 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 ResponsiveUtils.FrameworkQueryKey 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

Type Definitions

FrameworkQueryKey

Enum type that defines the framework query key.
Supported Values:
Value
high-resolution
lg-down
lg-only
lg-up
md-down
md-only
md-up
sm-only
sm-up
xl-down
xl-only
xl-up
xxl-up

ScreenRange

Enum type that defines the screen range.
Supported Values:
Value
lg
md
sm
xl
xxl