FilesExpand file tree

develop

/

dialog.js

Copy path

Blame

More file actions

Blame

More file actions

Latest commit

 

History

History

History

150 lines (128 loc) · 4.11 KB

develop

/

dialog.js

Copy path

Top

File metadata and controls

• Code
• Blame

150 lines (128 loc) · 4.11 KB

Raw

Copy raw file

Download raw file

Open symbols panel

Edit and raw actions

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

import $ from 'jquery';

import AblePlayer from './ableplayer-base';

var focusableElementsSelector = "a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, *[tabindex], *[contenteditable]";

// Based on the incredible accessible modal dialog.

function AccessibleDialog( modalDiv, $returnElement, title, closeButtonLabel) {

this.title = title;

this.closeButtonLabel = closeButtonLabel;

this.focusedElementBeforeModal = $returnElement;

this.baseId = $(modalDiv).attr('id') || Math.floor(Math.random() * 1000000000).toString();

var thisObj = this;

var modal = modalDiv;

this.modal = modal;

modal.addClass('able-modal-dialog');

var $closeButton = $('<button>',{

'class': 'modalCloseButton',

'aria-label': thisObj.closeButtonLabel

});

AblePlayer.getSingleInstance().getIcon( $closeButton, 'close' );

$closeButton.on( 'keydown', function (e) {

if (e.key === ' ') {

thisObj.hide();

}

}).on( 'click', function () {

thisObj.hide();

});

var titleH1 = $('<h1></h1>');

titleH1.attr('id', 'modalTitle-' + this.baseId);

titleH1.text(title);

this.titleH1 = titleH1;

modal.attr({

'aria-labelledby': 'modalTitle-' + this.baseId,

});

var modalHeader = $( '<div>', {

'class': 'able-modal-header'

});

modalHeader.prepend(titleH1);

modalHeader.prepend($closeButton);

modal.prepend(modalHeader);

modal.attr({

'aria-hidden': 'true',

'role': 'dialog',

'aria-modal': 'true'

});

modal.on( 'keydown', function (e) {

if (e.key === 'Escape') {

thisObj.hide();

e.preventDefault();

} else if (e.key === 'Tab') {

// Manually loop tab navigation inside the modal.

var parts = modal.find('*');

var focusable = parts.filter(focusableElementsSelector).filter(':visible');

if (focusable.length === 0) {

return;

}

var focused = AblePlayer.getActiveDOMElement();

var currentIndex = focusable.index(focused);

if (e.shiftKey) {

// If backwards from first element, go to last.

if (currentIndex === 0) {

$(focusable.get(focusable.length - 1)).trigger('focus');

e.preventDefault();

}

} else {

if (currentIndex === focusable.length - 1) {

$(focusable.get(0)).trigger('focus');

e.preventDefault();

}

}

}

e.stopPropagation();

});

if ( $( 'body' ).hasClass( 'able-modal-active' ) ) {

$( 'body > *') .not('.able-modal-overlay').not('.able-modal-dialog').removeAttr('inert');

$( 'body' ).removeClass( 'able-modal-active' );

}

};

AccessibleDialog.prototype.show = function () {

if (!this.overlay) {

// Generate overlay.

var overlay = $('<div></div>').attr({

'class': 'able-modal-overlay',

'tabindex': '-1'

});

this.overlay = overlay;

$('body').append(overlay);

// Keep from moving focus out of dialog when clicking outside of it.

overlay.on('mousedown.accessibleModal', function (e) {

e.preventDefault();

thisObj.hide();

});

}

$('body > *').not('.able-modal-overlay').not('.able-modal-dialog').attr('inert', true);

$( 'body' ).addClass( 'able-modal-active' );

this.overlay.css('display', 'block');

this.modal.css('display', 'block');

this.modal.attr({

'aria-hidden': 'false',

'tabindex': '-1'

});

var focusable = this.modal.find("*").filter(focusableElementsSelector).filter(':visible');

if (focusable.length === 0) {

this.focusedElementBeforeModal.blur();

}

var thisObj = this;

setTimeout(function () {

// set focus on the first focusable element

thisObj.modal.find('button.modalCloseButton').first().trigger('focus');

}, 300);

};

AccessibleDialog.prototype.hide = function () {

if (this.overlay) {

this.overlay.css('display', 'none');

}

this.modal.css('display', 'none');

this.modal.attr('aria-hidden', 'true');

$('body > *').not('.able-modal-overlay').not('.able-modal-dialog').removeAttr('inert');

$( 'body' ).removeClass( 'able-modal-active' );

this.focusedElementBeforeModal.trigger('focus');

};

AccessibleDialog.prototype.getInputs = function () {

// return an array of input elements within this dialog

if (this.modal) {

var inputs = this.modal.find('input');

return inputs;

}

return false;

};

export default AccessibleDialog;