Skip to content

fix(material/slider) Update slider to use injected document #18275

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Jan 27, 2020
Merged

fix(material/slider) Update slider to use injected document #18275

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
dd852b6
fix(material/slider) Update slider to use injected document
timsawyer Jan 24, 2020
9a4c2b5
fix(material/slider) Update slider to use injected document
timsawyer Jan 24, 2020
0de4551
fix(material/slider) Update slider to use injected document
timsawyer Jan 24, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 13 additions & 5 deletions src/material/slider/slider.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,6 +57,7 @@ import {
} from '@angular/material/core';
import {ANIMATION_MODULE_TYPE} from '@angular/platform-browser/animations';
import {normalizePassiveListenerOptions} from '@angular/cdk/platform';
import {DOCUMENT} from '@angular/common';
import {Subscription} from 'rxjs';

const activeEventOptions = normalizePassiveListenerOptions({passive: false});
Expand Down Expand Up @@ -488,6 +489,9 @@ export class MatSlider extends _MatSliderMixinBase
/** Keeps track of the last pointer event that was captured by the slider. */
private _lastPointerEvent: MouseEvent | TouchEvent | null;

/** Used to subscribe to global move and end events */
protected _document?: Document;

constructor(elementRef: ElementRef,
private _focusMonitor: FocusMonitor,
private _changeDetectorRef: ChangeDetectorRef,
Expand All @@ -496,9 +500,13 @@ export class MatSlider extends _MatSliderMixinBase
// @breaking-change 8.0.0 `_animationMode` parameter to be made required.
@Optional() @Inject(ANIMATION_MODULE_TYPE) public _animationMode?: string,
// @breaking-change 9.0.0 `_ngZone` parameter to be made required.
private _ngZone?: NgZone) {
private _ngZone?: NgZone,
/** @breaking-change 11.0.0 make document required */
@Optional() @Inject(DOCUMENT) document?: any) {
super(elementRef);

this._document = document;

this.tabIndex = parseInt(tabIndex) || 0;

this._runOutsizeZone(() => {
Expand Down Expand Up @@ -696,8 +704,8 @@ export class MatSlider extends _MatSliderMixinBase
* as they're swiping across the screen.
*/
private _bindGlobalEvents(triggerEvent: TouchEvent | MouseEvent) {
if (typeof document !== 'undefined' && document) {
const body = document.body;
if (typeof this._document !== 'undefined' && this._document) {
const body = this._document.body;
const isTouch = isTouchEvent(triggerEvent);
const moveEventName = isTouch ? 'touchmove' : 'mousemove';
const endEventName = isTouch ? 'touchend' : 'mouseup';
Expand All @@ -715,8 +723,8 @@ export class MatSlider extends _MatSliderMixinBase

/** Removes any global event listeners that we may have added. */
private _removeGlobalEvents() {
if (typeof document !== 'undefined' && document) {
const body = document.body;
if (typeof this._document !== 'undefined' && this._document) {
const body = this._document.body;
body.removeEventListener('mousemove', this._pointerMove, activeEventOptions);
body.removeEventListener('mouseup', this._pointerUp, activeEventOptions);
body.removeEventListener('touchmove', this._pointerMove, activeEventOptions);
Expand Down
4 changes: 3 additions & 1 deletion tools/public_api_guard/material/slider.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ export declare const MAT_SLIDER_VALUE_ACCESSOR: any;

export declare class MatSlider extends _MatSliderMixinBase implements ControlValueAccessor, OnDestroy, CanDisable, CanColor, OnInit, HasTabIndex {
_animationMode?: string | undefined;
protected _document?: Document;
get _invertAxis(): boolean;
_isActive: boolean;
get _isMinValue(): boolean;
Expand Down Expand Up @@ -45,7 +46,8 @@ export declare class MatSlider extends _MatSliderMixinBase implements ControlVal
readonly valueChange: EventEmitter<number | null>;
get vertical(): boolean;
set vertical(value: boolean);
constructor(elementRef: ElementRef, _focusMonitor: FocusMonitor, _changeDetectorRef: ChangeDetectorRef, _dir: Directionality, tabIndex: string, _animationMode?: string | undefined, _ngZone?: NgZone | undefined);
constructor(elementRef: ElementRef, _focusMonitor: FocusMonitor, _changeDetectorRef: ChangeDetectorRef, _dir: Directionality, tabIndex: string, _animationMode?: string | undefined, _ngZone?: NgZone | undefined,
document?: any);
_onBlur(): void;
_onFocus(): void;
_onKeydown(event: KeyboardEvent): void;
Expand Down