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 |