[Summary view] [Print] [Text view]

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