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) createCompositeMediaQueryObservable(queryString, componentElement)

This method creates an observable that returns true or false based on a media query string. It is specifically designed to be used within composite elements. The componentElement argument is used to clean up media query listeners when the composite element is disconnected from DOM. Can be used in conjunction with ResponsiveUtils.getFrameworkQuery to create an observable based on a framework media query.

This method can be safely used within composite elements to create an observable that can be used within view expressions or explicitly subscribed to within the view model. Do not call dispose() on the observable. The internal media query listeners will automatically be cleaned up when the element is disconnected from the DOM, and garbage collection will take care of the rest.

Example:


   var customQuery = oj.ResponsiveKnockoutUtils.createCompositeMediaQueryObservable(
                                        '(min-width: 400px)', modelContext.element);

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

   self.large = oj.ResponsiveKnockoutUtils.createCompositeMediaQueryObservable(lgQuery, modelContext.element);

Parameters:

Name	Type	Description
`queryString`	string	media query string, for example '(min-width: 400px)'
`componentElement`	Element	composite element that calls the utility in its view or view model

Returns:

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

(static) createCompositeScreenRangeObservable(componentElement)

The method 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. This method is designed to be used within composite element view expressions. The componentElement argument is used to clean up media query listeners when the composite element is disconnected from DOM.

Example:


       // create an observable which returns the current screen range
       self.screenRange = oj.ResponsiveKnockoutUtils.createCompositeScreenRangeObservable();

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

Parameters:

Name	Type	Description
`componentElement`	Element	composite element that calls the utility in its view or view model

Returns:

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

(static) createMediaQueryObservable(queryString)

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

In order to avoid leaking memory, any explicit subscribe() calls on this observable should be paired with corresponding dispose() calls when the observable is no longer needed. The observable returned by this method should not be used (directly or indirectly) in an expression within the view of a custom composite element. See oj.ResponsiveKnockoutUtils.createCompositeMediaQueryObservable instead.

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