Namespace: ResponsiveUtils

Oracle® JavaScript Extension Toolkit (JET)
8.0.0
F18189-01

ResponsiveUtils

Version:

8.0.0

Since:

1.1.0

Module:

ojresponsiveutils

Module usage

See JET Module Loading for an overview of module usage within JET.

Javascript Import Format

define(['ojs/ojresponsiveutils'], function(ResponsiveUtils) {
 // Application should call API on ResponsiveUtils 
})

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

JET In Typescript

A detailed description of working with JET elements and classes in your typescript project can be found at: JET Typescript Usage.

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.

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)
         {
           // code for when screen is in XL range
         }
       });

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