Class: ResponsiveKnockoutUtils

Oracle® JavaScript Extension Toolkit (JET)
3.2.0

E87541-01

QuickNav

oj. ResponsiveKnockoutUtils

Version:
  • 3.2.0
Since:
  • 1.1.0
Utilities for creating knockout observable to implement responsive pages.

Constructor

new ResponsiveKnockoutUtils()

Source:

Methods

<static> createMediaQueryObservable(queryString)

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

Example:


   var customQuery = oj.ResponsiveKnockoutUtils.createMediaQueryObservable(
                                        '(min-width: 400px)');
Parameters:
Name Type Description
queryString string media query string, for example '(min-width: 400px)'
Source:
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
         }
       });
Source:
Returns:
a knockout observable the value of which is one of the screen range constants, for example oj.ResponsiveUtils.SCREEN_RANGE.MD