wp-includes/js/customize-models.js

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