material-components/material-web
1
1
Fork 0
mirror of https://github.com/material-components/material-web.git synced 2024-09-11 13:46:10 +03:00
Code Issues Projects Releases Wiki Activity

chore: rename e to event

Browse Source 
PiperOrigin-RevId: 549039407
This commit is contained in:
Andrew Jakubowicz 2023-07-18 10:16:07 -07:00 committed by Copybara-Service
parent 243e231a13
commit 10f60d23e0
18 changed files with 154 additions and 152 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
button/lib/button.ts
View File

@ -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;

4
dialog/demo/stories.ts
View File

@ -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();
}

39
dialog/lib/dialog.ts
View File

@ -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;
}

4
fab/lib/shared.ts
View File

@ -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;
}

4
labs/navigationdrawer/lib/navigation-drawer-modal.ts
View File

@ -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;
}
}

4
labs/segmentedbuttonset/lib/segmented-button-set.ts
View File

@ -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);
}

4
list/lib/list.ts
View File

@ -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>`;
}

9
menu/demo/stories.ts
View File

@ -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

42
menu/lib/menu.ts
View File

@ -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;
}

8
menu/lib/menuitem/menu-item.ts
View File

@ -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}));
}

8
menu/lib/menuitemlink/menu-item-link.ts
View File

@ -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}));
}

30
menu/lib/submenuitem/sub-menu-item.ts
View File

@ -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;

30
menu/lib/typeaheadController.ts
View File

@ -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] :

32
select/lib/select.ts
View File

@ -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(

56
slider/lib/slider.ts
View File

@ -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 */

20
tabs/demo/stories.ts
View File

@ -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);

2
tabs/lib/tabs.ts
View File

@ -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() {

4
textfield/demo/stories.ts
View File

@ -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. */