Skip to content

Commit

Permalink
chore: remove webkit tap color when used with card or expansion panel…
Browse files Browse the repository at this point in the history
… and update listener pattern
  • Loading branch information
DRiFTy17 committed Mar 5, 2024
1 parent 9ad848c commit 3eaf20c
Show file tree
Hide file tree
Showing 5 changed files with 28 additions and 47 deletions.
46 changes: 16 additions & 30 deletions src/lib/button-area/button-area-adapter.ts
Original file line number Diff line number Diff line change
Expand Up @@ -9,17 +9,17 @@ import { BUTTON_AREA_CONSTANTS } from './button-area-constants';
export interface IButtonAreaAdapter extends IBaseAdapter {
destroy(): void;
setDisabled(value: boolean): void;
addListener(type: string, listener: (event: Event) => void, capture?: boolean): void;
removeListener(type: string, listener: (event: Event) => void, capture?: boolean): void;
addButtonSlotListener(type: string, listener: (event: Event) => void): void;
removeButtonSlotListener(type: string, listener: (event: Event) => void): void;
addContentSlotListener(type: string, listener: (event: Event) => void): void;
removeContentSlotListener(type: string, listener: (event: Event) => void): void;
addListener(type: string, listener: EventListener, capture?: boolean): void;
removeListener(type: string, listener: EventListener, capture?: boolean): void;
addButtonSlotListener(type: string, listener: EventListener): void;
removeButtonSlotListener(type: string, listener: EventListener): void;
addContentSlotListener(type: string, listener: EventListener): void;
removeContentSlotListener(type: string, listener: EventListener): void;
animateStateLayer(): void;
startButtonObserver(callback: MutationCallback): void;
stopButtonObserver(): void;
detectSlottedButton(): void;
buttonIsDisabled(): boolean;
isButtonDisabled(): boolean;
requestDisabledButtonFrame(): void;
}

Expand All @@ -44,22 +44,8 @@ export class ButtonAreaAdapter extends BaseAdapter<IButtonAreaComponent> impleme
}

public destroy(): void {
if (typeof this._destroyUserInteractionListener === 'function') {
this._destroyUserInteractionListener();
this._destroyUserInteractionListener = undefined;
}
}

public get root(): HTMLElement {
return this._rootElement;
}

public get unbounded(): boolean | undefined {
return false;
}

public get disabled(): boolean | undefined {
return this.buttonIsDisabled();
this._destroyUserInteractionListener?.();
this._destroyUserInteractionListener = undefined;
}

public setDisabled(value: boolean): void {
Expand All @@ -72,27 +58,27 @@ export class ButtonAreaAdapter extends BaseAdapter<IButtonAreaComponent> impleme
}
}

public addListener(type: string, listener: (event: Event) => void, capture?: boolean): void {
public addListener(type: string, listener: EventListener, capture?: boolean): void {
this._rootElement.addEventListener(type, listener, { capture });
}

public removeListener(type: string, listener: (event: Event) => void, capture?: boolean): void {
public removeListener(type: string, listener: EventListener, capture?: boolean): void {
this._rootElement.removeEventListener(type, listener, { capture });
}

public addButtonSlotListener(type: string, listener: (event: Event) => void): void {
public addButtonSlotListener(type: string, listener: EventListener): void {
this._buttonSlotElement.addEventListener(type, listener);
}

public removeButtonSlotListener(type: string, listener: (event: Event) => void): void {
public removeButtonSlotListener(type: string, listener: EventListener): void {
this._buttonSlotElement.removeEventListener(type, listener);
}

public addContentSlotListener(type: string, listener: (event: Event) => void): void {
public addContentSlotListener(type: string, listener: EventListener): void {
this._contentSlotElement.addEventListener(type, listener);
}

public removeContentSlotListener(type: string, listener: (event: Event) => void): void {
public removeContentSlotListener(type: string, listener: EventListener): void {
this._contentSlotElement.removeEventListener(type, listener);
}

Expand All @@ -118,7 +104,7 @@ export class ButtonAreaAdapter extends BaseAdapter<IButtonAreaComponent> impleme
this._buttonElement = this._buttonSlotElement.assignedElements()[0] as HTMLButtonElement | undefined;
}

public buttonIsDisabled(): boolean {
public isButtonDisabled(): boolean {
return this._buttonElement?.disabled ?? true;
}

Expand Down
24 changes: 9 additions & 15 deletions src/lib/button-area/button-area-foundation.ts
Original file line number Diff line number Diff line change
Expand Up @@ -9,19 +9,13 @@ export interface IButtonAreaFoundation extends ICustomElementFoundation {

export class ButtonAreaFoundation implements IButtonAreaFoundation {
private _disabled = false;
private _clickListener: (event: Event) => void;
private _keydownListener: (event: KeyboardEvent) => void;
private _pointerdownListener: (event: Event) => void;
private _ignoreStateLayerListener: (event: Event) => void;
private _slotListener: () => void;

constructor(private _adapter: IButtonAreaAdapter) {
this._clickListener = event => this._handleClick(event);
this._keydownListener = event => this._handleKeydown(event);
this._pointerdownListener = event => this._handlePointerdown(event);
this._ignoreStateLayerListener = event => this._handleIgnoreStateLayer(event);
this._slotListener = () => this._handleSlotChange();
}
private _clickListener = this._handleClick.bind(this);
private _keydownListener = this._handleKeydown.bind(this);
private _pointerdownListener = this._handlePointerdown.bind(this);
private _ignoreStateLayerListener = this._handleIgnoreStateLayer.bind(this);
private _slotListener = this._handleSlotChange.bind(this);

constructor(private _adapter: IButtonAreaAdapter) {}

public initialize(): void {
this._adapter.addListener('click', this._clickListener);
Expand Down Expand Up @@ -106,15 +100,15 @@ export class ButtonAreaFoundation implements IButtonAreaFoundation {
this._adapter.startButtonObserver(() => this._handleButtonDisabled());

// Match the component and button states if either is disabled
if (this._adapter.buttonIsDisabled()) {
if (this._adapter.isButtonDisabled()) {
this.disabled = true;
} else if (this._disabled) {
this._adapter.setDisabled(true);
}
}

private _handleButtonDisabled(): void {
this.disabled = this._adapter.buttonIsDisabled();
this.disabled = this._adapter.isButtonDisabled();
}

private _shouldIgnoreEvent(event: Event): boolean {
Expand Down
3 changes: 1 addition & 2 deletions src/lib/button-area/button-area.scss
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@
// Host
//


:host {
@include host;

Expand All @@ -31,7 +30,7 @@
//

.forge-button-area {
@include tokens();
@include tokens;
}

.forge-button-area {
Expand Down
1 change: 1 addition & 0 deletions src/lib/card/_mixins.scss
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@
@include theme.property(border-color, border-color);

box-sizing: border-box;
-webkit-tap-highlight-color: transparent;
}

@mixin raised() {
Expand Down
1 change: 1 addition & 0 deletions src/lib/expansion-panel/_mixins.scss
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@

@mixin header() {
outline: none;
-webkit-tap-highlight-color: transparent;
}

@mixin header-hover() {
Expand Down

0 comments on commit 3eaf20c

Please sign in to comment.