www.aleph1.co.uk Git - yaffs-website/blob - web/core/modules/toolbar/js/views/ToolbarAuralView.es6.js

   1 /**
   2  * @file
   3  * A Backbone view for the aural feedback of the toolbar.
   4  */
   5
   6 (function(Backbone, Drupal) {
   7   Drupal.toolbar.ToolbarAuralView = Backbone.View.extend(
   8     /** @lends Drupal.toolbar.ToolbarAuralView# */ {
   9       /**
  10        * Backbone view for the aural feedback of the toolbar.
  11        *
  12        * @constructs
  13        *
  14        * @augments Backbone.View
  15        *
  16        * @param {object} options
  17        *   Options for the view.
  18        * @param {object} options.strings
  19        *   Various strings to use in the view.
  20        */
  21       initialize(options) {
  22         this.strings = options.strings;
  23
  24         this.listenTo(
  25           this.model,
  26           'change:orientation',
  27           this.onOrientationChange,
  28         );
  29         this.listenTo(this.model, 'change:activeTray', this.onActiveTrayChange);
  30       },
  31
  32       /**
  33        * Announces an orientation change.
  34        *
  35        * @param {Drupal.toolbar.ToolbarModel} model
  36        *   The toolbar model in question.
  37        * @param {string} orientation
  38        *   The new value of the orientation attribute in the model.
  39        */
  40       onOrientationChange(model, orientation) {
  41         Drupal.announce(
  42           Drupal.t('Tray orientation changed to @orientation.', {
  43             '@orientation': orientation,
  44           }),
  45         );
  46       },
  47
  48       /**
  49        * Announces a changed active tray.
  50        *
  51        * @param {Drupal.toolbar.ToolbarModel} model
  52        *   The toolbar model in question.
  53        * @param {HTMLElement} tray
  54        *   The new value of the tray attribute in the model.
  55        */
  56       onActiveTrayChange(model, tray) {
  57         const relevantTray =
  58           tray === null ? model.previous('activeTray') : tray;
  59         // Current activeTray and previous activeTray are empty, no state change
  60         // to announce.
  61         if (!relevantTray) {
  62           return;
  63         }
  64         const action = tray === null ? Drupal.t('closed') : Drupal.t('opened');
  65         const trayNameElement = relevantTray.querySelector(
  66           '.toolbar-tray-name',
  67         );
  68         let text;
  69         if (trayNameElement !== null) {
  70           text = Drupal.t('Tray "@tray" @action.', {
  71             '@tray': trayNameElement.textContent,
  72             '@action': action,
  73           });
  74         } else {
  75           text = Drupal.t('Tray @action.', { '@action': action });
  76         }
  77         Drupal.announce(text);
  78       },
  79     },
  80   );
  81 })(Backbone, Drupal);