OLD | NEW |
1 // Copyright 2017 The Chromium Authors. All rights reserved. | 1 // Copyright 2017 The Chromium Authors. All rights reserved. |
2 // Use of this source code is governed by a BSD-style license that can be | 2 // Use of this source code is governed by a BSD-style license that can be |
3 // found in the LICENSE file. | 3 // found in the LICENSE file. |
4 | 4 |
5 /** | 5 /** |
6 * @fileoverview | 6 * @fileoverview |
7 * night-light-slider is used to set the custom automatic schedule of the | 7 * night-light-slider is used to set the custom automatic schedule of the |
8 * Night Light feature, so that users can set their desired start and end | 8 * Night Light feature, so that users can set their desired start and end |
9 * times. | 9 * times. |
10 */ | 10 */ |
(...skipping 35 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
46 * The end knob time as a string to be shown on the end label bubble. | 46 * The end knob time as a string to be shown on the end label bubble. |
47 * @private | 47 * @private |
48 */ | 48 */ |
49 endTime_: { | 49 endTime_: { |
50 type: String, | 50 type: String, |
51 }, | 51 }, |
52 }, | 52 }, |
53 | 53 |
54 observers: [ | 54 observers: [ |
55 'customTimesChanged_(prefs.ash.night_light.custom_start_time.*, ' + | 55 'customTimesChanged_(prefs.ash.night_light.custom_start_time.*, ' + |
56 'prefs.ash.night_light.custom_end_time.*)', | 56 'prefs.ash.night_light.custom_end_time.*)', |
57 ], | 57 ], |
58 | 58 |
59 keyBindings: { | 59 keyBindings: { |
60 'left': 'onLeftKey_', | 60 'left': 'onLeftKey_', |
61 'right': 'onRightKey_', | 61 'right': 'onRightKey_', |
62 }, | 62 }, |
63 | 63 |
64 ready: function() { | 64 ready: function() { |
65 // Build the legend markers. | 65 // Build the legend markers. |
66 var markersContainer = this.$.markersContainer; | 66 var markersContainer = this.$.markersContainer; |
(...skipping 84 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
151 * bubble and its text contents. | 151 * bubble and its text contents. |
152 * @private | 152 * @private |
153 */ | 153 */ |
154 doKnobTracking_: function(event) { | 154 doKnobTracking_: function(event) { |
155 var deltaRatio = Math.abs(event.detail.ddx) / this.$.sliderBar.offsetWidth; | 155 var deltaRatio = Math.abs(event.detail.ddx) / this.$.sliderBar.offsetWidth; |
156 var deltaMinutes = Math.floor(deltaRatio * TOTAL_MINUTES_PER_DAY); | 156 var deltaMinutes = Math.floor(deltaRatio * TOTAL_MINUTES_PER_DAY); |
157 if (deltaMinutes <= 0) | 157 if (deltaMinutes <= 0) |
158 return; | 158 return; |
159 | 159 |
160 var knobPref = this.dragObject_ == this.$.startKnob ? | 160 var knobPref = this.dragObject_ == this.$.startKnob ? |
161 'ash.night_light.custom_start_time' : 'ash.night_light.custom_end_time'; | 161 'ash.night_light.custom_start_time' : |
| 162 'ash.night_light.custom_end_time'; |
162 | 163 |
163 if (event.detail.ddx > 0) { | 164 if (event.detail.ddx > 0) { |
164 // Increment the knob's pref by the amount of deltaMinutes. | 165 // Increment the knob's pref by the amount of deltaMinutes. |
165 this.incrementPref_(knobPref, deltaMinutes); | 166 this.incrementPref_(knobPref, deltaMinutes); |
166 } else { | 167 } else { |
167 // Decrement the knob's pref by the amount of deltaMinutes. | 168 // Decrement the knob's pref by the amount of deltaMinutes. |
168 this.decrementPref_(knobPref, deltaMinutes); | 169 this.decrementPref_(knobPref, deltaMinutes); |
169 } | 170 } |
170 }, | 171 }, |
171 | 172 |
(...skipping 49 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
221 hour = hour == 0 ? 12 : hour; | 222 hour = hour == 0 ? 12 : hour; |
222 var minute = Math.floor(offsetMinutes % 60); | 223 var minute = Math.floor(offsetMinutes % 60); |
223 return hour + ':' + this.pad2_(minute) + amPm; | 224 return hour + ':' + this.pad2_(minute) + amPm; |
224 }, | 225 }, |
225 | 226 |
226 /** | 227 /** |
227 * Handles changes in the start and end times prefs. | 228 * Handles changes in the start and end times prefs. |
228 * @private | 229 * @private |
229 */ | 230 */ |
230 customTimesChanged_: function() { | 231 customTimesChanged_: function() { |
231 var startOffsetMinutes = /** @type {number} */( | 232 var startOffsetMinutes = /** @type {number} */ ( |
232 this.getPref('ash.night_light.custom_start_time').value); | 233 this.getPref('ash.night_light.custom_start_time').value); |
233 this.startTime_ = this.offsetMinutesToTimeString_(startOffsetMinutes); | 234 this.startTime_ = this.offsetMinutesToTimeString_(startOffsetMinutes); |
234 this.updateKnobLeft_(this.$.startKnob, startOffsetMinutes); | 235 this.updateKnobLeft_(this.$.startKnob, startOffsetMinutes); |
235 var endOffsetMinutes = /** @type {number} */( | 236 var endOffsetMinutes = /** @type {number} */ ( |
236 this.getPref('ash.night_light.custom_end_time').value); | 237 this.getPref('ash.night_light.custom_end_time').value); |
237 this.endTime_ = this.offsetMinutesToTimeString_(endOffsetMinutes); | 238 this.endTime_ = this.offsetMinutesToTimeString_(endOffsetMinutes); |
238 this.updateKnobLeft_(this.$.endKnob, endOffsetMinutes); | 239 this.updateKnobLeft_(this.$.endKnob, endOffsetMinutes); |
239 this.refresh_(); | 240 this.refresh_(); |
240 }, | 241 }, |
241 | 242 |
242 /** | 243 /** |
243 * Updates the absolute left coordinate of the given |knob| based on the time | 244 * Updates the absolute left coordinate of the given |knob| based on the time |
244 * it represents given as an |offsetMinutes| value. | 245 * it represents given as an |offsetMinutes| value. |
245 * @param {HTMLDivElement} knob | 246 * @param {HTMLDivElement} knob |
246 * @param {number} offsetMinutes | 247 * @param {number} offsetMinutes |
247 * @private | 248 * @private |
248 */ | 249 */ |
249 updateKnobLeft_: function(knob, offsetMinutes) { | 250 updateKnobLeft_: function(knob, offsetMinutes) { |
250 var offsetAfter6pm = | 251 var offsetAfter6pm = |
251 (offsetMinutes + TOTAL_MINUTES_PER_DAY - OFFSET_MINUTES_6PM) % | 252 (offsetMinutes + TOTAL_MINUTES_PER_DAY - OFFSET_MINUTES_6PM) % |
252 TOTAL_MINUTES_PER_DAY; | 253 TOTAL_MINUTES_PER_DAY; |
253 var ratio = offsetAfter6pm / TOTAL_MINUTES_PER_DAY; | 254 var ratio = offsetAfter6pm / TOTAL_MINUTES_PER_DAY; |
254 | 255 |
255 if (ratio == 0) { | 256 if (ratio == 0) { |
256 // If the ratio is 0, then there are two possibilities: | 257 // If the ratio is 0, then there are two possibilities: |
257 // - The knob time is 6:00 PM on the left side of the slider. | 258 // - The knob time is 6:00 PM on the left side of the slider. |
258 // - The knob time is 6:00 PM on the right side of the slider. | 259 // - The knob time is 6:00 PM on the right side of the slider. |
259 // We need to check the current knob offset ratio to determine which case | 260 // We need to check the current knob offset ratio to determine which case |
260 // it is. | 261 // it is. |
261 var currentKnobRatio = this.getKnobRatio_(knob); | 262 var currentKnobRatio = this.getKnobRatio_(knob); |
262 ratio = currentKnobRatio > 0.5 ? 1.0 : 0.0; | 263 ratio = currentKnobRatio > 0.5 ? 1.0 : 0.0; |
(...skipping 15 matching lines...) Expand all Loading... |
278 var startLabel = this.$.startLabel; | 279 var startLabel = this.$.startLabel; |
279 var endLabel = this.$.endLabel; | 280 var endLabel = this.$.endLabel; |
280 | 281 |
281 // The label bubbles have the same left coordinates as their corresponding | 282 // The label bubbles have the same left coordinates as their corresponding |
282 // knobs. | 283 // knobs. |
283 startLabel.style.left = startKnob.style.left; | 284 startLabel.style.left = startKnob.style.left; |
284 endLabel.style.left = endKnob.style.left; | 285 endLabel.style.left = endKnob.style.left; |
285 | 286 |
286 // The end progress bar starts from either the start knob or the start of | 287 // The end progress bar starts from either the start knob or the start of |
287 // the slider (whichever is to its left) and ends at the end knob. | 288 // the slider (whichever is to its left) and ends at the end knob. |
288 var endProgressLeft = startKnob.offsetLeft >= endKnob.offsetLeft | 289 var endProgressLeft = startKnob.offsetLeft >= endKnob.offsetLeft ? |
289 ? '0px' : startKnob.style.left; | 290 '0px' : |
| 291 startKnob.style.left; |
290 endProgress.style.left = endProgressLeft; | 292 endProgress.style.left = endProgressLeft; |
291 endProgress.style.width = | 293 endProgress.style.width = |
292 (parseFloat(endKnob.style.left) - parseFloat(endProgressLeft)) + 'px'; | 294 (parseFloat(endKnob.style.left) - parseFloat(endProgressLeft)) + 'px'; |
293 | 295 |
294 // The start progress bar starts at the start knob, and ends at either the | 296 // The start progress bar starts at the start knob, and ends at either the |
295 // end knob or the end of the slider (whichever is to its right). | 297 // end knob or the end of the slider (whichever is to its right). |
296 var startProgressRight = endKnob.offsetLeft < startKnob.offsetLeft | 298 var startProgressRight = endKnob.offsetLeft < startKnob.offsetLeft ? |
297 ? this.$.sliderBar.offsetWidth | 299 this.$.sliderBar.offsetWidth : |
298 : endKnob.style.left; | 300 endKnob.style.left; |
299 startProgress.style.left = startKnob.style.left; | 301 startProgress.style.left = startKnob.style.left; |
300 startProgress.style.width = | 302 startProgress.style.width = |
301 (parseFloat(startProgressRight) - parseFloat(startKnob.style.left)) + | 303 (parseFloat(startProgressRight) - parseFloat(startKnob.style.left)) + |
302 'px'; | 304 'px'; |
303 | 305 |
304 this.fixLabelsOverlapIfAny_(); | 306 this.fixLabelsOverlapIfAny_(); |
305 }, | 307 }, |
306 | 308 |
307 /** | 309 /** |
308 * If the label bubbles overlap, this function fixes them by moving the end | 310 * If the label bubbles overlap, this function fixes them by moving the end |
309 * label up a little. | 311 * label up a little. |
310 * @private | 312 * @private |
311 */ | 313 */ |
312 fixLabelsOverlapIfAny_: function() { | 314 fixLabelsOverlapIfAny_: function() { |
313 var startLabel = this.$.startLabel; | 315 var startLabel = this.$.startLabel; |
314 var endLabel = this.$.endLabel; | 316 var endLabel = this.$.endLabel; |
315 var distance = Math.abs(parseFloat(startLabel.style.left) - | 317 var distance = Math.abs( |
316 parseFloat(endLabel.style.left)); | 318 parseFloat(startLabel.style.left) - parseFloat(endLabel.style.left)); |
317 if (distance <= startLabel.offsetWidth) { | 319 if (distance <= startLabel.offsetWidth) { |
318 // Shift the end label up so that it doesn't overlap with the start label. | 320 // Shift the end label up so that it doesn't overlap with the start label. |
319 endLabel.classList.add('end-label-overlap'); | 321 endLabel.classList.add('end-label-overlap'); |
320 } else { | 322 } else { |
321 endLabel.classList.remove('end-label-overlap'); | 323 endLabel.classList.remove('end-label-overlap'); |
322 } | 324 } |
323 }, | 325 }, |
324 | 326 |
325 /** | 327 /** |
326 * Given the |prefPath| that corresponds to one knob time, it gets the value | 328 * Given the |prefPath| that corresponds to one knob time, it gets the value |
(...skipping 44 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
371 }, | 373 }, |
372 | 374 |
373 /** | 375 /** |
374 * Decrements the value of the pref whose path is given by |prefPath| by the | 376 * Decrements the value of the pref whose path is given by |prefPath| by the |
375 * amount given in |decrement|. | 377 * amount given in |decrement|. |
376 * @param {string} prefPath | 378 * @param {string} prefPath |
377 * @param {number} decrement | 379 * @param {number} decrement |
378 * @private | 380 * @private |
379 */ | 381 */ |
380 decrementPref_: function(prefPath, decrement) { | 382 decrementPref_: function(prefPath, decrement) { |
381 var value = /** @type {number} */(this.getPref(prefPath).value) - decrement; | 383 var value = |
| 384 /** @type {number} */ (this.getPref(prefPath).value) - decrement; |
382 | 385 |
383 var otherValue = this.getOtherKnobPrefValue_(prefPath); | 386 var otherValue = this.getOtherKnobPrefValue_(prefPath); |
384 if (value > otherValue && | 387 if (value > otherValue && |
385 ((value - otherValue) < MIN_KNOBS_DISTANCE_MINUTES)) { | 388 ((value - otherValue) < MIN_KNOBS_DISTANCE_MINUTES)) { |
386 // We are decrementing the minutes offset moving towards the other knob. | 389 // We are decrementing the minutes offset moving towards the other knob. |
387 // We have a minimum 30 minutes overlap threshold. Move this knob to the | 390 // We have a minimum 30 minutes overlap threshold. Move this knob to the |
388 // other side of the other knob. | 391 // other side of the other knob. |
389 // | 392 // |
390 // Was: | 393 // Was: |
391 // <<------ + --- 29 MIN --- (+) ------- | 394 // <<------ + --- 29 MIN --- (+) ------- |
(...skipping 48 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
440 */ | 443 */ |
441 onRightKey_: function(e) { | 444 onRightKey_: function(e) { |
442 e.preventDefault(); | 445 e.preventDefault(); |
443 var knobPref = this.getFocusedKnobPrefPathIfAny_(); | 446 var knobPref = this.getFocusedKnobPrefPathIfAny_(); |
444 if (!knobPref) | 447 if (!knobPref) |
445 return; | 448 return; |
446 | 449 |
447 this.incrementPref_(knobPref, 1); | 450 this.incrementPref_(knobPref, 1); |
448 }, | 451 }, |
449 }); | 452 }); |
OLD | NEW |