Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(175)

Side by Side Diff: chrome/browser/resources/settings/device_page/night_light_slider.js

Issue 2946563002: Run clang-format on .js files in c/b/r/settings (Closed)
Patch Set: dschuyler@ review Created 3 years, 6 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
OLDNEW
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
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
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
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
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
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
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 });
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698