Class: ResponsiveKnockoutUtils

Oracle® JavaScript Extension Toolkit (JET)
4.2.0

E91398-01

QuickNav

PREVIEW: This is a preview API. Preview APIs are production quality, but can be changed on a major version without a deprecation path.

oj. ResponsiveKnockoutUtils

Version:
  • 4.2.0
Since:
  • 1.1.0
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.

Constructor

new ResponsiveKnockoutUtils()

PREVIEW: This is a preview API. Preview APIs are production quality, but can be changed on a major version without a deprecation path.

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) xl }); <>
Returns:
a knockout observable the value of which is one of the screen range constants, for example oj.ResponsiveUtils.SCREEN_RANGE.MD