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

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

Issue 158953002: Spoken feedback sounds for user photo capture/discard at image picker added. (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Flip-photo accessibility messages added to all 3 screens. Created 6 years, 10 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 cr.define('login', function() { 9 cr.define('login', function() {
10 var UserImagesGrid = options.UserImagesGrid; 10 var UserImagesGrid = options.UserImagesGrid;
(...skipping 90 matching lines...) Expand 10 before | Expand all | Expand 10 after
101 101
102 this.profileImageLoading = true; 102 this.profileImageLoading = true;
103 103
104 $('take-photo').addEventListener( 104 $('take-photo').addEventListener(
105 'click', this.handleTakePhoto_.bind(this)); 105 'click', this.handleTakePhoto_.bind(this));
106 $('discard-photo').addEventListener( 106 $('discard-photo').addEventListener(
107 'click', this.handleDiscardPhoto_.bind(this)); 107 'click', this.handleDiscardPhoto_.bind(this));
108 108
109 // Toggle 'animation' class for the duration of WebKit transition. 109 // Toggle 'animation' class for the duration of WebKit transition.
110 $('flip-photo').addEventListener( 110 $('flip-photo').addEventListener(
111 'click', function(e) { 111 'click', this.handleFlipPhoto_.bind(this));
112 previewElement.classList.add('animation');
113 imageGrid.flipPhoto = !imageGrid.flipPhoto;
114 });
115 $('user-image-stream-crop').addEventListener( 112 $('user-image-stream-crop').addEventListener(
116 'webkitTransitionEnd', function(e) { 113 'webkitTransitionEnd', function(e) {
117 previewElement.classList.remove('animation'); 114 previewElement.classList.remove('animation');
118 }); 115 });
119 $('user-image-preview-img').addEventListener( 116 $('user-image-preview-img').addEventListener(
120 'webkitTransitionEnd', function(e) { 117 'webkitTransitionEnd', function(e) {
121 previewElement.classList.remove('animation'); 118 previewElement.classList.remove('animation');
122 }); 119 });
123 120
124 this.updateLocalizedContent(); 121 this.updateLocalizedContent();
(...skipping 66 matching lines...) Expand 10 before | Expand all | Expand 10 after
191 * Handles selection change. 188 * Handles selection change.
192 * @param {Event} e Selection change event. 189 * @param {Event} e Selection change event.
193 * @private 190 * @private
194 */ 191 */
195 handleSelect_: function(e) { 192 handleSelect_: function(e) {
196 var imageGrid = $('user-image-grid'); 193 var imageGrid = $('user-image-grid');
197 $('ok-button').disabled = false; 194 $('ok-button').disabled = false;
198 195
199 // Camera selection 196 // Camera selection
200 if (imageGrid.selectionType == 'camera') { 197 if (imageGrid.selectionType == 'camera') {
201 $('flip-photo').tabIndex = 0; 198 $('flip-photo').tabIndex = 1;
202 // No current image selected. 199 // No current image selected.
203 if (imageGrid.cameraLive) { 200 if (imageGrid.cameraLive) {
204 imageGrid.previewElement.classList.remove('phototaken'); 201 imageGrid.previewElement.classList.remove('phototaken');
205 $('ok-button').disabled = true; 202 $('ok-button').disabled = true;
206 } else { 203 } else {
207 imageGrid.previewElement.classList.add('phototaken'); 204 imageGrid.previewElement.classList.add('phototaken');
208 this.notifyImageSelected_(); 205 this.notifyImageSelected_();
209 } 206 }
210 } else { 207 } else {
211 imageGrid.previewElement.classList.remove('phototaken'); 208 imageGrid.previewElement.classList.remove('phototaken');
(...skipping 23 matching lines...) Expand all
235 // Update image attribution text. 232 // Update image attribution text.
236 var image = imageGrid.selectedItem; 233 var image = imageGrid.selectedItem;
237 $('user-image-author-name').textContent = image.author; 234 $('user-image-author-name').textContent = image.author;
238 $('user-image-author-website').textContent = image.website; 235 $('user-image-author-website').textContent = image.website;
239 $('user-image-author-website').href = image.website; 236 $('user-image-author-website').href = image.website;
240 $('user-image-attribution').style.visibility = 237 $('user-image-attribution').style.visibility =
241 (image.author || image.website) ? 'visible' : 'hidden'; 238 (image.author || image.website) ? 'visible' : 'hidden';
242 }, 239 },
243 240
244 /** 241 /**
242 * Handle camera-photo flip.
243 */
244 handleFlipPhoto_: function() {
245 var imageGrid = $('user-image-grid');
246 imageGrid.previewElement.classList.add('animation');
247 imageGrid.flipPhoto = !imageGrid.flipPhoto;
248 var flipMessageId = imageGrid.flipPhoto ?
249 'photoFlippedAccessibleText' : 'photoFlippedBackAccessibleText';
250 this.announceAccessibleMessage_(
251 loadTimeData.getString(flipMessageId));
Nikita (slow) 2014/02/14 11:13:30 nit: indent
252 },
253
254 /**
245 * Handle photo capture from the live camera stream. 255 * Handle photo capture from the live camera stream.
246 */ 256 */
247 handleTakePhoto_: function(e) { 257 handleTakePhoto_: function(e) {
248 $('user-image-grid').takePhoto(); 258 $('user-image-grid').takePhoto();
259 chrome.send('takePhoto');
249 }, 260 },
250 261
251 /** 262 /**
252 * Handle photo captured event. 263 * Handle photo captured event.
253 * @param {Event} e Event with 'dataURL' property containing a data URL. 264 * @param {Event} e Event with 'dataURL' property containing a data URL.
254 */ 265 */
255 handlePhotoTaken_: function(e) { 266 handlePhotoTaken_: function(e) {
256 chrome.send('photoTaken', [e.dataURL]); 267 chrome.send('photoTaken', [e.dataURL]);
257 this.announceAccessibleMessage_( 268 this.announceAccessibleMessage_(
258 loadTimeData.getString('photoCaptureAccessibleText')); 269 loadTimeData.getString('photoCaptureAccessibleText'));
259 }, 270 },
260 271
261 /** 272 /**
262 * Handle photo updated event. 273 * Handle photo updated event.
263 * @param {Event} e Event with 'dataURL' property containing a data URL. 274 * @param {Event} e Event with 'dataURL' property containing a data URL.
264 */ 275 */
265 handlePhotoUpdated_: function(e) { 276 handlePhotoUpdated_: function(e) {
266 chrome.send('photoTaken', [e.dataURL]); 277 chrome.send('photoTaken', [e.dataURL]);
267 }, 278 },
268 279
269 /** 280 /**
270 * Handle discarding the captured photo. 281 * Handle discarding the captured photo.
271 */ 282 */
272 handleDiscardPhoto_: function(e) { 283 handleDiscardPhoto_: function(e) {
273 var imageGrid = $('user-image-grid'); 284 var imageGrid = $('user-image-grid');
274 imageGrid.discardPhoto(); 285 imageGrid.discardPhoto();
286 chrome.send('discardPhoto');
275 this.announceAccessibleMessage_( 287 this.announceAccessibleMessage_(
276 loadTimeData.getString('photoDiscardAccessibleText')); 288 loadTimeData.getString('photoDiscardAccessibleText'));
277 }, 289 },
278 290
279 /** 291 /**
280 * Add an accessible message to the page that will be announced to 292 * Add an accessible message to the page that will be announced to
281 * users who have spoken feedback on, but will be invisible to all 293 * users who have spoken feedback on, but will be invisible to all
282 * other users. It's removed right away so it doesn't clutter the DOM. 294 * other users. It's removed right away so it doesn't clutter the DOM.
283 */ 295 */
284 announceAccessibleMessage_: function(msg) { 296 announceAccessibleMessage_: function(msg) {
(...skipping 188 matching lines...) Expand 10 before | Expand all | Expand 10 after
473 UserImageScreen[name] = function(value) { 485 UserImageScreen[name] = function(value) {
474 $('user-image')[name + '_'](value); 486 $('user-image')[name + '_'](value);
475 }; 487 };
476 }); 488 });
477 489
478 return { 490 return {
479 UserImageScreen: UserImageScreen 491 UserImageScreen: UserImageScreen
480 }; 492 };
481 }); 493 });
482 494
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698