aleph1.co.uk Git - yaffs-website/blob - web/core/modules/contextual/js/toolbar/views/VisualView.js

   1 /**
   2  * @file
   3  * A Backbone View that provides the visual view of the edit mode toggle.
   4  */
   5
   6 (function (Drupal, Backbone) {
   7
   8   'use strict';
   9
  10   Drupal.contextualToolbar.VisualView = Backbone.View.extend(/** @lends Drupal.contextualToolbar.VisualView# */{
  11
  12     /**
  13      * Events for the Backbone view.
  14      *
  15      * @return {object}
  16      *   A mapping of events to be used in the view.
  17      */
  18     events: function () {
  19       // Prevents delay and simulated mouse events.
  20       var touchEndToClick = function (event) {
  21         event.preventDefault();
  22         event.target.click();
  23       };
  24
  25       return {
  26         click: function () {
  27           this.model.set('isViewing', !this.model.get('isViewing'));
  28         },
  29         touchend: touchEndToClick
  30       };
  31     },
  32
  33     /**
  34      * Renders the visual view of the edit mode toggle.
  35      *
  36      * Listens to mouse & touch and handles edit mode toggle interactions.
  37      *
  38      * @constructs
  39      *
  40      * @augments Backbone.View
  41      */
  42     initialize: function () {
  43       this.listenTo(this.model, 'change', this.render);
  44       this.listenTo(this.model, 'change:isViewing', this.persist);
  45     },
  46
  47     /**
  48      * @inheritdoc
  49      *
  50      * @return {Drupal.contextualToolbar.VisualView}
  51      *   The current contextual toolbar visual view.
  52      */
  53     render: function () {
  54       // Render the visibility.
  55       this.$el.toggleClass('hidden', !this.model.get('isVisible'));
  56       // Render the state.
  57       this.$el.find('button').toggleClass('is-active', !this.model.get('isViewing'));
  58
  59       return this;
  60     },
  61
  62     /**
  63      * Model change handler; persists the isViewing value to localStorage.
  64      *
  65      * `isViewing === true` is the default, so only stores in localStorage when
  66      * it's not the default value (i.e. false).
  67      *
  68      * @param {Drupal.contextualToolbar.StateModel} model
  69      *   A {@link Drupal.contextualToolbar.StateModel} model.
  70      * @param {bool} isViewing
  71      *   The value of the isViewing attribute in the model.
  72      */
  73     persist: function (model, isViewing) {
  74       if (!isViewing) {
  75         localStorage.setItem('Drupal.contextualToolbar.isViewing', 'false');
  76       }
  77       else {
  78         localStorage.removeItem('Drupal.contextualToolbar.isViewing');
  79       }
  80     }
  81
  82   });
  83
  84 })(Drupal, Backbone);