Skip to content
Snippets Groups Projects
Commit 578e02b5 authored by jmclaus's avatar jmclaus
Browse files

Speed button know behaves like the volume button when tabbing forward or backward.

parent 9aa024b5
No related branches found
No related tags found
No related merge requests found
...@@ -125,6 +125,9 @@ function () { ...@@ -125,6 +125,9 @@ function () {
// We store the fact that previous element that lost focus was // We store the fact that previous element that lost focus was
// the volume clontrol. // the volume clontrol.
state.volumeBlur = true; state.volumeBlur = true;
// The following field is used in video_speed_control to track
// the element that had the focus.
state.previousFocus = 'volume';
}); });
} }
......
...@@ -153,69 +153,97 @@ function () { ...@@ -153,69 +153,97 @@ function () {
state.videoSpeedControl.el.removeClass('open'); state.videoSpeedControl.el.removeClass('open');
}); });
// ******************************
// The tabbing will cycle through the elements in the following
// order:
// 1. Play button
// 2. Speed button
// 3. Fastest speed called firstSpeed
// 4. Intermediary speed called otherSpeed
// 5. Slowest speed called lastSpeed
// 6. Sound button
// This field will keep track of where the focus is coming from.
state.previousFocus = '';
// ****************************** // ******************************
// Attach 'focus', and 'blur' events to the speed button which // Attach 'focus', and 'blur' events to the speed button which
// either brings up the speed dialog with individual speed entries, // either brings up the speed dialog with individual speed entries,
// or closes it. // or closes it.
state.videoSpeedControl.el.children('a') state.videoSpeedControl.el.children('a')
.on('focus', function () { .on('focus', function () {
// If the focus is comming from the first speed entry, this // If the focus is coming from the first speed entry
// means we are tabbing backwards. In this case we have to // (tabbing backwards) or last speed entry (tabbing forward)
// hide the speed entries which will allow us to change the // hide the speed entries dialog.
// focus further backwards. if (state.previousFocus === 'firstSpeed' ||
if (state.firstSpeedBlur === true) { state.previousFocus === 'lastSpeed') {
state.videoSpeedControl.el.removeClass('open'); state.videoSpeedControl.el.removeClass('open');
state.firstSpeedBlur = false;
}
// If the focus is comming from some other element, show
// the drop down with the speed entries.
else {
state.videoSpeedControl.el.addClass('open');
} }
}) })
.on('blur', function () { .on('blur', function () {
// When the focus leaves this element, if the speed entries // When the focus leaves this element, the speed entries
// dialog is shown (tabbing forwards), then we will set // dialog will be shown.
// focus to the first speed entry.
// // If we are tabbing forward (previous focus is empty ie
// If the selector does not select anything, then this // play button), we open the dialog and set focus on the
// means that the speed entries dialog is closed, and we // first speed entry.
// are tabbing backwads. The browser will select the if (state.previousFocus === '') {
// previous element to tab to by itself. state.videoSpeedControl.el.addClass('open');
state.videoSpeedControl.videoSpeedsEl state.videoSpeedControl.videoSpeedsEl
.find('a.speed_link:first') .find('a.speed_link:first')
.focus(); .focus();
}
// If we are tabbing backwards (previous focus is volume
// button), we open the dialog and set focus on the
// last speed entry.
if (state.previousFocus === 'volume') {
state.videoSpeedControl.el.addClass('open');
state.videoSpeedControl.videoSpeedsEl
.find('a.speed_link:last')
.focus();
}
state.previousFocus = '';
}); });
// ****************************** // ******************************
// Attach 'focus', and 'blur' events to elements which represent // Attach 'blur' event to elements which represent individual
// individual speed entries. // speed entries and use it to track the origin of the focus
speedLinks = state.videoSpeedControl.videoSpeedsEl speedLinks = state.videoSpeedControl.videoSpeedsEl
.find('a.speed_link'); .find('a.speed_link');
speedLinks.last().on('blur', function () {
// If we have reached the last speed entry, and the focus
// changes to the next element, we need to hide the speeds
// control drop-down.
state.videoSpeedControl.el.removeClass('open');
});
speedLinks.first().on('blur', function () { speedLinks.first().on('blur', function () {
// This flag will indicate that the focus to the next // The previous focus is a speed entry (we are tabbing
// element that will receive it is comming from the first // backwards), the dialog will close, set focus on the speed
// speed entry. // button and track the focus on first speed.
// if (state.previousFocus === 'otherSpeed') {
// This flag will be used to correctly handle scenario of state.previousFocus = 'firstSpeed';
// tabbing backwards. state.videoSpeedControl.el.children('a').focus();
state.firstSpeedBlur = true; }
}); });
speedLinks.on('focus', function () {
// Clear the flag which is only set when we are un-focusing // Track the focus on intermediary speeds.
// (the blur event) from the first speed entry. speedLinks
state.firstSpeedBlur = false; .filter(function (index) {
return index === 1 || index === 2
})
.on('blur', function () {
state.previousFocus = 'otherSpeed';
});
speedLinks.last().on('blur', function () {
// The previous focus is a speed entry (we are tabbing
// forward), the dialog will close, set focus on the speed
// button and track the focus on last speed.
if (state.previousFocus === 'otherSpeed') {
state.previousFocus = 'lastSpeed';
state.videoSpeedControl.el.children('a').focus();
}
}); });
} }
} }
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment