Andal.LND/edx-platform
6
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Tabbing through captions is completely functional.

Browse Source
This commit is contained in:
jmclaus
2013-09-11 13:24:12 -04:00
parent dcabccc1c5
commit b2ff98f044
1 changed files with 57 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

90
common/lib/xmodule/xmodule/js/src/video/09_video_caption.js
View File

@@ -68,7 +68,7 @@ function () {
state.videoCaption.captionMouseUp = _.bind(captionMouseUp, state);
state.videoCaption.captionFocus = _.bind(captionFocus, state);
state.videoCaption.captionBlur = _.bind(captionBlur, state);
state.videoCaption.captionPressEnter = _.bind(captionPressEnter, state);
state.videoCaption.captionKeyDown = _.bind(captionKeyDown, state);
}
// ***************************************************************
@@ -332,9 +332,10 @@ function () {
this.videoCaption.subtitlesEl.find('li[data-index]').on('click', this.videoCaption.captionMouseUp);
this.videoCaption.subtitlesEl.find('li[data-index]').on('focus', this.videoCaption.captionFocus);
this.videoCaption.subtitlesEl.find('li[data-index]').on('blur', this.videoCaption.captionBlur);
this.videoCaption.subtitlesEl.find('li[data-index]').on('keydown', this.videoCaption.captionPressEnter);
this.videoCaption.tabbing = false;
this.videoCaption.tabIndex = 0;
this.videoCaption.subtitlesEl.find('li[data-index]').on('keydown', this.videoCaption.captionKeyDown);
this.videoCaption.automaticScroll = true;
this.videoCaption.currentCaptionIndex = 0;
this.videoCaption.isMouseFocus = false;
this.videoCaption.subtitlesEl.prepend($('<li class="spacing">').height(this.videoCaption.topSpacingHeight()));
this.videoCaption.subtitlesEl.append($('<li class="spacing">').height(this.videoCaption.bottomSpacingHeight()));
@@ -342,26 +343,29 @@ function () {
this.videoCaption.rendered = true;
}
// On mouseEnter, hide the outline of a caption that has been tabbed to.
function captionMouseEnter(event) {
var target = $(event.target);
var targetIndex = parseInt(target.attr('data-index'), 10);
if (targetIndex === this.tabIndex) {
target.css('outlineWidth', '0px');
var caption = $(event.target);
var captionIndex = parseInt(caption.attr('data-index'), 10);
if (captionIndex === this.videoCaption.currentCaptionIndex) {
caption.css('outlineWidth', '0px');
}
}
// On mouseLeave, show the outline of a caption that has been tabbed to.
function captionMouseLeave(event) {
var target = $(event.target);
var targetIndex = parseInt(target.attr('data-index'), 10);
if (targetIndex === this.tabIndex) {
target.css('outlineWidth', '1px');
var caption = $(event.target),
captionIndex = parseInt(caption.attr('data-index'), 10);
if (captionIndex === this.videoCaption.currentCaptionIndex) {
caption.css('outlineWidth', '1px');
}
}
function captionMouseDown(event) {
var target = $(event.target);
target.css('outlineWidth', '0px');
this.videoCaption.tabbing = false;
var caption = $(event.target);
this.videoCaption.isMouseFocus = true;
caption.css('outlineWidth', '0px');
this.videoCaption.automaticScroll = true;
}
function captionMouseUp(event) {
@@ -369,30 +373,50 @@ function () {
}
function captionFocus(event) {
var target = $(event.target);
var targetIndex = parseInt(target.attr('data-index'), 10);
this.tabIndex = targetIndex;
target.css('outlineWidth', '1px');
target.css('outlineStyle', 'dotted');
if (targetIndex === 0 ||
targetIndex === 1 ||
targetIndex === this.videoCaption.captions.length-2 ||
targetIndex === this.videoCaption.captions.length-1) {
this.videoCaption.tabbing = true;
var caption = $(event.target),
captionIndex = parseInt(caption.attr('data-index'), 10);
// If the focus comes from a mouse click, hide the outline and turn on
// automatic scrolling.
if (this.videoCaption.isMouseFocus) {
this.videoCaption.automaticScroll = true;
caption.css('outlineWidth', '0px');
caption.css('outlineStyle', 'none');
}
// If the focus comes from tabbing, show the outline and turn off
// automatic scrolling.
else {
this.videoCaption.currentCaptionIndex = captionIndex;
caption.css('outlineWidth', '1px');
caption.css('outlineStyle', 'dotted');
// The second and second to last elements turn automatic scrolling
// off again as it may have been enabled in captionBlur.
if (captionIndex === 0 ||
captionIndex === 1 ||
captionIndex === this.videoCaption.captions.length-2 ||
captionIndex === this.videoCaption.captions.length-1) {
this.videoCaption.automaticScroll = false;
}
}
}
function captionBlur(event) {
var target = $(event.target);
targetIndex = parseInt(target.attr('data-index'), 10);
target.css('outlineWidth', '0px');
target.css('outlineStyle', 'none');
if (targetIndex === 0 || targetIndex === this.videoCaption.captions.length-1) {
this.videoCaption.tabbing = false;
var caption = $(event.target),
captionIndex = parseInt(caption.attr('data-index'), 10);
caption.css('outlineWidth', '0px');
caption.css('outlineStyle', 'none');
// If we are on first or last index, we have to turn automatic scroll on
// again when losing focus. There is no way to know in what direction we
// are tabbing. So we could be on the first element and tabbing back out
// of the captions or on the last element and tabbing forward out of the
// captions.
if (captionIndex === 0 ||
captionIndex === this.videoCaption.captions.length-1) {
this.videoCaption.automaticScroll = true;
}
}
function captionPressEnter(event) {
function captionKeyDown(event) {
this.videoCaption.isMouseFocus = false;
if (event.which === 13) { //Enter key
this.videoCaption.seekPlayer(event);
}
@@ -401,7 +425,7 @@ function () {
function scrollCaption() {
var el = this.videoCaption.subtitlesEl.find('.current:first');
if (!this.videoCaption.frozen && el.length && !this.videoCaption.tabbing) {
if (!this.videoCaption.frozen && el.length && this.videoCaption.automaticScroll) {
this.videoCaption.subtitlesEl.scrollTo(
el,
{