Skip to content

Commit

Permalink
fix: adding and removing css classes that contained spaces (google#6455)
Browse files Browse the repository at this point in the history
* fix: adding CSS classes

* fix: removing css classes

* fix: add a test for multiple icon classes

* chore: format
  • Loading branch information
BeksOmega authored Sep 28, 2022
1 parent f678531 commit 8530e6d
Show file tree
Hide file tree
Showing 26 changed files with 146 additions and 99 deletions.
4 changes: 2 additions & 2 deletions core/block_svg.ts
Original file line number Diff line number Diff line change
Expand Up @@ -778,10 +778,10 @@ export class BlockSvg extends Block implements IASTNodeLocationSvg,
(group as AnyDuringMigration).translate_ = '';
(group as AnyDuringMigration).skew_ = '';
common.draggingConnections.push(...this.getConnections_(true));
this.svgGroup_.classList.add('blocklyDragging');
dom.addClass(this.svgGroup_, 'blocklyDragging');
} else {
common.draggingConnections.length = 0;
this.svgGroup_.classList.remove('blocklyDragging');
dom.removeClass(this.svgGroup_, 'blocklyDragging');
}
// Recurse through all blocks attached under this one.
for (let i = 0; i < this.childBlocks_.length; i++) {
Expand Down
3 changes: 2 additions & 1 deletion core/contextmenu.ts
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ import type {BlockSvg} from './block_svg.js';
import * as browserEvents from './browser_events.js';
import * as clipboard from './clipboard.js';
import {config} from './config.js';
import * as dom from './utils/dom.js';
import type {ContextMenuOption, LegacyContextMenuOption} from './contextmenu_registry.js';
import * as eventUtils from './events/utils.js';
import {Menu} from './menu.js';
Expand Down Expand Up @@ -179,7 +180,7 @@ function createWidget_(menu: Menu) {
throw Error('Attempting to create a context menu when widget div is null');
}
const menuDom = menu.render(div);
menuDom.classList.add('blocklyContextMenu');
dom.addClass(menuDom, 'blocklyContextMenu');
// Prevent system context menu when right-clicking a Blockly context menu.
browserEvents.conditionalBind(
(menuDom as EventTarget), 'contextmenu', null, haltPropagation);
Expand Down
13 changes: 7 additions & 6 deletions core/dropdowndiv.ts
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ goog.declareModuleId('Blockly.dropDownDiv');

import type {BlockSvg} from './block_svg.js';
import * as common from './common.js';
import * as dom from './utils/dom.js';
import type {Field} from './field.js';
import * as math from './utils/math.js';
import {Rect} from './utils/rect.js';
Expand Down Expand Up @@ -138,10 +139,10 @@ export function createDom() {
// Handle focusin/out events to add a visual indicator when
// a child is focused or blurred.
div.addEventListener('focusin', function() {
div.classList.add('blocklyFocused');
dom.addClass(div, 'blocklyFocused');
});
div.addEventListener('focusout', function() {
div.classList.remove('blocklyFocused');
dom.removeClass(div, 'blocklyFocused');
});
}

Expand Down Expand Up @@ -311,10 +312,10 @@ export function show(
renderedClassName = mainWorkspace.getRenderer().getClassName();
themeClassName = mainWorkspace.getTheme().getClassName();
if (renderedClassName) {
div.classList.add(renderedClassName);
dom.addClass(div, renderedClassName);
}
if (themeClassName) {
div.classList.add(themeClassName);
dom.addClass(div, themeClassName);
}

// When we change `translate` multiple times in close succession,
Expand Down Expand Up @@ -595,11 +596,11 @@ export function hideWithoutAnimation() {
owner = null;

if (renderedClassName) {
div.classList.remove(renderedClassName);
dom.removeClass(div, renderedClassName);
renderedClassName = '';
}
if (themeClassName) {
div.classList.remove(themeClassName);
dom.removeClass(div, themeClassName);
themeClassName = '';
}
(common.getMainWorkspace() as WorkspaceSvg).markFocused();
Expand Down
8 changes: 4 additions & 4 deletions core/field.ts
Original file line number Diff line number Diff line change
Expand Up @@ -492,12 +492,12 @@ export abstract class Field implements IASTNodeLocationSvg,
return;
}
if (this.enabled_ && this.sourceBlock_.isEditable()) {
group.classList.add('blocklyEditableText');
group.classList.remove('blocklyNonEditableText');
dom.addClass(group, 'blocklyEditableText');
dom.removeClass(group, 'blocklyNonEditableText');
group.style.cursor = this.CURSOR;
} else {
group.classList.add('blocklyNonEditableText');
group.classList.remove('blocklyEditableText');
dom.addClass(group, 'blocklyNonEditableText');
dom.removeClass(group, 'blocklyEditableText');
group.style.cursor = '';
}
}
Expand Down
3 changes: 2 additions & 1 deletion core/field_checkbox.ts
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ goog.declareModuleId('Blockly.FieldCheckbox');
// Unused import preserved for side-effects. Remove if unneeded.
import './events/events_block_change.js';

import * as dom from './utils/dom.js';
import {FieldConfig, Field} from './field.js';
import * as fieldRegistry from './field_registry.js';
import type {Sentinel} from './utils/sentinel.js';
Expand Down Expand Up @@ -111,7 +112,7 @@ export class FieldCheckbox extends Field {
override initView() {
super.initView();

this.textElement_.classList.add('blocklyCheckbox');
dom.addClass(this.textElement_, 'blocklyCheckbox');
this.textElement_.style.display = this.value_ ? 'block' : 'none';
}

Expand Down
7 changes: 4 additions & 3 deletions core/field_colour.ts
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ import './events/events_block_change.js';
import {BlockSvg} from './block_svg.js';
import * as browserEvents from './browser_events.js';
import * as Css from './css.js';
import * as dom from './utils/dom.js';
import * as dropDownDiv from './dropdowndiv.js';
import {FieldConfig, Field} from './field.js';
import * as fieldRegistry from './field_registry.js';
Expand Down Expand Up @@ -438,7 +439,7 @@ export class FieldColour extends Field {
(this.picker_ as AnyDuringMigration)!.blur();
const highlighted = this.getHighlighted_();
if (highlighted) {
highlighted.classList.remove('blocklyColourHighlighted');
dom.removeClass(highlighted, 'blocklyColourHighlighted');
}
}

Expand Down Expand Up @@ -473,10 +474,10 @@ export class FieldColour extends Field {
// Unhighlight the current item.
const highlighted = this.getHighlighted_();
if (highlighted) {
highlighted.classList.remove('blocklyColourHighlighted');
dom.removeClass(highlighted, 'blocklyColourHighlighted');
}
// Highlight new item.
cell.classList.add('blocklyColourHighlighted');
dom.addClass(cell, 'blocklyColourHighlighted');
// Set new highlighted index.
this.highlightedIndex_ = index;

Expand Down
6 changes: 3 additions & 3 deletions core/field_dropdown.ts
Original file line number Diff line number Diff line change
Expand Up @@ -205,7 +205,7 @@ export class FieldDropdown extends Field {
}

if (this.borderRect_) {
this.borderRect_.classList.add('blocklyDropdownRect');
dom.addClass(this.borderRect_, 'blocklyDropdownRect');
}
}

Expand Down Expand Up @@ -276,7 +276,7 @@ export class FieldDropdown extends Field {
dropDownDiv.clearContent();
// Element gets created in render.
const menuElement = this.menu_!.render(dropDownDiv.getContentDiv());
menuElement.classList.add('blocklyDropdownMenu');
dom.addClass(menuElement, 'blocklyDropdownMenu');

if (this.getConstants()!.FIELD_DROPDOWN_COLOURED_DIV) {
const primaryColour = this.sourceBlock_.isShadow() ?
Expand Down Expand Up @@ -608,7 +608,7 @@ export class FieldDropdown extends Field {
private renderSelectedText_() {
// Retrieves the selected option to display through getText_.
this.textContent_.nodeValue = this.getDisplayText_();
this.textElement_.classList.add('blocklyDropdownText');
dom.addClass(this.textElement_, 'blocklyDropdownText');
this.textElement_.setAttribute('text-anchor', 'start');

// Height and width include the border rect.
Expand Down
7 changes: 4 additions & 3 deletions core/field_label.ts
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@
import * as goog from '../closure/goog/goog.js';
goog.declareModuleId('Blockly.FieldLabel');

import * as dom from './utils/dom.js';
import {FieldConfig, Field} from './field.js';
import * as fieldRegistry from './field_registry.js';
import * as parsing from './utils/parsing.js';
Expand Down Expand Up @@ -75,7 +76,7 @@ export class FieldLabel extends Field {
override initView() {
this.createTextElement_();
if (this.class_) {
this.textElement_.classList.add(this.class_);
dom.addClass(this.textElement_, this.class_);
}
}

Expand All @@ -101,10 +102,10 @@ export class FieldLabel extends Field {
setClass(cssClass: string|null) {
if (this.textElement_) {
if (this.class_) {
this.textElement_.classList.remove(this.class_);
dom.removeClass(this.textElement_, this.class_);
}
if (cssClass) {
this.textElement_.classList.add(cssClass);
dom.addClass(this.textElement_, cssClass);
}
}
this.class_ = cssClass;
Expand Down
8 changes: 4 additions & 4 deletions core/field_multilineinput.ts
Original file line number Diff line number Diff line change
Expand Up @@ -239,9 +239,9 @@ export class FieldMultilineInput extends FieldTextInput {
if (this.isBeingEdited_) {
const htmlInput = this.htmlInput_ as HTMLElement;
if (this.isOverflowedY_) {
htmlInput.classList.add('blocklyHtmlTextAreaInputOverflowedY');
dom.addClass(htmlInput, 'blocklyHtmlTextAreaInputOverflowedY');
} else {
htmlInput.classList.remove('blocklyHtmlTextAreaInputOverflowedY');
dom.removeClass(htmlInput, 'blocklyHtmlTextAreaInputOverflowedY');
}
}

Expand All @@ -258,10 +258,10 @@ export class FieldMultilineInput extends FieldTextInput {
}
const htmlInput = this.htmlInput_ as HTMLElement;
if (!this.isTextValid_) {
htmlInput.classList.add('blocklyInvalidInput');
dom.addClass(htmlInput, 'blocklyInvalidInput');
aria.setState(htmlInput, aria.State.INVALID, true);
} else {
htmlInput.classList.remove('blocklyInvalidInput');
dom.removeClass(htmlInput, 'blocklyInvalidInput');
aria.setState(htmlInput, aria.State.INVALID, false);
}
}
Expand Down
9 changes: 5 additions & 4 deletions core/field_textinput.ts
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ import './events/events_block_change.js';
import type {BlockSvg} from './block_svg.js';
import * as browserEvents from './browser_events.js';
import * as dialog from './dialog.js';
import * as dom from './utils/dom.js';
import * as dropDownDiv from './dropdowndiv.js';
import * as eventUtils from './events/utils.js';
import {FieldConfig, Field} from './field.js';
Expand Down Expand Up @@ -244,10 +245,10 @@ export class FieldTextInput extends Field {
this.resizeEditor_();
const htmlInput = this.htmlInput_ as HTMLElement;
if (!this.isTextValid_) {
htmlInput.classList.add('blocklyInvalidInput');
dom.addClass(htmlInput, 'blocklyInvalidInput');
aria.setState(htmlInput, aria.State.INVALID, true);
} else {
htmlInput.classList.remove('blocklyInvalidInput');
dom.removeClass(htmlInput, 'blocklyInvalidInput');
aria.setState(htmlInput, aria.State.INVALID, false);
}
}
Expand Down Expand Up @@ -331,7 +332,7 @@ export class FieldTextInput extends Field {
eventUtils.setGroup(true);
const div = WidgetDiv.getDiv();

this.getClickTarget_().classList.add('editing');
dom.addClass(this.getClickTarget_(), 'editing');

const htmlInput = (document.createElement('input'));
htmlInput.className = 'blocklyHtmlInput';
Expand Down Expand Up @@ -400,7 +401,7 @@ export class FieldTextInput extends Field {
style.boxShadow = '';
this.htmlInput_ = null;

this.getClickTarget_().classList.remove('editing');
dom.removeClass(this.getClickTarget_(), 'editing');
}

/**
Expand Down
2 changes: 1 addition & 1 deletion core/icon.ts
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,7 @@ export abstract class Icon {
this.iconGroup_ =
dom.createSvgElement(Svg.G, {'class': 'blocklyIconGroup'});
if (this.getBlock().isInFlyout) {
this.iconGroup_.classList.add('blocklyIconGroupReadonly');
dom.addClass(this.iconGroup_, 'blocklyIconGroupReadonly');
}
this.drawIcon_(this.iconGroup_);

Expand Down
4 changes: 2 additions & 2 deletions core/inject.ts
Original file line number Diff line number Diff line change
Expand Up @@ -172,11 +172,11 @@ function createMainWorkspace(
const injectionDiv = mainWorkspace.getInjectionDiv();
const rendererClassName = mainWorkspace.getRenderer().getClassName();
if (rendererClassName) {
injectionDiv.classList.add(rendererClassName);
dom.addClass(injectionDiv, rendererClassName);
}
const themeClassName = mainWorkspace.getTheme().getClassName();
if (themeClassName) {
injectionDiv.classList.add(themeClassName);
dom.addClass(injectionDiv, themeClassName);
}

if (!wsOptions.hasCategories && wsOptions.languageTree) {
Expand Down
5 changes: 3 additions & 2 deletions core/menu.ts
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ import * as browserEvents from './browser_events.js';
import type {MenuItem} from './menuitem.js';
import * as aria from './utils/aria.js';
import {Coordinate} from './utils/coordinate.js';
import * as dom from './utils/dom.js';
import {KeyCodes} from './utils/keycodes.js';
import type {Size} from './utils/size.js';
import * as style from './utils/style.js';
Expand Down Expand Up @@ -137,7 +138,7 @@ export class Menu {
const el = this.getElement();
if (el) {
el.focus({preventScroll: true});
el.classList.add('blocklyFocused');
dom.addClass(el, 'blocklyFocused');
}
}

Expand All @@ -146,7 +147,7 @@ export class Menu {
const el = this.getElement();
if (el) {
el.blur();
el.classList.remove('blocklyFocused');
dom.removeClass(el, 'blocklyFocused');
}
}

Expand Down
9 changes: 5 additions & 4 deletions core/menuitem.ts
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import * as goog from '../closure/goog/goog.js';
goog.declareModuleId('Blockly.MenuItem');

import * as aria from './utils/aria.js';
import * as dom from './utils/dom.js';
import * as idGenerator from './utils/idgenerator.js';


Expand Down Expand Up @@ -195,11 +196,11 @@ export class MenuItem {
const name = 'blocklyMenuItemHighlight';
const nameDep = 'goog-menuitem-highlight';
if (highlight) {
el.classList.add(name);
el.classList.add(nameDep);
dom.addClass(el, name);
dom.addClass(el, nameDep);
} else {
el.classList.remove(name);
el.classList.remove(nameDep);
dom.removeClass(el, name);
dom.removeClass(el, nameDep);
}
}
}
Expand Down
4 changes: 2 additions & 2 deletions core/mutator.ts
Original file line number Diff line number Diff line change
Expand Up @@ -238,13 +238,13 @@ export class Mutator extends Icon {
if (!this.getBlock().isInFlyout) {
if (this.getBlock().isEditable()) {
if (this.iconGroup_) {
this.iconGroup_.classList.remove('blocklyIconGroupReadonly');
dom.removeClass(this.iconGroup_, 'blocklyIconGroupReadonly');
}
} else {
// Close any mutator bubble. Icon is not clickable.
this.setVisible(false);
if (this.iconGroup_) {
this.iconGroup_.classList.add('blocklyIconGroupReadonly');
dom.addClass(this.iconGroup_, 'blocklyIconGroupReadonly');
}
}
}
Expand Down
4 changes: 2 additions & 2 deletions core/renderers/common/path_object.ts
Original file line number Diff line number Diff line change
Expand Up @@ -170,9 +170,9 @@ export class PathObject implements IPathObject {
return;
}
if (add) {
this.svgRoot.classList.add(className);
dom.addClass(this.svgRoot, className);
} else {
this.svgRoot.classList.remove(className);
dom.removeClass(this.svgRoot, className);
}
}

Expand Down
5 changes: 3 additions & 2 deletions core/theme_manager.ts
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ goog.declareModuleId('Blockly.ThemeManager');

import type {Theme} from './theme.js';
import * as arrayUtils from './utils/array.js';
import * as dom from './utils/dom.js';
import type {Workspace} from './workspace.js';
import type {WorkspaceSvg} from './workspace_svg.js';

Expand Down Expand Up @@ -62,12 +63,12 @@ export class ThemeManager {
if (prevTheme) {
const oldClassName = prevTheme.getClassName();
if (oldClassName) {
injectionDiv.classList.remove(oldClassName);
dom.removeClass(injectionDiv, oldClassName);
}
}
const newClassName = this.theme.getClassName();
if (newClassName) {
injectionDiv.classList.add(newClassName);
dom.addClass(injectionDiv, newClassName);
}
}

Expand Down
Loading

0 comments on commit 8530e6d

Please sign in to comment.