Namespace: ThemeUtils

Oracle® JavaScript Extension Toolkit (JET)
7.1.0

F18183-01

QuickNav


ThemeUtils

Version:
  • 7.1.0
Since:
  • 1.2.0
Module:
  • ojthemeutils

Module usage

See JET Module Loading for an overview of module usage within JET.

Javascript Import Format
define(['ojs/ojthemeutils'], function(ThemeUtils) {
 // Application should call API on ThemeUtils 
})
Typescript Import Format
//This namespace exports multiple static methods or members. To import 
import * as ThemeUtils from "ojthemeutils";

//Now you can access the methods as ThemeUtils.methodName and so on

JET In Typescript

A detailed description of working with JET elements and classes in your typescript project can be found at: JET Typescript Usage.

Description

Services for getting information from the theme

Methods

(static) clearCache() → {void}

clear values cached in oj.ThemeUtils.parseJSONFromFontFamily
Returns:
Type
void

(static) getThemeName() → {string|null}

get the name of the current theme
Returns:
the name of the theme
Type
string | null

(static) getThemeTargetPlatform() → {string|null}

Get the target platform of the current theme.

This API does not look at the user agent and therefore it tells you nothing about the current platform you are actually on. Instead it tells you the target platform the theme was written for so that programmatic behaviors that match the theme's UI can be written. This can be useful when writing a cross platform hybrid mobile app.

Example


var themeTargetPlatform = oj.ThemeUtils.getThemeTargetPlatform();

if (themeTargetPlatform == 'ios')
   // code for a behavior familiar in ios
else if (themeTargetPlatform == 'android')
   // code for a behavior familiar on android
else
   // code for the default behavior
Returns:
the target platform can be any string the theme wants to send down, but common values are 'all', 'web', 'ios', 'android', 'windows'
Type
string | null

(static) parseJSONFromFontFamily(selector) → {any}

json can be sent down as the font family in classes that look something like this (on the sass side of things see the file scss/utilities/_oj.utilities.json.scss for information on jet mixins available to generate json):

Example CSS


.demo-map-json {
   font-family: '{"foo":"bar", "binky": 4}';
}

.demo-list-json {
   font-family: '["foo","bar","binky"}';
}

Example Usage


var mymap = oj.ThemeUtils.parseJSONFromFontFamily("demo-map-json");
var myarray = oj.ThemeUtils.parseJSONFromFontFamily("demo-list-json");
This function
  • Gets the font family string by creating a dom element, applying the selector passed in, calling getcomputedstyle, and then reading the value for font-family.
  • Parses the font family value by calling JSON.pars.
  • Caches the parsed value because calling getComputedStyle is a perf hit. Subsequent requests for the same selector will return the cached value. Call oj.ThemeUtils.clearCache if new css is loaded.
  • Return the parsed value.

If new css is loaded call oj.ThemeUtils.clearCache to clear the cache

Parameters:
Name Type Description
selector string a class selector name, for example 'demo-map-json';
Throws:
If JSON.parse throws a SyntaxError exception we will log an error and rethrow
Type
SyntaxError
Returns:
the result of parsing the font family with JSON.parse. The returned value is cached, so if you modify the returned value it will be reflected in the cache.
Type
any