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