[Summary view] [Print] [Text view]

   1  /**
   2   * @output wp-includes/js/customize-views.js
   3   */
   4  
   5  (function( $, wp, _ ) {
   6  
   7      if ( ! wp || ! wp.customize ) { return; }
   8      var api = wp.customize;
   9  
  10      /**
  11       * wp.customize.HeaderTool.CurrentView
  12       *
  13       * Displays the currently selected header image, or a placeholder in lack
  14       * thereof.
  15       *
  16       * Instantiate with model wp.customize.HeaderTool.currentHeader.
  17       *
  18       * @memberOf wp.customize.HeaderTool
  19       * @alias wp.customize.HeaderTool.CurrentView
  20       *
  21       * @constructor
  22       * @augments wp.Backbone.View
  23       */
  24      api.HeaderTool.CurrentView = wp.Backbone.View.extend(/** @lends wp.customize.HeaderTool.CurrentView.prototype */{
  25          template: wp.template('header-current'),
  26  
  27          initialize: function() {
  28              this.listenTo(this.model, 'change', this.render);
  29              this.render();
  30          },
  31  
  32          render: function() {
  33              this.$el.html(this.template(this.model.toJSON()));
  34              this.setButtons();
  35              return this;
  36          },
  37  
  38          setButtons: function() {
  39              var elements = $('#customize-control-header_image .actions .remove');
  40              var addButton = $('#customize-control-header_image .actions .new');
  41  
  42              if (this.model.get('choice')) {
  43                  elements.show();
  44                  addButton.removeClass('upload-button');
  45              } else {
  46                  elements.hide();
  47                  addButton.addClass('upload-button');
  48              }
  49          }
  50      });
  51  
  52  
  53      /**
  54       * wp.customize.HeaderTool.ChoiceView
  55       *
  56       * Represents a choosable header image, be it user-uploaded,
  57       * theme-suggested or a special Randomize choice.
  58       *
  59       * Takes a wp.customize.HeaderTool.ImageModel.
  60       *
  61       * Manually changes model wp.customize.HeaderTool.currentHeader via the
  62       * `select` method.
  63       *
  64       * @memberOf wp.customize.HeaderTool
  65       * @alias wp.customize.HeaderTool.ChoiceView
  66       *
  67       * @constructor
  68       * @augments wp.Backbone.View
  69       */
  70      api.HeaderTool.ChoiceView = wp.Backbone.View.extend(/** @lends wp.customize.HeaderTool.ChoiceView.prototype */{
  71          template: wp.template('header-choice'),
  72  
  73          className: 'header-view',
  74  
  75          events: {
  76              'click .choice,.random': 'select',
  77              'click .close': 'removeImage'
  78          },
  79  
  80          initialize: function() {
  81              var properties = [
  82                  this.model.get('header').url,
  83                  this.model.get('choice')
  84              ];
  85  
  86              this.listenTo(this.model, 'change:selected', this.toggleSelected);
  87  
  88              if (_.contains(properties, api.get().header_image)) {
  89                  api.HeaderTool.currentHeader.set(this.extendedModel());
  90              }
  91          },
  92  
  93          render: function() {
  94              this.$el.html(this.template(this.extendedModel()));
  95  
  96              this.toggleSelected();
  97              return this;
  98          },
  99  
 100          toggleSelected: function() {
 101              this.$el.toggleClass('selected', this.model.get('selected'));
 102          },
 103  
 104          extendedModel: function() {
 105              var c = this.model.get('collection');
 106              return _.extend(this.model.toJSON(), {
 107                  type: c.type
 108              });
 109          },
 110  
 111          select: function() {
 112              this.preventJump();
 113              this.model.save();
 114              api.HeaderTool.currentHeader.set(this.extendedModel());
 115          },
 116  
 117          preventJump: function() {
 118              var container = $('.wp-full-overlay-sidebar-content'),
 119                  scroll = container.scrollTop();
 120  
 121              _.defer(function() {
 122                  container.scrollTop(scroll);
 123              });
 124          },
 125  
 126          removeImage: function(e) {
 127              e.stopPropagation();
 128              this.model.destroy();
 129              this.remove();
 130          }
 131      });
 132  
 133  
 134      /**
 135       * wp.customize.HeaderTool.ChoiceListView
 136       *
 137       * A container for ChoiceViews. These choices should be of one same type:
 138       * user-uploaded headers or theme-defined ones.
 139       *
 140       * Takes a wp.customize.HeaderTool.ChoiceList.
 141       *
 142       * @memberOf wp.customize.HeaderTool
 143       * @alias wp.customize.HeaderTool.ChoiceListView
 144       *
 145       * @constructor
 146       * @augments wp.Backbone.View
 147       */
 148      api.HeaderTool.ChoiceListView = wp.Backbone.View.extend(/** @lends wp.customize.HeaderTool.ChoiceListView.prototype */{
 149          initialize: function() {
 150              this.listenTo(this.collection, 'add', this.addOne);
 151              this.listenTo(this.collection, 'remove', this.render);
 152              this.listenTo(this.collection, 'sort', this.render);
 153              this.listenTo(this.collection, 'change', this.toggleList);
 154              this.render();
 155          },
 156  
 157          render: function() {
 158              this.$el.empty();
 159              this.collection.each(this.addOne, this);
 160              this.toggleList();
 161          },
 162  
 163          addOne: function(choice) {
 164              var view;
 165              choice.set({ collection: this.collection });
 166              view = new api.HeaderTool.ChoiceView({ model: choice });
 167              this.$el.append(view.render().el);
 168          },
 169  
 170          toggleList: function() {
 171              var title = this.$el.parents().prev('.customize-control-title'),
 172                  randomButton = this.$el.find('.random').parent();
 173              if (this.collection.shouldHideTitle()) {
 174                  title.add(randomButton).hide();
 175              } else {
 176                  title.add(randomButton).show();
 177              }
 178          }
 179      });
 180  
 181  
 182      /**
 183       * wp.customize.HeaderTool.CombinedList
 184       *
 185       * Aggregates wp.customize.HeaderTool.ChoiceList collections (or any
 186       * Backbone object, really) and acts as a bus to feed them events.
 187       *
 188       * @memberOf wp.customize.HeaderTool
 189       * @alias wp.customize.HeaderTool.CombinedList
 190       *
 191       * @constructor
 192       * @augments wp.Backbone.View
 193       */
 194      api.HeaderTool.CombinedList = wp.Backbone.View.extend(/** @lends wp.customize.HeaderTool.CombinedList.prototype */{
 195          initialize: function(collections) {
 196              this.collections = collections;
 197              this.on('all', this.propagate, this);
 198          },
 199          propagate: function(event, arg) {
 200              _.each(this.collections, function(collection) {
 201                  collection.trigger(event, arg);
 202              });
 203          }
 204      });
 205  
 206  })( jQuery, window.wp, _ );