Namespace: ResponsiveKnockoutUtils

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

ResponsiveKnockoutUtils

Version:

8.0.0

Since:

1.1.0

Module:

ojresponsiveknockoututils

Module usage

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

Javascript Import Format

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

Typescript Import Format

//This namespace exports multiple static methods or members. To import 
import * as ResponsiveKnockoutUtils from "ojs/ojresponsiveknockoututils";

//Now you can access the methods as ResponsiveKnockoutUtils.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 creating knockout observables to implement responsive pages. For example you could use oj.ResponsiveKnockoutUtils.createMediaQueryObservable to create an observable based on the screen width and then bind the tab bar's orientation attribute to it. See the method doc below for specific examples.

Methods

(static) createMediaQueryObservable(queryString)

creates an observable that returns true or false based on a media query string. Can be used in conjuntion with oj.ResponsiveUtils.getFrameworkQuery to create an observable based on a framework media query.

Example:


   var customQuery = oj.ResponsiveKnockoutUtils.createMediaQueryObservable(
                                        '(min-width: 400px)');

   var lgQuery = oj.ResponsiveUtils.getFrameworkQuery(
                            oj.ResponsiveUtils.FRAMEWORK_QUERY_KEY.LG_UP);

   self.large = oj.ResponsiveKnockoutUtils.createMediaQueryObservable(lgQuery);

Parameters:

Name	Type	Description
`queryString`	string	media query string, for example '(min-width: 400px)'

Returns:

a knockout observable that returns true or false based on a media query string.

(static) createScreenRangeObservable()

This function creates a computed observable, the value of which is one of the oj.ResponsiveUtils.SCREEN_RANGE constants. For example when the width is in the range defined by the sass variable $mediumScreenRange then the observable returns oj.ResponsiveUtils.SCREEN_RANGE.MD, but if it's in the range defined by $largeScreenRange then it returns oj.ResponsiveUtils.SCREEN_RANGE.LG, etc.

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
         }
       });

Returns:

a knockout observable the value of which is one of the screen range constants, for example oj.ResponsiveUtils.SCREEN_RANGE.MD