assets/ableplayer/scripts/dragdrop.js in wai-website-theme-1.2 vs assets/ableplayer/scripts/dragdrop.js in wai-website-theme-1.3
- old
+ new
@@ -40,50 +40,53 @@
$resizeHandle.css('z-index',resizeZIndex);
$window.append($resizeHandle);
// add event listener to toolbar to start and end drag
// other event listeners will be added when drag starts
- $toolbar.on('mousedown', function(event) {
- event.stopPropagation();
+ $toolbar.on('mousedown', function(e) {
+ e.stopPropagation();
if (!thisObj.windowMenuClickRegistered) {
thisObj.windowMenuClickRegistered = true;
- thisObj.startMouseX = event.pageX;
- thisObj.startMouseY = event.pageY;
+ thisObj.startMouseX = e.pageX;
+ thisObj.startMouseY = e.pageY;
thisObj.dragDevice = 'mouse';
thisObj.startDrag(which, $window);
}
return false;
});
- $toolbar.on('mouseup', function(event) {
- event.stopPropagation();
+ $toolbar.on('mouseup', function(e) {
+ e.stopPropagation();
if (thisObj.dragging && thisObj.dragDevice === 'mouse') {
thisObj.endDrag(which);
}
return false;
});
// add event listeners for resizing
- $resizeHandle.on('mousedown', function(event) {
- event.stopPropagation();
+ $resizeHandle.on('mousedown', function(e) {
+
+ e.stopPropagation();
if (!thisObj.windowMenuClickRegistered) {
thisObj.windowMenuClickRegistered = true;
- thisObj.startMouseX = event.pageX;
- thisObj.startMouseY = event.pageY;
+ thisObj.startMouseX = e.pageX;
+ thisObj.startMouseY = e.pageY;
thisObj.startResize(which, $window);
return false;
}
});
- $resizeHandle.on('mouseup', function(event) {
- event.stopPropagation();
+
+ $resizeHandle.on('mouseup', function(e) {
+ e.stopPropagation();
if (thisObj.resizing) {
thisObj.endResize(which);
}
return false;
});
// whenever a window is clicked, bring it to the foreground
$window.on('click', function() {
+
if (!thisObj.windowMenuClickRegistered && !thisObj.finishingDrag) {
thisObj.updateZIndex(which);
}
thisObj.finishingDrag = false;
});
@@ -92,15 +95,14 @@
};
AblePlayer.prototype.addWindowMenu = function(which, $window, windowName) {
- var thisObj, $windowAlert, $newButton, $buttonIcon, buttonImgSrc, $buttonImg,
+ var thisObj, $windowAlert, menuId, $newButton, $buttonIcon, buttonImgSrc, $buttonImg,
$buttonLabel, tooltipId, $tooltip, $popup,
label, position, buttonHeight, buttonWidth, tooltipY, tooltipX, tooltipStyle, tooltip,
- $optionList, radioName, options, i, $optionItem, option,
- radioId, $radioButton, $radioLabel;
+ $optionList, menuBaseId, options, i, $optionItem, option, menuId;
thisObj = this;
// Add a Boolean that will be set to true temporarily if window button or a menu item is clicked
// This will prevent the click event from also triggering a mousedown event on the toolbar
@@ -112,21 +114,25 @@
this.finishingDrag = false;
// create an alert div and add it to window
$windowAlert = $('<div role="alert"></div>');
$windowAlert.addClass('able-alert');
+ $windowAlert.hide();
$windowAlert.appendTo(this.$activeWindow);
$windowAlert.css({
top: $window.offset().top
});
// add button to draggable window which triggers a popup menu
// for now, re-use preferences icon for this purpose
+ menuId = this.mediaId + '-' + windowName + '-menu';
$newButton = $('<button>',{
'type': 'button',
'tabindex': '0',
'aria-label': this.tt.windowButtonLabel,
+ 'aria-haspopup': 'true',
+ 'aria-controls': menuId,
'class': 'able-button-handler-preferences'
});
if (this.iconType === 'font') {
$buttonIcon = $('<span>',{
'class': 'icon-preferences',
@@ -154,12 +160,12 @@
// add a tooltip that displays aria-label on mouseenter or focus
tooltipId = this.mediaId + '-' + windowName + '-tooltip';
$tooltip = $('<div>',{
'class' : 'able-tooltip',
'id' : tooltipId
- });
- $newButton.on('mouseenter focus',function(event) {
+ }).hide();
+ $newButton.on('mouseenter focus',function(e) {
var label = $(this).attr('aria-label');
// get position of this button
var position = $(this).position();
var buttonHeight = $(this).height();
var buttonWidth = $(this).width();
@@ -168,87 +174,19 @@
var tooltipStyle = {
left: '',
right: tooltipX + 'px',
top: tooltipY + 'px'
};
- var tooltip = $('#' + tooltipId).text(label).css(tooltipStyle);
+ var tooltip = AblePlayer.localGetElementById($newButton[0], tooltipId).text(label).css(tooltipStyle);
thisObj.showTooltip(tooltip);
$(this).on('mouseleave blur',function() {
- $('#' + tooltipId).text('').hide();
+ AblePlayer.localGetElementById($newButton[0], tooltipId).text('').hide();
});
});
- // add a popup menu
- $popup = this.createPopup(windowName);
- $optionList = $('<ul></ul>');
- radioName = this.mediaId + '-' + windowName + '-choice';
-
- options = [];
- options.push({
- 'name': 'move',
- 'label': this.tt.windowMove
- });
- options.push({
- 'name': 'resize',
- 'label': this.tt.windowResize
- });
- for (i = 0; i < options.length; i++) {
- $optionItem = $('<li></li>');
- option = options[i];
- radioId = radioName + '-' + i;
- $radioButton = $('<input>',{
- 'type': 'radio',
- 'val': option.name,
- 'name': radioName,
- 'id': radioId
- });
- $radioLabel = $('<label>',{
- 'for': radioId
- });
- $radioLabel.text(option.label);
- $radioButton.on('focus',function(e) {
- $(this).parents('ul').children('li').removeClass('able-focus');
- $(this).parent('li').addClass('able-focus');
- });
- $radioButton.on('click',function(e) {
- e.stopPropagation();
- if (!thisObj.windowMenuClickRegistered && !thisObj.finishingDrag) {
- thisObj.windowMenuClickRegistered = true;
- thisObj.handleMenuChoice( which, $(this).val(), e.type);
- }
- });
- // due to an apparent bug (in jquery?) clicking the label
- // does not result in a click event on the associated radio button
- // Observed this in Firefox 45.0.2 and Chrome 50
- // It works fine on a simple test page so this could be an Able Player bug
- // Added the following as a workaround rather than mess with isolating the bug
- $radioLabel.on('click mousedown', function() {
- var clickedId = $(this).attr('for');
- $('#' + clickedId).click();
- })
- $optionItem.append($radioButton,$radioLabel);
- $optionList.append($optionItem);
- }
- $popup.append($optionList);
- $newButton.on('click mousedown keydown',function(e) {
- e.stopPropagation();
- if (!thisObj.windowMenuClickRegistered && !thisObj.finishingDrag) {
- // don't set windowMenuClickRegistered yet; that happens in handler function
- thisObj.handleWindowButtonClick(which, e);
- }
- thisObj.finishingDrag = false;
- });
-
- $popup.on('keydown', function(event) {
- // Escape key
- if (event.which === 27) {
- // Close Window Options Menu
- $newButton.focus();
- $popup.hide();
- }
- });
-
+ // setup popup menu
+ $popup = this.setupPopups(windowName); // 'transcript-window' or 'sign-window'
// define vars and assemble all the parts
if (which === 'transcript') {
this.$transcriptAlert = $windowAlert;
this.$transcriptPopupButton = $newButton;
this.$transcriptPopup = $popup;
@@ -259,10 +197,20 @@
this.$signPopupButton = $newButton;
this.$signPopup = $popup;
this.$signToolbar.append($windowAlert,$newButton,$tooltip,$popup);
}
+ // handle button click
+ $newButton.on('click mousedown keydown',function(e) {
+ e.stopPropagation();
+ if (!thisObj.windowMenuClickRegistered && !thisObj.finishingDrag) {
+ // don't set windowMenuClickRegistered yet; that happens in handler function
+ thisObj.handleWindowButtonClick(which, e);
+ }
+ thisObj.finishingDrag = false;
+ });
+
this.addResizeDialog(which, $window);
};
AblePlayer.prototype.addResizeDialog = function (which, $window) {
@@ -378,55 +326,68 @@
var thisObj, $windowPopup, $windowButton, $toolbar, popupTop;
thisObj = this;
+ if (which === 'transcript') {
+ $windowPopup = this.$transcriptPopup;
+ $windowButton = this.$transcriptPopupButton;
+ $toolbar = this.$transcriptToolbar;
+ }
+ else if (which === 'sign') {
+ $windowPopup = this.$signPopup;
+ $windowButton = this.$signPopupButton;
+ $toolbar = this.$signToolbar;
+ }
+
if (e.type === 'keydown') {
// user pressed a key
- if (e.which === 32 || e.which === 13 || e.which === 27) {
- // this was Enter, space, or escape
+ if (e.which === 32 || e.which === 13) {
+ // this was Enter or space
this.windowMenuClickRegistered = true;
}
+ else if (e.which === 27) { // escape
+ // hide the popup menu
+ $windowPopup.hide('fast', function() {
+ // also reset the Boolean
+ thisObj.windowMenuClickRegistered = false;
+ // also restore menu items to their original state
+ $windowPopup.find('li').removeClass('able-focus').attr('tabindex','-1');
+ // also return focus to window options button
+ $windowButton.focus();
+ });
+ }
else {
return false;
}
}
else {
// this was a mouse event
this.windowMenuClickRegistered = true;
}
- if (which === 'transcript') {
- $windowPopup = this.$transcriptPopup;
- $windowButton = this.$transcriptPopupButton;
- $toolbar = this.$transcriptToolbar;
- }
- else if (which === 'sign') {
- $windowPopup = this.$signPopup;
- $windowButton = this.$signPopupButton;
- $toolbar = this.$signToolbar;
- }
if ($windowPopup.is(':visible')) {
$windowPopup.hide(200,'',function() {
thisObj.windowMenuClickRegistered = false; // reset
});
$windowPopup.find('li').removeClass('able-focus');
- $windowButton.focus();
+ $windowButton.attr('aria-expanded','false').focus();
}
else {
// first, be sure window is on top
this.updateZIndex(which);
popupTop = $windowButton.position().top + $windowButton.outerHeight();
$windowPopup.css('top', popupTop);
$windowPopup.show(200,'',function() {
- $(this).find('input').first().focus().parent().addClass('able-focus');
+ $windowButton.attr('aria-expanded','true');
+ $(this).find('li').first().focus().addClass('able-focus');
thisObj.windowMenuClickRegistered = false; // reset
});
}
};
- AblePlayer.prototype.handleMenuChoice = function (which, choice, eventType) {
+ AblePlayer.prototype.handleMenuChoice = function (which, choice, e) {
var thisObj, $window, $windowPopup, $windowButton, resizeDialog, $thisRadio;
thisObj = this;
@@ -441,15 +402,39 @@
$windowPopup = this.$signPopup;
$windowButton = this.$signPopupButton;
resizeDialog = this.signResizeDialog;
}
- // hide the popup menu, and reset the Boolean
+ if (e.type === 'keydown') {
+ if (e.which === 27) { // escape
+ // hide the popup menu
+ $windowPopup.hide('fast', function() {
+ // also reset the Boolean
+ thisObj.windowMenuClickRegistered = false;
+ // also restore menu items to their original state
+ $windowPopup.find('li').removeClass('able-focus').attr('tabindex','-1');
+ // also return focus to window options button
+ $windowButton.focus();
+ });
+ return false;
+ }
+ else {
+ // all other keys will be handled by upstream functions
+ return false;
+ }
+ }
+
+ // hide the popup menu
$windowPopup.hide('fast', function() {
- thisObj.windowMenuClickRegistered = false; // reset
+ // also reset the boolean
+ thisObj.windowMenuClickRegistered = false;
+ // also restore menu items to their original state
+ $windowPopup.find('li').removeClass('able-focus').attr('tabindex','-1');
});
- $windowButton.focus();
+ if (choice !== 'close') {
+ $windowButton.focus();
+ }
if (choice === 'move') {
if (!this.showedAlert(which)) {
this.showAlert(this.tt.windowMoveAlert,which);
if (which === 'transcript') {
@@ -457,11 +442,11 @@
}
else if (which === 'sign') {
this.showedSignAlert = true;
}
}
- if (eventType === 'keydown') {
+ if (e.type === 'keydown') {
this.dragDevice = 'keyboard';
}
else {
this.dragDevice = 'mouse';
}
@@ -470,13 +455,21 @@
}
else if (choice == 'resize') {
// resize through the menu uses a form, not drag
resizeDialog.show();
}
+ else if (choice == 'close') {
+ // close window, place focus on corresponding button on controller bar
+ if (which === 'transcript') {
+ this.handleTranscriptToggle();
+ }
+ else if (which === 'sign') {
+ this.handleSignToggle();
+ }
+ }
};
AblePlayer.prototype.startDrag = function(which, $element) {
-
var thisObj, $windowPopup, zIndex, startPos, newX, newY;
thisObj = this;
this.$activeWindow = $element;
this.dragging = true;