| OLD | NEW |
| 1 // Copyright (c) 2012 The Chromium Authors. All rights reserved. | 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 | 2 // Use of this source code is governed by a BSD-style license that can be |
| 3 // found in the LICENSE file. | 3 // found in the LICENSE file. |
| 4 | 4 |
| 5 cr.define('options', function() { | 5 cr.define('options', function() { |
| 6 var Page = cr.ui.pageManager.Page; | 6 var Page = cr.ui.pageManager.Page; |
| 7 var PageManager = cr.ui.pageManager.PageManager; | 7 var PageManager = cr.ui.pageManager.PageManager; |
| 8 var UserImagesGrid = options.UserImagesGrid; | 8 var UserImagesGrid = options.UserImagesGrid; |
| 9 var ButtonImages = UserImagesGrid.ButtonImages; | 9 var ButtonImages = UserImagesGrid.ButtonImages; |
| 10 | 10 |
| 11 /** | 11 /** |
| 12 * Array of button URLs used on this page. | 12 * Array of button URLs used on this page. |
| 13 * @type {Array<string>} | 13 * @type {Array<string>} |
| 14 * @const | 14 * @const |
| 15 */ | 15 */ |
| 16 var ButtonImageUrls = [ | 16 var ButtonImageUrls = [ButtonImages.TAKE_PHOTO, ButtonImages.CHOOSE_FILE]; |
| 17 ButtonImages.TAKE_PHOTO, | |
| 18 ButtonImages.CHOOSE_FILE | |
| 19 ]; | |
| 20 | 17 |
| 21 ///////////////////////////////////////////////////////////////////////////// | 18 ///////////////////////////////////////////////////////////////////////////// |
| 22 // ChangePictureOptions class: | 19 // ChangePictureOptions class: |
| 23 | 20 |
| 24 /** | 21 /** |
| 25 * Encapsulated handling of ChromeOS change picture options page. | 22 * Encapsulated handling of ChromeOS change picture options page. |
| 26 * @constructor | 23 * @constructor |
| 27 * @extends {cr.ui.pageManager.Page} | 24 * @extends {cr.ui.pageManager.Page} |
| 28 */ | 25 */ |
| 29 function ChangePictureOptions() { | 26 function ChangePictureOptions() { |
| 30 Page.call(this, 'changePicture', | 27 Page.call( |
| 31 loadTimeData.getString('changePicturePage'), | 28 this, 'changePicture', loadTimeData.getString('changePicturePage'), |
| 32 'change-picture-page'); | 29 'change-picture-page'); |
| 33 } | 30 } |
| 34 | 31 |
| 35 cr.addSingletonGetter(ChangePictureOptions); | 32 cr.addSingletonGetter(ChangePictureOptions); |
| 36 | 33 |
| 37 ChangePictureOptions.prototype = { | 34 ChangePictureOptions.prototype = { |
| 38 // Inherit ChangePictureOptions from Page. | 35 // Inherit ChangePictureOptions from Page. |
| 39 __proto__: Page.prototype, | 36 __proto__: Page.prototype, |
| 40 | 37 |
| 41 /** @override */ | 38 /** @override */ |
| 42 initializePage: function() { | 39 initializePage: function() { |
| 43 Page.prototype.initializePage.call(this); | 40 Page.prototype.initializePage.call(this); |
| 44 | 41 |
| 45 var imageGrid = $('user-image-grid'); | 42 var imageGrid = $('user-image-grid'); |
| 46 UserImagesGrid.decorate(imageGrid); | 43 UserImagesGrid.decorate(imageGrid); |
| 47 | 44 |
| 48 // Preview image will track the selected item's URL. | 45 // Preview image will track the selected item's URL. |
| 49 var previewElement = $('user-image-preview'); | 46 var previewElement = $('user-image-preview'); |
| 50 previewElement.oncontextmenu = function(e) { e.preventDefault(); }; | 47 previewElement.oncontextmenu = function(e) { |
| 48 e.preventDefault(); |
| 49 }; |
| 51 | 50 |
| 52 imageGrid.previewElement = previewElement; | 51 imageGrid.previewElement = previewElement; |
| 53 imageGrid.selectionType = 'default'; | 52 imageGrid.selectionType = 'default'; |
| 54 imageGrid.flipPhotoElement = $('flip-photo'); | 53 imageGrid.flipPhotoElement = $('flip-photo'); |
| 55 | 54 |
| 56 imageGrid.addEventListener('select', | 55 imageGrid.addEventListener( |
| 57 this.handleImageSelected_.bind(this)); | 56 'select', this.handleImageSelected_.bind(this)); |
| 58 imageGrid.addEventListener('activate', | 57 imageGrid.addEventListener( |
| 59 this.handleImageActivated_.bind(this)); | 58 'activate', this.handleImageActivated_.bind(this)); |
| 60 imageGrid.addEventListener('phototaken', | 59 imageGrid.addEventListener( |
| 61 this.handlePhotoTaken_.bind(this)); | 60 'phototaken', this.handlePhotoTaken_.bind(this)); |
| 62 imageGrid.addEventListener('photoupdated', | 61 imageGrid.addEventListener( |
| 63 this.handlePhotoTaken_.bind(this)); | 62 'photoupdated', this.handlePhotoTaken_.bind(this)); |
| 64 | 63 |
| 65 // Add the "Choose file" button. | 64 // Add the "Choose file" button. |
| 66 imageGrid.addItem(ButtonImages.CHOOSE_FILE, | 65 imageGrid |
| 67 loadTimeData.getString('chooseFile'), | 66 .addItem( |
| 68 this.handleChooseFile_.bind(this)).type = 'file'; | 67 ButtonImages.CHOOSE_FILE, loadTimeData.getString('chooseFile'), |
| 68 this.handleChooseFile_.bind(this)) |
| 69 .type = 'file'; |
| 69 | 70 |
| 70 // Profile image data. | 71 // Profile image data. |
| 71 this.profileImage_ = imageGrid.addItem( | 72 this.profileImage_ = imageGrid.addItem( |
| 72 ButtonImages.PROFILE_PICTURE, | 73 ButtonImages.PROFILE_PICTURE, |
| 73 loadTimeData.getString('profilePhotoLoading')); | 74 loadTimeData.getString('profilePhotoLoading')); |
| 74 this.profileImage_.type = 'profile'; | 75 this.profileImage_.type = 'profile'; |
| 75 | 76 |
| 76 // Set the title for camera item in the grid. | 77 // Set the title for camera item in the grid. |
| 77 imageGrid.setCameraTitles( | 78 imageGrid.setCameraTitles( |
| 78 loadTimeData.getString('takePhoto'), | 79 loadTimeData.getString('takePhoto'), |
| 79 loadTimeData.getString('photoFromCamera')); | 80 loadTimeData.getString('photoFromCamera')); |
| 80 | 81 |
| 81 $('take-photo').addEventListener( | 82 $('take-photo') |
| 82 'click', this.handleTakePhoto_.bind(this)); | 83 .addEventListener('click', this.handleTakePhoto_.bind(this)); |
| 83 $('discard-photo').addEventListener( | 84 $('discard-photo') |
| 84 'click', this.handleDiscardPhoto_.bind(this)); | 85 .addEventListener('click', this.handleDiscardPhoto_.bind(this)); |
| 85 | 86 |
| 86 // Toggle 'animation' class for the duration of WebKit transition. | 87 // Toggle 'animation' class for the duration of WebKit transition. |
| 87 $('flip-photo').addEventListener( | 88 $('flip-photo') |
| 88 'click', this.handleFlipPhoto_.bind(this)); | 89 .addEventListener('click', this.handleFlipPhoto_.bind(this)); |
| 89 $('user-image-stream-crop').addEventListener( | 90 $('user-image-stream-crop') |
| 90 'transitionend', function(e) { | 91 .addEventListener('transitionend', function(e) { |
| 91 previewElement.classList.remove('animation'); | 92 previewElement.classList.remove('animation'); |
| 92 }); | 93 }); |
| 93 $('user-image-preview-img').addEventListener( | 94 $('user-image-preview-img') |
| 94 'transitionend', function(e) { | 95 .addEventListener('transitionend', function(e) { |
| 95 previewElement.classList.remove('animation'); | 96 previewElement.classList.remove('animation'); |
| 96 }); | 97 }); |
| 97 | 98 |
| 98 // Old user image data (if present). | 99 // Old user image data (if present). |
| 99 this.oldImage_ = null; | 100 this.oldImage_ = null; |
| 100 | 101 |
| 101 $('change-picture-overlay-confirm').addEventListener( | 102 $('change-picture-overlay-confirm') |
| 102 'click', this.closeOverlay_.bind(this)); | 103 .addEventListener('click', this.closeOverlay_.bind(this)); |
| 103 | 104 |
| 104 chrome.send('onChangePicturePageInitialized'); | 105 chrome.send('onChangePicturePageInitialized'); |
| 105 }, | 106 }, |
| 106 | 107 |
| 107 /** @override */ | 108 /** @override */ |
| 108 didShowPage: function() { | 109 didShowPage: function() { |
| 109 var imageGrid = $('user-image-grid'); | 110 var imageGrid = $('user-image-grid'); |
| 110 // Reset camera element. | 111 // Reset camera element. |
| 111 imageGrid.cameraImage = null; | 112 imageGrid.cameraImage = null; |
| 112 imageGrid.updateAndFocus(); | 113 imageGrid.updateAndFocus(); |
| (...skipping 31 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 144 }, | 145 }, |
| 145 | 146 |
| 146 /** | 147 /** |
| 147 * Handle camera-photo flip. | 148 * Handle camera-photo flip. |
| 148 */ | 149 */ |
| 149 handleFlipPhoto_: function() { | 150 handleFlipPhoto_: function() { |
| 150 var imageGrid = $('user-image-grid'); | 151 var imageGrid = $('user-image-grid'); |
| 151 imageGrid.previewElement.classList.add('animation'); | 152 imageGrid.previewElement.classList.add('animation'); |
| 152 imageGrid.flipPhoto = !imageGrid.flipPhoto; | 153 imageGrid.flipPhoto = !imageGrid.flipPhoto; |
| 153 var flipMessageId = imageGrid.flipPhoto ? | 154 var flipMessageId = imageGrid.flipPhoto ? |
| 154 'photoFlippedAccessibleText' : 'photoFlippedBackAccessibleText'; | 155 'photoFlippedAccessibleText' : |
| 156 'photoFlippedBackAccessibleText'; |
| 155 announceAccessibleMessage(loadTimeData.getString(flipMessageId)); | 157 announceAccessibleMessage(loadTimeData.getString(flipMessageId)); |
| 156 }, | 158 }, |
| 157 | 159 |
| 158 /** | 160 /** |
| 159 * Handles "Take photo" button click. | 161 * Handles "Take photo" button click. |
| 160 * @private | 162 * @private |
| 161 */ | 163 */ |
| 162 handleTakePhoto_: function() { | 164 handleTakePhoto_: function() { |
| 163 $('user-image-grid').takePhoto(); | 165 $('user-image-grid').takePhoto(); |
| 164 chrome.send('takePhoto'); | 166 chrome.send('takePhoto'); |
| (...skipping 32 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 197 /** | 199 /** |
| 198 * Handles image selection change. | 200 * Handles image selection change. |
| 199 * @param {Event} e Selection change Event. | 201 * @param {Event} e Selection change Event. |
| 200 * @private | 202 * @private |
| 201 */ | 203 */ |
| 202 handleImageSelected_: function(e) { | 204 handleImageSelected_: function(e) { |
| 203 var imageGrid = $('user-image-grid'); | 205 var imageGrid = $('user-image-grid'); |
| 204 var url = imageGrid.selectedItemUrl; | 206 var url = imageGrid.selectedItemUrl; |
| 205 | 207 |
| 206 // Flip button available only for camera picture. | 208 // Flip button available only for camera picture. |
| 207 imageGrid.flipPhotoElement.hidden = | 209 imageGrid.flipPhotoElement.hidden = imageGrid.selectionType != 'camera'; |
| 208 imageGrid.selectionType != 'camera'; | |
| 209 // Ignore selection change caused by program itself and selection of one | 210 // Ignore selection change caused by program itself and selection of one |
| 210 // of the action buttons. | 211 // of the action buttons. |
| 211 if (!imageGrid.inProgramSelection && | 212 if (!imageGrid.inProgramSelection && url != ButtonImages.TAKE_PHOTO && |
| 212 url != ButtonImages.TAKE_PHOTO && url != ButtonImages.CHOOSE_FILE) { | 213 url != ButtonImages.CHOOSE_FILE) { |
| 213 chrome.send('selectImage', [url, imageGrid.selectionType]); | 214 chrome.send('selectImage', [url, imageGrid.selectionType]); |
| 214 } | 215 } |
| 215 // Start/stop camera on (de)selection. | 216 // Start/stop camera on (de)selection. |
| 216 if (!imageGrid.inProgramSelection && | 217 if (!imageGrid.inProgramSelection && |
| 217 imageGrid.selectionType != e.oldSelectionType) { | 218 imageGrid.selectionType != e.oldSelectionType) { |
| 218 if (imageGrid.selectionType == 'camera') { | 219 if (imageGrid.selectionType == 'camera') { |
| 219 imageGrid.startCamera( | 220 imageGrid.startCamera(function() { |
| 220 function() { | 221 // Start capture if camera is still the selected item. |
| 221 // Start capture if camera is still the selected item. | 222 return imageGrid.selectedItem == imageGrid.cameraImage; |
| 222 return imageGrid.selectedItem == imageGrid.cameraImage; | 223 }); |
| 223 }); | |
| 224 } else { | 224 } else { |
| 225 imageGrid.stopCamera(); | 225 imageGrid.stopCamera(); |
| 226 } | 226 } |
| 227 } | 227 } |
| 228 // Update image attribution text. | 228 // Update image attribution text. |
| 229 var image = imageGrid.selectedItem; | 229 var image = imageGrid.selectedItem; |
| 230 $('user-image-author-name').textContent = image.author; | 230 $('user-image-author-name').textContent = image.author; |
| 231 $('user-image-author-website').textContent = image.website; | 231 $('user-image-author-website').textContent = image.website; |
| 232 $('user-image-author-website').href = image.website; | 232 $('user-image-author-website').href = image.website; |
| 233 $('user-image-attribution').style.visibility = | 233 $('user-image-attribution').style.visibility = |
| (...skipping 83 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 317 cr.makePublic(ChangePictureOptions, [ | 317 cr.makePublic(ChangePictureOptions, [ |
| 318 'closeOverlay', | 318 'closeOverlay', |
| 319 'setCameraPresent', | 319 'setCameraPresent', |
| 320 'setDefaultImages', | 320 'setDefaultImages', |
| 321 'setOldImage', | 321 'setOldImage', |
| 322 'setProfileImage', | 322 'setProfileImage', |
| 323 'setSelectedImage', | 323 'setSelectedImage', |
| 324 ]); | 324 ]); |
| 325 | 325 |
| 326 // Export | 326 // Export |
| 327 return { | 327 return {ChangePictureOptions: ChangePictureOptions}; |
| 328 ChangePictureOptions: ChangePictureOptions | |
| 329 }; | |
| 330 | 328 |
| 331 }); | 329 }); |
| OLD | NEW |