Skip to content

Commit 3b5ef73

Browse files
joedolsonjoedolson
committed
Simplify AccessibleDialog, remove fullscreen polyfill
Removes five arguments from the AccessibleDialog: dialogRole (all Able Player dialogs have the dialog role), isModal (all Able Player's dialogs are modal), $descDiv, unused; width; replaced with CSS; escapeHook - only used by fullscreen, which is already know from the 'fullscreen' arg. This allows width to be fully controlled in CSS; also changes default width to `fit-content`. Also removes the polyfill of fullscreen mode. This was only used by iOS, but it really hasn't worked in years. Better to remove it than to have a broken feature. See #493, #48.
1 parent 5157e44 commit 3b5ef73

6 files changed

Lines changed: 48 additions & 124 deletions

File tree

‎scripts/buildplayer.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -895,7 +895,7 @@
895895
controlLayout[1].push('preferences');
896896
}
897897

898-
if (this.mediaType === 'video' && this.allowFullscreen) {
898+
if (this.mediaType === 'video' && this.allowFullscreen && this.nativeFullscreenSupported() ) {
899899
if (this.skin === 'legacy') {
900900
controlLayout[3].push('fullscreen');
901901
} else {

‎scripts/control.js‎

Lines changed: 3 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -1196,28 +1196,9 @@
11961196
this.updatePreferences('prefSign');
11971197
};
11981198

1199-
AblePlayer.prototype.isFullscreen = function () {
1200-
1201-
// NOTE: This has been largely replaced as of 3.2.5 with a Boolean this.fullscreen,
1202-
// which is defined in setFullscreen()
1203-
// This function returns true if *any* element is fullscreen
1204-
// but doesn't tell us whether a particular element is in fullscreen
1205-
// (e.g., if there are multiple players on the page)
1206-
// The Boolean this.fullscreen is defined separately for each player instance
1207-
1208-
if (this.nativeFullscreenSupported()) {
1209-
return (document.fullscreenElement ||
1210-
document.webkitFullscreenElement ||
1211-
document.webkitCurrentFullscreenElement ) ? true : false;
1212-
} else {
1213-
return this.modalFullscreenActive ? true : false;
1214-
}
1215-
}
1216-
12171199
AblePlayer.prototype.setFullscreen = function (fullscreen) {
12181200

12191201
if (this.fullscreen == fullscreen) {
1220-
// replace isFullscreen() with a Boolean. see function for explanation
12211202
return;
12221203
}
12231204
var thisObj = this;
@@ -1252,61 +1233,9 @@
12521233
this.fullscreen = false;
12531234
}
12541235
} else {
1255-
// Non-native fullscreen support through modal dialog.
1256-
// Create dialog on first run through.
1257-
if (!this.fullscreenDialog) {
1258-
var $dialogDiv = $('<div>');
1259-
// create a hidden alert, communicated to screen readers via aria-describedby
1260-
var $fsDialogAlert = $('<p>',{
1261-
'class': 'able-screenreader-alert'
1262-
}).text( this.translate( 'fullScreen', 'Full screen' ) ); // TODO: Add alert text that is more descriptive
1263-
$dialogDiv.append($fsDialogAlert);
1264-
// now render this as a dialog
1265-
this.fullscreenDialog = new AccessibleDialog(
1266-
$dialogDiv,
1267-
this.$fullscreenButton,
1268-
'dialog',
1269-
true,
1270-
this.translate( 'fullScreenTitle', 'Full screen video player' ),
1271-
$fsDialogAlert,
1272-
this.translate( 'exitFullscreen', 'Exit full screen' ),
1273-
'100%',
1274-
true,
1275-
function () {
1276-
thisObj.handleFullscreenToggle()
1277-
}
1278-
);
1279-
$('body').append($dialogDiv);
1280-
}
1281-
1282-
// Track whether paused/playing before moving element; moving the element can stop playback.
1283-
var wasPaused = this.paused;
1284-
1285-
if (fullscreen) {
1286-
this.modalFullscreenActive = true;
1287-
this.fullscreenDialog.show();
1288-
1289-
// Move player element into fullscreen dialog, then show.
1290-
// Put a placeholder element where player was.
1291-
this.$modalFullscreenPlaceholder = $('<div class="placeholder">');
1292-
this.$modalFullscreenPlaceholder.insertAfter($el);
1293-
$el.appendTo(this.fullscreenDialog.modal);
1294-
1295-
var newHeight = $(window).height() - this.$playerDiv.height();
1296-
if (typeof this.$descDiv !== 'undefined' && (!this.$descDiv.is(':hidden')) ) {
1297-
newHeight -= this.$descDiv.height();
1298-
}
1299-
} else {
1300-
this.modalFullscreenActive = false;
1301-
$el.insertAfter(this.$modalFullscreenPlaceholder);
1302-
this.$modalFullscreenPlaceholder.remove();
1303-
this.fullscreenDialog.hide();
1304-
}
1305-
1306-
// Resume playback if moving stopped it.
1307-
if (!wasPaused && this.paused) {
1308-
this.playMedia();
1309-
}
1236+
// Removed non-native fullscreen mode in 4.8, which only supported iOS.
1237+
// Native fullscreen is on iOS 18+ devices behind a feature flag
1238+
// The polyfill hasn't worked for years.
13101239
}
13111240
// add event handlers for changes in fullscreen mode.
13121241
// Browsers natively trigger this event with the Escape key,

‎scripts/dialog.js‎

Lines changed: 30 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -2,69 +2,56 @@
22
var focusableElementsSelector = "a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, *[tabindex], *[contenteditable]";
33

44
// Based on the incredible accessible modal dialog.
5-
window.AccessibleDialog = function(modalDiv, $returnElement, dialogRole, isModal, title, $descDiv, closeButtonLabel, width, fullscreen, escapeHook) {
5+
window.AccessibleDialog = function( modalDiv, $returnElement, title, closeButtonLabel) {
66

77
this.title = title;
88
this.closeButtonLabel = closeButtonLabel;
99
this.focusedElementBeforeModal = $returnElement;
10-
this.escapeHook = escapeHook;
1110
this.baseId = $(modalDiv).attr('id') || Math.floor(Math.random() * 1000000000).toString();
1211
var thisObj = this;
1312
var modal = modalDiv;
1413
this.modal = modal;
15-
if ( width ) {
16-
modal.css({
17-
'width': width
18-
});
19-
}
14+
2015
modal.addClass('able-modal-dialog');
2116

22-
if (!fullscreen) {
23-
var closeButton = $('<button>',{
24-
'class': 'modalCloseButton',
25-
'title': thisObj.closeButtonLabel,
26-
'aria-label': thisObj.closeButtonLabel
27-
}).text('×');
28-
closeButton.on( 'keydown', function (e) {
29-
if (e.key === ' ') {
30-
thisObj.hide();
31-
}
32-
}).on( 'click', function () {
17+
var closeButton = $('<button>',{
18+
'class': 'modalCloseButton',
19+
'title': thisObj.closeButtonLabel,
20+
'aria-label': thisObj.closeButtonLabel
21+
}).text('×');
22+
closeButton.on( 'keydown', function (e) {
23+
if (e.key === ' ') {
3324
thisObj.hide();
34-
});
25+
}
26+
}).on( 'click', function () {
27+
thisObj.hide();
28+
});
3529

36-
var titleH1 = $('<h1></h1>');
37-
titleH1.attr('id', 'modalTitle-' + this.baseId);
38-
titleH1.text(title);
39-
this.titleH1 = titleH1;
30+
var titleH1 = $('<h1></h1>');
31+
titleH1.attr('id', 'modalTitle-' + this.baseId);
32+
titleH1.text(title);
33+
this.titleH1 = titleH1;
4034

41-
modal.attr({
42-
'aria-labelledby': 'modalTitle-' + this.baseId,
43-
});
44-
var modalHeader = $( '<div>', {
45-
'class': 'able-modal-header'
46-
});
47-
modalHeader.prepend(titleH1);
48-
modalHeader.prepend(closeButton);
49-
modal.prepend(modalHeader);
50-
}
35+
modal.attr({
36+
'aria-labelledby': 'modalTitle-' + this.baseId,
37+
});
38+
var modalHeader = $( '<div>', {
39+
'class': 'able-modal-header'
40+
});
41+
modalHeader.prepend(titleH1);
42+
modalHeader.prepend(closeButton);
43+
modal.prepend(modalHeader);
5144

5245
modal.attr({
5346
'aria-hidden': 'true',
54-
'role': dialogRole,
47+
'role': 'dialog',
48+
'aria-modal': 'true'
5549
});
56-
if (isModal) {
57-
modal.attr('aria-modal','true');
58-
}
5950

6051
modal.on( 'keydown', function (e) {
6152
if (e.key === 'Escape') {
62-
if (thisObj.escapeHook) {
63-
thisObj.escapeHook(e, this);
64-
} else {
65-
thisObj.hide();
66-
e.preventDefault();
67-
}
53+
thisObj.hide();
54+
e.preventDefault();
6855
} else if (e.key === 'Tab') {
6956
// Manually loop tab navigation inside the modal.
7057
var parts = modal.find('*');

‎scripts/dragdrop.js‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -311,12 +311,8 @@
311311
resizeDialog = new AccessibleDialog(
312312
$resizeForm,
313313
$windowButton,
314-
'dialog',
315-
true,
316314
this.translate( 'windowResizeHeading', 'Resize Window' ),
317-
$resizeWrapper,
318315
this.translate( 'closeButtonLabel', 'Close' ),
319-
'20em'
320316
);
321317
if (which === 'transcript') {
322318
this.transcriptResizeDialog = resizeDialog;

‎scripts/preference.js‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -739,7 +739,12 @@
739739

740740
// $prefsDiv (dialog) must be appended to the BODY!
741741
$('body').append($prefsDiv);
742-
dialog = new AccessibleDialog($prefsDiv, this.$prefsButton, 'dialog', true, formTitle, $prefsIntro, thisObj.tt.closeButtonLabel, false);
742+
dialog = new AccessibleDialog(
743+
$prefsDiv,
744+
this.$prefsButton,
745+
formTitle,
746+
thisObj.tt.closeButtonLabel
747+
);
743748

744749
// Add save and cancel buttons.
745750
$buttonContainer = $( '<div class="able-prefs-buttons"></div>' );

‎styles/ableplayer.css‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -574,12 +574,18 @@ div.able-modal-dialog {
574574
color: var(--able-modal-color);
575575
background-color: var(--able-modal-background);
576576
border: var(--able-modal-border);
577-
width: 50rem;
577+
width: fit-content;
578578
max-width: 95%;
579579
padding: 1rem;
580580
box-sizing: border-box;
581581
}
582582

583+
@media screen and ( width < 800px ) {
584+
div.able-modal-dialog {
585+
min-width: 95%;
586+
}
587+
}
588+
583589
body.able-modal-active {
584590
overflow: hidden;
585591
}
@@ -618,6 +624,7 @@ div.able-modal-overlay {
618624
.able-modal-header {
619625
display: flex;
620626
justify-content: space-between;
627+
gap: 8px;
621628
}
622629

623630
.able-modal-dialog .modalCloseButton {

0 commit comments

Comments
 (0)