| 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 |