Chris@0: /**
Chris@0:  * @file
Chris@0:  * A Backbone View that provides the visual view of the edit mode toggle.
Chris@0:  */
Chris@0: 
Chris@17: (function(Drupal, Backbone) {
Chris@17:   Drupal.contextualToolbar.VisualView = Backbone.View.extend(
Chris@17:     /** @lends Drupal.contextualToolbar.VisualView# */ {
Chris@17:       /**
Chris@17:        * Events for the Backbone view.
Chris@17:        *
Chris@17:        * @return {object}
Chris@17:        *   A mapping of events to be used in the view.
Chris@17:        */
Chris@17:       events() {
Chris@17:         // Prevents delay and simulated mouse events.
Chris@17:         const touchEndToClick = function(event) {
Chris@17:           event.preventDefault();
Chris@17:           event.target.click();
Chris@17:         };
Chris@0: 
Chris@17:         return {
Chris@17:           click() {
Chris@17:             this.model.set('isViewing', !this.model.get('isViewing'));
Chris@17:           },
Chris@17:           touchend: touchEndToClick,
Chris@17:         };
Chris@17:       },
Chris@0: 
Chris@17:       /**
Chris@17:        * Renders the visual view of the edit mode toggle.
Chris@17:        *
Chris@17:        * Listens to mouse & touch and handles edit mode toggle interactions.
Chris@17:        *
Chris@17:        * @constructs
Chris@17:        *
Chris@17:        * @augments Backbone.View
Chris@17:        */
Chris@17:       initialize() {
Chris@17:         this.listenTo(this.model, 'change', this.render);
Chris@17:         this.listenTo(this.model, 'change:isViewing', this.persist);
Chris@17:       },
Chris@17: 
Chris@17:       /**
Chris@17:        * @inheritdoc
Chris@17:        *
Chris@17:        * @return {Drupal.contextualToolbar.VisualView}
Chris@17:        *   The current contextual toolbar visual view.
Chris@17:        */
Chris@17:       render() {
Chris@17:         // Render the visibility.
Chris@17:         this.$el.toggleClass('hidden', !this.model.get('isVisible'));
Chris@17:         // Render the state.
Chris@17:         this.$el
Chris@17:           .find('button')
Chris@17:           .toggleClass('is-active', !this.model.get('isViewing'));
Chris@17: 
Chris@17:         return this;
Chris@17:       },
Chris@17: 
Chris@17:       /**
Chris@17:        * Model change handler; persists the isViewing value to localStorage.
Chris@17:        *
Chris@17:        * `isViewing === true` is the default, so only stores in localStorage when
Chris@17:        * it's not the default value (i.e. false).
Chris@17:        *
Chris@17:        * @param {Drupal.contextualToolbar.StateModel} model
Chris@17:        *   A {@link Drupal.contextualToolbar.StateModel} model.
Chris@17:        * @param {bool} isViewing
Chris@17:        *   The value of the isViewing attribute in the model.
Chris@17:        */
Chris@17:       persist(model, isViewing) {
Chris@17:         if (!isViewing) {
Chris@17:           localStorage.setItem('Drupal.contextualToolbar.isViewing', 'false');
Chris@17:         } else {
Chris@17:           localStorage.removeItem('Drupal.contextualToolbar.isViewing');
Chris@17:         }
Chris@17:       },
Chris@0:     },
Chris@17:   );
Chris@17: })(Drupal, Backbone);