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 returnsoj.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) { // 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 returnsoj.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) { // 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.