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