Commit 7395e8ab by aamir-khan

ECOM-1472: fixed the tab issue for taking photo

parent 225f4426
......@@ -2,7 +2,10 @@
* Interface for retrieving webcam photos.
* Supports HTML5 and Flash.
*/
var edx = edx || {};
var edx = edx || {},
key = {
enter: 13
};
(function( $, _, Backbone, gettext ) {
'use strict';
......@@ -12,6 +15,7 @@
edx.verify_student.WebcamPhotoView = Backbone.View.extend({
template: "#webcam_photo-tpl",
el: "#webcam",
backends: {
"html5": {
......@@ -241,12 +245,18 @@
);
$( this.el ).html( renderedHtml );
var resetBtn = this.$el.find('#webcam_reset_button');
var captureBtn = this.$el.find('#webcam_capture_button');
// Install event handlers
$( "#webcam_reset_button", this.el ).on( 'click', _.bind( this.reset, this ) );
$( "#webcam_capture_button", this.el ).on( 'click', _.bind( this.capture, this ) );
resetBtn.on( 'click', _.bind( this.reset, this ) );
captureBtn.on( 'click', _.bind( this.capture, this ) );
resetBtn.on( 'keyup', _.bind( this.reset_by_enter, this ) );
captureBtn.on( 'keyup', _.bind( this.capture_by_enter, this ) );
// Show the capture button
$( "#webcam_capture_button", this.el ).removeClass('is-hidden');
captureBtn.removeClass('is-hidden');
return this;
},
......@@ -266,6 +276,16 @@
$( "#webcam_capture_button", this.el ).removeClass('is-hidden');
},
capture_by_enter: function(event){
if(event.keyCode == key.enter){
this.capture();
}
},
reset_by_enter: function(event){
if(event.keyCode == key.enter){
this.reset();
}
},
capture: function() {
// Take a snapshot of the video
var success = this.backend.snapshot();
......
......@@ -21,10 +21,10 @@
<div class="controls photo-controls">
<div class="control control-retake is-hidden" id="webcam_reset_button">
<a class="action action-redo"><%- gettext( "Retake Photo" ) %></a>
<a class="action action-redo" tabindex=1><%- gettext( "Retake Photo" ) %></a>
</div>
<div class="control control-do is-hidden" id="webcam_capture_button">
<a class="action action-do">
<a class="action action-do" tabindex=1>
<i class="icon fa fa-camera" aria-hidden="true"></i> <span class="sr"><%- gettext( "Take Photo" ) %></span>
</a>
</div>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment