chrome/browser/resources/options/chromeos/change_picture_options.js

   1 // Copyright (c) 2012 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 cr.define('options', function() {
   6   var Page = cr.ui.pageManager.Page;
   7   var PageManager = cr.ui.pageManager.PageManager;
   8   var UserImagesGrid = options.UserImagesGrid;
   9   var ButtonImages = UserImagesGrid.ButtonImages;
  10
  11   /**
  12    * Array of button URLs used on this page.
  13    * @type {Array.<string>}
  14    * @const
  15    */
  16   var ButtonImageUrls = [
  17     ButtonImages.TAKE_PHOTO,
  18     ButtonImages.CHOOSE_FILE
  19   ];
  20
  21   /////////////////////////////////////////////////////////////////////////////
  22   // ChangePictureOptions class:
  23
  24   /**
  25    * Encapsulated handling of ChromeOS change picture options page.
  26    * @constructor
  27    * @extends {cr.ui.pageManager.Page}
  28    */
  29   function ChangePictureOptions() {
  30     Page.call(this, 'changePicture',
  31               loadTimeData.getString('changePicturePage'),
  32               'change-picture-page');
  33   }
  34
  35   cr.addSingletonGetter(ChangePictureOptions);
  36
  37   ChangePictureOptions.prototype = {
  38     // Inherit ChangePictureOptions from Page.
  39     __proto__: Page.prototype,
  40
  41     /** @override */
  42     initializePage: function() {
  43       Page.prototype.initializePage.call(this);
  44
  45       var imageGrid = $('user-image-grid');
  46       UserImagesGrid.decorate(imageGrid);
  47
  48       // Preview image will track the selected item's URL.
  49       var previewElement = $('user-image-preview');
  50       previewElement.oncontextmenu = function(e) { e.preventDefault(); };
  51
  52       imageGrid.previewElement = previewElement;
  53       imageGrid.selectionType = 'default';
  54       imageGrid.flipPhotoElement = $('flip-photo');
  55
  56       imageGrid.addEventListener('select',
  57                                  this.handleImageSelected_.bind(this));
  58       imageGrid.addEventListener('activate',
  59                                  this.handleImageActivated_.bind(this));
  60       imageGrid.addEventListener('phototaken',
  61                                  this.handlePhotoTaken_.bind(this));
  62       imageGrid.addEventListener('photoupdated',
  63                                  this.handlePhotoTaken_.bind(this));
  64
  65       // Add the "Choose file" button.
  66       imageGrid.addItem(ButtonImages.CHOOSE_FILE,
  67                         loadTimeData.getString('chooseFile'),
  68                         this.handleChooseFile_.bind(this)).type = 'file';
  69
  70       // Profile image data.
  71       this.profileImage_ = imageGrid.addItem(
  72           ButtonImages.PROFILE_PICTURE,
  73           loadTimeData.getString('profilePhotoLoading'));
  74       this.profileImage_.type = 'profile';
  75
  76       // Set the title for camera item in the grid.
  77       imageGrid.setCameraTitles(
  78           loadTimeData.getString('takePhoto'),
  79           loadTimeData.getString('photoFromCamera'));
  80
  81       $('take-photo').addEventListener(
  82           'click', this.handleTakePhoto_.bind(this));
  83       $('discard-photo').addEventListener(
  84           'click', this.handleDiscardPhoto_.bind(this));
  85
  86       // Toggle 'animation' class for the duration of WebKit transition.
  87       $('flip-photo').addEventListener(
  88           'click', this.handleFlipPhoto_.bind(this));
  89       $('user-image-stream-crop').addEventListener(
  90           'webkitTransitionEnd', function(e) {
  91             previewElement.classList.remove('animation');
  92           });
  93       $('user-image-preview-img').addEventListener(
  94           'webkitTransitionEnd', function(e) {
  95             previewElement.classList.remove('animation');
  96           });
  97
  98       // Old user image data (if present).
  99       this.oldImage_ = null;
 100
 101       $('change-picture-overlay-confirm').addEventListener(
 102           'click', this.closeOverlay_.bind(this));
 103
 104       chrome.send('onChangePicturePageInitialized');
 105     },
 106
 107     /**
 108      * Called right after the page has been shown to user.
 109      */
 110     didShowPage: function() {
 111       var imageGrid = $('user-image-grid');
 112       // Reset camera element.
 113       imageGrid.cameraImage = null;
 114       imageGrid.updateAndFocus();
 115       chrome.send('onChangePicturePageShown');
 116     },
 117
 118     /**
 119      * Called right before the page is hidden.
 120      */
 121     willHidePage: function() {
 122       var imageGrid = $('user-image-grid');
 123       imageGrid.blur();  // Make sure the image grid is not active.
 124       imageGrid.stopCamera();
 125       if (this.oldImage_) {
 126         imageGrid.removeItem(this.oldImage_);
 127         this.oldImage_ = null;
 128       }
 129       chrome.send('onChangePicturePageHidden');
 130     },
 131
 132     /**
 133      * Called right after the page has been hidden.
 134      */
 135     // TODO(ivankr): both callbacks are required as only one of them is called
 136     // depending on the way the page was closed, see http://crbug.com/118923.
 137     didClosePage: function() {
 138       this.willHidePage();
 139     },
 140
 141     /**
 142      * Closes the overlay, returning to the main settings page.
 143      * @private
 144      */
 145     closeOverlay_: function() {
 146       if (!$('change-picture-page').hidden)
 147         PageManager.closeOverlay();
 148     },
 149
 150     /**
 151      * Handle camera-photo flip.
 152      */
 153     handleFlipPhoto_: function() {
 154       var imageGrid = $('user-image-grid');
 155       imageGrid.previewElement.classList.add('animation');
 156       imageGrid.flipPhoto = !imageGrid.flipPhoto;
 157       var flipMessageId = imageGrid.flipPhoto ?
 158          'photoFlippedAccessibleText' : 'photoFlippedBackAccessibleText';
 159       announceAccessibleMessage(loadTimeData.getString(flipMessageId));
 160     },
 161
 162     /**
 163      * Handles "Take photo" button click.
 164      * @private
 165      */
 166     handleTakePhoto_: function() {
 167       $('user-image-grid').takePhoto();
 168       chrome.send('takePhoto');
 169     },
 170
 171     /**
 172      * Handle photo captured event.
 173      * @param {Event} e Event with 'dataURL' property containing a data URL.
 174      */
 175     handlePhotoTaken_: function(e) {
 176       chrome.send('photoTaken', [e.dataURL]);
 177       announceAccessibleMessage(
 178           loadTimeData.getString('photoCaptureAccessibleText'));
 179     },
 180
 181     /**
 182      * Handles "Discard photo" button click.
 183      * @private
 184      */
 185     handleDiscardPhoto_: function() {
 186       $('user-image-grid').discardPhoto();
 187       chrome.send('discardPhoto');
 188       announceAccessibleMessage(
 189           loadTimeData.getString('photoDiscardAccessibleText'));
 190     },
 191
 192     /**
 193      * Handles "Choose a file" button activation.
 194      * @private
 195      */
 196     handleChooseFile_: function() {
 197       chrome.send('chooseFile');
 198       this.closeOverlay_();
 199     },
 200
 201     /**
 202      * Handles image selection change.
 203      * @param {Event} e Selection change Event.
 204      * @private
 205      */
 206     handleImageSelected_: function(e) {
 207       var imageGrid = $('user-image-grid');
 208       var url = imageGrid.selectedItemUrl;
 209
 210       // Flip button available only for camera picture.
 211       imageGrid.flipPhotoElement.tabIndex =
 212           imageGrid.selectionType == 'camera' ? 1 : -1;
 213       // Ignore selection change caused by program itself and selection of one
 214       // of the action buttons.
 215       if (!imageGrid.inProgramSelection &&
 216           url != ButtonImages.TAKE_PHOTO && url != ButtonImages.CHOOSE_FILE) {
 217         chrome.send('selectImage', [url, imageGrid.selectionType]);
 218       }
 219       // Start/stop camera on (de)selection.
 220       if (!imageGrid.inProgramSelection &&
 221           imageGrid.selectionType != e.oldSelectionType) {
 222         if (imageGrid.selectionType == 'camera') {
 223           imageGrid.startCamera(
 224               function() {
 225                 // Start capture if camera is still the selected item.
 226                 return imageGrid.selectedItem == imageGrid.cameraImage;
 227               });
 228         } else {
 229           imageGrid.stopCamera();
 230         }
 231       }
 232       // Update image attribution text.
 233       var image = imageGrid.selectedItem;
 234       $('user-image-author-name').textContent = image.author;
 235       $('user-image-author-website').textContent = image.website;
 236       $('user-image-author-website').href = image.website;
 237       $('user-image-attribution').style.visibility =
 238           (image.author || image.website) ? 'visible' : 'hidden';
 239     },
 240
 241     /**
 242      * Handles image activation (by pressing Enter).
 243      * @private
 244      */
 245     handleImageActivated_: function() {
 246       switch ($('user-image-grid').selectedItemUrl) {
 247         case ButtonImages.TAKE_PHOTO:
 248           this.handleTakePhoto_();
 249           break;
 250         case ButtonImages.CHOOSE_FILE:
 251           this.handleChooseFile_();
 252           break;
 253         default:
 254           this.closeOverlay_();
 255           break;
 256       }
 257     },
 258
 259     /**
 260      * Adds or updates old user image taken from file/camera (neither a profile
 261      * image nor a default one).
 262      * @param {string} imageUrl Old user image, as data or internal URL.
 263      * @private
 264      */
 265     setOldImage_: function(imageUrl) {
 266       var imageGrid = $('user-image-grid');
 267       if (this.oldImage_) {
 268         this.oldImage_ = imageGrid.updateItem(this.oldImage_, imageUrl);
 269       } else {
 270         // Insert next to the profile image.
 271         var pos = imageGrid.indexOf(this.profileImage_) + 1;
 272         this.oldImage_ = imageGrid.addItem(imageUrl, undefined, undefined, pos);
 273         this.oldImage_.type = 'old';
 274         imageGrid.selectedItem = this.oldImage_;
 275       }
 276     },
 277
 278     /**
 279      * Updates user's profile image.
 280      * @param {string} imageUrl Profile image, encoded as data URL.
 281      * @param {boolean} select If true, profile image should be selected.
 282      * @private
 283      */
 284     setProfileImage_: function(imageUrl, select) {
 285       var imageGrid = $('user-image-grid');
 286       this.profileImage_ = imageGrid.updateItem(
 287           this.profileImage_, imageUrl, loadTimeData.getString('profilePhoto'));
 288       if (select)
 289         imageGrid.selectedItem = this.profileImage_;
 290     },
 291
 292     /**
 293      * Selects user image with the given URL.
 294      * @param {string} url URL of the image to select.
 295      * @private
 296      */
 297     setSelectedImage_: function(url) {
 298       $('user-image-grid').selectedItemUrl = url;
 299     },
 300
 301     /**
 302      * @param {boolean} present Whether camera is detected.
 303      */
 304     setCameraPresent_: function(present) {
 305       $('user-image-grid').cameraPresent = present;
 306     },
 307
 308     /**
 309      * Appends default images to the image grid. Should only be called once.
 310      * @param {Array.<{url: string, author: string, website: string}>}
 311      *   imagesData An array of default images data, including URL, author and
 312      *   website.
 313      * @private
 314      */
 315     setDefaultImages_: function(imagesData) {
 316       var imageGrid = $('user-image-grid');
 317       for (var i = 0, data; data = imagesData[i]; i++) {
 318         var item = imageGrid.addItem(data.url, data.title);
 319         item.type = 'default';
 320         item.author = data.author || '';
 321         item.website = data.website || '';
 322       }
 323     },
 324   };
 325
 326   // Forward public APIs to private implementations.
 327   cr.makePublic(ChangePictureOptions, [
 328     'closeOverlay',
 329     'setCameraPresent',
 330     'setDefaultImages',
 331     'setOldImage',
 332     'setProfileImage',
 333     'setSelectedImage',
 334   ]);
 335
 336   // Export
 337   return {
 338     ChangePictureOptions: ChangePictureOptions
 339   };
 340
 341 });