[Summary view] [Print] [Text view]

   1  /**
   2   * @output wp-includes/js/customize-models.js
   3   */
   4  
   5  /* global _wpCustomizeHeader */
   6  (function( $, wp ) {
   7      var api = wp.customize;
   8      /** @namespace wp.customize.HeaderTool */
   9      api.HeaderTool = {};
  10  
  11  
  12      /**
  13       * wp.customize.HeaderTool.ImageModel
  14       *
  15       * A header image. This is where saves via the Customizer API are
  16       * abstracted away, plus our own Ajax calls to add images to and remove
  17       * images from the user's recently uploaded images setting on the server.
  18       * These calls are made regardless of whether the user actually saves new
  19       * Customizer settings.
  20       *
  21       * @memberOf wp.customize.HeaderTool
  22       * @alias wp.customize.HeaderTool.ImageModel
  23       *
  24       * @constructor
  25       * @augments Backbone.Model
  26       */
  27      api.HeaderTool.ImageModel = Backbone.Model.extend(/** @lends wp.customize.HeaderTool.ImageModel.prototype */{
  28          defaults: function() {
  29              return {
  30                  header: {
  31                      attachment_id: 0,
  32                      url: '',
  33                      timestamp: _.now(),
  34                      thumbnail_url: ''
  35                  },
  36                  choice: '',
  37                  selected: false,
  38                  random: false
  39              };
  40          },
  41  
  42          initialize: function() {
  43              this.on('hide', this.hide, this);
  44          },
  45  
  46          hide: function() {
  47              this.set('choice', '');
  48              api('header_image').set('remove-header');
  49              api('header_image_data').set('remove-header');
  50          },
  51  
  52          destroy: function() {
  53              var data = this.get('header'),
  54                  curr = api.HeaderTool.currentHeader.get('header').attachment_id;
  55  
  56              // If the image we're removing is also the current header,
  57              // unset the latter.
  58              if (curr && data.attachment_id === curr) {
  59                  api.HeaderTool.currentHeader.trigger('hide');
  60              }
  61  
  62              wp.ajax.post( 'custom-header-remove', {
  63                  nonce: _wpCustomizeHeader.nonces.remove,
  64                  wp_customize: 'on',
  65                  theme: api.settings.theme.stylesheet,
  66                  attachment_id: data.attachment_id
  67              });
  68  
  69              this.trigger('destroy', this, this.collection);
  70          },
  71  
  72          save: function() {
  73              if (this.get('random')) {
  74                  api('header_image').set(this.get('header').random);
  75                  api('header_image_data').set(this.get('header').random);
  76              } else {
  77                  if (this.get('header').defaultName) {
  78                      api('header_image').set(this.get('header').url);
  79                      api('header_image_data').set(this.get('header').defaultName);
  80                  } else {
  81                      api('header_image').set(this.get('header').url);
  82                      api('header_image_data').set(this.get('header'));
  83                  }
  84              }
  85  
  86              api.HeaderTool.combinedList.trigger('control:setImage', this);
  87          },
  88  
  89          importImage: function() {
  90              var data = this.get('header');
  91              if (data.attachment_id === undefined) {
  92                  return;
  93              }
  94  
  95              wp.ajax.post( 'custom-header-add', {
  96                  nonce: _wpCustomizeHeader.nonces.add,
  97                  wp_customize: 'on',
  98                  theme: api.settings.theme.stylesheet,
  99                  attachment_id: data.attachment_id
 100              } );
 101          },
 102  
 103          shouldBeCropped: function() {
 104              if (this.get('themeFlexWidth') === true &&
 105                          this.get('themeFlexHeight') === true) {
 106                  return false;
 107              }
 108  
 109              if (this.get('themeFlexWidth') === true &&
 110                  this.get('themeHeight') === this.get('imageHeight')) {
 111                  return false;
 112              }
 113  
 114              if (this.get('themeFlexHeight') === true &&
 115                  this.get('themeWidth') === this.get('imageWidth')) {
 116                  return false;
 117              }
 118  
 119              if (this.get('themeWidth') === this.get('imageWidth') &&
 120                  this.get('themeHeight') === this.get('imageHeight')) {
 121                  return false;
 122              }
 123  
 124              if (this.get('imageWidth') <= this.get('themeWidth')) {
 125                  return false;
 126              }
 127  
 128              return true;
 129          }
 130      });
 131  
 132  
 133      /**
 134       * wp.customize.HeaderTool.ChoiceList
 135       *
 136       * @memberOf wp.customize.HeaderTool
 137       * @alias wp.customize.HeaderTool.ChoiceList
 138       *
 139       * @constructor
 140       * @augments Backbone.Collection
 141       */
 142      api.HeaderTool.ChoiceList = Backbone.Collection.extend({
 143          model: api.HeaderTool.ImageModel,
 144  
 145          // Ordered from most recently used to least.
 146          comparator: function(model) {
 147              return -model.get('header').timestamp;
 148          },
 149  
 150          initialize: function() {
 151              var current = api.HeaderTool.currentHeader.get('choice').replace(/^https?:\/\//, ''),
 152                  isRandom = this.isRandomChoice(api.get().header_image);
 153  
 154              // Overridable by an extending class.
 155              if (!this.type) {
 156                  this.type = 'uploaded';
 157              }
 158  
 159              // Overridable by an extending class.
 160              if (typeof this.data === 'undefined') {
 161                  this.data = _wpCustomizeHeader.uploads;
 162              }
 163  
 164              if (isRandom) {
 165                  // So that when adding data we don't hide regular images.
 166                  current = api.get().header_image;
 167              }
 168  
 169              this.on('control:setImage', this.setImage, this);
 170              this.on('control:removeImage', this.removeImage, this);
 171              this.on('add', this.maybeRemoveOldCrop, this);
 172              this.on('add', this.maybeAddRandomChoice, this);
 173  
 174              _.each(this.data, function(elt, index) {
 175                  if (!elt.attachment_id) {
 176                      elt.defaultName = index;
 177                  }
 178  
 179                  if (typeof elt.timestamp === 'undefined') {
 180                      elt.timestamp = 0;
 181                  }
 182  
 183                  this.add({
 184                      header: elt,
 185                      choice: elt.url.split('/').pop(),
 186                      selected: current === elt.url.replace(/^https?:\/\//, '')
 187                  }, { silent: true });
 188              }, this);
 189  
 190              if (this.size() > 0) {
 191                  this.addRandomChoice(current);
 192              }
 193          },
 194  
 195          maybeRemoveOldCrop: function( model ) {
 196              var newID = model.get( 'header' ).attachment_id || false,
 197                   oldCrop;
 198  
 199              // Bail early if we don't have a new attachment ID.
 200              if ( ! newID ) {
 201                  return;
 202              }
 203  
 204              oldCrop = this.find( function( item ) {
 205                  return ( item.cid !== model.cid && item.get( 'header' ).attachment_id === newID );
 206              } );
 207  
 208              // If we found an old crop, remove it from the collection.
 209              if ( oldCrop ) {
 210                  this.remove( oldCrop );
 211              }
 212          },
 213  
 214          maybeAddRandomChoice: function() {
 215              if (this.size() === 1) {
 216                  this.addRandomChoice();
 217              }
 218          },
 219  
 220          addRandomChoice: function(initialChoice) {
 221              var isRandomSameType = RegExp(this.type).test(initialChoice),
 222                  randomChoice = 'random-' + this.type + '-image';
 223  
 224              this.add({
 225                  header: {
 226                      timestamp: 0,
 227                      random: randomChoice,
 228                      width: 245,
 229                      height: 41
 230                  },
 231                  choice: randomChoice,
 232                  random: true,
 233                  selected: isRandomSameType
 234              });
 235          },
 236  
 237          isRandomChoice: function(choice) {
 238              return (/^random-(uploaded|default)-image$/).test(choice);
 239          },
 240  
 241          shouldHideTitle: function() {
 242              return this.size() < 2;
 243          },
 244  
 245          setImage: function(model) {
 246              this.each(function(m) {
 247                  m.set('selected', false);
 248              });
 249  
 250              if (model) {
 251                  model.set('selected', true);
 252              }
 253          },
 254  
 255          removeImage: function() {
 256              this.each(function(m) {
 257                  m.set('selected', false);
 258              });
 259          }
 260      });
 261  
 262  
 263      /**
 264       * wp.customize.HeaderTool.DefaultsList
 265       *
 266       * @memberOf wp.customize.HeaderTool
 267       * @alias wp.customize.HeaderTool.DefaultsList
 268       *
 269       * @constructor
 270       * @augments wp.customize.HeaderTool.ChoiceList
 271       * @augments Backbone.Collection
 272       */
 273      api.HeaderTool.DefaultsList = api.HeaderTool.ChoiceList.extend({
 274          initialize: function() {
 275              this.type = 'default';
 276              this.data = _wpCustomizeHeader.defaults;
 277              api.HeaderTool.ChoiceList.prototype.initialize.apply(this);
 278          }
 279      });
 280  
 281  })( jQuery, window.wp );