[Summary view] [Print] [Text view]

   1  /**
   2   * @output wp-includes/js/customize-views.js
   3   */
   4  
   5  /**
   6   * @param {JQueryStatic}       $  The jQuery object.
   7   * @param {Object}             wp The WordPress global object.
   8   * @param {_.UnderscoreStatic} _  The Underscore.js object.
   9   */
  10  (function( $, wp, _ ) {
  11  
  12      if ( ! wp || ! wp.customize ) { return; }
  13      var api = wp.customize;
  14  
  15      /**
  16       * wp.customize.HeaderTool.CurrentView
  17       *
  18       * Displays the currently selected header image, or a placeholder in lack
  19       * thereof.
  20       *
  21       * Instantiate with model wp.customize.HeaderTool.currentHeader.
  22       *
  23       * @memberOf wp.customize.HeaderTool
  24       * @alias wp.customize.HeaderTool.CurrentView
  25       *
  26       * @class
  27       * @augments wp.Backbone.View
  28       */
  29      api.HeaderTool.CurrentView = wp.Backbone.View.extend(/** @lends wp.customize.HeaderTool.CurrentView.prototype */{
  30          template: wp.template('header-current'),
  31  
  32          /**
  33           * Initializes the view, rendering it whenever the model changes.
  34           */
  35          initialize: function() {
  36              this.listenTo(this.model, 'change', this.render);
  37              this.render();
  38          },
  39  
  40          /**
  41           * Renders the currently selected header image.
  42           *
  43           * @return {wp.customize.HeaderTool.CurrentView} Current view.
  44           */
  45          render: function() {
  46              this.$el.html(this.template(this.model.toJSON()));
  47              this.setButtons();
  48              return this;
  49          },
  50  
  51          /**
  52           * Shows or hides the header's action buttons.
  53           */
  54          setButtons: function() {
  55              var elements = $('#customize-control-header_image .actions .remove');
  56              var addButton = $('#customize-control-header_image .actions .new');
  57  
  58              if (this.model.get('choice')) {
  59                  elements.show();
  60                  addButton.removeClass('upload-button');
  61              } else {
  62                  elements.hide();
  63                  addButton.addClass('upload-button');
  64              }
  65          }
  66      });
  67  
  68  
  69      /**
  70       * wp.customize.HeaderTool.ChoiceView
  71       *
  72       * Represents a choosable header image, be it user-uploaded,
  73       * theme-suggested or a special Randomize choice.
  74       *
  75       * Takes a wp.customize.HeaderTool.ImageModel.
  76       *
  77       * Manually changes model wp.customize.HeaderTool.currentHeader via the
  78       * `select` method.
  79       *
  80       * @memberOf wp.customize.HeaderTool
  81       * @alias wp.customize.HeaderTool.ChoiceView
  82       *
  83       * @class
  84       * @augments wp.Backbone.View
  85       */
  86      api.HeaderTool.ChoiceView = wp.Backbone.View.extend(/** @lends wp.customize.HeaderTool.ChoiceView.prototype */{
  87          template: wp.template('header-choice'),
  88  
  89          className: 'header-view',
  90  
  91          events: {
  92              'click .choice,.random': 'select',
  93              'click .close': 'removeImage'
  94          },
  95  
  96          /**
  97           * Initializes the view, marking it current when it matches the header image.
  98           */
  99          initialize: function() {
 100              var properties = [
 101                  this.model.get('header').url,
 102                  this.model.get('choice')
 103              ];
 104  
 105              this.listenTo(this.model, 'change:selected', this.toggleSelected);
 106  
 107              if (_.contains(properties, api.get().header_image)) {
 108                  api.HeaderTool.currentHeader.set(this.extendedModel());
 109              }
 110          },
 111  
 112          /**
 113           * Renders the choice.
 114           *
 115           * @return {wp.customize.HeaderTool.ChoiceView} Choice view.
 116           */
 117          render: function() {
 118              this.$el.html(this.template(this.extendedModel()));
 119  
 120              this.toggleSelected();
 121              return this;
 122          },
 123  
 124          /**
 125           * Toggles the selected class on the choice.
 126           */
 127          toggleSelected: function() {
 128              this.$el.toggleClass('selected', this.model.get('selected'));
 129          },
 130  
 131          /**
 132           * Returns the model's attributes together with its collection type.
 133           *
 134           * @return {Object} Extended model.
 135           */
 136          extendedModel: function() {
 137              var c = this.model.get('collection');
 138              return _.extend(this.model.toJSON(), {
 139                  type: c.type
 140              });
 141          },
 142  
 143          /**
 144           * Selects the choice as the header image.
 145           */
 146          select: function() {
 147              this.preventJump();
 148              this.model.save();
 149              api.HeaderTool.currentHeader.set(this.extendedModel());
 150          },
 151  
 152          /**
 153           * Keeps the sidebar at its current scroll position.
 154           */
 155          preventJump: function() {
 156              var container = $('.wp-full-overlay-sidebar-content'),
 157                  scroll = container.scrollTop();
 158  
 159              _.defer(function() {
 160                  container.scrollTop(scroll);
 161              });
 162          },
 163  
 164          /**
 165           * Removes the image from the collection.
 166           *
 167           * @param {JQuery.Event} e Event.
 168           */
 169          removeImage: function(e) {
 170              e.stopPropagation();
 171              this.model.destroy();
 172              this.remove();
 173          }
 174      });
 175  
 176  
 177      /**
 178       * wp.customize.HeaderTool.ChoiceListView
 179       *
 180       * A container for ChoiceViews. These choices should be of one same type:
 181       * user-uploaded headers or theme-defined ones.
 182       *
 183       * Takes a wp.customize.HeaderTool.ChoiceList.
 184       *
 185       * @memberOf wp.customize.HeaderTool
 186       * @alias wp.customize.HeaderTool.ChoiceListView
 187       *
 188       * @class
 189       * @augments wp.Backbone.View
 190       */
 191      api.HeaderTool.ChoiceListView = wp.Backbone.View.extend(/** @lends wp.customize.HeaderTool.ChoiceListView.prototype */{
 192          /**
 193           * Initializes the view, rendering it as the collection changes.
 194           */
 195          initialize: function() {
 196              this.listenTo(this.collection, 'add', this.addOne);
 197              this.listenTo(this.collection, 'remove', this.render);
 198              this.listenTo(this.collection, 'sort', this.render);
 199              this.listenTo(this.collection, 'change', this.toggleList);
 200              this.render();
 201          },
 202  
 203          /**
 204           * Renders each choice in the collection.
 205           *
 206           * @return {wp.customize.HeaderTool.ChoiceListView} Choice list view.
 207           */
 208          render: function() {
 209              this.$el.empty();
 210              this.collection.each(this.addOne, this);
 211              this.toggleList();
 212              return this;
 213          },
 214  
 215          /**
 216           * Renders a single choice into the list.
 217           *
 218           * @param {Backbone.Model} choice Choice.
 219           */
 220          addOne: function(choice) {
 221              var view;
 222              choice.set({ collection: this.collection });
 223              view = new api.HeaderTool.ChoiceView({ model: choice });
 224              this.$el.append(view.render().el);
 225          },
 226  
 227          /**
 228           * Shows or hides the list title and the random button.
 229           */
 230          toggleList: function() {
 231              var title = this.$el.parents().prev('.customize-control-title'),
 232                  randomButton = this.$el.find('.random').parent();
 233              if (this.collection.shouldHideTitle()) {
 234                  title.add(randomButton).hide();
 235              } else {
 236                  title.add(randomButton).show();
 237              }
 238          }
 239      });
 240  
 241  
 242      /**
 243       * wp.customize.HeaderTool.CombinedList
 244       *
 245       * Aggregates wp.customize.HeaderTool.ChoiceList collections (or any
 246       * Backbone object, really) and acts as a bus to feed them events.
 247       *
 248       * @memberOf wp.customize.HeaderTool
 249       * @alias wp.customize.HeaderTool.CombinedList
 250       *
 251       * @class
 252       * @augments wp.Backbone.View
 253       */
 254      api.HeaderTool.CombinedList = wp.Backbone.View.extend(/** @lends wp.customize.HeaderTool.CombinedList.prototype */{
 255          /**
 256           * Initializes the view with the collections to combine.
 257           *
 258           * @param {Backbone.Collection[]} collections Collections.
 259           */
 260          initialize: function(collections) {
 261              this.collections = collections;
 262              this.on('all', this.propagate, this);
 263          },
 264  
 265          /**
 266           * Passes an event on to each of the combined collections.
 267           *
 268           * @param {string} event Event.
 269           * @param {*}      arg   Argument.
 270           */
 271          propagate: function(event, arg) {
 272              _.each(this.collections, function(collection) {
 273                  collection.trigger(event, arg);
 274              });
 275          }
 276      });
 277  
 278  })( jQuery, window.wp, _ );