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