Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(215)

Side by Side Diff: chrome/browser/resources/chromeos/login/oobe_screen_user_image.js

Issue 2944703004: Run clang-format on .js files in c/b/r/chromeos (Closed)
Patch Set: Created 3 years, 6 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
OLDNEW
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 /** 5 /**
6 * @fileoverview Oobe user image screen implementation. 6 * @fileoverview Oobe user image screen implementation.
7 */ 7 */
8 8
9 login.createScreen('UserImageScreen', 'user-image', function() { 9 login.createScreen('UserImageScreen', 'user-image', function() {
10 var CONTEXT_KEY_IS_CAMERA_PRESENT = 'isCameraPresent'; 10 var CONTEXT_KEY_IS_CAMERA_PRESENT = 'isCameraPresent';
11 var CONTEXT_KEY_SELECTED_IMAGE_URL = 'selectedImageURL'; 11 var CONTEXT_KEY_SELECTED_IMAGE_URL = 'selectedImageURL';
12 var CONTEXT_KEY_PROFILE_PICTURE_DATA_URL = 'profilePictureDataURL'; 12 var CONTEXT_KEY_PROFILE_PICTURE_DATA_URL = 'profilePictureDataURL';
13 13
14 var UserImagesGrid = options.UserImagesGrid; 14 var UserImagesGrid = options.UserImagesGrid;
15 var ButtonImages = UserImagesGrid.ButtonImages; 15 var ButtonImages = UserImagesGrid.ButtonImages;
16 16
17 return { 17 return {
18 EXTERNAL_API: [ 18 EXTERNAL_API: ['setDefaultImages', 'hideCurtain'],
19 'setDefaultImages',
20 'hideCurtain'
21 ],
22 19
23 /** @override */ 20 /** @override */
24 decorate: function(element) { 21 decorate: function(element) {
25 var imageGrid = $('user-image-grid'); 22 var imageGrid = $('user-image-grid');
26 UserImagesGrid.decorate(imageGrid); 23 UserImagesGrid.decorate(imageGrid);
27 24
28 // Preview image will track the selected item's URL. 25 // Preview image will track the selected item's URL.
29 var previewElement = $('user-image-preview'); 26 var previewElement = $('user-image-preview');
30 previewElement.oncontextmenu = function(e) { e.preventDefault(); }; 27 previewElement.oncontextmenu = function(e) {
28 e.preventDefault();
29 };
31 30
32 imageGrid.previewElement = previewElement; 31 imageGrid.previewElement = previewElement;
33 imageGrid.selectionType = 'default'; 32 imageGrid.selectionType = 'default';
34 imageGrid.flipPhotoElement = $('flip-photo'); 33 imageGrid.flipPhotoElement = $('flip-photo');
35 34
36 imageGrid.addEventListener('select', 35 imageGrid.addEventListener('select', this.handleSelect_.bind(this));
37 this.handleSelect_.bind(this)); 36 imageGrid.addEventListener(
38 imageGrid.addEventListener('activate', 37 'activate', this.handleImageActivated_.bind(this));
39 this.handleImageActivated_.bind(this)); 38 imageGrid.addEventListener(
40 imageGrid.addEventListener('phototaken', 39 'phototaken', this.handlePhotoTaken_.bind(this));
41 this.handlePhotoTaken_.bind(this)); 40 imageGrid.addEventListener(
42 imageGrid.addEventListener('photoupdated', 41 'photoupdated', this.handlePhotoUpdated_.bind(this));
43 this.handlePhotoUpdated_.bind(this));
44 42
45 // Set the title for camera item in the grid. 43 // Set the title for camera item in the grid.
46 imageGrid.setCameraTitles( 44 imageGrid.setCameraTitles(
47 loadTimeData.getString('takePhoto'), 45 loadTimeData.getString('takePhoto'),
48 loadTimeData.getString('photoFromCamera')); 46 loadTimeData.getString('photoFromCamera'));
49 47
50 this.profileImageLoading = true; 48 this.profileImageLoading = true;
51 49
52 // Profile image data (if present). 50 // Profile image data (if present).
53 this.profileImage_ = imageGrid.addItem( 51 this.profileImage_ = imageGrid.addItem(
54 ButtonImages.PROFILE_PICTURE, // Image URL. 52 ButtonImages.PROFILE_PICTURE, // Image URL.
55 loadTimeData.getString('profilePhoto'), // Title. 53 loadTimeData.getString('profilePhoto'), // Title.
56 undefined, // Click handler. 54 undefined, // Click handler.
57 0, // Position. 55 0, // Position.
58 function(el) { 56 function(el) {
59 // Custom decorator for Profile image element. 57 // Custom decorator for Profile image element.
60 var spinner = el.ownerDocument.createElement('div'); 58 var spinner = el.ownerDocument.createElement('div');
61 spinner.className = 'spinner'; 59 spinner.className = 'spinner';
62 var spinnerBg = el.ownerDocument.createElement('div'); 60 var spinnerBg = el.ownerDocument.createElement('div');
63 spinnerBg.className = 'spinner-bg'; 61 spinnerBg.className = 'spinner-bg';
64 spinnerBg.appendChild(spinner); 62 spinnerBg.appendChild(spinner);
65 el.appendChild(spinnerBg); 63 el.appendChild(spinnerBg);
66 el.id = 'profile-image'; 64 el.id = 'profile-image';
67 }); 65 });
68 this.profileImage_.type = 'profile'; 66 this.profileImage_.type = 'profile';
69 67
70 $('take-photo').addEventListener( 68 $('take-photo')
71 'click', this.handleTakePhoto_.bind(this)); 69 .addEventListener('click', this.handleTakePhoto_.bind(this));
72 $('discard-photo').addEventListener( 70 $('discard-photo')
73 'click', this.handleDiscardPhoto_.bind(this)); 71 .addEventListener('click', this.handleDiscardPhoto_.bind(this));
74 72
75 // Toggle 'animation' class for the duration of WebKit transition. 73 // Toggle 'animation' class for the duration of WebKit transition.
76 $('flip-photo').addEventListener( 74 $('flip-photo')
77 'click', this.handleFlipPhoto_.bind(this)); 75 .addEventListener('click', this.handleFlipPhoto_.bind(this));
78 $('user-image-stream-crop').addEventListener( 76 $('user-image-stream-crop')
79 'transitionend', function(e) { 77 .addEventListener('transitionend', function(e) {
80 previewElement.classList.remove('animation'); 78 previewElement.classList.remove('animation');
81 }); 79 });
82 $('user-image-preview-img').addEventListener( 80 $('user-image-preview-img')
83 'transitionend', function(e) { 81 .addEventListener('transitionend', function(e) {
84 previewElement.classList.remove('animation'); 82 previewElement.classList.remove('animation');
85 }); 83 });
86 84
87 var self = this; 85 var self = this;
88 this.context.addObserver(CONTEXT_KEY_IS_CAMERA_PRESENT, 86 this.context.addObserver(
89 function(present) { 87 CONTEXT_KEY_IS_CAMERA_PRESENT, function(present) {
90 $('user-image-grid').cameraPresent = present; 88 $('user-image-grid').cameraPresent = present;
91 }); 89 });
92 this.context.addObserver(CONTEXT_KEY_SELECTED_IMAGE_URL, 90 this.context.addObserver(
93 this.setSelectedImage_); 91 CONTEXT_KEY_SELECTED_IMAGE_URL, this.setSelectedImage_);
94 this.context.addObserver(CONTEXT_KEY_PROFILE_PICTURE_DATA_URL, 92 this.context.addObserver(
95 function(url) { 93 CONTEXT_KEY_PROFILE_PICTURE_DATA_URL, function(url) {
96 self.profileImageLoading = false; 94 self.profileImageLoading = false;
97 if (url) { 95 if (url) {
98 self.profileImage_ = 96 self.profileImage_ =
99 $('user-image-grid').updateItem(self.profileImage_, url); 97 $('user-image-grid').updateItem(self.profileImage_, url);
100 } 98 }
101 }); 99 });
102 100
103 this.updateLocalizedContent(); 101 this.updateLocalizedContent();
104 102
105 chrome.send('getImages'); 103 chrome.send('getImages');
106 }, 104 },
107 105
108 /** 106 /**
109 * Header text of the screen. 107 * Header text of the screen.
110 * @type {string} 108 * @type {string}
111 */ 109 */
(...skipping 27 matching lines...) Expand all
139 137
140 /** 138 /**
141 * True if the Profile image is being loaded. 139 * True if the Profile image is being loaded.
142 * @type {boolean} 140 * @type {boolean}
143 */ 141 */
144 get profileImageLoading() { 142 get profileImageLoading() {
145 return this.profileImageLoading_; 143 return this.profileImageLoading_;
146 }, 144 },
147 set profileImageLoading(value) { 145 set profileImageLoading(value) {
148 this.profileImageLoading_ = value; 146 this.profileImageLoading_ = value;
149 $('user-image-screen-main').classList.toggle('profile-image-loading', 147 $('user-image-screen-main')
150 value); 148 .classList.toggle('profile-image-loading', value);
151 if (value) 149 if (value)
152 announceAccessibleMessage(loadTimeData.getString('syncingPreferences')); 150 announceAccessibleMessage(loadTimeData.getString('syncingPreferences'));
153 this.updateProfileImageCaption_(); 151 this.updateProfileImageCaption_();
154 }, 152 },
155 153
156 /** 154 /**
157 * Handles image activation (by pressing Enter). 155 * Handles image activation (by pressing Enter).
158 * @private 156 * @private
159 */ 157 */
160 handleImageActivated_: function() { 158 handleImageActivated_: function() {
(...skipping 31 matching lines...) Expand 10 before | Expand all | Expand 10 after
192 imageGrid.previewElement.classList.remove('phototaken'); 190 imageGrid.previewElement.classList.remove('phototaken');
193 $('flip-photo').tabIndex = -1; 191 $('flip-photo').tabIndex = -1;
194 this.notifyImageSelected_(); 192 this.notifyImageSelected_();
195 } 193 }
196 // Start/stop camera on (de)selection. 194 // Start/stop camera on (de)selection.
197 if (!imageGrid.inProgramSelection && 195 if (!imageGrid.inProgramSelection &&
198 imageGrid.selectionType != e.oldSelectionType) { 196 imageGrid.selectionType != e.oldSelectionType) {
199 if (imageGrid.selectionType == 'camera') { 197 if (imageGrid.selectionType == 'camera') {
200 // Programmatic selection of camera item is done in 198 // Programmatic selection of camera item is done in
201 // startCamera callback where streaming is started by itself. 199 // startCamera callback where streaming is started by itself.
202 imageGrid.startCamera( 200 imageGrid.startCamera(function() {
203 function() { 201 // Start capture if camera is still the selected item.
204 // Start capture if camera is still the selected item. 202 $('user-image-preview-img')
205 $('user-image-preview-img').classList.toggle( 203 .classList.toggle('animated-transform', true);
206 'animated-transform', true); 204 return imageGrid.selectedItem == imageGrid.cameraImage;
207 return imageGrid.selectedItem == imageGrid.cameraImage; 205 });
208 });
209 } else { 206 } else {
210 $('user-image-preview-img').classList.toggle('animated-transform', 207 $('user-image-preview-img')
211 false); 208 .classList.toggle('animated-transform', false);
212 imageGrid.stopCamera(); 209 imageGrid.stopCamera();
213 } 210 }
214 } 211 }
215 this.updateCaption_(); 212 this.updateCaption_();
216 // Update image attribution text. 213 // Update image attribution text.
217 var image = imageGrid.selectedItem; 214 var image = imageGrid.selectedItem;
218 $('user-image-author-name').textContent = image.author; 215 $('user-image-author-name').textContent = image.author;
219 $('user-image-author-website').textContent = image.website; 216 $('user-image-author-website').textContent = image.website;
220 $('user-image-author-website').href = image.website; 217 $('user-image-author-website').href = image.website;
221 $('user-image-attribution').style.visibility = 218 $('user-image-attribution').style.visibility =
222 (image.author || image.website) ? 'visible' : 'hidden'; 219 (image.author || image.website) ? 'visible' : 'hidden';
223 }, 220 },
224 221
225 /** 222 /**
226 * Handle camera-photo flip. 223 * Handle camera-photo flip.
227 */ 224 */
228 handleFlipPhoto_: function() { 225 handleFlipPhoto_: function() {
229 var imageGrid = $('user-image-grid'); 226 var imageGrid = $('user-image-grid');
230 imageGrid.previewElement.classList.add('animation'); 227 imageGrid.previewElement.classList.add('animation');
231 imageGrid.flipPhoto = !imageGrid.flipPhoto; 228 imageGrid.flipPhoto = !imageGrid.flipPhoto;
232 var flipMessageId = imageGrid.flipPhoto ? 229 var flipMessageId = imageGrid.flipPhoto ?
233 'photoFlippedAccessibleText' : 'photoFlippedBackAccessibleText'; 230 'photoFlippedAccessibleText' :
231 'photoFlippedBackAccessibleText';
234 announceAccessibleMessage(loadTimeData.getString(flipMessageId)); 232 announceAccessibleMessage(loadTimeData.getString(flipMessageId));
235 }, 233 },
236 234
237 /** 235 /**
238 * Handle photo capture from the live camera stream. 236 * Handle photo capture from the live camera stream.
239 */ 237 */
240 handleTakePhoto_: function(e) { 238 handleTakePhoto_: function(e) {
241 $('user-image-grid').takePhoto(); 239 $('user-image-grid').takePhoto();
242 chrome.send('takePhoto'); 240 chrome.send('takePhoto');
243 }, 241 },
(...skipping 104 matching lines...) Expand 10 before | Expand all | Expand 10 after
348 this.loading = false; 346 this.loading = false;
349 }, 347 },
350 348
351 /** 349 /**
352 * Updates the image preview caption. 350 * Updates the image preview caption.
353 * @private 351 * @private
354 */ 352 */
355 updateCaption_: function() { 353 updateCaption_: function() {
356 $('user-image-preview-caption').textContent = 354 $('user-image-preview-caption').textContent =
357 $('user-image-grid').selectionType == 'profile' ? 355 $('user-image-grid').selectionType == 'profile' ?
358 this.profileImageCaption : ''; 356 this.profileImageCaption :
357 '';
359 }, 358 },
360 359
361 /** 360 /**
362 * Updates localized content of the screen that is not updated via template. 361 * Updates localized content of the screen that is not updated via template.
363 */ 362 */
364 updateLocalizedContent: function() { 363 updateLocalizedContent: function() {
365 this.updateProfileImageCaption_(); 364 this.updateProfileImageCaption_();
366 }, 365 },
367 366
368 /** 367 /**
369 * Updates profile image caption. 368 * Updates profile image caption.
370 * @private 369 * @private
371 */ 370 */
372 updateProfileImageCaption_: function() { 371 updateProfileImageCaption_: function() {
373 this.profileImageCaption = loadTimeData.getString( 372 this.profileImageCaption = loadTimeData.getString(
374 this.profileImageLoading_ ? 'profilePhotoLoading' : 'profilePhoto'); 373 this.profileImageLoading_ ? 'profilePhotoLoading' : 'profilePhoto');
375 }, 374 },
376 375
377 /** 376 /**
378 * Notifies chrome about image selection. 377 * Notifies chrome about image selection.
379 * @private 378 * @private
380 */ 379 */
381 notifyImageSelected_: function() { 380 notifyImageSelected_: function() {
382 var imageGrid = $('user-image-grid'); 381 var imageGrid = $('user-image-grid');
383 chrome.send('selectImage', 382 chrome.send('selectImage', [
384 [imageGrid.selectedItemUrl, 383 imageGrid.selectedItemUrl, imageGrid.selectionType,
385 imageGrid.selectionType, 384 !imageGrid.inProgramSelection
386 !imageGrid.inProgramSelection]); 385 ]);
387 } 386 }
388 }; 387 };
389 }); 388 });
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698