UI refresh of Advanced Font Settings Extension

chrome/common/extensions/docs/examples/api/fontSettings/slider.js

+// Copyright (c) 2013 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+'use strict';
+
+/**
+ * @fileoverview A Slider control. Based on Chromium's MediaControls.Slider.
+ */
+
+/**
+ * Creates a slider control.
+ *
+ * @param {HTMLElement} container The containing div element.
+ * @param {number} value Initial value
+ * @param {number} min Minimum value
+ * @param {number} max Maximum value
+ * @param {?function(number)=} opt_onChange Value change handler
+ * @constructor
+ */
+function Slider(container, value, min, max, opt_onChange) {
+  this.container_ = container;
+  this.onChange_ = opt_onChange;
+
+  var document = this.container_.ownerDocument;

[yoshiki, 2013/08/28 08:58:44]

Could you change the name of 'document' to some other name (like
"containerDocument")? JavaScript has "document" in the global space, so using
same name makes readability wrose.

[falken, 2013/08/29 09:35:44]

Done.

+
+  this.container_.classList.add('slider');
+
+  this.input_ = document.createElement('input');
+  this.input_.type = 'range';
+  this.input_.min = min;
+  this.input_.max = max;
+  this.input_.value = value;
+  this.container_.appendChild(this.input_);
+
+  this.input_.addEventListener(
+      'change', this.onInputChange_.bind(this));
+
+  this.bar_ = document.createElement('div');
+  this.bar_.className = 'bar';
+  this.container_.appendChild(this.bar_);
+
+  this.filled_ = document.createElement('div');
+  this.filled_.className = 'filled';
+  this.bar_.appendChild(this.filled_);
+
+  var leftCap = document.createElement('div');
+  leftCap.className = 'cap left';
+  this.bar_.appendChild(leftCap);
+
+  var rightCap = document.createElement('div');
+  rightCap.className = 'cap right';
+  this.bar_.appendChild(rightCap);
+
+  this.updateFilledWidth_();
+};
+
+/**
+ * @return {number} The value of the input control.
+ */
+Slider.prototype.getValue = function() {
+  return this.input_.value;
+};
+
+/**
+ * @param{number} value The value to set the input control to.
+ */
+Slider.prototype.setValue = function(value) {
+  this.input_.value = value;
+  this.updateFilledWidth_();
+};
+
+/**
+ * @return {HTMLInputElement} The underlying input control.
+ */
+Slider.prototype.getInput = function() {
+  return this.input_;
+}
+
+/**
+ * Updates the filled portion of the slider to reflect the slider's current
+ * value.

[yoshiki, 2013/08/28 08:58:44]

Add "@private" anotation.

[falken, 2013/08/29 09:35:44]

Done.

+ */
+Slider.prototype.updateFilledWidth_ = function() {
+  var proportion = (this.input_.value - this.input_.min) /
+      (this.input_.max - this.input_.min);
+  this.filled_.style.width = proportion * 100 + '%';
+};
+
+/**
+ * Called when the slider's value changes.

[yoshiki, 2013/08/28 08:58:44]

ditto

[falken, 2013/08/29 09:35:44]

Done.

+ */
+Slider.prototype.onInputChange_ = function() {
+  this.updateFilledWidth_();
+  if (this.onChange_)
+    this.onChange_(this.input_.value);
+};
+