diff --git a/core/theme_manager.js b/core/theme_manager.js index 6c461a2e7..859a33658 100644 --- a/core/theme_manager.js +++ b/core/theme_manager.js @@ -12,47 +12,50 @@ */ 'use strict'; -goog.provide('Blockly.ThemeManager'); +goog.module('Blockly.ThemeManager'); +goog.module.declareLegacyNamespace(); -goog.require('Blockly.Theme'); - -goog.requireType('Blockly.Workspace'); -goog.requireType('Blockly.WorkspaceSvg'); +/* eslint-disable-next-line no-unused-vars */ +const Theme = goog.requireType('Blockly.Theme'); +/* eslint-disable-next-line no-unused-vars */ +const Workspace = goog.requireType('Blockly.Workspace'); +/* eslint-disable-next-line no-unused-vars */ +const WorkspaceSvg = goog.requireType('Blockly.WorkspaceSvg'); +const dom = goog.require('Blockly.utils.dom'); /** * Class for storing and updating a workspace's theme and UI components. - * @param {!Blockly.WorkspaceSvg} workspace The main workspace. - * @param {!Blockly.Theme} theme The workspace theme. + * @param {!WorkspaceSvg} workspace The main workspace. + * @param {!Theme} theme The workspace theme. * @constructor * @package */ -Blockly.ThemeManager = function(workspace, theme) { - +const ThemeManager = function(workspace, theme) { /** * The main workspace. - * @type {!Blockly.WorkspaceSvg} + * @type {!WorkspaceSvg} * @private */ this.workspace_ = workspace; /** * The Blockly theme to use. - * @type {!Blockly.Theme} + * @type {!Theme} * @private */ this.theme_ = theme; /** * A list of workspaces that are subscribed to this theme. - * @type {!Array} + * @type {!Array} * @private */ this.subscribedWorkspaces_ = []; /** * A map of subscribed UI components, keyed by component name. - * @type {!Object>} + * @type {!Object>} * @private */ this.componentDB_ = Object.create(null); @@ -61,51 +64,51 @@ Blockly.ThemeManager = function(workspace, theme) { /** * A Blockly UI component type. * @typedef {{ - * element:!Element, - * propertyName:string - * }} - */ -Blockly.ThemeManager.Component; + * element:!Element, + * propertyName:string + * }} + */ +ThemeManager.Component; /** * Get the workspace theme. - * @return {!Blockly.Theme} The workspace theme. + * @return {!Theme} The workspace theme. * @package */ -Blockly.ThemeManager.prototype.getTheme = function() { +ThemeManager.prototype.getTheme = function() { return this.theme_; }; /** * Set the workspace theme, and refresh the workspace and all components. - * @param {!Blockly.Theme} theme The workspace theme. + * @param {!Theme} theme The workspace theme. * @package */ -Blockly.ThemeManager.prototype.setTheme = function(theme) { - var prevTheme = this.theme_; +ThemeManager.prototype.setTheme = function(theme) { + const prevTheme = this.theme_; this.theme_ = theme; // Set the theme name onto the injection div. - var injectionDiv = this.workspace_.getInjectionDiv(); + const injectionDiv = this.workspace_.getInjectionDiv(); if (injectionDiv) { if (prevTheme) { - Blockly.utils.dom.removeClass(injectionDiv, prevTheme.getClassName()); + dom.removeClass(injectionDiv, prevTheme.getClassName()); } - Blockly.utils.dom.addClass(injectionDiv, this.theme_.getClassName()); + dom.addClass(injectionDiv, this.theme_.getClassName()); } // Refresh all subscribed workspaces. - for (var i = 0, workspace; (workspace = this.subscribedWorkspaces_[i]); i++) { + for (let i = 0, workspace; (workspace = this.subscribedWorkspaces_[i]); i++) { workspace.refreshTheme(); } // Refresh all registered Blockly UI components. - for (var i = 0, keys = Object.keys(this.componentDB_), - key; (key = keys[i]); i++) { - for (var j = 0, component; (component = this.componentDB_[key][j]); j++) { - var element = component.element; - var propertyName = component.propertyName; - var style = this.theme_ && this.theme_.getComponentStyle(key); + for (let i = 0, keys = Object.keys(this.componentDB_), key; (key = keys[i]); + i++) { + for (let j = 0, component; (component = this.componentDB_[key][j]); j++) { + const element = component.element; + const propertyName = component.propertyName; + const style = this.theme_ && this.theme_.getComponentStyle(key); element.style[propertyName] = style || ''; } } @@ -116,20 +119,20 @@ Blockly.ThemeManager.prototype.setTheme = function(theme) { /** * Subscribe a workspace to changes to the selected theme. If a new theme is * set, the workspace is called to refresh its blocks. - * @param {!Blockly.Workspace} workspace The workspace to subscribe. + * @param {!Workspace} workspace The workspace to subscribe. * @package */ -Blockly.ThemeManager.prototype.subscribeWorkspace = function(workspace) { +ThemeManager.prototype.subscribeWorkspace = function(workspace) { this.subscribedWorkspaces_.push(workspace); }; /** * Unsubscribe a workspace to changes to the selected theme. - * @param {!Blockly.Workspace} workspace The workspace to unsubscribe. + * @param {!Workspace} workspace The workspace to unsubscribe. * @package */ -Blockly.ThemeManager.prototype.unsubscribeWorkspace = function(workspace) { - var index = this.subscribedWorkspaces_.indexOf(workspace); +ThemeManager.prototype.unsubscribeWorkspace = function(workspace) { + const index = this.subscribedWorkspaces_.indexOf(workspace); if (index < 0) { throw Error('Cannot unsubscribe a workspace that hasn\'t been subscribed.'); } @@ -145,20 +148,18 @@ Blockly.ThemeManager.prototype.unsubscribeWorkspace = function(workspace) { * @param {string} propertyName The inline style property name to update. * @package */ -Blockly.ThemeManager.prototype.subscribe = function(element, componentName, - propertyName) { +ThemeManager.prototype.subscribe = function( + element, componentName, propertyName) { if (!this.componentDB_[componentName]) { this.componentDB_[componentName] = []; } // Add the element to our component map. - this.componentDB_[componentName].push({ - element: element, - propertyName: propertyName - }); + this.componentDB_[componentName].push( + {element: element, propertyName: propertyName}); // Initialize the element with its corresponding theme style. - var style = this.theme_ && this.theme_.getComponentStyle(componentName); + const style = this.theme_ && this.theme_.getComponentStyle(componentName); element.style[propertyName] = style || ''; }; @@ -167,15 +168,15 @@ Blockly.ThemeManager.prototype.subscribe = function(element, componentName, * @param {Element} element The element to unsubscribe. * @package */ -Blockly.ThemeManager.prototype.unsubscribe = function(element) { +ThemeManager.prototype.unsubscribe = function(element) { if (!element) { return; } // Go through all component, and remove any references to this element. - var componentNames = Object.keys(this.componentDB_); - for (var c = 0, componentName; (componentName = componentNames[c]); c++) { - var elements = this.componentDB_[componentName]; - for (var i = elements.length - 1; i >= 0; i--) { + const componentNames = Object.keys(this.componentDB_); + for (let c = 0, componentName; (componentName = componentNames[c]); c++) { + const elements = this.componentDB_[componentName]; + for (let i = elements.length - 1; i >= 0; i--) { if (elements[i].element === element) { elements.splice(i, 1); } @@ -192,9 +193,11 @@ Blockly.ThemeManager.prototype.unsubscribe = function(element) { * @package * @suppress {checkTypes} */ -Blockly.ThemeManager.prototype.dispose = function() { +ThemeManager.prototype.dispose = function() { this.owner_ = null; this.theme_ = null; this.subscribedWorkspaces_ = null; this.componentDB_ = null; }; + +exports = ThemeManager; diff --git a/tests/deps.js b/tests/deps.js index c9fc4067f..702bf5ae4 100644 --- a/tests/deps.js +++ b/tests/deps.js @@ -164,7 +164,7 @@ goog.addDependency('../../core/shortcut_registry.js', ['Blockly.ShortcutRegistry goog.addDependency('../../core/theme.js', ['Blockly.Theme'], ['Blockly.registry', 'Blockly.utils', 'Blockly.utils.object']); 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.Theme']); +goog.addDependency('../../core/theme_manager.js', ['Blockly.ThemeManager'], ['Blockly.utils.dom'], {'lang': 'es6', 'module': 'goog'}); goog.addDependency('../../core/toolbox/category.js', ['Blockly.ToolboxCategory'], ['Blockly.ISelectableToolboxItem', 'Blockly.ToolboxItem', 'Blockly.registry', 'Blockly.utils', 'Blockly.utils.aria', 'Blockly.utils.dom', 'Blockly.utils.object', 'Blockly.utils.toolbox'], {'lang': 'es5'}); goog.addDependency('../../core/toolbox/collapsible_category.js', ['Blockly.CollapsibleToolboxCategory'], ['Blockly.ICollapsibleToolboxItem', 'Blockly.ToolboxCategory', 'Blockly.ToolboxItem', 'Blockly.ToolboxSeparator', 'Blockly.registry', 'Blockly.utils.aria', 'Blockly.utils.dom', 'Blockly.utils.object', 'Blockly.utils.toolbox']); goog.addDependency('../../core/toolbox/separator.js', ['Blockly.ToolboxSeparator'], ['Blockly.IToolboxItem', 'Blockly.ToolboxItem', 'Blockly.registry', 'Blockly.utils.dom'], {'lang': 'es5'});