AuralView.js 6.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159
  1. /**
  2. * DO NOT EDIT THIS FILE.
  3. * See the following change record for more information,
  4. * https://www.drupal.org/node/2815083
  5. * @preserve
  6. **/
  7. (function (Drupal, Backbone, $) {
  8. Drupal.ckeditor.AuralView = Backbone.View.extend({
  9. events: {
  10. 'click .ckeditor-buttons a': 'announceButtonHelp',
  11. 'click .ckeditor-multiple-buttons a': 'announceSeparatorHelp',
  12. 'focus .ckeditor-button a': 'onFocus',
  13. 'focus .ckeditor-button-separator a': 'onFocus',
  14. 'focus .ckeditor-toolbar-group': 'onFocus'
  15. },
  16. initialize: function initialize() {
  17. this.listenTo(this.model, 'change:isDirty', this.announceMove);
  18. },
  19. announceMove: function announceMove(model, isDirty) {
  20. if (!isDirty) {
  21. var item = document.activeElement || null;
  22. if (item) {
  23. var $item = $(item);
  24. if ($item.hasClass('ckeditor-toolbar-group')) {
  25. this.announceButtonGroupPosition($item);
  26. } else if ($item.parent().hasClass('ckeditor-button')) {
  27. this.announceButtonPosition($item.parent());
  28. }
  29. }
  30. }
  31. },
  32. onFocus: function onFocus(event) {
  33. event.stopPropagation();
  34. var $originalTarget = $(event.target);
  35. var $currentTarget = $(event.currentTarget);
  36. var $parent = $currentTarget.parent();
  37. if ($parent.hasClass('ckeditor-button') || $parent.hasClass('ckeditor-button-separator')) {
  38. this.announceButtonPosition($currentTarget.parent());
  39. } else if ($originalTarget.attr('role') !== 'button' && $currentTarget.hasClass('ckeditor-toolbar-group')) {
  40. this.announceButtonGroupPosition($currentTarget);
  41. }
  42. },
  43. announceButtonGroupPosition: function announceButtonGroupPosition($group) {
  44. var $groups = $group.parent().children();
  45. var $row = $group.closest('.ckeditor-row');
  46. var $rows = $row.parent().children();
  47. var position = $groups.index($group) + 1;
  48. var positionCount = $groups.not('.placeholder').length;
  49. var row = $rows.index($row) + 1;
  50. var rowCount = $rows.not('.placeholder').length;
  51. var text = Drupal.t('@groupName button group in position @position of @positionCount in row @row of @rowCount.', {
  52. '@groupName': $group.attr('data-drupal-ckeditor-toolbar-group-name'),
  53. '@position': position,
  54. '@positionCount': positionCount,
  55. '@row': row,
  56. '@rowCount': rowCount
  57. });
  58. if (position === 1 && row === rowCount) {
  59. text += '\n';
  60. text += Drupal.t('Press the down arrow key to create a new row.');
  61. }
  62. Drupal.announce(text, 'assertive');
  63. },
  64. announceButtonPosition: function announceButtonPosition($button) {
  65. var $row = $button.closest('.ckeditor-row');
  66. var $rows = $row.parent().children();
  67. var $buttons = $button.closest('.ckeditor-buttons').children();
  68. var $group = $button.closest('.ckeditor-toolbar-group');
  69. var $groups = $group.parent().children();
  70. var groupPosition = $groups.index($group) + 1;
  71. var groupPositionCount = $groups.not('.placeholder').length;
  72. var position = $buttons.index($button) + 1;
  73. var positionCount = $buttons.length;
  74. var row = $rows.index($row) + 1;
  75. var rowCount = $rows.not('.placeholder').length;
  76. var type = $button.attr('data-drupal-ckeditor-type') === 'separator' ? '' : Drupal.t('button');
  77. var text = void 0;
  78. if ($button.closest('.ckeditor-toolbar-disabled').length > 0) {
  79. text = Drupal.t('@name @type.', {
  80. '@name': $button.children().attr('aria-label'),
  81. '@type': type
  82. });
  83. text += '\n' + Drupal.t('Press the down arrow key to activate.');
  84. Drupal.announce(text, 'assertive');
  85. } else if ($group.not('.placeholder').length === 1) {
  86. text = Drupal.t('@name @type in position @position of @positionCount in @groupName button group in row @row of @rowCount.', {
  87. '@name': $button.children().attr('aria-label'),
  88. '@type': type,
  89. '@position': position,
  90. '@positionCount': positionCount,
  91. '@groupName': $group.attr('data-drupal-ckeditor-toolbar-group-name'),
  92. '@row': row,
  93. '@rowCount': rowCount
  94. });
  95. if (groupPosition === 1 && position === 1 && row === rowCount) {
  96. text += '\n';
  97. text += Drupal.t('Press the down arrow key to create a new button group in a new row.');
  98. }
  99. if (groupPosition === groupPositionCount && position === positionCount) {
  100. text += '\n';
  101. text += Drupal.t('This is the last group. Move the button forward to create a new group.');
  102. }
  103. Drupal.announce(text, 'assertive');
  104. }
  105. },
  106. announceButtonHelp: function announceButtonHelp(event) {
  107. var $link = $(event.currentTarget);
  108. var $button = $link.parent();
  109. var enabled = $button.closest('.ckeditor-toolbar-active').length > 0;
  110. var message = void 0;
  111. if (enabled) {
  112. message = Drupal.t('The "@name" button is currently enabled.', {
  113. '@name': $link.attr('aria-label')
  114. });
  115. message += '\n' + Drupal.t('Use the keyboard arrow keys to change the position of this button.');
  116. message += '\n' + Drupal.t('Press the up arrow key on the top row to disable the button.');
  117. } else {
  118. message = Drupal.t('The "@name" button is currently disabled.', {
  119. '@name': $link.attr('aria-label')
  120. });
  121. message += '\n' + Drupal.t('Use the down arrow key to move this button into the active toolbar.');
  122. }
  123. Drupal.announce(message);
  124. event.preventDefault();
  125. },
  126. announceSeparatorHelp: function announceSeparatorHelp(event) {
  127. var $link = $(event.currentTarget);
  128. var $button = $link.parent();
  129. var enabled = $button.closest('.ckeditor-toolbar-active').length > 0;
  130. var message = void 0;
  131. if (enabled) {
  132. message = Drupal.t('This @name is currently enabled.', {
  133. '@name': $link.attr('aria-label')
  134. });
  135. message += '\n' + Drupal.t('Use the keyboard arrow keys to change the position of this separator.');
  136. } else {
  137. message = Drupal.t('Separators are used to visually split individual buttons.');
  138. message += '\n' + Drupal.t('This @name is currently disabled.', {
  139. '@name': $link.attr('aria-label')
  140. });
  141. message += '\n' + Drupal.t('Use the down arrow key to move this separator into the active toolbar.');
  142. message += '\n' + Drupal.t('You may add multiple separators to each button group.');
  143. }
  144. Drupal.announce(message);
  145. event.preventDefault();
  146. }
  147. });
  148. })(Drupal, Backbone, jQuery);