CodingPirates/blockly
1
0
Fork 0
mirror of https://github.com/google/blockly.git synced 2026-01-11 10:57:07 +01:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #5220 from gonfunko/theme

Browse Source 
Migrate core/theme.js to goog.module syntax
This commit is contained in:
Aaron Dodson
2021-07-30 08:09:52 -07:00
committed by GitHub
parent 3f5057ff81 78053e9f12
commit f0c1addb9b
2 changed files with 52 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

107
core/theme.js
View File

@@ -9,28 +9,27 @@
*/
'use strict';
goog.provide('Blockly.Theme');
goog.module('Blockly.Theme');
goog.module.declareLegacyNamespace();
goog.require('Blockly.registry');
goog.require('Blockly.utils');
goog.require('Blockly.utils.object');
const object = goog.require('Blockly.utils.object');
const registry = goog.require('Blockly.registry');
/**
* Class for a theme.
* @param {string} name Theme name.
* @param {!Object<string, Blockly.Theme.BlockStyle>=} opt_blockStyles A map
* @param {!Object<string, Theme.BlockStyle>=} opt_blockStyles A map
* from style names (strings) to objects with style attributes for blocks.
* @param {!Object<string, Blockly.Theme.CategoryStyle>=} opt_categoryStyles A
* @param {!Object<string, Theme.CategoryStyle>=} opt_categoryStyles A
* map from style names (strings) to objects with style attributes for
* categories.
* @param {!Blockly.Theme.ComponentStyle=} opt_componentStyles A map of Blockly
* @param {!Theme.ComponentStyle=} opt_componentStyles A map of Blockly
* component names to style value.
* @constructor
*/
Blockly.Theme = function(name, opt_blockStyles, opt_categoryStyles,
opt_componentStyles) {
const Theme = function(
name, opt_blockStyles, opt_categoryStyles, opt_componentStyles) {
/**
* The theme name. This can be used to reference a specific theme in CSS.
* @type {string}
@@ -39,32 +38,32 @@ Blockly.Theme = function(name, opt_blockStyles, opt_categoryStyles,
/**
* The block styles map.
* @type {!Object<string, !Blockly.Theme.BlockStyle>}
* @type {!Object<string, !Theme.BlockStyle>}
* @package
*/
this.blockStyles = opt_blockStyles || Object.create(null);
/**
* The category styles map.
* @type {!Object<string, Blockly.Theme.CategoryStyle>}
* @type {!Object<string, Theme.CategoryStyle>}
* @package
*/
this.categoryStyles = opt_categoryStyles || Object.create(null);
/**
* The UI components styles map.
* @type {!Blockly.Theme.ComponentStyle}
* @type {!Theme.ComponentStyle}
* @package
*/
this.componentStyles = opt_componentStyles ||
(/** @type {Blockly.Theme.ComponentStyle} */ (Object.create(null)));
(/** @type {Theme.ComponentStyle} */ (Object.create(null)));
/**
* The font style.
* @type {!Blockly.Theme.FontStyle}
* @type {!Theme.FontStyle}
* @package
*/
this.fontStyle = /** @type {Blockly.Theme.FontStyle} */ (Object.create(null));
this.fontStyle = /** @type {Theme.FontStyle} */ (Object.create(null));
/**
* Whether or not to add a 'hat' on top of all blocks with no previous or
@@ -75,7 +74,7 @@ Blockly.Theme = function(name, opt_blockStyles, opt_categoryStyles,
this.startHats = null;
// Register the theme by name.
Blockly.registry.register(Blockly.registry.Type.THEME, name, this);
registry.register(registry.Type.THEME, name, this);
};
/**
@@ -87,7 +86,7 @@ Blockly.Theme = function(name, opt_blockStyles, opt_categoryStyles,
* hat:string
* }}
*/
Blockly.Theme.BlockStyle;
Theme.BlockStyle;
/**
* A category style.
@@ -95,7 +94,7 @@ Blockly.Theme.BlockStyle;
* colour:string
* }}
*/
Blockly.Theme.CategoryStyle;
Theme.CategoryStyle;
/**
* A component style.
@@ -118,7 +117,7 @@ Blockly.Theme.CategoryStyle;
* replacementGlowOpacity:?number
* }}
*/
Blockly.Theme.ComponentStyle;
Theme.ComponentStyle;
/**
* A font style.
@@ -128,33 +127,32 @@ Blockly.Theme.ComponentStyle;
* size:?number
* }}
*/
Blockly.Theme.FontStyle;
Theme.FontStyle;
/**
* Gets the class name that identifies this theme.
* @return {string} The CSS class name.
* @package
*/
Blockly.Theme.prototype.getClassName = function() {
Theme.prototype.getClassName = function() {
return this.name + '-theme';
};
/**
* Overrides or adds a style to the blockStyles map.
* @param {string} blockStyleName The name of the block style.
* @param {Blockly.Theme.BlockStyle} blockStyle The block style.
*/
Blockly.Theme.prototype.setBlockStyle = function(blockStyleName, blockStyle) {
* @param {Theme.BlockStyle} blockStyle The block style.
*/
Theme.prototype.setBlockStyle = function(blockStyleName, blockStyle) {
this.blockStyles[blockStyleName] = blockStyle;
};
/**
* Overrides or adds a style to the categoryStyles map.
* @param {string} categoryStyleName The name of the category style.
* @param {Blockly.Theme.CategoryStyle} categoryStyle The category style.
*/
Blockly.Theme.prototype.setCategoryStyle = function(categoryStyleName,
categoryStyle) {
* @param {Theme.CategoryStyle} categoryStyle The category style.
*/
Theme.prototype.setCategoryStyle = function(categoryStyleName, categoryStyle) {
this.categoryStyles[categoryStyleName] = categoryStyle;
};
@@ -164,8 +162,8 @@ Blockly.Theme.prototype.setCategoryStyle = function(categoryStyleName,
* @param {string} componentName The name of the component.
* @return {?string} The style value.
*/
Blockly.Theme.prototype.getComponentStyle = function(componentName) {
var style = this.componentStyles[componentName];
Theme.prototype.getComponentStyle = function(componentName) {
const style = this.componentStyles[componentName];
if (style && typeof style == 'string' &&
this.getComponentStyle(/** @type {string} */ (style))) {
return this.getComponentStyle(/** @type {string} */ (style));
@@ -177,17 +175,16 @@ Blockly.Theme.prototype.getComponentStyle = function(componentName) {
* Configure a specific Blockly UI component with a style value.
* @param {string} componentName The name of the component.
* @param {*} styleValue The style value.
*/
Blockly.Theme.prototype.setComponentStyle = function(componentName,
styleValue) {
*/
Theme.prototype.setComponentStyle = function(componentName, styleValue) {
this.componentStyles[componentName] = styleValue;
};
/**
* Configure a theme's font style.
* @param {Blockly.Theme.FontStyle} fontStyle The font style.
*/
Blockly.Theme.prototype.setFontStyle = function(fontStyle) {
* @param {Theme.FontStyle} fontStyle The font style.
*/
Theme.prototype.setFontStyle = function(fontStyle) {
this.fontStyle = fontStyle;
};
@@ -195,8 +192,8 @@ Blockly.Theme.prototype.setFontStyle = function(fontStyle) {
* Configure a theme's start hats.
* @param {boolean} startHats True if the theme enables start hats, false
* otherwise.
*/
Blockly.Theme.prototype.setStartHats = function(startHats) {
*/
Theme.prototype.setStartHats = function(startHats) {
this.startHats = startHats;
};
@@ -204,32 +201,30 @@ Blockly.Theme.prototype.setStartHats = function(startHats) {
* Define a new Blockly theme.
* @param {string} name The name of the theme.
* @param {!Object} themeObj An object containing theme properties.
* @return {!Blockly.Theme} A new Blockly theme.
*/
Blockly.Theme.defineTheme = function(name, themeObj) {
var theme = new Blockly.Theme(name);
var base = themeObj['base'];
* @return {!Theme} A new Blockly theme.
*/
Theme.defineTheme = function(name, themeObj) {
const theme = new Theme(name);
let base = themeObj['base'];
if (base) {
if (typeof base == "string") {
base = Blockly.registry.getObject(Blockly.registry.Type.THEME, base);
if (typeof base == 'string') {
base = registry.getObject(registry.Type.THEME, base);
}
if (base instanceof Blockly.Theme) {
Blockly.utils.object.deepMerge(theme, base);
if (base instanceof Theme) {
object.deepMerge(theme, base);
theme.name = name;
}
}
Blockly.utils.object.deepMerge(theme.blockStyles,
themeObj['blockStyles']);
Blockly.utils.object.deepMerge(theme.categoryStyles,
themeObj['categoryStyles']);
Blockly.utils.object.deepMerge(theme.componentStyles,
themeObj['componentStyles']);
Blockly.utils.object.deepMerge(theme.fontStyle,
themeObj['fontStyle']);
object.deepMerge(theme.blockStyles, themeObj['blockStyles']);
object.deepMerge(theme.categoryStyles, themeObj['categoryStyles']);
object.deepMerge(theme.componentStyles, themeObj['componentStyles']);
object.deepMerge(theme.fontStyle, themeObj['fontStyle']);
if (themeObj['startHats'] != null) {
theme.startHats = themeObj['startHats'];
}
return theme;
};
exports = Theme;

2
tests/deps.js
View File

@@ -161,7 +161,7 @@ goog.addDependency('../../core/requires.js', ['Blockly.requires'], ['Blockly', '
goog.addDependency('../../core/scrollbar.js', ['Blockly.Scrollbar', 'Blockly.ScrollbarPair'], ['Blockly.Events', 'Blockly.Touch', 'Blockly.browserEvents', 'Blockly.utils', 'Blockly.utils.Coordinate', 'Blockly.utils.Metrics', 'Blockly.utils.Svg', 'Blockly.utils.dom']);
goog.addDependency('../../core/shortcut_items.js', ['Blockly.ShortcutItems'], ['Blockly.Gesture', 'Blockly.ShortcutRegistry', 'Blockly.utils.KeyCodes']);
goog.addDependency('../../core/shortcut_registry.js', ['Blockly.ShortcutRegistry'], ['Blockly.utils.KeyCodes', 'Blockly.utils.object'], {'lang': 'es6', 'module': 'goog'});
goog.addDependency('../../core/theme.js', ['Blockly.Theme'], ['Blockly.registry', 'Blockly.utils', 'Blockly.utils.object']);
goog.addDependency('../../core/theme.js', ['Blockly.Theme'], ['Blockly.registry', 'Blockly.utils.object'], {'lang': 'es6', 'module': 'goog'});
goog.addDependency('../../core/theme/classic.js', ['Blockly.Themes.Classic'], ['Blockly.Theme']);
goog.addDependency('../../core/theme/zelos.js', ['Blockly.Themes.Zelos'], ['Blockly.Theme']);
goog.addDependency('../../core/theme_manager.js', ['Blockly.ThemeManager'], ['Blockly.utils.dom'], {'lang': 'es6', 'module': 'goog'});