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                         if (this.get('imageWidth') <= this.get('themeWidth')) {
 117                                 return false;
 118                         }
 119
 120                         return true;
 121                 }
 122         });
 123
 124
 125         /**
 126          * wp.customize.HeaderTool.ChoiceList
 127          *
 128          * @constructor
 129          * @augments Backbone.Collection
 130          */
 131         api.HeaderTool.ChoiceList = Backbone.Collection.extend({
 132                 model: api.HeaderTool.ImageModel,
 133
 134                 // Ordered from most recently used to least
 135                 comparator: function(model) {
 136                         return -model.get('header').timestamp;
 137                 },
 138
 139                 initialize: function() {
 140                         var current = api.HeaderTool.currentHeader.get('choice').replace(/^https?:\/\//, ''),
 141                                 isRandom = this.isRandomChoice(api.get().header_image);
 142
 143                         // Overridable by an extending class
 144                         if (!this.type) {
 145                                 this.type = 'uploaded';
 146                         }
 147
 148                         // Overridable by an extending class
 149                         if (typeof this.data === 'undefined') {
 150                                 this.data = _wpCustomizeHeader.uploads;
 151                         }
 152
 153                         if (isRandom) {
 154                                 // So that when adding data we don't hide regular images
 155                                 current = api.get().header_image;
 156                         }
 157
 158                         this.on('control:setImage', this.setImage, this);
 159                         this.on('control:removeImage', this.removeImage, this);
 160                         this.on('add', this.maybeAddRandomChoice, this);
 161
 162                         _.each(this.data, function(elt, index) {
 163                                 if (!elt.attachment_id) {
 164                                         elt.defaultName = index;
 165                                 }
 166
 167                                 if (typeof elt.timestamp === 'undefined') {
 168                                         elt.timestamp = 0;
 169                                 }
 170
 171                                 this.add({
 172                                         header: elt,
 173                                         choice: elt.url.split('/').pop(),
 174                                         selected: current === elt.url.replace(/^https?:\/\//, '')
 175                                 }, { silent: true });
 176                         }, this);
 177
 178                         if (this.size() > 0) {
 179                                 this.addRandomChoice(current);
 180                         }
 181                 },
 182
 183                 maybeAddRandomChoice: function() {
 184                         if (this.size() === 1) {
 185                                 this.addRandomChoice();
 186                         }
 187                 },
 188
 189                 addRandomChoice: function(initialChoice) {
 190                         var isRandomSameType = RegExp(this.type).test(initialChoice),
 191                                 randomChoice = 'random-' + this.type + '-image';
 192
 193                         this.add({
 194                                 header: {
 195                                         timestamp: 0,
 196                                         random: randomChoice,
 197                                         width: 245,
 198                                         height: 41
 199                                 },
 200                                 choice: randomChoice,
 201                                 random: true,
 202                                 selected: isRandomSameType
 203                         });
 204                 },
 205
 206                 isRandomChoice: function(choice) {
 207                         return (/^random-(uploaded|default)-image$/).test(choice);
 208                 },
 209
 210                 shouldHideTitle: function() {
 211                         return this.size() < 2;
 212                 },
 213
 214                 setImage: function(model) {
 215                         this.each(function(m) {
 216                                 m.set('selected', false);
 217                         });
 218
 219                         if (model) {
 220                                 model.set('selected', true);
 221                         }
 222                 },
 223
 224                 removeImage: function() {
 225                         this.each(function(m) {
 226                                 m.set('selected', false);
 227                         });
 228                 }
 229         });
 230
 231
 232         /**
 233          * wp.customize.HeaderTool.DefaultsList
 234          *
 235          * @constructor
 236          * @augments wp.customize.HeaderTool.ChoiceList
 237          * @augments Backbone.Collection
 238          */
 239         api.HeaderTool.DefaultsList = api.HeaderTool.ChoiceList.extend({
 240                 initialize: function() {
 241                         this.type = 'default';
 242                         this.data = _wpCustomizeHeader.defaults;
 243                         api.HeaderTool.ChoiceList.prototype.initialize.apply(this);
 244                 }
 245         });
 246
 247 })( jQuery, window.wp );