diff --git a/core/options.js b/core/options.js index 6c054dd27..c84a4264e 100644 --- a/core/options.js +++ b/core/options.js @@ -23,6 +23,8 @@ goog.provide('Blockly.Options'); +goog.require('Blockly.Theme'); +goog.require('Blockly.Themes.Classic'); goog.require('Blockly.utils.userAgent'); goog.require('Blockly.Xml'); @@ -114,7 +116,6 @@ Blockly.Options = function(options) { } else { var oneBasedIndex = !!options['oneBasedIndex']; } - var theme = options['theme']; var keyMap = options['keyMap'] || Blockly.user.keyMap.createDefaultKeyMap(); var renderer = options['renderer'] || 'geras'; @@ -141,7 +142,7 @@ Blockly.Options = function(options) { this.gridOptions = Blockly.Options.parseGridOptions_(options); this.zoomOptions = Blockly.Options.parseZoomOptions_(options); this.toolboxPosition = toolboxPosition; - this.theme = theme; + this.theme = Blockly.Options.parseThemeOptions_(options); this.keyMap = keyMap; this.renderer = renderer; }; @@ -273,6 +274,22 @@ Blockly.Options.parseGridOptions_ = function(options) { return gridOptions; }; +/** + * Parse the user-specified theme options, using the classic theme as a default. + * https://developers.google.com/blockly/guides/configure/web/themes + * @param {!Object} options Dictionary of options. + * @return {!Blockly.Theme} A Blockly Theme. + * @private + */ +Blockly.Options.parseThemeOptions_ = function(options) { + var theme = options['theme'] || Blockly.Themes.Classic; + if (theme instanceof Blockly.Theme) { + return /** @type {!Blockly.Theme} */ (theme); + } + return new Blockly.Theme( + theme['blockStyles'], theme['categoryStyles'], theme['componentStyles']); +}; + /** * Parse the provided toolbox tree into a consistent DOM format. * @param {Node|string} tree DOM tree of blocks, or text representation of same. diff --git a/core/theme.js b/core/theme.js index bad41cffb..3deadde3a 100644 --- a/core/theme.js +++ b/core/theme.js @@ -204,6 +204,15 @@ Blockly.Theme.prototype.setCategoryStyle = function(categoryStyleName, this.categoryStyles_[categoryStyleName] = categoryStyle; }; +/** + * Gets a map of all the category style names. + * @return {!Object.} Map of category + * styles. + */ +Blockly.Theme.prototype.getAllCategoryStyles = function() { + return this.categoryStyles_; +}; + /** * Gets the style for a given Blockly UI component. If the style value is a * string, we attempt to find the value of any named references. diff --git a/typings/parts/blockly-interfaces.d.ts b/typings/parts/blockly-interfaces.d.ts index a7a7879bb..760f97fcb 100644 --- a/typings/parts/blockly-interfaces.d.ts +++ b/typings/parts/blockly-interfaces.d.ts @@ -16,7 +16,7 @@ declare module Blockly { css?: boolean; oneBasedIndex?: boolean; media?: string; - theme?: Blockly.BlocklyTheme; + theme?: Blockly.Theme | BlocklyThemeOptions; move?: { scrollbars?: boolean; drag?: boolean; @@ -38,9 +38,10 @@ declare module Blockly { }; } - interface BlocklyTheme { - defaultBlockStyles?: {[blocks: string]: Blockly.Theme.BlockStyle;}; + interface BlocklyThemeOptions { + blockStyles?: {[blocks: string]: Blockly.Theme.BlockStyle;}; categoryStyles?: {[category: string]: Blockly.Theme.CategoryStyle;}; + componentStyles?: {[component: string]: any;}; } interface Metrics {