Skip to content

E
edx-platform
Commit cf69e35f by jmclaus
Options

Adressed pull request comments

parent b2ff98f0
Showing with 59 additions and 61 deletions
common/lib/xmodule/xmodule/js/src/video/09_video_caption.js
...@@ -37,38 +37,37 @@ function () { ...@@ -37,38 +37,37 @@ function () {
// Functions which will be accessible via 'state' object. When called, these functions will // Functions which will be accessible via 'state' object. When called, these functions will
// get the 'state' object as a context. // get the 'state' object as a context.
function _makeFunctionsPublic(state) { function _makeFunctionsPublic(state) {
state.videoCaption.autoShowCaptions = _.bind(autoShowCaptions, state); state.videoCaption.autoShowCaptions = _.bind(autoShowCaptions, state);
state.videoCaption.autoHideCaptions = _.bind(autoHideCaptions, state); state.videoCaption.autoHideCaptions = _.bind(autoHideCaptions, state);
state.videoCaption.resize = _.bind(resize, state); state.videoCaption.resize = _.bind(resize, state);
state.videoCaption.toggle = _.bind(toggle, state); state.videoCaption.toggle = _.bind(toggle, state);
state.videoCaption.onMouseEnter = _.bind(onMouseEnter, state); state.videoCaption.onMouseEnter = _.bind(onMouseEnter, state);
state.videoCaption.onMouseLeave = _.bind(onMouseLeave, state); state.videoCaption.onMouseLeave = _.bind(onMouseLeave, state);
state.videoCaption.onMovement = _.bind(onMovement, state); state.videoCaption.onMovement = _.bind(onMovement, state);
state.videoCaption.renderCaption = _.bind(renderCaption, state); state.videoCaption.renderCaption = _.bind(renderCaption, state);
state.videoCaption.captionHeight = _.bind(captionHeight, state); state.videoCaption.captionHeight = _.bind(captionHeight, state);
state.videoCaption.topSpacingHeight = _.bind(topSpacingHeight, state); state.videoCaption.topSpacingHeight = _.bind(topSpacingHeight, state);
state.videoCaption.bottomSpacingHeight = _.bind(bottomSpacingHeight, state); state.videoCaption.bottomSpacingHeight = _.bind(bottomSpacingHeight, state);
state.videoCaption.scrollCaption = _.bind(scrollCaption, state); state.videoCaption.scrollCaption = _.bind(scrollCaption, state);
state.videoCaption.search = _.bind(search, state); state.videoCaption.search = _.bind(search, state);
state.videoCaption.play = _.bind(play, state); state.videoCaption.play = _.bind(play, state);
state.videoCaption.pause = _.bind(pause, state); state.videoCaption.pause = _.bind(pause, state);
state.videoCaption.seekPlayer = _.bind(seekPlayer, state); state.videoCaption.seekPlayer = _.bind(seekPlayer, state);
state.videoCaption.hideCaptions = _.bind(hideCaptions, state); state.videoCaption.hideCaptions = _.bind(hideCaptions, state);
state.videoCaption.calculateOffset = _.bind(calculateOffset, state); state.videoCaption.calculateOffset = _.bind(calculateOffset, state);
state.videoCaption.updatePlayTime = _.bind(updatePlayTime, state); state.videoCaption.updatePlayTime = _.bind(updatePlayTime, state);
state.videoCaption.setSubtitlesHeight = _.bind(setSubtitlesHeight, state); state.videoCaption.setSubtitlesHeight = _.bind(setSubtitlesHeight, state);
state.videoCaption.renderElements = _.bind(renderElements, state); state.videoCaption.renderElements = _.bind(renderElements, state);
state.videoCaption.bindHandlers = _.bind(bindHandlers, state); state.videoCaption.bindHandlers = _.bind(bindHandlers, state);
state.videoCaption.fetchCaption = _.bind(fetchCaption, state); state.videoCaption.fetchCaption = _.bind(fetchCaption, state);
state.videoCaption.captionURL = _.bind(captionURL, state); state.videoCaption.captionURL = _.bind(captionURL, state);
state.videoCaption.captionMouseEnter = _.bind(captionMouseEnter, state); state.videoCaption.captionMouseEnterLeave = _.bind(captionMouseEnterLeave, state);
state.videoCaption.captionMouseLeave = _.bind(captionMouseLeave, state); state.videoCaption.captionMouseDown = _.bind(captionMouseDown, state);
state.videoCaption.captionMouseDown = _.bind(captionMouseDown, state); state.videoCaption.captionMouseUp = _.bind(captionMouseUp, state);
state.videoCaption.captionMouseUp = _.bind(captionMouseUp, state); state.videoCaption.captionFocus = _.bind(captionFocus, state);
state.videoCaption.captionFocus = _.bind(captionFocus, state); state.videoCaption.captionBlur = _.bind(captionBlur, state);
state.videoCaption.captionBlur = _.bind(captionBlur, state); state.videoCaption.captionKeyDown = _.bind(captionKeyDown, state);
state.videoCaption.captionKeyDown = _.bind(captionKeyDown, state);
} }
// *************************************************************** // ***************************************************************
...@@ -325,14 +324,17 @@ function () { ...@@ -325,14 +324,17 @@ function () {
this.videoCaption.subtitlesEl.html(container.html()); this.videoCaption.subtitlesEl.html(container.html());
this.videoCaption.subtitlesEl.find('li[data-index]').on('mouseenter', this.videoCaption.captionMouseEnter); this.videoCaption.subtitlesEl.find('li[data-index]').on({
this.videoCaption.subtitlesEl.find('li[data-index]').on('mouseleave', this.videoCaption.captionMouseLeave); mouseenter: this.videoCaption.captionMouseEnterLeave,
this.videoCaption.subtitlesEl.find('li[data-index]').on('mousedown', this.videoCaption.captionMouseDown); mouseleave: this.videoCaption.captionMouseEnterLeave,
this.videoCaption.subtitlesEl.find('li[data-index]').on('mouseup', this.videoCaption.captionMouseUp); mousedown: this.videoCaption.captionMouseDown,
this.videoCaption.subtitlesEl.find('li[data-index]').on('click', this.videoCaption.captionMouseUp); mouseup: this.videoCaption.captionMouseUp,
this.videoCaption.subtitlesEl.find('li[data-index]').on('focus', this.videoCaption.captionFocus); click: this.videoCaption.captionMouseUp,
this.videoCaption.subtitlesEl.find('li[data-index]').on('blur', this.videoCaption.captionBlur); focus: this.videoCaption.captionFocus,
this.videoCaption.subtitlesEl.find('li[data-index]').on('keydown', this.videoCaption.captionKeyDown); blur: this.videoCaption.captionBlur,
keydown: this.videoCaption.captionKeyDown
});
this.videoCaption.automaticScroll = true; this.videoCaption.automaticScroll = true;
this.videoCaption.currentCaptionIndex = 0; this.videoCaption.currentCaptionIndex = 0;
this.videoCaption.isMouseFocus = false; this.videoCaption.isMouseFocus = false;
...@@ -344,21 +346,14 @@ function () { ...@@ -344,21 +346,14 @@ function () {
} }
// On mouseEnter, hide the outline of a caption that has been tabbed to. // On mouseEnter, hide the outline of a caption that has been tabbed to.
function captionMouseEnter(event) {
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. // On mouseLeave, show the outline of a caption that has been tabbed to.
function captionMouseLeave(event) { function captionMouseEnterLeave(event) {
var caption = $(event.target), var caption = $(event.target),
outlineWidth = (event.type === 'mouseleave') ? 1 : 0,
captionIndex = parseInt(caption.attr('data-index'), 10); captionIndex = parseInt(caption.attr('data-index'), 10);
if (captionIndex === this.videoCaption.currentCaptionIndex) { if (captionIndex === this.videoCaption.currentCaptionIndex) {
caption.css('outlineWidth', '1px'); caption.css('outlineWidth', outlineWidth + 'px');
} }
} }
function captionMouseDown(event) { function captionMouseDown(event) {
...@@ -379,21 +374,22 @@ function () { ...@@ -379,21 +374,22 @@ function () {
// automatic scrolling. // automatic scrolling.
if (this.videoCaption.isMouseFocus) { if (this.videoCaption.isMouseFocus) {
this.videoCaption.automaticScroll = true; this.videoCaption.automaticScroll = true;
caption.css('outlineWidth', '0px'); caption.css({
caption.css('outlineStyle', 'none'); 'outlineWidth': '0px',
'outlineStyle': 'none'
});
} }
// If the focus comes from tabbing, show the outline and turn off // If the focus comes from tabbing, show the outline and turn off
// automatic scrolling. // automatic scrolling.
else { else {
this.videoCaption.currentCaptionIndex = captionIndex; this.videoCaption.currentCaptionIndex = captionIndex;
caption.css('outlineWidth', '1px'); caption.css({
caption.css('outlineStyle', 'dotted'); 'outlineWidth': '1px',
'outlineStyle': 'dotted'
});
// The second and second to last elements turn automatic scrolling // The second and second to last elements turn automatic scrolling
// off again as it may have been enabled in captionBlur. // off again as it may have been enabled in captionBlur.
if (captionIndex === 0 || if (captionIndex <= 1 || captionIndex >= this.videoCaption.captions.length-2) {
captionIndex === 1 ||
captionIndex === this.videoCaption.captions.length-2 ||
captionIndex === this.videoCaption.captions.length-1) {
this.videoCaption.automaticScroll = false; this.videoCaption.automaticScroll = false;
} }
} }
...@@ -402,8 +398,10 @@ function () { ...@@ -402,8 +398,10 @@ function () {
function captionBlur(event) { function captionBlur(event) {
var caption = $(event.target), var caption = $(event.target),
captionIndex = parseInt(caption.attr('data-index'), 10); captionIndex = parseInt(caption.attr('data-index'), 10);
caption.css('outlineWidth', '0px'); caption.css({
caption.css('outlineStyle', 'none'); 'outlineWidth': '0px',
'outlineStyle': 'none'
});
// If we are on first or last index, we have to turn automatic scroll on // 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 // 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 // are tabbing. So we could be on the first element and tabbing back out
......
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