Web Inspector: Elements: Styles: add icons for various CSS rule types
[WebKit-https.git] / Source / WebInspectorUI / UserInterface / Views / SpringEditor.js
1 /*
2  * Copyright (C) 2016 Devin Rousso <webkit@devinrousso.com>. 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. AND ITS CONTRIBUTORS ``AS IS''
14  * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
15  * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
16  * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
17  * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
18  * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
19  * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
20  * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
21  * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
22  * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
23  * THE POSSIBILITY OF SUCH DAMAGE.
24  */
25
26 WI.SpringEditor = class SpringEditor extends WI.Object
27 {
28     constructor()
29     {
30         super();
31
32         let boundResetPreviewAnimation = (event) => {
33             this._resetPreviewAnimation(event);
34         };
35
36         this._element = document.createElement("div");
37         this._element.classList.add("spring-editor");
38
39         this._previewContainer = this._element.createChild("div", "spring-preview");
40         this._previewContainer.title = WI.UIString("Restart animation");
41         this._previewContainer.addEventListener("mousedown", boundResetPreviewAnimation);
42
43         this._previewElement = this._previewContainer.createChild("div");
44         this._previewElement.addEventListener("transitionend", boundResetPreviewAnimation);
45
46         this._timingContainer = this._element.createChild("div", "spring-timing");
47
48         this._timingElement = this._timingContainer.createChild("div");
49
50         this._numberInputContainer = this._element.createChild("div", "number-input-container");
51
52         function createInputsForParameter(id, title)
53         {
54             let row = this._numberInputContainer.createChild("div", `number-input-row ${id}`);
55
56             row.createChild("div", "number-input-row-title").textContent = title;
57
58             let sliderKey = `_${id}Slider`;
59             this[sliderKey] = row.createChild("input");
60             this[sliderKey].type = "range";
61             this[sliderKey].addEventListener("input", this._handleNumberSliderInput.bind(this));
62             this[sliderKey].addEventListener("mousedown", this._handleNumberSliderMousedown.bind(this));
63             this[sliderKey].addEventListener("mouseup", this._handleNumberSliderMouseup.bind(this));
64
65             let inputKey = `_${id}Input`;
66             this[inputKey] = row.createChild("input");
67             this[inputKey].type = "number";
68             this[inputKey].addEventListener("input", this._handleNumberInputInput.bind(this));
69             this[inputKey].addEventListener("keydown", this._handleNumberInputKeydown.bind(this));
70         }
71
72         createInputsForParameter.call(this, "mass", WI.UIString("Mass"));
73         this._massInput.min = this._massSlider.min = 1;
74
75         createInputsForParameter.call(this, "stiffness", WI.UIString("Stiffness"));
76         this._stiffnessInput.min = this._stiffnessSlider.min = 1;
77
78         createInputsForParameter.call(this, "damping", WI.UIString("Damping"));
79         this._dampingInput.min = this._dampingSlider.min = 0;
80
81         createInputsForParameter.call(this, "initialVelocity", WI.UIString("Initial Velocity"));
82
83         this._spring = new WI.Spring(1, 100, 10, 0);
84     }
85
86     // Public
87
88     get element()
89     {
90         return this._element;
91     }
92
93     get spring()
94     {
95         return this._spring;
96     }
97
98     set spring(spring)
99     {
100         if (!spring)
101             return;
102
103         let isSpring = spring instanceof WI.Spring;
104         console.assert(isSpring);
105         if (!isSpring)
106             return;
107
108         this._spring = spring;
109         this._massInput.value = this._massSlider.value = this._spring.mass;
110         this._stiffnessInput.value = this._stiffnessSlider.value = this._spring.stiffness;
111         this._dampingInput.value = this._dampingSlider.value = this._spring.damping;
112         this._initialVelocityInput.value = this._initialVelocitySlider.value = this._spring.initialVelocity;
113         this._resetPreviewAnimation();
114     }
115
116     // Private
117
118     _handleNumberInputInput(event)
119     {
120         this._changeSpringForInput(event.target, event.target.value);
121     }
122
123     _handleNumberInputKeydown(event)
124     {
125         let shift = 0;
126         if (event.keyIdentifier === "Up")
127             shift = 1;
128          else if (event.keyIdentifier === "Down")
129             shift = -1;
130
131         if (!shift)
132             return;
133
134         if (event.shiftKey)
135             shift *= 10;
136         else if (event.altKey)
137             shift /= 10;
138
139         let value = parseFloat(event.target.value) || 0;
140         this._changeSpringForInput(event.target, value + shift);
141
142         event.preventDefault();
143     }
144
145     _handleNumberSliderInput(event)
146     {
147         this._changeSpringForInput(event.target, event.target.value);
148     }
149
150     _handleNumberSliderMousedown(event)
151     {
152         this._changeSpringForInput(event.target, event.target.value);
153     }
154
155     _handleNumberSliderMouseup(event)
156     {
157         this._changeSpringForInput(event.target, event.target.value);
158     }
159
160     _changeSpringForInput(target, value)
161     {
162         value = parseFloat(value) || 0;
163
164         switch (target) {
165         case this._massInput:
166         case this._massSlider:
167             if (this._spring.mass === value)
168                 return;
169
170             this._spring.mass = Math.max(1, value);
171             this._massInput.value = this._massSlider.value = this._spring.mass.maxDecimals(3);
172             break;
173         case this._stiffnessInput:
174         case this._stiffnessSlider:
175             if (this._spring.stiffness === value)
176                 return;
177
178             this._spring.stiffness = Math.max(1, value);
179             this._stiffnessInput.value = this._stiffnessSlider.value = this._spring.stiffness.maxDecimals(3);
180             break;
181         case this._dampingInput:
182         case this._dampingSlider:
183             if (this._spring.damping === value)
184                 return;
185
186             this._spring.damping = Math.max(0, value);
187             this._dampingInput.value = this._dampingSlider.value = this._spring.damping.maxDecimals(3);
188             break;
189         case this._initialVelocityInput:
190         case this._initialVelocitySlider:
191             if (this._spring.initialVelocity === value)
192                 return;
193
194             this._spring.initialVelocity = value;
195             this._initialVelocityInput.value = this._initialVelocitySlider.value = this._spring.initialVelocity.maxDecimals(3);
196             break;
197         default:
198             WI.reportInternalError("Input event fired for unrecognized element");
199             return;
200         }
201
202         this.dispatchEventToListeners(WI.SpringEditor.Event.SpringChanged, {spring: this._spring});
203
204         this._resetPreviewAnimation();
205     }
206
207     _resetPreviewAnimation(event)
208     {
209         this._previewContainer.classList.remove("animate");
210         this._previewElement.style.transitionTimingFunction = null;
211         this._previewElement.style.transform = null;
212
213         this._timingContainer.classList.remove("animate");
214         this._timingElement.style.transform = null;
215
216         // Only reset the duration text when a spring parameter is changed.
217         if (!event)
218             this._timingContainer.dataset.duration = "0";
219
220         this._updatePreviewAnimation(event);
221     }
222
223     _updatePreviewAnimation(event)
224     {
225         this._previewContainer.classList.add("animate");
226         this._previewElement.style.transitionTimingFunction = this._spring.toString();
227
228         this._timingContainer.classList.add("animate");
229
230         if (WI.resolvedLayoutDirection() === WI.LayoutDirection.RTL) {
231             this._previewElement.style.transform = "translateX(-85px)";
232             this._timingElement.style.transform = "translateX(-170px)";
233         } else {
234             this._previewElement.style.transform = "translateX(85px)";
235             this._timingElement.style.transform = "translateX(170px)";
236         }
237
238         // Only calculate the duration when a spring parameter is changed.
239         if (!event) {
240             let duration = this._spring.calculateDuration();
241
242             this._timingContainer.dataset.duration = duration.toFixed(2);
243             this._timingElement.style.transitionDuration = `${duration}s`;
244
245             this._previewElement.style.transitionDuration = `${duration}s`;
246         }
247     }
248 };
249
250 WI.SpringEditor.Event = {
251     SpringChanged: "spring-editor-spring-changed"
252 };