From a46e12b06b5e50b64b8c676d3ab16f96a658385b Mon Sep 17 00:00:00 2001 From: Rachel Fenichel Date: Tue, 25 Oct 2022 08:33:59 -0700 Subject: [PATCH] chore: remove underscores from menuitem and menu (#6567) * chore: remove underscores in menuitem.ts * chore: remove underscores in menu.ts * chore: format --- core/menu.ts | 169 +++++++++++++++++++++++------------------------ core/menuitem.ts | 67 +++++++++---------- 2 files changed, 114 insertions(+), 122 deletions(-) diff --git a/core/menu.ts b/core/menu.ts index 482785317ca..93edeb1dfa8 100644 --- a/core/menu.ts +++ b/core/menu.ts @@ -33,7 +33,7 @@ export class Menu { * (Nulls are never in the array, but typing the array as nullable prevents * the compiler from objecting to .indexOf(null)) */ - private readonly menuItems_: MenuItem[] = []; + private readonly menuItems: MenuItem[] = []; /** * Coordinates of the mousedown event that caused this menu to open. Used to @@ -46,28 +46,28 @@ export class Menu { * This is the element that we will listen to the real focus events on. * A value of null means no menu item is highlighted. */ - private highlightedItem_: MenuItem|null = null; + private highlightedItem: MenuItem|null = null; /** Mouse over event data. */ - private mouseOverHandler_: browserEvents.Data|null = null; + private mouseOverHandler: browserEvents.Data|null = null; /** Click event data. */ - private clickHandler_: browserEvents.Data|null = null; + private clickHandler: browserEvents.Data|null = null; /** Mouse enter event data. */ - private mouseEnterHandler_: browserEvents.Data|null = null; + private mouseEnterHandler: browserEvents.Data|null = null; /** Mouse leave event data. */ - private mouseLeaveHandler_: browserEvents.Data|null = null; + private mouseLeaveHandler: browserEvents.Data|null = null; /** Key down event data. */ - private onKeyDownHandler_: browserEvents.Data|null = null; + private onKeyDownHandler: browserEvents.Data|null = null; /** The menu's root DOM element. */ - private element_: HTMLDivElement|null = null; + private element: HTMLDivElement|null = null; /** ARIA name for this menu. */ - private roleName_: aria.Role|null = null; + private roleName: aria.Role|null = null; /** Constructs a new Menu instance. */ constructor() {} @@ -79,7 +79,7 @@ export class Menu { * @internal */ addChild(menuItem: MenuItem) { - this.menuItems_.push(menuItem); + this.menuItems.push(menuItem); } /** @@ -93,27 +93,27 @@ export class Menu { // goog-menu is deprecated, use blocklyMenu. May 2020. element.className = 'blocklyMenu goog-menu blocklyNonSelectable'; element.tabIndex = 0; - if (this.roleName_) { - aria.setRole(element, this.roleName_); + if (this.roleName) { + aria.setRole(element, this.roleName); } - this.element_ = element; + this.element = element; // Add menu items. - for (let i = 0, menuItem; menuItem = this.menuItems_[i]; i++) { + for (let i = 0, menuItem; menuItem = this.menuItems[i]; i++) { element.appendChild(menuItem.createDom()); } // Add event handlers. - this.mouseOverHandler_ = browserEvents.conditionalBind( - element, 'mouseover', this, this.handleMouseOver_, true); - this.clickHandler_ = browserEvents.conditionalBind( - element, 'click', this, this.handleClick_, true); - this.mouseEnterHandler_ = browserEvents.conditionalBind( - element, 'mouseenter', this, this.handleMouseEnter_, true); - this.mouseLeaveHandler_ = browserEvents.conditionalBind( - element, 'mouseleave', this, this.handleMouseLeave_, true); - this.onKeyDownHandler_ = browserEvents.conditionalBind( - element, 'keydown', this, this.handleKeyEvent_); + this.mouseOverHandler = browserEvents.conditionalBind( + element, 'mouseover', this, this.handleMouseOver, true); + this.clickHandler = browserEvents.conditionalBind( + element, 'click', this, this.handleClick, true); + this.mouseEnterHandler = browserEvents.conditionalBind( + element, 'mouseenter', this, this.handleMouseEnter, true); + this.mouseLeaveHandler = browserEvents.conditionalBind( + element, 'mouseleave', this, this.handleMouseLeave, true); + this.onKeyDownHandler = browserEvents.conditionalBind( + element, 'keydown', this, this.handleKeyEvent); container.appendChild(element); return element; @@ -126,7 +126,7 @@ export class Menu { * @internal */ getElement(): HTMLDivElement|null { - return this.element_; + return this.element; } /** @@ -143,7 +143,7 @@ export class Menu { } /** Blur the menu element. */ - private blur_() { + private blur() { const el = this.getElement(); if (el) { el.blur(); @@ -158,38 +158,38 @@ export class Menu { * @internal */ setRole(roleName: aria.Role) { - this.roleName_ = roleName; + this.roleName = roleName; } /** Dispose of this menu. */ dispose() { // Remove event handlers. - if (this.mouseOverHandler_) { - browserEvents.unbind(this.mouseOverHandler_); - this.mouseOverHandler_ = null; + if (this.mouseOverHandler) { + browserEvents.unbind(this.mouseOverHandler); + this.mouseOverHandler = null; } - if (this.clickHandler_) { - browserEvents.unbind(this.clickHandler_); - this.clickHandler_ = null; + if (this.clickHandler) { + browserEvents.unbind(this.clickHandler); + this.clickHandler = null; } - if (this.mouseEnterHandler_) { - browserEvents.unbind(this.mouseEnterHandler_); - this.mouseEnterHandler_ = null; + if (this.mouseEnterHandler) { + browserEvents.unbind(this.mouseEnterHandler); + this.mouseEnterHandler = null; } - if (this.mouseLeaveHandler_) { - browserEvents.unbind(this.mouseLeaveHandler_); - this.mouseLeaveHandler_ = null; + if (this.mouseLeaveHandler) { + browserEvents.unbind(this.mouseLeaveHandler); + this.mouseLeaveHandler = null; } - if (this.onKeyDownHandler_) { - browserEvents.unbind(this.onKeyDownHandler_); - this.onKeyDownHandler_ = null; + if (this.onKeyDownHandler) { + browserEvents.unbind(this.onKeyDownHandler); + this.onKeyDownHandler = null; } // Remove menu items. - for (let i = 0, menuItem; menuItem = this.menuItems_[i]; i++) { + for (let i = 0, menuItem; menuItem = this.menuItems[i]; i++) { menuItem.dispose(); } - this.element_ = null; + this.element = null; } // Child component management. @@ -201,7 +201,7 @@ export class Menu { * @param elem DOM element whose owner is to be returned. * @returns Menu item for which the DOM element belongs to. */ - private getMenuItem_(elem: Element): MenuItem|null { + private getMenuItem(elem: Element): MenuItem|null { const menuElem = this.getElement(); // Node might be the menu border (resulting in no associated menu item), or // a menu item's div, or some element within the menu item. @@ -211,7 +211,7 @@ export class Menu { while (currentElement && currentElement !== menuElem) { if (currentElement.classList.contains('blocklyMenuItem')) { // Having found a menu item's div, locate that menu item in this menu. - for (let i = 0, menuItem; menuItem = this.menuItems_[i]; i++) { + for (let i = 0, menuItem; menuItem = this.menuItems[i]; i++) { if (menuItem.getElement() === currentElement) { return menuItem; } @@ -231,14 +231,14 @@ export class Menu { * @internal */ setHighlighted(item: MenuItem|null) { - const currentHighlighted = this.highlightedItem_; + const currentHighlighted = this.highlightedItem; if (currentHighlighted) { currentHighlighted.setHighlighted(false); - this.highlightedItem_ = null; + this.highlightedItem = null; } if (item) { item.setHighlighted(true); - this.highlightedItem_ = item; + this.highlightedItem = item; // Bring the highlighted item into view. This has no effect if the menu is // not scrollable. const el = this.getElement() as Element; @@ -255,10 +255,10 @@ export class Menu { * @internal */ highlightNext() { - const index = this.highlightedItem_ ? - this.menuItems_.indexOf(this.highlightedItem_) : + const index = this.highlightedItem ? + this.menuItems.indexOf(this.highlightedItem) : -1; - this.highlightHelper_(index, 1); + this.highlightHelper(index, 1); } /** @@ -268,20 +268,20 @@ export class Menu { * @internal */ highlightPrevious() { - const index = this.highlightedItem_ ? - this.menuItems_.indexOf(this.highlightedItem_) : + const index = this.highlightedItem ? + this.menuItems.indexOf(this.highlightedItem) : -1; - this.highlightHelper_(index < 0 ? this.menuItems_.length : index, -1); + this.highlightHelper(index < 0 ? this.menuItems.length : index, -1); } /** Highlights the first highlightable item. */ - private highlightFirst_() { - this.highlightHelper_(-1, 1); + private highlightFirst() { + this.highlightHelper(-1, 1); } /** Highlights the last highlightable item. */ - private highlightLast_() { - this.highlightHelper_(this.menuItems_.length, -1); + private highlightLast() { + this.highlightHelper(this.menuItems.length, -1); } /** @@ -291,10 +291,10 @@ export class Menu { * @param startIndex Start index. * @param delta Step direction: 1 to go down, -1 to go up. */ - private highlightHelper_(startIndex: number, delta: number) { + private highlightHelper(startIndex: number, delta: number) { let index = startIndex + delta; let menuItem; - while (menuItem = this.menuItems_[index]) { + while (menuItem = this.menuItems[index]) { if (menuItem.isEnabled()) { this.setHighlighted(menuItem); break; @@ -310,12 +310,12 @@ export class Menu { * * @param e Mouse event to handle. */ - private handleMouseOver_(e: Event) { - const menuItem = this.getMenuItem_(e.target as Element); + private handleMouseOver(e: Event) { + const menuItem = this.getMenuItem(e.target as Element); if (menuItem) { if (menuItem.isEnabled()) { - if (this.highlightedItem_ !== menuItem) { + if (this.highlightedItem !== menuItem) { this.setHighlighted(menuItem); } } else { @@ -329,7 +329,7 @@ export class Menu { * * @param e Click event to handle. */ - private handleClick_(e: Event) { + private handleClick(e: Event) { const oldCoords = this.openingCoords; // Clear out the saved opening coords immediately so they're not used twice. this.openingCoords = null; @@ -351,7 +351,7 @@ export class Menu { } } - const menuItem = this.getMenuItem_(e.target as Element); + const menuItem = this.getMenuItem(e.target as Element); if (menuItem) { menuItem.performAction(); } @@ -362,7 +362,7 @@ export class Menu { * * @param _e Mouse event to handle. */ - private handleMouseEnter_(_e: Event) { + private handleMouseEnter(_e: Event) { this.focus(); } @@ -371,9 +371,9 @@ export class Menu { * * @param _e Mouse event to handle. */ - private handleMouseLeave_(_e: Event) { + private handleMouseLeave(_e: Event) { if (this.getElement()) { - this.blur_(); + this.blur(); this.setHighlighted(null); } } @@ -387,27 +387,20 @@ export class Menu { * * @param e Key event to handle. */ - private handleKeyEvent_(e: Event) { - if (!this.menuItems_.length) { + private handleKeyEvent(e: Event) { + if (!this.menuItems.length) { // Empty menu. return; } - // AnyDuringMigration because: Property 'altKey' does not exist on type - // 'Event'. AnyDuringMigration because: Property 'metaKey' does not exist - // on type 'Event'. AnyDuringMigration because: Property 'ctrlKey' does not - // exist on type 'Event'. AnyDuringMigration because: Property 'shiftKey' - // does not exist on type 'Event'. - if ((e as AnyDuringMigration).shiftKey || - (e as AnyDuringMigration).ctrlKey || - (e as AnyDuringMigration).metaKey || (e as AnyDuringMigration).altKey) { + const keyboardEvent = e as KeyboardEvent; + if (keyboardEvent.shiftKey || keyboardEvent.ctrlKey || + keyboardEvent.metaKey || keyboardEvent.altKey) { // Do not handle the key event if any modifier key is pressed. return; } - const highlighted = this.highlightedItem_; - // AnyDuringMigration because: Property 'keyCode' does not exist on type - // 'Event'. - switch ((e as AnyDuringMigration).keyCode) { + const highlighted = this.highlightedItem; + switch (keyboardEvent.keyCode) { case KeyCodes.ENTER: case KeyCodes.SPACE: if (highlighted) { @@ -425,12 +418,12 @@ export class Menu { case KeyCodes.PAGE_UP: case KeyCodes.HOME: - this.highlightFirst_(); + this.highlightFirst(); break; case KeyCodes.PAGE_DOWN: case KeyCodes.END: - this.highlightLast_(); + this.highlightLast(); break; default: @@ -449,10 +442,10 @@ export class Menu { * @internal */ getSize(): Size { - const menuDom = this.getElement(); - const menuSize = style.getSize(menuDom as Element); + const menuDom = this.getElement() as HTMLDivElement; + const menuSize = style.getSize(menuDom); // Recalculate height for the total content, not only box height. - menuSize.height = menuDom!.scrollHeight; + menuSize.height = menuDom.scrollHeight; return menuSize; } } diff --git a/core/menuitem.ts b/core/menuitem.ts index 3eec5ac69f2..ee9b2ad0ca9 100644 --- a/core/menuitem.ts +++ b/core/menuitem.ts @@ -24,28 +24,28 @@ import * as idGenerator from './utils/idgenerator.js'; */ export class MenuItem { /** Is the menu item clickable, as opposed to greyed-out. */ - private enabled_ = true; + private enabled = true; /** The DOM element for the menu item. */ - private element_: HTMLDivElement|null = null; + private element: HTMLDivElement|null = null; /** Whether the menu item is rendered right-to-left. */ - private rightToLeft_ = false; + private rightToLeft = false; /** ARIA name for this menu. */ - private roleName_: aria.Role|null = null; + private roleName: aria.Role|null = null; /** Is this menu item checkable. */ - private checkable_ = false; + private checkable = false; /** Is this menu item currently checked. */ - private checked_ = false; + private checked = false; /** Is this menu item currently highlighted. */ - private highlight_ = false; + private highlight = false; /** Bound function to call when this menu item is clicked. */ - private actionHandler_: Function|null = null; + private actionHandler: Function|null = null; /** * @param content Text caption to display as the content of the item, or a @@ -64,22 +64,22 @@ export class MenuItem { createDom(): Element { const element = (document.createElement('div')); element.id = idGenerator.getNextUniqueId(); - this.element_ = element; + this.element = element; // Set class and style // goog-menuitem* is deprecated, use blocklyMenuItem*. May 2020. element.className = 'blocklyMenuItem goog-menuitem ' + - (this.enabled_ ? '' : - 'blocklyMenuItemDisabled goog-menuitem-disabled ') + - (this.checked_ ? 'blocklyMenuItemSelected goog-option-selected ' : '') + - (this.highlight_ ? 'blocklyMenuItemHighlight goog-menuitem-highlight ' : - '') + - (this.rightToLeft_ ? 'blocklyMenuItemRtl goog-menuitem-rtl ' : ''); + (this.enabled ? '' : + 'blocklyMenuItemDisabled goog-menuitem-disabled ') + + (this.checked ? 'blocklyMenuItemSelected goog-option-selected ' : '') + + (this.highlight ? 'blocklyMenuItemHighlight goog-menuitem-highlight ' : + '') + + (this.rightToLeft ? 'blocklyMenuItemRtl goog-menuitem-rtl ' : ''); const content = (document.createElement('div')); content.className = 'blocklyMenuItemContent goog-menuitem-content'; // Add a checkbox for checkable menu items. - if (this.checkable_) { + if (this.checkable) { const checkbox = (document.createElement('div')); checkbox.className = 'blocklyMenuItemCheckbox goog-menuitem-checkbox'; content.appendChild(checkbox); @@ -93,20 +93,19 @@ export class MenuItem { element.appendChild(content); // Initialize ARIA role and state. - if (this.roleName_) { - aria.setRole(element, this.roleName_); + if (this.roleName) { + aria.setRole(element, this.roleName); } aria.setState( - element, aria.State.SELECTED, - this.checkable_ && this.checked_ || false); - aria.setState(element, aria.State.DISABLED, !this.enabled_); + element, aria.State.SELECTED, this.checkable && this.checked || false); + aria.setState(element, aria.State.DISABLED, !this.enabled); return element; } /** Dispose of this menu item. */ dispose() { - this.element_ = null; + this.element = null; } /** @@ -116,7 +115,7 @@ export class MenuItem { * @internal */ getElement(): Element|null { - return this.element_; + return this.element; } /** @@ -126,7 +125,7 @@ export class MenuItem { * @internal */ getId(): string { - return this.element_!.id; + return this.element!.id; } /** @@ -146,7 +145,7 @@ export class MenuItem { * @internal */ setRightToLeft(rtl: boolean) { - this.rightToLeft_ = rtl; + this.rightToLeft = rtl; } /** @@ -156,7 +155,7 @@ export class MenuItem { * @internal */ setRole(roleName: aria.Role) { - this.roleName_ = roleName; + this.roleName = roleName; } /** @@ -167,7 +166,7 @@ export class MenuItem { * @internal */ setCheckable(checkable: boolean) { - this.checkable_ = checkable; + this.checkable = checkable; } /** @@ -177,7 +176,7 @@ export class MenuItem { * @internal */ setChecked(checked: boolean) { - this.checked_ = checked; + this.checked = checked; } /** @@ -187,7 +186,7 @@ export class MenuItem { * @internal */ setHighlighted(highlight: boolean) { - this.highlight_ = highlight; + this.highlight = highlight; const el = this.getElement(); if (el && this.isEnabled()) { @@ -212,7 +211,7 @@ export class MenuItem { * @internal */ isEnabled(): boolean { - return this.enabled_; + return this.enabled; } /** @@ -222,7 +221,7 @@ export class MenuItem { * @internal */ setEnabled(enabled: boolean) { - this.enabled_ = enabled; + this.enabled = enabled; } /** @@ -232,8 +231,8 @@ export class MenuItem { * @internal */ performAction() { - if (this.isEnabled() && this.actionHandler_) { - this.actionHandler_(this); + if (this.isEnabled() && this.actionHandler) { + this.actionHandler(this); } } @@ -246,6 +245,6 @@ export class MenuItem { * @internal */ onAction(fn: (p1: MenuItem) => void, obj: object) { - this.actionHandler_ = fn.bind(obj); + this.actionHandler = fn.bind(obj); } }