UNPKG

8.62 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 setMin(value: number): void;
71 setMax(value: number): void;
72 getMin(): number;
73 getMax(): number;
74 /**
75 * - For single point sliders, returns the thumb value.
76 * - For range (two-thumb) sliders, returns the end thumb's value.
77 */
78 getValue(): number;
79 /**
80 * - For single point sliders, sets the thumb value.
81 * - For range (two-thumb) sliders, sets the end thumb's value.
82 */
83 setValue(value: number): void;
84 /**
85 * Only applicable for range sliders.
86 * @return The start thumb's value.
87 */
88 getValueStart(): number;
89 /**
90 * Only applicable for range sliders. Sets the start thumb's value.
91 */
92 setValueStart(valueStart: number): void;
93 setStep(value: number): void;
94 setIsDiscrete(value: boolean): void;
95 getStep(): number;
96 setHasTickMarks(value: boolean): void;
97 getDisabled(): boolean;
98 /**
99 * Sets disabled state, including updating styles and thumb tabindex.
100 */
101 setDisabled(disabled: boolean): void;
102 /** @return Whether the slider is a range slider. */
103 getIsRange(): boolean;
104 /**
105 * - Syncs slider boundingClientRect with the current DOM.
106 * - Updates UI based on internal state.
107 */
108 layout({ skipUpdateUI }?: {
109 skipUpdateUI?: boolean;
110 }): void;
111 /** Handles resize events on the window. */
112 handleResize(): void;
113 /**
114 * Handles pointer down events on the slider root element.
115 */
116 handleDown(event: PointerEvent | MouseEvent | TouchEvent): void;
117 /**
118 * Handles pointer move events on the slider root element.
119 */
120 handleMove(event: PointerEvent | MouseEvent | TouchEvent): void;
121 /**
122 * Handles pointer up events on the slider root element.
123 */
124 handleUp(): void;
125 /**
126 * For range, discrete slider, shows the value indicator on both thumbs.
127 */
128 handleThumbMouseenter(): void;
129 /**
130 * For range, discrete slider, hides the value indicator on both thumbs.
131 */
132 handleThumbMouseleave(): void;
133 handleMousedownOrTouchstart(event: MouseEvent | TouchEvent): void;
134 handlePointerdown(event: PointerEvent): void;
135 /**
136 * Handles input `change` event by setting internal slider value to match
137 * input's new value.
138 */
139 handleInputChange(thumb: Thumb): void;
140 /** Shows activated state and value indicator on thumb(s). */
141 handleInputFocus(thumb: Thumb): void;
142 /** Removes activated state and value indicator from thumb(s). */
143 handleInputBlur(thumb: Thumb): void;
144 /**
145 * Emits custom dragStart event, along with focusing the underlying input.
146 */
147 private handleDragStart;
148 /**
149 * @return The thumb to be moved based on initial down event.
150 */
151 private getThumbFromDownEvent;
152 /**
153 * @return The thumb to be moved based on move event (based on drag
154 * direction from original down event). Only applicable if thumbs
155 * were overlapping in the down event.
156 */
157 private getThumbFromMoveEvent;
158 /**
159 * Updates UI based on internal state.
160 * @param thumb Thumb whose value is being updated. If undefined, UI is
161 * updated for both thumbs based on current internal state.
162 */
163 private updateUI;
164 /**
165 * Updates thumb and input attributes based on current value.
166 * @param thumb Thumb whose aria attributes to update.
167 */
168 private updateThumbAndInputAttributes;
169 /**
170 * Updates value indicator UI based on current value.
171 * @param thumb Thumb whose value indicator to update. If undefined, all
172 * thumbs' value indicators are updated.
173 */
174 private updateValueIndicatorUI;
175 /**
176 * Updates tick marks UI within slider, based on current min, max, and step.
177 */
178 private updateTickMarksUI;
179 /** Maps clientX to a value on the slider scale. */
180 private mapClientXOnSliderScale;
181 /** Calculates the quantized value based on step value. */
182 private quantize;
183 /**
184 * Updates slider value (internal state and UI) based on the given value.
185 */
186 private updateValue;
187 /**
188 * Clamps the given value for the given thumb based on slider properties:
189 * - Restricts value within [min, max].
190 * - If range slider, clamp start value <= end value, and
191 * end value >= start value.
192 */
193 private clampValue;
194 /**
195 * Updates the active track and thumb style properties to reflect current
196 * value.
197 */
198 private updateThumbAndTrackUI;
199 /**
200 * Removes initial inline styles if not already removed. `left:<...>%`
201 * inline styles can be added to position the thumb correctly before JS
202 * initialization. However, they need to be removed before the JS starts
203 * positioning the thumb. This is because the JS uses
204 * `transform:translateX(<...>)px` (for performance reasons) to position
205 * the thumb (which is not possible for initial styles since we need the
206 * bounding rect measurements).
207 */
208 private removeInitialStyles;
209 /**
210 * Resets track/thumb animation to prevent animation when adding
211 * `transform` styles to thumb initially.
212 */
213 private resetTrackAndThumbAnimation;
214 /**
215 * Adds THUMB_TOP class to active thumb if thumb knobs overlap; otherwise
216 * removes THUMB_TOP class from both thumbs.
217 * @param thumb Thumb that is active (being moved).
218 */
219 private updateOverlappingThumbsUI;
220 /**
221 * Converts attribute value to a number, e.g. '100' => 100. Throws errors
222 * for invalid values.
223 * @param attributeValue Attribute value, e.g. 100.
224 * @param attributeName Attribute name, e.g. `aria-valuemax`.
225 */
226 private convertAttributeValueToNumber;
227 /** Checks that the given properties are valid slider values. */
228 private validateProperties;
229 private registerEventHandlers;
230 private deregisterEventHandlers;
231 private handlePointerup;
232}