UNPKG

8.43 kBTypeScriptView Raw
1/**
2 * @license
3 * Copyright 2020 Google Inc.
4 *
5 * Permission is hereby granted, free of charge, to any person obtaining a copy
6 * of this software and associated documentation files (the "Software"), to deal
7 * in the Software without restriction, including without limitation the rights
8 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 * copies of the Software, and to permit persons to whom the Software is
10 * furnished to do so, subject to the following conditions:
11 *
12 * The above copyright notice and this permission notice shall be included in
13 * all copies or substantial portions of the Software.
14 *
15 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
21 * THE SOFTWARE.
22 */
23import { MDCFoundation } from '@material/base/foundation';
24import { MDCSliderAdapter } from './adapter';
25import { Thumb } from './types';
26/**
27 * Foundation class for slider. Responsibilities include:
28 * - Updating slider values (internal state and DOM updates) based on client
29 * 'x' position.
30 * - Updating DOM after slider property updates (e.g. min, max).
31 */
32export declare class MDCSliderFoundation extends MDCFoundation<MDCSliderAdapter> {
33 static SUPPORTS_POINTER_EVENTS: boolean;
34 private initialStylesRemoved;
35 private min;
36 private max;
37 private valueStart;
38 private value;
39 private rect;
40 private isDisabled;
41 private isDiscrete;
42 private step;
43 private numDecimalPlaces;
44 private hasTickMarks;
45 private isRange;
46 private thumb;
47 private downEventClientX;
48 private valueStartBeforeDownEvent;
49 private valueBeforeDownEvent;
50 private startThumbKnobWidth;
51 private endThumbKnobWidth;
52 private readonly animFrame;
53 private mousedownOrTouchstartListener;
54 private moveListener;
55 private pointerdownListener;
56 private pointerupListener;
57 private thumbMouseenterListener;
58 private thumbMouseleaveListener;
59 private inputStartChangeListener;
60 private inputEndChangeListener;
61 private inputStartFocusListener;
62 private inputEndFocusListener;
63 private inputStartBlurListener;
64 private inputEndBlurListener;
65 private resizeListener;
66 constructor(adapter?: Partial<MDCSliderAdapter>);
67 static get defaultAdapter(): MDCSliderAdapter;
68 init(): void;
69 destroy(): void;
70 getMin(): number;
71 getMax(): number;
72 /**
73 * - For single point sliders, returns the thumb value.
74 * - For range (two-thumb) sliders, returns the end thumb's value.
75 */
76 getValue(): number;
77 /**
78 * - For single point sliders, sets the thumb value.
79 * - For range (two-thumb) sliders, sets the end thumb's value.
80 */
81 setValue(value: number): void;
82 /**
83 * Only applicable for range sliders.
84 * @return The start thumb's value.
85 */
86 getValueStart(): number;
87 /**
88 * Only applicable for range sliders. Sets the start thumb's value.
89 */
90 setValueStart(valueStart: number): void;
91 getStep(): number;
92 getDisabled(): boolean;
93 /**
94 * Sets disabled state, including updating styles and thumb tabindex.
95 */
96 setDisabled(disabled: boolean): void;
97 /** @return Whether the slider is a range slider. */
98 getIsRange(): boolean;
99 /**
100 * - Syncs slider boundingClientRect with the current DOM.
101 * - Updates UI based on internal state.
102 */
103 layout({ skipUpdateUI }?: {
104 skipUpdateUI?: boolean;
105 }): void;
106 /** Handles resize events on the window. */
107 handleResize(): void;
108 /**
109 * Handles pointer down events on the slider root element.
110 */
111 handleDown(event: PointerEvent | MouseEvent | TouchEvent): void;
112 /**
113 * Handles pointer move events on the slider root element.
114 */
115 handleMove(event: PointerEvent | MouseEvent | TouchEvent): void;
116 /**
117 * Handles pointer up events on the slider root element.
118 */
119 handleUp(): void;
120 /**
121 * For range, discrete slider, shows the value indicator on both thumbs.
122 */
123 handleThumbMouseenter(): void;
124 /**
125 * For range, discrete slider, hides the value indicator on both thumbs.
126 */
127 handleThumbMouseleave(): void;
128 handleMousedownOrTouchstart(event: MouseEvent | TouchEvent): void;
129 handlePointerdown(event: PointerEvent): void;
130 /**
131 * Handles input `change` event by setting internal slider value to match
132 * input's new value.
133 */
134 handleInputChange(thumb: Thumb): void;
135 /** Shows activated state and value indicator on thumb(s). */
136 handleInputFocus(thumb: Thumb): void;
137 /** Removes activated state and value indicator from thumb(s). */
138 handleInputBlur(thumb: Thumb): void;
139 /**
140 * Emits custom dragStart event, along with focusing the underlying input.
141 */
142 private handleDragStart;
143 /**
144 * @return The thumb to be moved based on initial down event.
145 */
146 private getThumbFromDownEvent;
147 /**
148 * @return The thumb to be moved based on move event (based on drag
149 * direction from original down event). Only applicable if thumbs
150 * were overlapping in the down event.
151 */
152 private getThumbFromMoveEvent;
153 /**
154 * Updates UI based on internal state.
155 * @param thumb Thumb whose value is being updated. If undefined, UI is
156 * updated for both thumbs based on current internal state.
157 */
158 private updateUI;
159 /**
160 * Updates thumb and input attributes based on current value.
161 * @param thumb Thumb whose aria attributes to update.
162 */
163 private updateThumbAndInputAttributes;
164 /**
165 * Updates value indicator UI based on current value.
166 * @param thumb Thumb whose value indicator to update. If undefined, all
167 * thumbs' value indicators are updated.
168 */
169 private updateValueIndicatorUI;
170 /**
171 * Updates tick marks UI within slider, based on current min, max, and step.
172 */
173 private updateTickMarksUI;
174 /** Maps clientX to a value on the slider scale. */
175 private mapClientXOnSliderScale;
176 /** Calculates the quantized value based on step value. */
177 private quantize;
178 /**
179 * Updates slider value (internal state and UI) based on the given value.
180 */
181 private updateValue;
182 /**
183 * Clamps the given value for the given thumb based on slider properties:
184 * - Restricts value within [min, max].
185 * - If range slider, clamp start value <= end value, and
186 * end value >= start value.
187 */
188 private clampValue;
189 /**
190 * Updates the active track and thumb style properties to reflect current
191 * value.
192 */
193 private updateThumbAndTrackUI;
194 /**
195 * Removes initial inline styles if not already removed. `left:<...>%`
196 * inline styles can be added to position the thumb correctly before JS
197 * initialization. However, they need to be removed before the JS starts
198 * positioning the thumb. This is because the JS uses
199 * `transform:translateX(<...>)px` (for performance reasons) to position
200 * the thumb (which is not possible for initial styles since we need the
201 * bounding rect measurements).
202 */
203 private removeInitialStyles;
204 /**
205 * Resets track/thumb animation to prevent animation when adding
206 * `transform` styles to thumb initially.
207 */
208 private resetTrackAndThumbAnimation;
209 /**
210 * Adds THUMB_TOP class to active thumb if thumb knobs overlap; otherwise
211 * removes THUMB_TOP class from both thumbs.
212 * @param thumb Thumb that is active (being moved).
213 */
214 private updateOverlappingThumbsUI;
215 /**
216 * Converts attribute value to a number, e.g. '100' => 100. Throws errors
217 * for invalid values.
218 * @param attributeValue Attribute value, e.g. 100.
219 * @param attributeName Attribute name, e.g. `aria-valuemax`.
220 */
221 private convertAttributeValueToNumber;
222 /** Checks that the given properties are valid slider values. */
223 private validateProperties;
224 private registerEventHandlers;
225 private deregisterEventHandlers;
226 private handlePointerup;
227}