1/*
2 * Copyright (C) 2021 Apple Inc. All Rights Reserved.
3 *
4 * Redistribution and use in source and binary forms, with or without
5 * modification, are permitted provided that the following conditions
6 * are met:
7 * 1. Redistributions of source code must retain the above copyright
8 * notice, this list of conditions and the following disclaimer.
9 * 2. Redistributions in binary form must reproduce the above copyright
10 * notice, this list of conditions and the following disclaimer in the
11 * documentation and/or other materials provided with the distribution.
12 *
13 * THIS SOFTWARE IS PROVIDED BY APPLE INC. ``AS IS'' AND ANY
14 * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
15 * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
16 * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR
17 * CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
18 * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
19 * PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR
20 * PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY
21 * OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
22 * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
23 * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
24 */
25
26class RangeButton extends Button
27{
28
29 constructor({ layoutDelegate = null, cssClassName = "", iconName = "" } = {})
30 {
31 super({ layoutDelegate, cssClassName, iconName });
32
33 this._value = 0;
34
35 this.element.classList.add("range");
36 this.element.addEventListener("pointerdown", this);
37
38 this._indicator = this.addChild(new LayoutNode(`<div class="indicator"></div>`), 0);
39 this._indicatorTint = this._indicator.addChild(new BackgroundTint);
40 this._indicatorFill = this._indicator.addChild(new LayoutNode(`<div class="fill"></div>`));
41
42 this._indicator.visible = false;
43
44 if (GestureRecognizer.SupportsTouches)
45 this._tapGestureRecognizer.enabled = false;
46 else
47 this.element.removeEventListener("click", this);
48 }
49
50 // Public
51
52 get value()
53 {
54 return this._value;
55 }
56
57 set value(value)
58 {
59 this._value = value;
60 this.markDirtyProperty("value");
61 }
62
63 // Protected
64
65 commitProperty(propertyName)
66 {
67 if (propertyName === "value")
68 this._indicatorFill.element.style.height = `${this._value * 100}%`;
69 else
70 super.commitProperty(propertyName);
71 }
72
73 handleEvent(event)
74 {
75 if (event.currentTarget === this.element && event.type == "pointerdown")
76 this._handlePointerdown(event);
77 else if (event.currentTarget === window && event.type === "pointermove")
78 this._handlePointermove(event);
79 else if (event.currentTarget === window && event.type === "pointerup")
80 this._handlePointerup(event);
81 else
82 super.handleEvent(event);
83 }
84
85 // Private
86
87 _handlePointerdown(event)
88 {
89 window.addEventListener("pointermove", this, true);
90 window.addEventListener("pointerup", this, true);
91
92 this._initialPointerY = event.clientY;
93 this._initialValue = this._value;
94 }
95
96 _handlePointermove(event)
97 {
98 if (!this._indicator.visible) {
99 this._indicator.visible = true;
100 if (this.uiDelegate && typeof this.uiDelegate.controlValueWillStartChanging === "function")
101 this.uiDelegate.controlValueWillStartChanging(this);
102 return;
103 }
104
105 if (!this._indicatorHeight)
106 this._indicatorHeight = this._indicator.computedValueForStylePropertyInPx("height");
107
108 if (!this._indicatorHeight)
109 return;
110
111 const traveledPointerDistance = this._initialPointerY - event.clientY;
112 const valueIncrement = traveledPointerDistance / this._indicatorHeight;
113
114 const newValue = Math.max(0, Math.min(1, this._initialValue + valueIncrement));
115 if (this._value === newValue)
116 return;
117
118 this.value = newValue;
119
120 if (this.uiDelegate && typeof this.uiDelegate.controlValueDidChange === "function")
121 this.uiDelegate.controlValueDidChange(this);
122 }
123
124 _handlePointerup(event)
125 {
126 window.removeEventListener("pointermove", this, true);
127 window.removeEventListener("pointerup", this, true);
128
129 delete this._initialPointerY;
130 delete this._initialValue;
131
132 if (this._indicator.visible) {
133 if (this.uiDelegate && typeof this.uiDelegate.controlValueDidStopChanging === "function")
134 this.uiDelegate.controlValueDidStopChanging(this);
135 this._indicator.visible = false;
136 } else {
137 if (this._enabled && this.uiDelegate && typeof this.uiDelegate.buttonWasPressed === "function")
138 this.uiDelegate.buttonWasPressed(this);
139 }
140 }
141
142}