Namespace: ResponsiveKnockoutUtils

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.

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:

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

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.

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.createCompositeScreenRangeObservable instead.

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.