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