From 042b235764e98e359d67672121170d487b618534 Mon Sep 17 00:00:00 2001 From: Aaron Dodson Date: Wed, 14 Jul 2021 14:52:17 -0700 Subject: [PATCH 1/5] Migrate core/utils/dom.js to ES6 const/let --- core/utils/dom.js | 42 +++++++++++++++++++++--------------------- 1 file changed, 21 insertions(+), 21 deletions(-) diff --git a/core/utils/dom.js b/core/utils/dom.js index 57843c8b9..049aa9f07 100644 --- a/core/utils/dom.js +++ b/core/utils/dom.js @@ -84,9 +84,9 @@ Blockly.utils.dom.canvasContext_ = null; * @template T */ Blockly.utils.dom.createSvgElement = function(name, attrs, opt_parent) { - var e = /** @type {T} */ + const e = /** @type {T} */ (document.createElementNS(Blockly.utils.dom.SVG_NS, String(name))); - for (var key in attrs) { + for (const key in attrs) { e.setAttribute(key, attrs[key]); } // IE defines a unique attribute "runtimeStyle", it is NOT applied to @@ -109,7 +109,7 @@ Blockly.utils.dom.createSvgElement = function(name, attrs, opt_parent) { * @return {boolean} True if class was added, false if already present. */ Blockly.utils.dom.addClass = function(element, className) { - var classes = element.getAttribute('class') || ''; + let classes = element.getAttribute('class') || ''; if ((' ' + classes + ' ').indexOf(' ' + className + ' ') != -1) { return false; } @@ -127,9 +127,9 @@ Blockly.utils.dom.addClass = function(element, className) { * element. */ Blockly.utils.dom.removeClasses = function(element, classNames) { - var classList = classNames.split(' '); - for (var i = 0; i < classList.length; i++) { - var cssName = classList[i]; + const classList = classNames.split(' '); + for (let i = 0; i < classList.length; i++) { + const cssName = classList[i]; Blockly.utils.dom.removeClass(element, cssName); } }; @@ -142,12 +142,12 @@ Blockly.utils.dom.removeClasses = function(element, classNames) { * @return {boolean} True if class was removed, false if never present. */ Blockly.utils.dom.removeClass = function(element, className) { - var classes = element.getAttribute('class'); + const classes = element.getAttribute('class'); if ((' ' + classes + ' ').indexOf(' ' + className + ' ') == -1) { return false; } - var classList = classes.split(/\s+/); - for (var i = 0; i < classList.length; i++) { + const classList = classes.split(/\s+/); + for (let i = 0; i < classList.length; i++) { if (!classList[i] || classList[i] == className) { classList.splice(i, 1); i--; @@ -169,7 +169,7 @@ Blockly.utils.dom.removeClass = function(element, className) { * @return {boolean} True if class exists, false otherwise. */ Blockly.utils.dom.hasClass = function(element, className) { - var classes = element.getAttribute('class'); + const classes = element.getAttribute('class'); return (' ' + classes + ' ').indexOf(' ' + className + ' ') != -1; }; @@ -190,8 +190,8 @@ Blockly.utils.dom.removeNode = function(node) { * @param {!Element} refNode Existing element to precede new node. */ Blockly.utils.dom.insertAfter = function(newNode, refNode) { - var siblingNode = refNode.nextSibling; - var parentNode = refNode.parentNode; + const siblingNode = refNode.nextSibling; + const parentNode = refNode.parentNode; if (!parentNode) { throw Error('Reference node has no parent.'); } @@ -253,8 +253,8 @@ Blockly.utils.dom.stopTextWidthCache = function() { * @return {number} Width of element. */ Blockly.utils.dom.getTextWidth = function(textElement) { - var key = textElement.textContent + '\n' + textElement.className.baseVal; - var width; + const key = textElement.textContent + '\n' + textElement.className.baseVal; + let width; // Return the cached width if it exists. if (Blockly.utils.dom.cacheWidths_) { @@ -316,9 +316,9 @@ Blockly.utils.dom.getFastTextWidth = function(textElement, */ Blockly.utils.dom.getFastTextWidthWithSizeString = function(textElement, fontSize, fontWeight, fontFamily) { - var text = textElement.textContent; - var key = text + '\n' + textElement.className.baseVal; - var width; + const text = textElement.textContent; + const key = text + '\n' + textElement.className.baseVal; + let width; // Return the cached width if it exists. if (Blockly.utils.dom.cacheWidths_) { @@ -330,7 +330,7 @@ Blockly.utils.dom.getFastTextWidthWithSizeString = function(textElement, if (!Blockly.utils.dom.canvasContext_) { // Inject the canvas element used for computing text widths. - var computeCanvas = document.createElement('canvas'); + const computeCanvas = document.createElement('canvas'); computeCanvas.className = 'blocklyComputeCanvas'; document.body.appendChild(computeCanvas); @@ -364,15 +364,15 @@ Blockly.utils.dom.getFastTextWidthWithSizeString = function(textElement, Blockly.utils.dom.measureFontMetrics = function(text, fontSize, fontWeight, fontFamily) { - var span = document.createElement('span'); + const span = document.createElement('span'); span.style.font = fontWeight + ' ' + fontSize + ' ' + fontFamily; span.textContent = text; - var block = document.createElement('div'); + const block = document.createElement('div'); block.style.width = '1px'; block.style.height = 0; - var div = document.createElement('div'); + const div = document.createElement('div'); div.setAttribute('style', 'position: fixed; top: 0; left: 0; display: flex;'); div.appendChild(span); div.appendChild(block); From 563defa3badcf64f8f18d8f5c1a4d52017b5313b Mon Sep 17 00:00:00 2001 From: Aaron Dodson Date: Wed, 14 Jul 2021 15:01:16 -0700 Subject: [PATCH 2/5] Migrate core/utils/dom.js to goog.module --- core/utils/dom.js | 113 ++++++++++++++++++++++++++++------------------ tests/deps.js | 2 +- 2 files changed, 69 insertions(+), 46 deletions(-) diff --git a/core/utils/dom.js b/core/utils/dom.js index 049aa9f07..7219bd93c 100644 --- a/core/utils/dom.js +++ b/core/utils/dom.js @@ -16,7 +16,8 @@ * @name Blockly.utils.dom * @namespace */ -goog.provide('Blockly.utils.dom'); +goog.module('Blockly.utils.dom'); +goog.module.declareLegacyNamespace(); goog.require('Blockly.utils.Svg'); goog.require('Blockly.utils.userAgent'); @@ -26,26 +27,26 @@ goog.require('Blockly.utils.userAgent'); * Required name space for SVG elements. * @const */ -Blockly.utils.dom.SVG_NS = 'http://www.w3.org/2000/svg'; +const SVG_NS = 'http://www.w3.org/2000/svg'; /** * Required name space for HTML elements. * @const */ -Blockly.utils.dom.HTML_NS = 'http://www.w3.org/1999/xhtml'; +const HTML_NS = 'http://www.w3.org/1999/xhtml'; /** * Required name space for XLINK elements. * @const */ -Blockly.utils.dom.XLINK_NS = 'http://www.w3.org/1999/xlink'; +const XLINK_NS = 'http://www.w3.org/1999/xlink'; /** * Node type constants. * https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType * @enum {number} */ -Blockly.utils.dom.NodeType = { +const NodeType = { ELEMENT_NODE: 1, TEXT_NODE: 3, COMMENT_NODE: 8, @@ -57,21 +58,21 @@ Blockly.utils.dom.NodeType = { * @type {Object} * @private */ -Blockly.utils.dom.cacheWidths_ = null; +let cacheWidths = null; /** * Number of current references to cache. * @type {number} * @private */ -Blockly.utils.dom.cacheReference_ = 0; +let cacheReference = 0; /** * A HTML canvas context used for computing text width. * @type {CanvasRenderingContext2D} * @private */ -Blockly.utils.dom.canvasContext_ = null; +let canvasContext = null; /** * Helper method for creating SVG elements. @@ -83,9 +84,9 @@ Blockly.utils.dom.canvasContext_ = null; * Blockly.utils.Svg * @template T */ -Blockly.utils.dom.createSvgElement = function(name, attrs, opt_parent) { +const createSvgElement = function(name, attrs, opt_parent) { const e = /** @type {T} */ - (document.createElementNS(Blockly.utils.dom.SVG_NS, String(name))); + (document.createElementNS(SVG_NS, String(name))); for (const key in attrs) { e.setAttribute(key, attrs[key]); } @@ -108,7 +109,7 @@ Blockly.utils.dom.createSvgElement = function(name, attrs, opt_parent) { * @param {string} className Name of class to add. * @return {boolean} True if class was added, false if already present. */ -Blockly.utils.dom.addClass = function(element, className) { +const addClass = function(element, className) { let classes = element.getAttribute('class') || ''; if ((' ' + classes + ' ').indexOf(' ' + className + ' ') != -1) { return false; @@ -126,11 +127,11 @@ Blockly.utils.dom.addClass = function(element, className) { * @param {string} classNames A string of one or multiple class names for an * element. */ -Blockly.utils.dom.removeClasses = function(element, classNames) { +const removeClasses = function(element, classNames) { const classList = classNames.split(' '); for (let i = 0; i < classList.length; i++) { const cssName = classList[i]; - Blockly.utils.dom.removeClass(element, cssName); + removeClass(element, cssName); } }; @@ -141,7 +142,7 @@ Blockly.utils.dom.removeClasses = function(element, classNames) { * @param {string} className Name of class to remove. * @return {boolean} True if class was removed, false if never present. */ -Blockly.utils.dom.removeClass = function(element, className) { +const removeClass = function(element, className) { const classes = element.getAttribute('class'); if ((' ' + classes + ' ').indexOf(' ' + className + ' ') == -1) { return false; @@ -168,7 +169,7 @@ Blockly.utils.dom.removeClass = function(element, className) { * @param {string} className Name of class to check. * @return {boolean} True if class exists, false otherwise. */ -Blockly.utils.dom.hasClass = function(element, className) { +const hasClass = function(element, className) { const classes = element.getAttribute('class'); return (' ' + classes + ' ').indexOf(' ' + className + ' ') != -1; }; @@ -179,7 +180,7 @@ Blockly.utils.dom.hasClass = function(element, className) { * @return {?Node} The node removed if removed; else, null. */ // Copied from Closure goog.dom.removeNode -Blockly.utils.dom.removeNode = function(node) { +const removeNode = function(node) { return node && node.parentNode ? node.parentNode.removeChild(node) : null; }; @@ -189,7 +190,7 @@ Blockly.utils.dom.removeNode = function(node) { * @param {!Element} newNode New element to insert. * @param {!Element} refNode Existing element to precede new node. */ -Blockly.utils.dom.insertAfter = function(newNode, refNode) { +const insertAfter = function(newNode, refNode) { const siblingNode = refNode.nextSibling; const parentNode = refNode.parentNode; if (!parentNode) { @@ -208,9 +209,9 @@ Blockly.utils.dom.insertAfter = function(newNode, refNode) { * @param {!Node} descendant The node to test presence of. * @return {boolean} Whether the parent node contains the descendant node. */ -Blockly.utils.dom.containsNode = function(parent, descendant) { +const containsNode = function(parent, descendant) { return !!(parent.compareDocumentPosition(descendant) & - Blockly.utils.dom.NodeType.DOCUMENT_POSITION_CONTAINED_BY); + NodeType.DOCUMENT_POSITION_CONTAINED_BY); }; /** @@ -220,7 +221,7 @@ Blockly.utils.dom.containsNode = function(parent, descendant) { * @param {!Element} element Element to which the CSS transform will be applied. * @param {string} transform The value of the CSS `transform` property. */ -Blockly.utils.dom.setCssTransform = function(element, transform) { +const setCssTransform = function(element, transform) { element.style['transform'] = transform; element.style['-webkit-transform'] = transform; }; @@ -229,10 +230,10 @@ Blockly.utils.dom.setCssTransform = function(element, transform) { * Start caching text widths. Every call to this function MUST also call * stopTextWidthCache. Caches must not survive between execution threads. */ -Blockly.utils.dom.startTextWidthCache = function() { - Blockly.utils.dom.cacheReference_++; - if (!Blockly.utils.dom.cacheWidths_) { - Blockly.utils.dom.cacheWidths_ = Object.create(null); +const startTextWidthCache = function() { + cacheReference++; + if (!cacheWidths) { + cacheWidths = Object.create(null); } }; @@ -240,10 +241,10 @@ Blockly.utils.dom.startTextWidthCache = function() { * Stop caching field widths. Unless caching was already on when the * corresponding call to startTextWidthCache was made. */ -Blockly.utils.dom.stopTextWidthCache = function() { - Blockly.utils.dom.cacheReference_--; - if (!Blockly.utils.dom.cacheReference_) { - Blockly.utils.dom.cacheWidths_ = null; +const stopTextWidthCache = function() { + cacheReference--; + if (!cacheReference) { + cacheWidths = null; } }; @@ -252,13 +253,13 @@ Blockly.utils.dom.stopTextWidthCache = function() { * @param {!Element} textElement An SVG 'text' element. * @return {number} Width of element. */ -Blockly.utils.dom.getTextWidth = function(textElement) { +const getTextWidth = function(textElement) { const key = textElement.textContent + '\n' + textElement.className.baseVal; let width; // Return the cached width if it exists. - if (Blockly.utils.dom.cacheWidths_) { - width = Blockly.utils.dom.cacheWidths_[key]; + if (cacheWidths) { + width = cacheWidths[key]; if (width) { return width; } @@ -280,8 +281,8 @@ Blockly.utils.dom.getTextWidth = function(textElement) { } // Cache the computed width and return. - if (Blockly.utils.dom.cacheWidths_) { - Blockly.utils.dom.cacheWidths_[key] = width; + if (cacheWidths) { + cacheWidths[key] = width; } return width; }; @@ -296,9 +297,9 @@ Blockly.utils.dom.getTextWidth = function(textElement) { * @param {string} fontFamily The font family to use. * @return {number} Width of element. */ -Blockly.utils.dom.getFastTextWidth = function(textElement, +const getFastTextWidth = function(textElement, fontSize, fontWeight, fontFamily) { - return Blockly.utils.dom.getFastTextWidthWithSizeString(textElement, + return getFastTextWidthWithSizeString(textElement, fontSize + 'pt', fontWeight, fontFamily); }; @@ -314,21 +315,21 @@ Blockly.utils.dom.getFastTextWidth = function(textElement, * @param {string} fontFamily The font family to use. * @return {number} Width of element. */ -Blockly.utils.dom.getFastTextWidthWithSizeString = function(textElement, +const getFastTextWidthWithSizeString = function(textElement, fontSize, fontWeight, fontFamily) { const text = textElement.textContent; const key = text + '\n' + textElement.className.baseVal; let width; // Return the cached width if it exists. - if (Blockly.utils.dom.cacheWidths_) { - width = Blockly.utils.dom.cacheWidths_[key]; + if (cacheWidths) { + width = cacheWidths[key]; if (width) { return width; } } - if (!Blockly.utils.dom.canvasContext_) { + if (!canvasContext) { // Inject the canvas element used for computing text widths. const computeCanvas = document.createElement('canvas'); computeCanvas.className = 'blocklyComputeCanvas'; @@ -337,18 +338,18 @@ Blockly.utils.dom.getFastTextWidthWithSizeString = function(textElement, // Initialize the HTML canvas context and set the font. // The context font must match blocklyText's fontsize and font-family // set in CSS. - Blockly.utils.dom.canvasContext_ = computeCanvas.getContext('2d'); + canvasContext = computeCanvas.getContext('2d'); } // Set the desired font size and family. - Blockly.utils.dom.canvasContext_.font = + canvasContext.font = fontWeight + ' ' + fontSize + ' ' + fontFamily; // Measure the text width using the helper canvas context. - width = Blockly.utils.dom.canvasContext_.measureText(text).width; + width = canvasContext.measureText(text).width; // Cache the computed width and return. - if (Blockly.utils.dom.cacheWidths_) { - Blockly.utils.dom.cacheWidths_[key] = width; + if (cacheWidths) { + cacheWidths[key] = width; } return width; }; @@ -361,7 +362,7 @@ Blockly.utils.dom.getFastTextWidthWithSizeString = function(textElement, * @param {string} fontFamily The font family to use. * @return {{height: number, baseline: number}} Font measurements. */ -Blockly.utils.dom.measureFontMetrics = function(text, fontSize, fontWeight, +const measureFontMetrics = function(text, fontSize, fontWeight, fontFamily) { const span = document.createElement('span'); @@ -389,3 +390,25 @@ Blockly.utils.dom.measureFontMetrics = function(text, fontSize, fontWeight, } return result; }; + +exports = { + SVG_NS, + HTML_NS, + XLINK_NS, + NodeType, + createSvgElement, + addClass, + removeClasses, + removeClass, + hasClass, + removeNode, + insertAfter, + containsNode, + setCssTransform, + startTextWidthCache, + stopTextWidthCache, + getTextWidth, + getFastTextWidth, + getFastTextWidthWithSizeString, + measureFontMetrics, +}; diff --git a/tests/deps.js b/tests/deps.js index 4cb0f6fd3..dc28906b6 100644 --- a/tests/deps.js +++ b/tests/deps.js @@ -173,7 +173,7 @@ goog.addDependency('../../core/utils/aria.js', ['Blockly.utils.aria'], []); goog.addDependency('../../core/utils/colour.js', ['Blockly.utils.colour'], []); goog.addDependency('../../core/utils/coordinate.js', ['Blockly.utils.Coordinate'], []); goog.addDependency('../../core/utils/deprecation.js', ['Blockly.utils.deprecation'], []); -goog.addDependency('../../core/utils/dom.js', ['Blockly.utils.dom'], ['Blockly.utils.Svg', 'Blockly.utils.userAgent']); +goog.addDependency('../../core/utils/dom.js', ['Blockly.utils.dom'], ['Blockly.utils.Svg', 'Blockly.utils.userAgent'], {'lang': 'es6', 'module': 'goog'}); goog.addDependency('../../core/utils/global.js', ['Blockly.utils.global'], []); goog.addDependency('../../core/utils/idgenerator.js', ['Blockly.utils.IdGenerator'], []); goog.addDependency('../../core/utils/keycodes.js', ['Blockly.utils.KeyCodes'], []); From 1d8f6e903c2a74bc4ba9e2eeb0e563becd0ae33c Mon Sep 17 00:00:00 2001 From: Aaron Dodson Date: Wed, 14 Jul 2021 15:38:35 -0700 Subject: [PATCH 3/5] Migrate core/utils/dom.js to named requires --- core/utils/dom.js | 11 +++++------ tests/deps.js | 2 +- 2 files changed, 6 insertions(+), 7 deletions(-) diff --git a/core/utils/dom.js b/core/utils/dom.js index 7219bd93c..192aba58e 100644 --- a/core/utils/dom.js +++ b/core/utils/dom.js @@ -19,8 +19,8 @@ goog.module('Blockly.utils.dom'); goog.module.declareLegacyNamespace(); -goog.require('Blockly.utils.Svg'); -goog.require('Blockly.utils.userAgent'); +const Svg = goog.require('Blockly.utils.Svg'); +const userAgent = goog.require('Blockly.utils.userAgent'); /** @@ -76,12 +76,11 @@ let canvasContext = null; /** * Helper method for creating SVG elements. - * @param {string|Blockly.utils.Svg} name Element's tag name. + * @param {string|Svg} name Element's tag name. * @param {!Object} attrs Dictionary of attribute names and values. * @param {Element=} opt_parent Optional parent on which to append the element. * @return {T} Newly created SVG element. The return type is {!SVGElement} if - * name is a string or a more specific type if it a member of - * Blockly.utils.Svg + * name is a string or a more specific type if it a member of Svg. * @template T */ const createSvgElement = function(name, attrs, opt_parent) { @@ -267,7 +266,7 @@ const getTextWidth = function(textElement) { // Attempt to compute fetch the width of the SVG text element. try { - if (Blockly.utils.userAgent.IE || Blockly.utils.userAgent.EDGE) { + if (userAgent.IE || userAgent.EDGE) { width = textElement.getBBox().width; } else { width = textElement.getComputedTextLength(); diff --git a/tests/deps.js b/tests/deps.js index dc28906b6..b8b42f583 100644 --- a/tests/deps.js +++ b/tests/deps.js @@ -173,7 +173,7 @@ goog.addDependency('../../core/utils/aria.js', ['Blockly.utils.aria'], []); goog.addDependency('../../core/utils/colour.js', ['Blockly.utils.colour'], []); goog.addDependency('../../core/utils/coordinate.js', ['Blockly.utils.Coordinate'], []); goog.addDependency('../../core/utils/deprecation.js', ['Blockly.utils.deprecation'], []); -goog.addDependency('../../core/utils/dom.js', ['Blockly.utils.dom'], ['Blockly.utils.Svg', 'Blockly.utils.userAgent'], {'lang': 'es6', 'module': 'goog'}); +goog.addDependency('../../core/utils/dom.js', ['Blockly.utils.dom'], ['Blockly.utils.userAgent'], {'lang': 'es6', 'module': 'goog'}); goog.addDependency('../../core/utils/global.js', ['Blockly.utils.global'], []); goog.addDependency('../../core/utils/idgenerator.js', ['Blockly.utils.IdGenerator'], []); goog.addDependency('../../core/utils/keycodes.js', ['Blockly.utils.KeyCodes'], []); From 07bd3b3c799fd99aa02ce3c08462bd312925c501 Mon Sep 17 00:00:00 2001 From: Aaron Dodson Date: Thu, 15 Jul 2021 08:42:28 -0700 Subject: [PATCH 4/5] clang-format core/utils/dom.js --- core/utils/dom.js | 24 +++++++++++------------- 1 file changed, 11 insertions(+), 13 deletions(-) diff --git a/core/utils/dom.js b/core/utils/dom.js index 192aba58e..0e0480c0f 100644 --- a/core/utils/dom.js +++ b/core/utils/dom.js @@ -209,8 +209,9 @@ const insertAfter = function(newNode, refNode) { * @return {boolean} Whether the parent node contains the descendant node. */ const containsNode = function(parent, descendant) { - return !!(parent.compareDocumentPosition(descendant) & - NodeType.DOCUMENT_POSITION_CONTAINED_BY); + return !!( + parent.compareDocumentPosition(descendant) & + NodeType.DOCUMENT_POSITION_CONTAINED_BY); }; /** @@ -296,10 +297,10 @@ const getTextWidth = function(textElement) { * @param {string} fontFamily The font family to use. * @return {number} Width of element. */ -const getFastTextWidth = function(textElement, - fontSize, fontWeight, fontFamily) { - return getFastTextWidthWithSizeString(textElement, - fontSize + 'pt', fontWeight, fontFamily); +const getFastTextWidth = function( + textElement, fontSize, fontWeight, fontFamily) { + return getFastTextWidthWithSizeString( + textElement, fontSize + 'pt', fontWeight, fontFamily); }; /** @@ -314,8 +315,8 @@ const getFastTextWidth = function(textElement, * @param {string} fontFamily The font family to use. * @return {number} Width of element. */ -const getFastTextWidthWithSizeString = function(textElement, - fontSize, fontWeight, fontFamily) { +const getFastTextWidthWithSizeString = function( + textElement, fontSize, fontWeight, fontFamily) { const text = textElement.textContent; const key = text + '\n' + textElement.className.baseVal; let width; @@ -340,8 +341,7 @@ const getFastTextWidthWithSizeString = function(textElement, canvasContext = computeCanvas.getContext('2d'); } // Set the desired font size and family. - canvasContext.font = - fontWeight + ' ' + fontSize + ' ' + fontFamily; + canvasContext.font = fontWeight + ' ' + fontSize + ' ' + fontFamily; // Measure the text width using the helper canvas context. width = canvasContext.measureText(text).width; @@ -361,9 +361,7 @@ const getFastTextWidthWithSizeString = function(textElement, * @param {string} fontFamily The font family to use. * @return {{height: number, baseline: number}} Font measurements. */ -const measureFontMetrics = function(text, fontSize, fontWeight, - fontFamily) { - +const measureFontMetrics = function(text, fontSize, fontWeight, fontFamily) { const span = document.createElement('span'); span.style.font = fontWeight + ' ' + fontSize + ' ' + fontFamily; span.textContent = text; From f0fc360bfa8849cac38f68988f3f1370797ecac8 Mon Sep 17 00:00:00 2001 From: Aaron Dodson Date: Tue, 20 Jul 2021 11:30:09 -0700 Subject: [PATCH 5/5] Inline otherwise-unused variable in core/utils/dom.js --- core/utils/dom.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/core/utils/dom.js b/core/utils/dom.js index 0e0480c0f..5ec684acf 100644 --- a/core/utils/dom.js +++ b/core/utils/dom.js @@ -129,8 +129,7 @@ const addClass = function(element, className) { const removeClasses = function(element, classNames) { const classList = classNames.split(' '); for (let i = 0; i < classList.length; i++) { - const cssName = classList[i]; - removeClass(element, cssName); + removeClass(element, classList[i]); } };