Hook up custom wallpaper code path to new wallpaper picker.

chrome/browser/resources/chromeos/wallpaper_manager/js/wallpaper_manager.js

 // Copyright (c) 2012 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.
 
 /**
  * WallpaperManager constructor.
  *
  * WallpaperManager objects encapsulate the functionality of the wallpaper
  * manager extension.
  *
  * @constructor
  * @param {HTMLElement} dialogDom The DOM node containing the prototypical
  *     extension UI.
  */
 
 function WallpaperManager(dialogDom) {
   this.dialogDom_ = dialogDom;
   this.document_ = dialogDom.ownerDocument;
   this.selectedCategory = null;
   this.currentButter_ = null;
+  this.customWallpaperData_ = null;
   this.fetchManifest_();
   this.initDom_();
 }
 
 // Anonymous 'namespace'.
 // TODO(bshe): Get rid of anonymous namespace.
 (function() {
 
   /**
    * Base URL of the manifest file.
@@ skipping 73 matching lines @@
    * One-time initialization of various DOM nodes.
    */
   WallpaperManager.prototype.initDom_ = function() {
     i18nTemplate.process(this.document_, loadTimeData);
     this.initCategoriesList_();
     this.initThumbnailsGrid_();
 
     // Selects the first category in the list as default.
     this.categoriesList_.selectionModel.selectedIndex = 0;
 
-    this.dialogDom_.querySelector('#file-selector').addEventListener(
+    $('file-selector').addEventListener(
         'change', this.onFileSelectorChanged_.bind(this));
 
+    $('set-wallpaper-layout').addEventListener(
+        'change', this.onWallpaperLayoutChanged_.bind(this));
+
     this.dialogDom_.ownerDocument.defaultView.addEventListener(
         'resize', this.onResize_.bind(this));
 
     this.onResize_();
   };
 
   /**
    * Constructs the thumbnails grid.
    */
   WallpaperManager.prototype.initThumbnailsGrid_ = function() {
-    this.wallpaperGrid_ = this.dialogDom_.querySelector('#wallpaper-grid');
+    this.wallpaperGrid_ = $('wallpaper-grid');
     wallpapers.WallpaperThumbnailsGrid.decorate(this.wallpaperGrid_);
 
     this.wallpaperGrid_.addEventListener('change',
         this.onThumbnailClicked_.bind(this));
     this.wallpaperGrid_.addEventListener('activate',
         function() { window.close() });
   };
 
   /**
    * Sets wallpaper to the corresponding wallpaper of selected thumbnail.
@@ skipping 11 matching lines @@
     if (this.wallpaperRequest_)
       this.wallpaperRequest_.abort();
     // TODO(bshe): XMLHttpRequest may be cancelled by window.close(). We should
     // either wait for response before closing window or use an extension
     // background page to get response afte window closed.
     this.wallpaperRequest_ = new XMLHttpRequest();
     this.wallpaperRequest_.open('GET', wallpaperURL, true);
     this.wallpaperRequest_.responseType = 'arraybuffer';
     this.wallpaperRequest_.send(null);
     var self = this;
-    this.wallpaperRequest_.onload = function(e) {
+    this.wallpaperRequest_.addEventListener('load', function(e) {
       //TODO(bshe): Add error handling code.
       if (self.wallpaperRequest_.status === 200) {
         var image = self.wallpaperRequest_.response;
         chrome.wallpaperPrivate.setWallpaper(image,
                                              selectedItem.layout,
                                              wallpaperURL);
         self.wallpaperRequest_ = null;
       }
-    };
+    });
     this.setWallpaperAttribution_(selectedItem);
   };
 
   /**
    * Set attributions of wallpaper with given URL. If URL is not valid, clear
    * the attributions.
    * @param {{baseURL: string, dynamicURL: string, layout: string,
    *          author: string, authorWebsite: string}}
    *     selectedItem selected wallpaper item in grid.
    * @private
    */
   WallpaperManager.prototype.setWallpaperAttribution_ = function(selectedItem) {
     if (selectedItem) {
-      this.dialogDom_.querySelector('#author-name').textContent =
-          selectedItem.author;
-      this.dialogDom_.querySelector('#author-website').textContent =
-          this.dialogDom_.querySelector('#author-website').href =
+      $('author-name').textContent = selectedItem.author;
+      $('author-website').textContent = $('author-website').href =
           selectedItem.authorWebsite;
       return;
     }
-    this.dialogDom_.querySelector('#author-name').textContent = '';
-    this.dialogDom_.querySelector('#author-website').textContent =
-        this.dialogDom_.querySelector('#author-website').href = '';
+    $('author-name').textContent = '';
+    $('author-website').textContent = $('author-website').href = '';
   };
 
   /**
    * Resize thumbnails grid and categories list to fit the new window size.
    */
   WallpaperManager.prototype.onResize_ = function() {
     this.wallpaperGrid_.redraw();
     this.categoriesList_.redraw();
   };
 
   /**
    * Constructs the categories list.
    */
   WallpaperManager.prototype.initCategoriesList_ = function() {
-    this.categoriesList_ = this.dialogDom_.querySelector('#categories-list');
+    this.categoriesList_ = $('categories-list');
     cr.ui.List.decorate(this.categoriesList_);
 
     var self = this;
     this.categoriesList_.itemConstructor = function(entry) {
       return self.renderCategory_(entry);
     };
 
     this.categoriesList_.selectionModel = new cr.ui.ListSingleSelectionModel();
     this.categoriesList_.selectionModel.addEventListener(
         'change', this.onCategoriesChange_.bind(this));
 
     var categoriesDataModel = new cr.ui.ArrayDataModel([]);
     for (var key in this.manifest_.categories) {
       categoriesDataModel.push(this.manifest_.categories[key]);
     }
-    //TODO(bshe): Add custom wallpaper category once it is ready.
+    // Adds custom category as last category.
+    categoriesDataModel.push(str('customCategoryLabel'));
     this.categoriesList_.dataModel = categoriesDataModel;
   };
 
   /**
    * Constructs the element in categories list.
    * @param {string} entry Text content of a category.
    */
   WallpaperManager.prototype.renderCategory_ = function(entry) {
     var li = this.document_.createElement('li');
     cr.defineProperty(li, 'custom', cr.PropertyKind.BOOL_ATTR);
     li.custom = (entry == str('customCategoryLabel'));
     cr.defineProperty(li, 'lead', cr.PropertyKind.BOOL_ATTR);
     cr.defineProperty(li, 'selected', cr.PropertyKind.BOOL_ATTR);
     var div = this.document_.createElement('div');
     div.textContent = entry;
     li.appendChild(div);
     return li;
   };
 
   /**
    * Handles the custom wallpaper which user selected from file manager. Called
    * when users select a file.
    */
   WallpaperManager.prototype.onFileSelectorChanged_ = function() {
-    var files = this.dialogDom_.querySelector('#file-selector').files;
+    var files = $('file-selector').files;
     if (files.length != 1)
       console.error('More than one files are selected or no file selected');
+    var reader = new FileReader();
+    reader.readAsArrayBuffer(files[0]);
+    var self = this;
+    // TODO(bshe): Handle file error.
+    reader.addEventListener('load', function(e) {
+      self.customWallpaperData_ = e.target.result;
+      self.refreshWallpaper_(self.customWallpaperData_);
+    });
     this.generateThumbnail_(files[0]);
   };
 
   /**
+   * Refreshes the custom wallpaper with the current selected layout.
+   * @param {ArrayBuffer} customWallpaper The raw wallpaper file data.
+   */
+  WallpaperManager.prototype.refreshWallpaper_ = function(customWallpaper) {
+    var setWallpaperLayout = $('set-wallpaper-layout');
+    var layout =
+        setWallpaperLayout.options[setWallpaperLayout.selectedIndex].value;
+    chrome.wallpaperPrivate.setCustomWallpaper(customWallpaper,
+                                               layout);
+  };
+
+  /**
+   * Handles the layout setting change of custom wallpaper.
+   */
+  WallpaperManager.prototype.onWallpaperLayoutChanged_ = function() {
+    if (this.customWallpaperData_)
+      this.refreshWallpaper_(this.customWallpaperData_);
+  };
+
+  /**
    * Generates a thumbnail of user selected image file.
    * @param {Object} file The file user selected from file manager.
    */
   WallpaperManager.prototype.generateThumbnail_ = function(file) {
-    var img = this.dialogDom_.querySelector('#preview');
+    var img = $('preview');
     img.file = file;
     var reader = new FileReader();
-    reader.onload = function(e) {
+    reader.addEventListener('load', function(e) {
       img.src = e.target.result;
-    };
+    });
     reader.readAsDataURL(file);
   };
 
   /**
    * Toggle visibility of custom container and category container.
-   * @param {boolean} show True if display custom container and hide category
-   *     container.
+   * @param {boolean} showCustom True if display custom container and hide
+   *     category container.
    */
-  WallpaperManager.prototype.showCustomContainer_ = function(show) {
-    if (show) {
-      this.dialogDom_.querySelector('#category-container').hidden = true;
-      this.dialogDom_.querySelector('#custom-container').hidden = false;
-    } else {
-      this.dialogDom_.querySelector('#category-container').hidden = false;
-      this.dialogDom_.querySelector('#custom-container').hidden = true;
-    }
+  WallpaperManager.prototype.showCustomContainer_ = function(showCustom) {
+    $('category-container').hidden = showCustom;
+    $('custom-container').hidden = !showCustom;
   };
 
   /**
    * Handles user clicking on a different category.
    */
   WallpaperManager.prototype.onCategoriesChange_ = function() {
     var categoriesList = this.categoriesList_;
     var selectedIndex = categoriesList.selectionModel.selectedIndex;
     if (selectedIndex == -1)
       return;
@@ skipping 15 matching lines @@
             authorWebsite: this.manifest_.wallpaper_list[key].author_website
           };
           wallpapersDataModel.push(wallpaperInfo);
         }
       }
       this.wallpaperGrid_.dataModel = wallpapersDataModel;
     }
   };
 
 })();