Namespace: ResponsiveUtils

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`