mirror of
https://github.com/material-components/material-web.git
synced 2024-09-11 13:46:10 +03:00
chore: rename e
to event
PiperOrigin-RevId: 549039407
This commit is contained in:
parent
243e231a13
commit
10f60d23e0
@ -179,7 +179,7 @@ export abstract class Button extends LitElement {
|
||||
this.handleSlotChange}"></slot>`;
|
||||
}
|
||||
|
||||
private handleClick(e: MouseEvent) {
|
||||
private handleClick(event: MouseEvent) {
|
||||
if (this.isRedispatchingEvent) {
|
||||
return;
|
||||
}
|
||||
@ -192,9 +192,9 @@ export abstract class Button extends LitElement {
|
||||
if (!(isSubmit || isReset)) {
|
||||
return;
|
||||
}
|
||||
e.stopPropagation();
|
||||
event.stopPropagation();
|
||||
this.isRedispatchingEvent = true;
|
||||
const prevented = !redispatchEvent(this, e);
|
||||
const prevented = !redispatchEvent(this, event);
|
||||
this.isRedispatchingEvent = false;
|
||||
if (prevented) {
|
||||
return;
|
||||
|
@ -30,8 +30,8 @@ export interface StoryKnobs {
|
||||
supportingText: string;
|
||||
}
|
||||
|
||||
function clickHandler(e: Event) {
|
||||
((e.target as Element).nextElementSibling as MdDialog)?.show();
|
||||
function clickHandler(event: Event) {
|
||||
((event.target as Element).nextElementSibling as MdDialog)?.show();
|
||||
}
|
||||
|
||||
|
||||
|
@ -440,7 +440,7 @@ export class Dialog extends LitElement {
|
||||
/* Live media query for matching user specified fullscreen breakpoint. */
|
||||
private fullscreenQuery?: MediaQueryList;
|
||||
private fullscreenQueryListener:
|
||||
((e: MediaQueryListEvent) => void)|undefined = undefined;
|
||||
((event: MediaQueryListEvent) => void)|undefined = undefined;
|
||||
private updateFullscreen() {
|
||||
if (this.fullscreenQuery !== undefined) {
|
||||
this.fullscreenQuery.removeEventListener(
|
||||
@ -462,15 +462,15 @@ export class Dialog extends LitElement {
|
||||
|
||||
// handles native close/cancel events and we just ensure
|
||||
// internal state is in sync.
|
||||
private handleDialogDismiss(e: Event) {
|
||||
if (e.type === 'cancel') {
|
||||
private handleDialogDismiss(event: Event) {
|
||||
if (event.type === 'cancel') {
|
||||
this.currentAction = this.escapeKeyAction;
|
||||
// Prevents the <dialog> element from closing when
|
||||
// `escapeKeyAction` is set to an empty string.
|
||||
// It also early returns and avoids <md-dialog> internal state
|
||||
// changes.
|
||||
if (this.escapeKeyAction === '') {
|
||||
e.preventDefault();
|
||||
event.preventDefault();
|
||||
return;
|
||||
}
|
||||
}
|
||||
@ -479,17 +479,17 @@ export class Dialog extends LitElement {
|
||||
this.open = false;
|
||||
this.opening = false;
|
||||
this.closing = false;
|
||||
redispatchEvent(this, e);
|
||||
redispatchEvent(this, event);
|
||||
}
|
||||
|
||||
private handleDialogClick(e: Event) {
|
||||
private handleDialogClick(event: Event) {
|
||||
if (!this.open) {
|
||||
return;
|
||||
}
|
||||
this.currentAction =
|
||||
(e.target as Element).getAttribute(this.actionAttribute) ??
|
||||
(event.target as Element).getAttribute(this.actionAttribute) ??
|
||||
(!this.modeless && this.containerElement &&
|
||||
!e.composedPath().includes(this.containerElement) ?
|
||||
!event.composedPath().includes(this.containerElement) ?
|
||||
this.scrimClickAction :
|
||||
'');
|
||||
if (this.currentAction !== '') {
|
||||
@ -525,29 +525,30 @@ export class Dialog extends LitElement {
|
||||
this.getFocusElement()?.blur();
|
||||
}
|
||||
|
||||
private canStartDrag(e: PointerEvent) {
|
||||
if (this.draggable === false || e.defaultPrevented || !(e.buttons & 1) ||
|
||||
!this.headerElement || !e.composedPath().includes(this.headerElement)) {
|
||||
private canStartDrag(event: PointerEvent) {
|
||||
if (this.draggable === false || event.defaultPrevented ||
|
||||
!(event.buttons & 1) || !this.headerElement ||
|
||||
!event.composedPath().includes(this.headerElement)) {
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
private handlePointerMove(e: PointerEvent) {
|
||||
if (!this.dragging && !this.canStartDrag(e) || !this.containerElement) {
|
||||
private handlePointerMove(event: PointerEvent) {
|
||||
if (!this.dragging && !this.canStartDrag(event) || !this.containerElement) {
|
||||
return;
|
||||
}
|
||||
const {top, left, height, width} =
|
||||
this.containerElement.getBoundingClientRect();
|
||||
if (!this.dragging) {
|
||||
this.containerElement.setPointerCapture(e.pointerId);
|
||||
this.containerElement.setPointerCapture(event.pointerId);
|
||||
this.dragging = true;
|
||||
const {x, y} = e;
|
||||
const {x, y} = event;
|
||||
this.dragInfo = [x, y, top, left];
|
||||
}
|
||||
const [sx, sy, st, sl] = this.dragInfo ?? [0, 0, 0, 0];
|
||||
const dx = e.x - sx;
|
||||
const dy = e.y - sy;
|
||||
const dx = event.x - sx;
|
||||
const dy = event.y - sy;
|
||||
const ml = window.innerWidth - width - this.dragMargin;
|
||||
const mt = window.innerHeight - height - this.dragMargin;
|
||||
const l = Math.max(this.dragMargin, Math.min(ml, dx + sl));
|
||||
@ -556,11 +557,11 @@ export class Dialog extends LitElement {
|
||||
this.style.setProperty('--_container-drag-block-start', `${t}px`);
|
||||
}
|
||||
|
||||
private handleDragEnd(e: PointerEvent) {
|
||||
private handleDragEnd(event: PointerEvent) {
|
||||
if (!this.dragging) {
|
||||
return;
|
||||
}
|
||||
this.containerElement?.releasePointerCapture(e.pointerId);
|
||||
this.containerElement?.releasePointerCapture(event.pointerId);
|
||||
this.dragging = false;
|
||||
this.dragInfo = undefined;
|
||||
}
|
||||
|
@ -115,8 +115,8 @@ export abstract class SharedFab extends LitElement {
|
||||
</span>`;
|
||||
}
|
||||
|
||||
private onSlotchange(e: Event) {
|
||||
const slotEl = e.target as HTMLSlotElement;
|
||||
private onSlotchange(event: Event) {
|
||||
const slotEl = event.target as HTMLSlotElement;
|
||||
const slottedEls = slotEl.assignedElements({flatten: true});
|
||||
this.hasIcon = slottedEls.length !== 0;
|
||||
}
|
||||
|
@ -72,8 +72,8 @@ export class NavigationDrawerModal extends LitElement {
|
||||
}
|
||||
}
|
||||
|
||||
private handleKeyDown(e: KeyboardEvent) {
|
||||
if (e.code === 'Escape') {
|
||||
private handleKeyDown(event: KeyboardEvent) {
|
||||
if (event.code === 'Escape') {
|
||||
this.opened = false;
|
||||
}
|
||||
}
|
||||
|
@ -64,8 +64,8 @@ export class SegmentedButtonSet extends LitElement {
|
||||
}
|
||||
}
|
||||
|
||||
private handleSegmentedButtonInteraction(e: CustomEvent) {
|
||||
const index = this.buttons.indexOf(e.target as SegmentedButton);
|
||||
private handleSegmentedButtonInteraction(event: CustomEvent) {
|
||||
const index = this.buttons.indexOf(event.target as SegmentedButton);
|
||||
this.toggleSelection(index);
|
||||
}
|
||||
|
||||
|
@ -92,8 +92,8 @@ export class List extends LitElement {
|
||||
* The content to be slotted into the list.
|
||||
*/
|
||||
private renderContent() {
|
||||
return html`<span><slot @click=${(e: Event) => {
|
||||
e.stopPropagation();
|
||||
return html`<span><slot @click=${(event: Event) => {
|
||||
event.stopPropagation();
|
||||
}}></slot></span>`;
|
||||
}
|
||||
|
||||
|
@ -240,12 +240,13 @@ const menuWithoutButton: MaterialStoryInit<StoryKnobs> = {
|
||||
};
|
||||
|
||||
function displayCloseEvent(outputRef: Ref<HTMLElement>) {
|
||||
return (e: CloseMenuEvent) => {
|
||||
return (event: CloseMenuEvent) => {
|
||||
if (!outputRef.value) return;
|
||||
|
||||
outputRef.value.innerText = `Closed by item(s) with text: ${
|
||||
JSON.stringify(e.itemPath.map(
|
||||
item => item.headline))} For reason: ${JSON.stringify(e.reason)}`;
|
||||
JSON.stringify(event.itemPath.map(
|
||||
item =>
|
||||
item.headline))} For reason: ${JSON.stringify(event.reason)}`;
|
||||
};
|
||||
}
|
||||
|
||||
@ -311,7 +312,7 @@ function renderSubMenu(
|
||||
|
||||
function renderMenu(
|
||||
knobs: StoryKnobs, anchorRef: Ref<HTMLElement>, menuRef: Ref<MdMenu>,
|
||||
onClose: (e: CloseMenuEvent) => void, hasOverflow: boolean,
|
||||
onClose: (event: CloseMenuEvent) => void, hasOverflow: boolean,
|
||||
...content: unknown[]) {
|
||||
return html`
|
||||
<md-menu
|
||||
|
@ -309,18 +309,18 @@ export abstract class Menu extends LitElement {
|
||||
};
|
||||
}
|
||||
|
||||
private async handleFocusout(e: FocusEvent) {
|
||||
private async handleFocusout(event: FocusEvent) {
|
||||
if (this.stayOpenOnFocusout) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Stop propagation to prevent nested menus from interfering with each other
|
||||
e.stopPropagation();
|
||||
event.stopPropagation();
|
||||
|
||||
if (e.relatedTarget) {
|
||||
if (event.relatedTarget) {
|
||||
// Don't close the menu if we are switching focus between menu,
|
||||
// md-menu-item, and md-list
|
||||
if (isElementInSubtree(e.relatedTarget, this)) {
|
||||
if (isElementInSubtree(event.relatedTarget, this)) {
|
||||
return;
|
||||
}
|
||||
}
|
||||
@ -339,14 +339,14 @@ export abstract class Menu extends LitElement {
|
||||
// istelf. Specifically useful for the case where typeahead encounters a space
|
||||
// and we don't want the menu item to close the menu.
|
||||
@eventOptions({capture: true})
|
||||
private handleListKeydown(e: KeyboardEvent) {
|
||||
if (e.target === this.listElement && !e.defaultPrevented &&
|
||||
isClosableKey(e.code)) {
|
||||
e.preventDefault();
|
||||
private handleListKeydown(event: KeyboardEvent) {
|
||||
if (event.target === this.listElement && !event.defaultPrevented &&
|
||||
isClosableKey(event.code)) {
|
||||
event.preventDefault();
|
||||
this.close();
|
||||
}
|
||||
|
||||
this.typeaheadController.onKeydown(e);
|
||||
this.typeaheadController.onKeydown(event);
|
||||
}
|
||||
|
||||
/**
|
||||
@ -638,8 +638,8 @@ export abstract class Menu extends LitElement {
|
||||
}
|
||||
}
|
||||
|
||||
private readonly onWindowClick = (e: MouseEvent) => {
|
||||
if (!this.stayOpenOnOutsideClick && !e.composedPath().includes(this)) {
|
||||
private readonly onWindowClick = (event: MouseEvent) => {
|
||||
if (!this.stayOpenOnOutsideClick && !event.composedPath().includes(this)) {
|
||||
this.open = false;
|
||||
}
|
||||
};
|
||||
@ -648,8 +648,8 @@ export abstract class Menu extends LitElement {
|
||||
this.close();
|
||||
}
|
||||
|
||||
private onDeactivateItems(e: Event) {
|
||||
e.stopPropagation();
|
||||
private onDeactivateItems(event: Event) {
|
||||
event.stopPropagation();
|
||||
const items = this.items;
|
||||
for (const item of items) {
|
||||
item.active = false;
|
||||
@ -657,27 +657,27 @@ export abstract class Menu extends LitElement {
|
||||
}
|
||||
}
|
||||
|
||||
private handleDeactivateTypeahead(e: DeactivateTypeaheadEvent) {
|
||||
private handleDeactivateTypeahead(event: DeactivateTypeaheadEvent) {
|
||||
// stopPropagation so that this does not deactivate any typeaheads in menus
|
||||
// nested above it e.g. md-sub-menu-item
|
||||
e.stopPropagation();
|
||||
event.stopPropagation();
|
||||
this.typeaheadActive = false;
|
||||
}
|
||||
|
||||
private handleActivateTypeahead(e: ActivateTypeaheadEvent) {
|
||||
private handleActivateTypeahead(event: ActivateTypeaheadEvent) {
|
||||
// stopPropagation so that this does not activate any typeaheads in menus
|
||||
// nested above it e.g. md-sub-menu-item
|
||||
e.stopPropagation();
|
||||
event.stopPropagation();
|
||||
this.typeaheadActive = true;
|
||||
}
|
||||
|
||||
private handleStayOpenOnFocusout(e: Event) {
|
||||
e.stopPropagation();
|
||||
private handleStayOpenOnFocusout(event: Event) {
|
||||
event.stopPropagation();
|
||||
this.stayOpenOnFocusout = true;
|
||||
}
|
||||
|
||||
private handleCloseOnFocusout(e: Event) {
|
||||
e.stopPropagation();
|
||||
private handleCloseOnFocusout(event: Event) {
|
||||
event.stopPropagation();
|
||||
this.stayOpenOnFocusout = false;
|
||||
}
|
||||
|
||||
|
@ -40,12 +40,12 @@ export class MenuItemEl extends ListItemEl implements MenuItem {
|
||||
new DefaultCloseMenuEvent(this, {kind: CLOSE_REASON.CLICK_SELECTION}));
|
||||
}
|
||||
|
||||
protected override onKeydown(e: KeyboardEvent) {
|
||||
protected override onKeydown(event: KeyboardEvent) {
|
||||
if (this.keepOpen) return;
|
||||
const keyCode = e.code;
|
||||
const keyCode = event.code;
|
||||
|
||||
if (!e.defaultPrevented && isClosableKey(keyCode)) {
|
||||
e.preventDefault();
|
||||
if (!event.defaultPrevented && isClosableKey(keyCode)) {
|
||||
event.preventDefault();
|
||||
this.dispatchEvent(new DefaultCloseMenuEvent(
|
||||
this, {kind: CLOSE_REASON.KEYDOWN, key: keyCode}));
|
||||
}
|
||||
|
@ -33,14 +33,14 @@ export class MenuItemLink extends ListItemLink implements MenuItem {
|
||||
new DefaultCloseMenuEvent(this, {kind: CLOSE_REASON.CLICK_SELECTION}));
|
||||
}
|
||||
|
||||
protected override onKeydown(e: KeyboardEvent) {
|
||||
protected override onKeydown(event: KeyboardEvent) {
|
||||
if (this.keepOpen) return;
|
||||
|
||||
const keyCode = e.code;
|
||||
const keyCode = event.code;
|
||||
// Do not preventDefault on enter or else it will prevent from opening links
|
||||
if (!e.defaultPrevented && isClosableKey(keyCode) &&
|
||||
if (!event.defaultPrevented && isClosableKey(keyCode) &&
|
||||
keyCode !== SELECTION_KEY.ENTER) {
|
||||
e.preventDefault();
|
||||
event.preventDefault();
|
||||
this.dispatchEvent(new DefaultCloseMenuEvent(
|
||||
this, {kind: CLOSE_REASON.KEYDOWN, key: keyCode}));
|
||||
}
|
||||
|
@ -12,8 +12,8 @@ import {Corner, Menu} from '../menu.js';
|
||||
import {MenuItemEl} from '../menuitem/menu-item.js';
|
||||
import {ActivateTypeaheadEvent, CLOSE_REASON, CloseMenuEvent, CloseOnFocusoutEvent, DeactivateItemsEvent, DeactivateTypeaheadEvent, KEYDOWN_CLOSE_KEYS, NAVIGABLE_KEY, SELECTION_KEY, StayOpenOnFocusoutEvent} from '../shared.js';
|
||||
|
||||
function stopPropagation(e: Event) {
|
||||
e.stopPropagation();
|
||||
function stopPropagation(event: Event) {
|
||||
event.stopPropagation();
|
||||
}
|
||||
|
||||
/**
|
||||
@ -108,16 +108,16 @@ export class SubMenuItem extends MenuItemEl {
|
||||
/**
|
||||
* On item keydown handles opening the submenu.
|
||||
*/
|
||||
protected override onKeydown(e: KeyboardEvent) {
|
||||
const shouldOpenSubmenu = this.isSubmenuOpenKey(e.code);
|
||||
protected override onKeydown(event: KeyboardEvent) {
|
||||
const shouldOpenSubmenu = this.isSubmenuOpenKey(event.code);
|
||||
|
||||
if (e.code === SELECTION_KEY.SPACE) {
|
||||
if (event.code === SELECTION_KEY.SPACE) {
|
||||
// prevent space from scrolling. Only open the submenu.
|
||||
e.preventDefault();
|
||||
event.preventDefault();
|
||||
}
|
||||
|
||||
if (!shouldOpenSubmenu) {
|
||||
super.onKeydown(e);
|
||||
super.onKeydown(event);
|
||||
return;
|
||||
}
|
||||
|
||||
@ -156,16 +156,16 @@ export class SubMenuItem extends MenuItemEl {
|
||||
></slot></span>`;
|
||||
}
|
||||
|
||||
private onCloseSubmenu(e: CloseMenuEvent) {
|
||||
e.itemPath.push(this);
|
||||
private onCloseSubmenu(event: CloseMenuEvent) {
|
||||
event.itemPath.push(this);
|
||||
// Restore focusout behavior
|
||||
this.dispatchEvent(new CloseOnFocusoutEvent());
|
||||
this.dispatchEvent(new ActivateTypeaheadEvent());
|
||||
// Escape should only close one menu not all of the menus unlike space or
|
||||
// click selection which should close all menus.
|
||||
if (e.reason.kind === CLOSE_REASON.KEYDOWN &&
|
||||
e.reason.key === KEYDOWN_CLOSE_KEYS.ESCAPE) {
|
||||
e.stopPropagation();
|
||||
if (event.reason.kind === CLOSE_REASON.KEYDOWN &&
|
||||
event.reason.key === KEYDOWN_CLOSE_KEYS.ESCAPE) {
|
||||
event.stopPropagation();
|
||||
this.active = true;
|
||||
this.selected = false;
|
||||
// It might already be active so manually focus
|
||||
@ -177,12 +177,12 @@ export class SubMenuItem extends MenuItemEl {
|
||||
this.selected = false;
|
||||
}
|
||||
|
||||
private async onSubMenuKeydown(e: KeyboardEvent) {
|
||||
private async onSubMenuKeydown(event: KeyboardEvent) {
|
||||
// Stop propagation so that we don't accidentally close every parent menu.
|
||||
// Additionally, we want to isolate things like the typeahead keydowns
|
||||
// from bubbling up to the parent menu and confounding things.
|
||||
e.stopPropagation();
|
||||
const shouldClose = this.isSubmenuCloseKey(e.code);
|
||||
event.stopPropagation();
|
||||
const shouldClose = this.isSubmenuCloseKey(event.code);
|
||||
|
||||
if (!shouldClose) return;
|
||||
|
||||
|
@ -118,20 +118,20 @@ export class TypeaheadController {
|
||||
* Apply this listener to the element that will receive `keydown` events that
|
||||
* should trigger this controller.
|
||||
*
|
||||
* @param e The native browser `KeyboardEvent` from the `keydown` event.
|
||||
* @param event The native browser `KeyboardEvent` from the `keydown` event.
|
||||
*/
|
||||
readonly onKeydown = (e: KeyboardEvent) => {
|
||||
readonly onKeydown = (event: KeyboardEvent) => {
|
||||
if (this.isTypingAhead) {
|
||||
this.typeahead(e);
|
||||
this.typeahead(event);
|
||||
} else {
|
||||
this.beginTypeahead(e);
|
||||
this.beginTypeahead(event);
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Sets up typingahead
|
||||
*/
|
||||
private beginTypeahead(e: KeyboardEvent) {
|
||||
private beginTypeahead(event: KeyboardEvent) {
|
||||
if (!this.active) {
|
||||
return;
|
||||
}
|
||||
@ -139,8 +139,8 @@ export class TypeaheadController {
|
||||
// We don't want to typeahead if the _beginning_ of the typeahead is a menu
|
||||
// navigation, or a selection. We will handle "Space" only if it's in the
|
||||
// middle of a typeahead
|
||||
if (e.code === 'Space' || e.code === 'Enter' ||
|
||||
e.code.startsWith('Arrow') || e.code === 'Escape') {
|
||||
if (event.code === 'Space' || event.code === 'Enter' ||
|
||||
event.code.startsWith('Arrow') || event.code === 'Escape') {
|
||||
return;
|
||||
}
|
||||
|
||||
@ -156,7 +156,7 @@ export class TypeaheadController {
|
||||
if (this.lastActiveRecord) {
|
||||
this.lastActiveRecord[TYPEAHEAD_RECORD.ITEM].active = false;
|
||||
}
|
||||
this.typeahead(e);
|
||||
this.typeahead(event);
|
||||
}
|
||||
|
||||
/**
|
||||
@ -195,12 +195,12 @@ export class TypeaheadController {
|
||||
*
|
||||
* activates Olive
|
||||
*/
|
||||
private typeahead(e: KeyboardEvent) {
|
||||
private typeahead(event: KeyboardEvent) {
|
||||
clearTimeout(this.cancelTypeaheadTimeout);
|
||||
// Stop typingahead if one of the navigation or selection keys (except for
|
||||
// Space) are pressed
|
||||
if (e.code === 'Enter' || e.code.startsWith('Arrow') ||
|
||||
e.code === 'Escape') {
|
||||
if (event.code === 'Enter' || event.code.startsWith('Arrow') ||
|
||||
event.code === 'Escape') {
|
||||
this.endTypeahead();
|
||||
if (this.lastActiveRecord) {
|
||||
this.lastActiveRecord[TYPEAHEAD_RECORD.ITEM].active = false;
|
||||
@ -209,16 +209,16 @@ export class TypeaheadController {
|
||||
}
|
||||
|
||||
// If Space is pressed, prevent it from selecting and closing the menu
|
||||
if (e.code === 'Space') {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
if (event.code === 'Space') {
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
}
|
||||
|
||||
// Start up a new keystroke buffer timeout
|
||||
this.cancelTypeaheadTimeout =
|
||||
setTimeout(this.endTypeahead, this.getProperties().typeaheadBufferTime);
|
||||
|
||||
this.typaheadBuffer += e.key.toLowerCase();
|
||||
this.typaheadBuffer += event.key.toLowerCase();
|
||||
|
||||
const lastActiveIndex = this.lastActiveRecord ?
|
||||
this.lastActiveRecord[TYPEAHEAD_RECORD.INDEX] :
|
||||
|
@ -279,30 +279,30 @@ export abstract class Select extends LitElement {
|
||||
* Handles opening the select on keydown and typahead selection when the menu
|
||||
* is closed.
|
||||
*/
|
||||
private handleKeydown(e: KeyboardEvent) {
|
||||
private handleKeydown(event: KeyboardEvent) {
|
||||
if (this.open || this.disabled || !this.menu) {
|
||||
return;
|
||||
}
|
||||
|
||||
const typeaheadController = this.menu.typeaheadController;
|
||||
const isOpenKey =
|
||||
e.code === 'Space' || e.code === 'ArrowDown' || e.code === 'Enter';
|
||||
const isOpenKey = event.code === 'Space' || event.code === 'ArrowDown' ||
|
||||
event.code === 'Enter';
|
||||
|
||||
// Do not open if currently typing ahead because the user may be typing the
|
||||
// spacebar to match a word with a space
|
||||
if (!typeaheadController.isTypingAhead && isOpenKey) {
|
||||
e.preventDefault();
|
||||
event.preventDefault();
|
||||
this.open = true;
|
||||
return;
|
||||
}
|
||||
|
||||
const isPrintableKey = e.key.length === 1;
|
||||
const isPrintableKey = event.key.length === 1;
|
||||
|
||||
// Handles typing ahead when the menu is closed by delegating the event to
|
||||
// the underlying menu's typeaheadController
|
||||
if (isPrintableKey) {
|
||||
typeaheadController.onKeydown(e);
|
||||
e.preventDefault();
|
||||
typeaheadController.onKeydown(event);
|
||||
event.preventDefault();
|
||||
|
||||
const {lastActiveRecord} = typeaheadController;
|
||||
|
||||
@ -334,10 +334,10 @@ export abstract class Select extends LitElement {
|
||||
/**
|
||||
* Handles closing the menu when the focus leaves the select's subtree.
|
||||
*/
|
||||
private handleFocusout(e: FocusEvent) {
|
||||
private handleFocusout(event: FocusEvent) {
|
||||
// Don't close the menu if we are switching focus between menu,
|
||||
// select-option, and field
|
||||
if (e.relatedTarget && isElementInSubtree(e.relatedTarget, this)) {
|
||||
if (event.relatedTarget && isElementInSubtree(event.relatedTarget, this)) {
|
||||
return;
|
||||
}
|
||||
|
||||
@ -445,9 +445,9 @@ export abstract class Select extends LitElement {
|
||||
/**
|
||||
* Determines the reason for closing, and updates the UI accordingly.
|
||||
*/
|
||||
private handleCloseMenu(e: InstanceType<typeof DefaultCloseMenuEvent>) {
|
||||
const reason = e.reason;
|
||||
const item = e.itemPath[0] as SelectOption;
|
||||
private handleCloseMenu(event: InstanceType<typeof DefaultCloseMenuEvent>) {
|
||||
const reason = event.reason;
|
||||
const item = event.itemPath[0] as SelectOption;
|
||||
this.open = false;
|
||||
let hasChanged = false;
|
||||
|
||||
@ -488,8 +488,8 @@ export abstract class Select extends LitElement {
|
||||
* Handles updating selection when an option element requests selection via
|
||||
* property / attribute change.
|
||||
*/
|
||||
private handleRequestSelection(e: RequestSelectionEvent) {
|
||||
const requestingOptionEl = e.target as SelectOption & HTMLElement;
|
||||
private handleRequestSelection(event: RequestSelectionEvent) {
|
||||
const requestingOptionEl = event.target as SelectOption & HTMLElement;
|
||||
|
||||
// No-op if this item is already selected.
|
||||
if (this.lastSelectedOptionRecords.some(
|
||||
@ -504,8 +504,8 @@ export abstract class Select extends LitElement {
|
||||
* Handles updating selection when an option element requests deselection via
|
||||
* property / attribute change.
|
||||
*/
|
||||
private handleRequestDeselection(e: RequestDeselectionEvent) {
|
||||
const requestingOptionEl = e.target as SelectOption & HTMLElement;
|
||||
private handleRequestDeselection(event: RequestDeselectionEvent) {
|
||||
const requestingOptionEl = event.target as SelectOption & HTMLElement;
|
||||
|
||||
// No-op if this item is not even in the list of tracked selected items.
|
||||
if (!this.lastSelectedOptionRecords.some(
|
||||
|
@ -441,16 +441,16 @@ export class Slider extends LitElement {
|
||||
}
|
||||
}
|
||||
|
||||
private handleFocus(e: Event) {
|
||||
this.updateOnTop(e.target as HTMLInputElement);
|
||||
private handleFocus(event: Event) {
|
||||
this.updateOnTop(event.target as HTMLInputElement);
|
||||
}
|
||||
|
||||
private startAction(e: Event) {
|
||||
const target = e.target as HTMLInputElement;
|
||||
private startAction(event: Event) {
|
||||
const target = event.target as HTMLInputElement;
|
||||
const fixed =
|
||||
(target === this.inputStart) ? this.inputEnd! : this.inputStart!;
|
||||
this.action = {
|
||||
canFlip: e.type === 'pointerdown',
|
||||
canFlip: event.type === 'pointerdown',
|
||||
flipped: false,
|
||||
target,
|
||||
fixed,
|
||||
@ -459,22 +459,22 @@ export class Slider extends LitElement {
|
||||
};
|
||||
}
|
||||
|
||||
private finishAction(e: Event) {
|
||||
private finishAction(event: Event) {
|
||||
this.action = undefined;
|
||||
}
|
||||
|
||||
private handleKeydown(e: KeyboardEvent) {
|
||||
this.startAction(e);
|
||||
private handleKeydown(event: KeyboardEvent) {
|
||||
this.startAction(event);
|
||||
}
|
||||
|
||||
private handleKeyup(e: KeyboardEvent) {
|
||||
this.finishAction(e);
|
||||
private handleKeyup(event: KeyboardEvent) {
|
||||
this.finishAction(event);
|
||||
}
|
||||
|
||||
private handleDown(e: PointerEvent) {
|
||||
this.startAction(e);
|
||||
this.ripplePointerId = e.pointerId;
|
||||
const isStart = e.target as HTMLInputElement === this.inputStart;
|
||||
private handleDown(event: PointerEvent) {
|
||||
this.startAction(event);
|
||||
this.ripplePointerId = event.pointerId;
|
||||
const isStart = event.target as HTMLInputElement === this.inputStart;
|
||||
// Since handle moves to pointer on down and there may not be a move,
|
||||
// it needs to be considered hovered..
|
||||
this.handleStartHover =
|
||||
@ -482,7 +482,7 @@ export class Slider extends LitElement {
|
||||
this.handleEndHover = !this.disabled && !isStart && Boolean(this.handleEnd);
|
||||
}
|
||||
|
||||
private async handleUp(e: PointerEvent) {
|
||||
private async handleUp(event: PointerEvent) {
|
||||
const {target, values, flipped} = this.action ?? {};
|
||||
// Async here for Firefox because input can be after pointerup
|
||||
// when value is calmped.
|
||||
@ -497,7 +497,7 @@ export class Slider extends LitElement {
|
||||
target.dispatchEvent(new Event('change', {bubbles: true}));
|
||||
}
|
||||
}
|
||||
this.finishAction(e);
|
||||
this.finishAction(event);
|
||||
}
|
||||
|
||||
/**
|
||||
@ -513,13 +513,13 @@ export class Slider extends LitElement {
|
||||
* of the directive. This is done based on the hover state when the
|
||||
* slider is updated.
|
||||
*/
|
||||
private handleMove(e: PointerEvent) {
|
||||
this.handleStartHover = !this.disabled && inBounds(e, this.handleStart);
|
||||
this.handleEndHover = !this.disabled && inBounds(e, this.handleEnd);
|
||||
private handleMove(event: PointerEvent) {
|
||||
this.handleStartHover = !this.disabled && inBounds(event, this.handleStart);
|
||||
this.handleEndHover = !this.disabled && inBounds(event, this.handleEnd);
|
||||
}
|
||||
|
||||
private handleEnter(e: PointerEvent) {
|
||||
this.handleMove(e);
|
||||
private handleEnter(event: PointerEvent) {
|
||||
this.handleMove(event);
|
||||
}
|
||||
|
||||
private handleLeave() {
|
||||
@ -576,7 +576,7 @@ export class Slider extends LitElement {
|
||||
return true;
|
||||
}
|
||||
|
||||
private handleInput(e: InputEvent) {
|
||||
private handleInput(event: InputEvent) {
|
||||
// avoid processing a re-dispatched event
|
||||
if (this.isRedisptchingEvent) {
|
||||
return;
|
||||
@ -603,28 +603,28 @@ export class Slider extends LitElement {
|
||||
}
|
||||
// control external visibility of input event
|
||||
if (stopPropagation) {
|
||||
e.stopPropagation();
|
||||
event.stopPropagation();
|
||||
}
|
||||
// ensure event path is correct when flipped.
|
||||
if (redispatch) {
|
||||
this.isRedisptchingEvent = true;
|
||||
redispatchEvent(target, e);
|
||||
redispatchEvent(target, event);
|
||||
this.isRedisptchingEvent = false;
|
||||
}
|
||||
}
|
||||
|
||||
private handleChange(e: Event) {
|
||||
private handleChange(event: Event) {
|
||||
// prevent keyboard triggered changes from dispatching for
|
||||
// clamped values; note, this only occurs for keyboard
|
||||
const changeTarget = e.target as HTMLInputElement;
|
||||
const changeTarget = event.target as HTMLInputElement;
|
||||
const {target, values} = this.action ?? {};
|
||||
const squelch =
|
||||
(target && (target.valueAsNumber === values!.get(changeTarget)!));
|
||||
if (!squelch) {
|
||||
redispatchEvent(this, e);
|
||||
redispatchEvent(this, event);
|
||||
}
|
||||
// ensure keyboard triggered change clears action.
|
||||
this.finishAction(e);
|
||||
this.finishAction(event);
|
||||
}
|
||||
|
||||
/** @private */
|
||||
|
@ -337,13 +337,13 @@ const dynamic: MaterialStoryInit<StoryKnobs> = {
|
||||
const variant = `primary ${vertical}` as Variant;
|
||||
const classes = {vertical, scrolling: true};
|
||||
|
||||
function getTabs(e: Event) {
|
||||
return ((e.target! as Element).getRootNode() as ShadowRoot)
|
||||
function getTabs(event: Event) {
|
||||
return ((event.target! as Element).getRootNode() as ShadowRoot)
|
||||
.querySelector('md-tabs')!;
|
||||
}
|
||||
|
||||
function addTab(e: Event) {
|
||||
const tabs = getTabs(e);
|
||||
function addTab(event: Event) {
|
||||
const tabs = getTabs(event);
|
||||
const count = tabs.childElementCount;
|
||||
const tab = document.createElement('md-tab');
|
||||
tab.textContent = `Tab ${count + 1}`;
|
||||
@ -355,8 +355,8 @@ const dynamic: MaterialStoryInit<StoryKnobs> = {
|
||||
tabs.selected = count;
|
||||
}
|
||||
}
|
||||
function removeTab(e: Event) {
|
||||
const tabs = getTabs(e);
|
||||
function removeTab(event: Event) {
|
||||
const tabs = getTabs(event);
|
||||
if (tabs.selectedItem === undefined) {
|
||||
return;
|
||||
}
|
||||
@ -365,8 +365,8 @@ const dynamic: MaterialStoryInit<StoryKnobs> = {
|
||||
tabs.selected = Math.min(count - 1, tabs.selected);
|
||||
}
|
||||
|
||||
function moveTabTowardsEnd(e: Event) {
|
||||
const tabs = getTabs(e);
|
||||
function moveTabTowardsEnd(event: Event) {
|
||||
const tabs = getTabs(event);
|
||||
const next = tabs.selectedItem?.nextElementSibling;
|
||||
if (next) {
|
||||
next.after(tabs.selectedItem);
|
||||
@ -374,8 +374,8 @@ const dynamic: MaterialStoryInit<StoryKnobs> = {
|
||||
}
|
||||
}
|
||||
|
||||
function moveTabTowardsStart(e: Event) {
|
||||
const tabs = getTabs(e);
|
||||
function moveTabTowardsStart(event: Event) {
|
||||
const tabs = getTabs(event);
|
||||
const previous = tabs.selectedItem?.previousElementSibling;
|
||||
if (previous) {
|
||||
previous.before(tabs.selectedItem);
|
||||
|
@ -100,7 +100,7 @@ export class Tabs extends LitElement {
|
||||
* The item currently focused.
|
||||
*/
|
||||
protected get focusedItem() {
|
||||
return this.items.find((e: HTMLElement) => e.matches(':focus-within'));
|
||||
return this.items.find((el: HTMLElement) => el.matches(':focus-within'));
|
||||
}
|
||||
|
||||
constructor() {
|
||||
|
@ -84,8 +84,8 @@ const outlined: MaterialStoryInit<StoryKnobs> = {
|
||||
|
||||
const LEADING_ICON = html`<md-icon slot="leadingicon">search</md-icon>`;
|
||||
const TRAILING_ICON = html`<md-icon slot="trailingicon">event</md-icon>`;
|
||||
function reportValidity(e: Event) {
|
||||
(e.target as MdFilledTextField).reportValidity();
|
||||
function reportValidity(event: Event) {
|
||||
(event.target as MdFilledTextField).reportValidity();
|
||||
}
|
||||
|
||||
/** Textfield stories. */
|
||||
|
Loading…
Reference in New Issue
Block a user