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

   1 // Copyright 2013 The Chromium Authors. All rights reserved.
   2 // Use of this source code is governed by a BSD-style license that can be
   3 // found in the LICENSE file.
   4
   5 'use strict';
   6
   7 /**
   8  * @fileoverview A Slider control. Based on Chromium's MediaControls.Slider.
   9  */
  10
  11 /**
  12  * Creates a slider control.
  13  *
  14  * @param {HTMLElement} container The containing div element.
  15  * @param {number} value Initial value
  16  * @param {number} min Minimum value
  17  * @param {number} max Maximum value
  18  * @param {?function(number)=} opt_onChange Value change handler
  19  * @constructor
  20  */
  21 function Slider(container, value, min, max, opt_onChange) {
  22   this.container_ = container;
  23   this.onChange_ = opt_onChange;
  24
  25   var containerDocument = this.container_.ownerDocument;
  26
  27   this.container_.classList.add('slider');
  28
  29   this.input_ = containerDocument.createElement('input');
  30   this.input_.type = 'range';
  31   this.input_.min = min;
  32   this.input_.max = max;
  33   this.input_.value = value;
  34   this.container_.appendChild(this.input_);
  35
  36   this.input_.addEventListener(
  37       'change', this.onInputChange_.bind(this));
  38   this.input_.addEventListener(
  39       'input', this.onInputChange_.bind(this));
  40
  41   this.bar_ = containerDocument.createElement('div');
  42   this.bar_.className = 'bar';
  43   this.container_.appendChild(this.bar_);
  44
  45   this.filled_ = containerDocument.createElement('div');
  46   this.filled_.className = 'filled';
  47   this.bar_.appendChild(this.filled_);
  48
  49   var leftCap = containerDocument.createElement('div');
  50   leftCap.className = 'cap left';
  51   this.bar_.appendChild(leftCap);
  52
  53   var rightCap = containerDocument.createElement('div');
  54   rightCap.className = 'cap right';
  55   this.bar_.appendChild(rightCap);
  56
  57   this.updateFilledWidth_();
  58 };
  59
  60 /**
  61  * @return {number} The value of the input control.
  62  */
  63 Slider.prototype.getValue = function() {
  64   return this.input_.value;
  65 };
  66
  67 /**
  68  * @param{number} value The value to set the input control to.
  69  */
  70 Slider.prototype.setValue = function(value) {
  71   this.input_.value = value;
  72   this.updateFilledWidth_();
  73 };
  74
  75 /**
  76  * @return {HTMLInputElement} The underlying input control.
  77  */
  78 Slider.prototype.getInput = function() {
  79   return this.input_;
  80 }
  81
  82 /**
  83  * Updates the filled portion of the slider to reflect the slider's current
  84  * value.
  85  * @private
  86  */
  87 Slider.prototype.updateFilledWidth_ = function() {
  88   var proportion = (this.input_.value - this.input_.min) /
  89       (this.input_.max - this.input_.min);
  90   this.filled_.style.width = proportion * 100 + '%';
  91 };
  92
  93 /**
  94  * Called when the slider's value changes.
  95  * @private
  96  */
  97 Slider.prototype.onInputChange_ = function() {
  98   this.updateFilledWidth_();
  99   if (this.onChange_)
 100     this.onChange_(this.input_.value);
 101 };
 102