AudioPlayer.app: Migrate to Polymer 1.0.

ui/file_manager/audio_player/elements/volume_controller.js

Index: ui/file_manager/audio_player/elements/volume_controller.js
diff --git a/ui/file_manager/audio_player/elements/volume_controller.js b/ui/file_manager/audio_player/elements/volume_controller.js
index 4e9fa625d0c8a7f1d877a09abaa7018f6c8510c4..abdfcaa7b2e0e970fb5e3e7a8479da94b01317fc 100644
--- a/ui/file_manager/audio_player/elements/volume_controller.js
+++ b/ui/file_manager/audio_player/elements/volume_controller.js
@@ -12,6 +12,52 @@
   var VolumeControllerElement = function() {};
 
   VolumeControllerElement.prototype = {
+    is: 'volume-controller',
+
+    properties: {
+      /**
+       * Width of the element in pixels. Must be specified before ready() is
+       * called. Dynamic change is not supported.
+       * @type {number}
+       */
+      width: {
+        type: Number,
+        value: 32
+      },
+
+      /**
+       * Height of the element in pixels. Must be specified before ready() is
+       * called. Dynamic change is not supported.
+       * @type {number}
+       */
+      height: {
+        type: Number,
+        value: 100
+      },
+
+      /**
+       * Volume. 0 is silent, and 100 is maximum.
+       * @type {number}
+       */
+      value: {
+        type: Number,
+        value: 50,
+        observer: 'valueChanged',
+        notify: true
+      },
+
+      /**
+       * Volume. 100 is silent, and 0 is maximum.
+       * @type {number}
+       */
+      rawValue: {
+        type: Number,
+        value: 0,
+        observer: 'rawValueChanged',
+        notify: true
+      }
+    },
+
     /**
      * Initializes an element. This method is called automatically when the
      * element is ready.
@@ -37,71 +83,23 @@
     },
 
     /**
-     * Registers handlers for changing of external variables
-     */
-    observe: {
-      'model.volume': 'onVolumeChanged',
-    },
-
-    /**
-     * Model object of the Audio Player.
-     * @type {AudioPlayerModel}
-     */
-    model: null,
-
-    /**
-     * Invoked when the model changed.
-     * @param {AudioPlayerModel} oldValue Old Value.
-     * @param {AudioPlayerModel} newValue New Value.
-     */
-    modelChanged: function(oldValue, newValue) {
-      this.onVolumeChanged((oldValue || {}).volume, (newValue || {}).volume);
-    },
-
-    /**
-     * Volume. 0 is silent, and 100 is maximum.
-     * @type {number}
-     */
-    value: 50,
-
-    /**
-     * Volume. 1000 is silent, and 0 is maximum.
-     * @type {number}
-     */
-    rawValue: 0,
-
-    /**
-     * Height of the element in pixels. Must be specified before ready() is
-     * called. Dynamic change is not supported.
-     * @type {number}
-     */
-    height: 100,
-
-    /**
-     * Width of the element in pixels. Must be specified before ready() is
-     * called. Dynamic change is not supported.
-     * @type {number}
-     */
-    width: 32,
-
-    /**
-     * Invoked when the 'volume' value in the model is changed.
-     * @param {number} oldValue Old value.
+     * Invoked when the 'volume' value is changed.
      * @param {number} newValue New value.
+     * @param {number} oldValue Old value.
      */
-    onVolumeChanged: function(oldValue, newValue) {
+    valueChanged: function(newValue, oldValue) {
       if (oldValue != newValue)
         this.rawValue = 100 - newValue;
     },
 
     /**
      * Invoked when the 'rawValue' property is changed.
-     * @param {number} oldValue Old value.
      * @param {number} newValue New value.
+     * @param {number} oldValue Old value.
      */
-    rawValueChanged: function(oldValue, newValue) {
-      if (oldValue != newValue)
-        this.model.volume = 100 - newValue;
+    rawValueChanged: function(newValue, oldValue) {
+      if (oldValue !== newValue)
+        this.value = 100 - newValue;
     },
 
     /**
@@ -120,7 +118,15 @@
           break;
       }
     },
+
+    /**
+     * Computes style for '.filled' element based on raw value.
+     * @return {string}
+     */
+    computeFilledStyle_: function(rawValue) {
+      return 'height: ' + rawValue + '%;';
+    }
   };
 
-  Polymer('volume-controller', VolumeControllerElement.prototype);
+  Polymer(VolumeControllerElement.prototype);
 })();  // Anonymous closure