Chris@0: /**
Chris@0:  * @file
Chris@0:  * A Backbone view for the aural feedback of the toolbar.
Chris@0:  */
Chris@0: 
Chris@17: (function(Backbone, Drupal) {
Chris@17:   Drupal.toolbar.ToolbarAuralView = Backbone.View.extend(
Chris@17:     /** @lends Drupal.toolbar.ToolbarAuralView# */ {
Chris@17:       /**
Chris@17:        * Backbone view for the aural feedback of the toolbar.
Chris@17:        *
Chris@17:        * @constructs
Chris@17:        *
Chris@17:        * @augments Backbone.View
Chris@17:        *
Chris@17:        * @param {object} options
Chris@17:        *   Options for the view.
Chris@17:        * @param {object} options.strings
Chris@17:        *   Various strings to use in the view.
Chris@17:        */
Chris@17:       initialize(options) {
Chris@17:         this.strings = options.strings;
Chris@0: 
Chris@17:         this.listenTo(
Chris@17:           this.model,
Chris@17:           'change:orientation',
Chris@17:           this.onOrientationChange,
Chris@17:         );
Chris@17:         this.listenTo(this.model, 'change:activeTray', this.onActiveTrayChange);
Chris@17:       },
Chris@0: 
Chris@17:       /**
Chris@17:        * Announces an orientation change.
Chris@17:        *
Chris@17:        * @param {Drupal.toolbar.ToolbarModel} model
Chris@17:        *   The toolbar model in question.
Chris@17:        * @param {string} orientation
Chris@17:        *   The new value of the orientation attribute in the model.
Chris@17:        */
Chris@17:       onOrientationChange(model, orientation) {
Chris@17:         Drupal.announce(
Chris@17:           Drupal.t('Tray orientation changed to @orientation.', {
Chris@17:             '@orientation': orientation,
Chris@17:           }),
Chris@17:         );
Chris@17:       },
Chris@17: 
Chris@17:       /**
Chris@17:        * Announces a changed active tray.
Chris@17:        *
Chris@17:        * @param {Drupal.toolbar.ToolbarModel} model
Chris@17:        *   The toolbar model in question.
Chris@17:        * @param {HTMLElement} tray
Chris@17:        *   The new value of the tray attribute in the model.
Chris@17:        */
Chris@17:       onActiveTrayChange(model, tray) {
Chris@17:         const relevantTray =
Chris@17:           tray === null ? model.previous('activeTray') : tray;
Chris@17:         // Current activeTray and previous activeTray are empty, no state change
Chris@17:         // to announce.
Chris@17:         if (!relevantTray) {
Chris@17:           return;
Chris@17:         }
Chris@17:         const action = tray === null ? Drupal.t('closed') : Drupal.t('opened');
Chris@17:         const trayNameElement = relevantTray.querySelector(
Chris@17:           '.toolbar-tray-name',
Chris@17:         );
Chris@17:         let text;
Chris@17:         if (trayNameElement !== null) {
Chris@17:           text = Drupal.t('Tray "@tray" @action.', {
Chris@17:             '@tray': trayNameElement.textContent,
Chris@17:             '@action': action,
Chris@17:           });
Chris@17:         } else {
Chris@17:           text = Drupal.t('Tray @action.', { '@action': action });
Chris@17:         }
Chris@17:         Drupal.announce(text);
Chris@17:       },
Chris@0:     },
Chris@17:   );
Chris@17: })(Backbone, Drupal);