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