AudioPlayer.app: Migrate to Polymer 1.0.

ui/file_manager/audio_player/elements/track_list.js

 // Copyright 2014 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.
 
 (function() {
   'use strict';
 
   /**
    * @constructor
    * @extends {PolymerElement}
    */
   var TrackListElement = function() {};
 
   TrackListElement.prototype = {
+    is: 'track-list',
+
+    properties: {
+      /**
+       * List of tracks.
+       * @type {Array<AudioPlayer.TrackInfo>}
+       */
+      tracks: {
+        type: Array,
+        value: [],
+        observer: 'tracksChanged'
+      },
+
+      /**
+       * Track index of the current track.
+       * If the tracks property is empty, it should be -1. Otherwise, be a valid
+       * track number.
+       */
+      currentTrackIndex: {
+        type: Number,
+        value: -1,
+        observer: 'currentTrackIndexChanged',
+        notify: true
+      },
+
+      /**
+       * Whether shuffling play order is enabled or not.
+       */
+      shuffle: {
+        type: Boolean,
+        value: false,
+        observer: 'shuffleChanged'
+      }
+    },
+
     /**
      * Initializes an element. This method is called automatically when the
      * element is ready.
      */
     ready: function() {
       this.observeTrackList();
 
       window.addEventListener('resize', this.onWindowResize_.bind(this));
     },
 
     observeTrackList: function() {
       // Unobserve the previous track list.
       if (this.unobserveTrackList_)
         this.unobserveTrackList_();
 
       // Observe the new track list.
       var observer = this.tracksValueChanged_.bind(this);
       Array.observe(this.tracks, observer);
 
       // Set the function to unobserve it.
       this.unobserveTrackList_ = function(tracks, observer) {
         Array.unobserve(tracks, observer);
       }.bind(null, this.tracks, observer);
     },
 
     /**
-     * Registers handlers for changing of external variables
-     */
-    observe: {
-      'model.shuffle': 'onShuffleChanged',
-    },
-
-    /**
-     * Model object of the Audio Player.
-     * @type {AudioPlayerModel}
-     */
-    model: null,
-
-    /**
-     * List of tracks.
-     * @type {Array<AudioPlayer.TrackInfo>}
-     */
-    tracks: [],
-
-    /**
      * Play order of the tracks. Each value is the index of 'this.tracks'.
      * @type {Array<number>}
      */
     playOrder: [],
 
     /**
-     * Track index of the current track.
-     * If the tracks property is empty, it should be -1. Otherwise, be a valid
-     * track number.
-     *
-     * @type {number}
+     * Invoked when 'shuffle' property is changed.
+     * @param {boolean} newValue New value.
+     * @param {boolean} oldValue Old value.
      */
-    currentTrackIndex: -1,
-
-    /**
-     * Invoked when 'shuffle' property is changed.
-     * @param {boolean} oldValue Old value.
-     * @param {boolean} newValue New value.
-     */
-    onShuffleChanged: function(oldValue, newValue) {
+    shuffleChanged: function(newValue, oldValue) {
       this.generatePlayOrder(true /* keep the current track */);
     },
 
     /**
      * Invoked when the current track index is changed.
+     * @param {number} newValue new value.
      * @param {number} oldValue old value.
-     * @param {number} newValue new value.
      */
-    currentTrackIndexChanged: function(oldValue, newValue) {
+    currentTrackIndexChanged: function(newValue, oldValue) {
       if (oldValue === newValue)
         return;
 
       if (!isNaN(oldValue) && 0 <= oldValue && oldValue < this.tracks.length)
-        this.tracks[oldValue].active = false;
+        this.set('tracks.' + oldValue + '.active', false);
 
       if (0 <= newValue && newValue < this.tracks.length) {
         var currentPlayOrder = this.playOrder.indexOf(newValue);
         if (currentPlayOrder !== -1) {
           // Success
-          this.tracks[newValue].active = true;
+          this.set('tracks.' + newValue + '.active', true);
 
           this.ensureTrackInViewport_(newValue /* trackIndex */);
           return;
         }
       }
 
       // Invalid index
       if (this.tracks.length === 0)
         this.currentTrackIndex = -1;
       else
         this.generatePlayOrder(false /* no need to keep the current track */);
     },
 
     /**
      * Invoked when 'tracks' property is changed.
+     * @param {Array<AudioPlayer.TrackInfo>} newValue New value.
      * @param {Array<AudioPlayer.TrackInfo>} oldValue Old value.
-     * @param {Array<AudioPlayer.TrackInfo>} newValue New value.
      */
-    tracksChanged: function(oldValue, newValue) {
+    tracksChanged: function(newValue, oldValue) {
       // Note: Sometimes both oldValue and newValue are null though the actual
       // values are not null. Maybe it's a bug of Polymer.
 
       // Re-register the observer of 'this.tracks'.
       this.observeTrackList();
 
       if (this.tracks.length !== 0) {
         // Restore the active track.
         if (this.currentTrackIndex !== -1 &&
             this.currentTrackIndex < this.tracks.length) {
-          this.tracks[this.currentTrackIndex].active = true;
+          this.set('tracks.' + this.currentTrackIndex + '.active', true);
         }
 
         // Reset play order and current index.
         this.generatePlayOrder(false /* no need to keep the current track */);
       } else {
         this.playOrder = [];
         this.currentTrackIndex = -1;
       }
     },
 
     /**
      * Invoked when the value in the 'tracks' is changed.
      * @param {Array<Object>} changes The detail of the change.
      */
     tracksValueChanged_: function(changes) {
       if (this.tracks.length === 0)
         this.currentTrackIndex = -1;
       else
-        this.tracks[this.currentTrackIndex].active = true;
+        this.set('tracks.' + this.currentTrackIndex + '.active', true);
     },
 
     /**
      * Invoked when the track element is clicked.
      * @param {Event} event Click event.
      */
     trackClicked: function(event) {
       var index = ~~event.currentTarget.getAttribute('index');
       var track = this.tracks[index];
       if (track)
@@ skipping 46 matching lines @@
       if (this.tracks.length === 0) {
         this.playOrder = [];
         return;
       }
 
       // Creates sequenced array.
       this.playOrder =
           this.tracks.
           map(function(unused, index) { return index; });
 
-      if (this.model && this.model.shuffle) {
+      if (this.shuffle) {
         // Randomizes the play order array (Schwarzian-transform algorithm).
         this.playOrder = this.playOrder
             .map(function(a) {
               return {weight: Math.random(), index: a};
             })
             .sort(function(a, b) { return a.weight - b.weight })
             .map(function(a) { return a.index });
 
         if (keepCurrentTrack) {
           // Puts the current track at the beginning of the play order.
@@ skipping 79 matching lines @@
 
       var newTrackIndex = this.playOrder[newPlayOrder];
       console.assert(
           (0 <= newTrackIndex && newTrackIndex < this.tracks.length),
           'Insufficient TrackList.playOrder. New Play Order: ' + newPlayOrder);
 
       return newTrackIndex;
     },
   };  // TrackListElement.prototype for 'track-list'
 
-  Polymer('track-list', TrackListElement.prototype);
+  Polymer(TrackListElement.prototype);
 })();  // Anonymous closure