Class: ResponsiveKnockoutUtils

Oracle® JavaScript Extension Toolkit (JET)
5.0.0

E90577-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.

ResponsiveKnockoutUtils

Version:
  • 5.0.0
Since:
  • 1.1.0
Module:
  • ojknockout
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.

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