ui/file_manager/audio_player/elements/volume_controller.js

   1 // Copyright 2014 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 (function() {
   6   'use strict';
   7
   8   /**
   9    * @constructor
  10    * @extends {PolymerElement}
  11    */
  12   var VolumeControllerElement = function() {};
  13
  14   VolumeControllerElement.prototype = {
  15     /**
  16      * Initializes an element. This method is called automatically when the
  17      * element is ready.
  18      */
  19     ready: function() {
  20       this.style.width = this.width + 'px';
  21       this.style.height = this.height + 'px';
  22
  23       this.rawValueInput = this.$.rawValueInput;
  24       this.bar = this.$.bar;
  25
  26       this.rawValueInput.style.width = this.height + 'px';
  27       this.rawValueInput.style.height = this.width + 'px';
  28       this.rawValueInput.style.webkitTransformOrigin =
  29           (this.width / 2) + 'px ' +
  30           (this.width / 2 - 2) + 'px';
  31
  32       var barLeft = (this.width / 2 - 1);
  33       this.bar.style.left = barLeft + 'px';
  34       this.bar.style.right = barLeft + 'px';
  35
  36       this.addEventListener('keydown', this.onKeyDown_.bind(this));
  37     },
  38
  39     /**
  40      * Registers handlers for changing of external variables
  41      */
  42     observe: {
  43       'model.volume': 'onVolumeChanged',
  44     },
  45
  46     /**
  47      * Model object of the Audio Player.
  48      * @type {AudioPlayerModel}
  49      */
  50     model: null,
  51
  52     /**
  53      * Invoked when the model changed.
  54      * @param {AudioPlayerModel} oldValue Old Value.
  55      * @param {AudioPlayerModel} newValue New Value.
  56      */
  57     modelChanged: function(oldValue, newValue) {
  58       this.onVolumeChanged((oldValue || {}).volume, (newValue || {}).volume);
  59     },
  60
  61     /**
  62      * Volume. 0 is silent, and 100 is maximum.
  63      * @type {number}
  64      */
  65     value: 50,
  66
  67     /**
  68      * Volume. 1000 is silent, and 0 is maximum.
  69      * @type {number}
  70      */
  71     rawValue: 0,
  72
  73     /**
  74      * Height of the element in pixels. Must be specified before ready() is
  75      * called. Dynamic change is not supported.
  76      * @type {number}
  77      */
  78     height: 100,
  79
  80     /**
  81      * Width of the element in pixels. Must be specified before ready() is
  82      * called. Dynamic change is not supported.
  83      * @type {number}
  84      */
  85     width: 32,
  86
  87     /**
  88      * Invoked when the 'volume' value in the model is changed.
  89      * @param {number} oldValue Old value.
  90      * @param {number} newValue New value.
  91      */
  92     onVolumeChanged: function(oldValue, newValue) {
  93       if (oldValue != newValue)
  94         this.rawValue = 100 - newValue;
  95     },
  96
  97     /**
  98      * Invoked when the 'rawValue' property is changed.
  99      * @param {number} oldValue Old value.
 100      * @param {number} newValue New value.
 101      */
 102     rawValueChanged: function(oldValue, newValue) {
 103       if (oldValue != newValue)
 104         this.model.volume = 100 - newValue;
 105     },
 106
 107     /**
 108      * Invoked when the 'keydown' event is fired.
 109      * @param {Event} event The event object.
 110      */
 111     onKeyDown_: function(event) {
 112       switch (event.keyIdentifier) {
 113         // Prevents the default behavior. These key should be handled in
 114         // <audio-player> element.
 115         case 'Up':
 116         case 'Down':
 117         case 'PageUp':
 118         case 'PageDown':
 119           event.preventDefault();
 120           break;
 121       }
 122     },
 123   };
 124
 125   Polymer('volume-controller', VolumeControllerElement.prototype);
 126 })();  // Anonymous closure