UI refresh of Advanced Font Settings Extension

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

Index: chrome/common/extensions/docs/examples/api/fontSettings/slider.js
diff --git a/chrome/common/extensions/docs/examples/api/fontSettings/slider.js b/chrome/common/extensions/docs/examples/api/fontSettings/slider.js
new file mode 100644
index 0000000000000000000000000000000000000000..cc2b3c65eb155fc72c948e93837fcad6561aebe7
--- /dev/null
+++ b/chrome/common/extensions/docs/examples/api/fontSettings/slider.js
@@ -0,0 +1,100 @@
+// 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)} onChange Value change handler.
+ * @param {function(boolean)} onDrag Drag begin/end handler.

[yoshiki, 2013/08/28 02:53:35]

Is 'onDrag' and/or 'onChange' are optional parameter? If so, rename them to
'opt_onDrag' or 'opt_onChange'

http://google-styleguide.googlecode.com/svn/trunk/javascriptguide.xml?showone...

[falken, 2013/08/28 08:36:16]

Done. Actually I don't need on drag anywhere, so I just deleted it.

+ * @constructor
+ */
+
+function Slider(container, value, min, max, onChange, onDrag) {
+  this.container_ = container;
+  this.onChange_ = onChange;
+  this.onDrag_ = onDrag;
+
+  var document = this.container_.ownerDocument;
+
+  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.input_.addEventListener(
+      'mousedown', this.onInputDrag_.bind(this, true));
+  this.input_.addEventListener(
+      'mouseup', this.onInputDrag_.bind(this, false));
+
+  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_();
+};
+
+Slider.prototype.getValue = function() {

[yoshiki, 2013/08/28 02:53:35]

Please write JSdoc.

[falken, 2013/08/28 08:36:16]

Done.

+  return this.input_.value;
+};
+
+Slider.prototype.setValue = function(value) {
+  this.input_.value = value;
+  this.updateFilledWidth_();
+};
+
+Slider.prototype.getInput = function() {
+  return this.input_;
+}
+
+Slider.prototype.updateFilledWidth_ = function() {
+  var proportion =(this.input_.value - this.input_.min) /

[yoshiki, 2013/08/28 02:53:35]

Add a space after "=".

[falken, 2013/08/28 08:36:16]

Done.

+      (this.input_.max - this.input_.min);
+  this.filled_.style.width = proportion * 100 + '%';
+};
+
+Slider.prototype.onInputChange_ = function() {
+  this.updateFilledWidth_();
+  if (this.onChange_) {

[yoshiki, 2013/08/28 02:53:35]

Curly brackets are unnecessary, since there is only a line in the block.

[falken, 2013/08/28 08:36:16]

Done.

+    this.onChange_(this.input_.value);
+  }
+};
+
+Slider.prototype.isDragging = function() {
+  return this.isDragging_;
+};
+
+Slider.prototype.onInputDrag_ = function(on) {
+  this.isDragging_ = on;
+  if (this.onDrag_)
+    this.onDrag_(on);
+};
+