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