Namespace: ResponsiveKnockoutUtils

Usage

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

For additional information visit:

Methods

(static) createMediaQueryObservable(queryString)

creates an observable that returns true or false based on a media query string. Can be used in conjuntion with 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 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