customize-models.js

/**
 * @output wp-includes/js/customize-models.js
 */

/* global _wpCustomizeHeader */
(function( $, wp ) {
	var api = wp.customize;
	/** @namespace wp.customize.HeaderTool */
	api.HeaderTool = {};


	/**
	 * wp.customize.HeaderTool.ImageModel
	 *
	 * A header image. This is where saves via the Customizer API are
	 * abstracted away, plus our own AJAX calls to add images to and remove
	 * images from the user's recently uploaded images setting on the server.
	 * These calls are made regardless of whether the user actually saves new
	 * Customizer settings.
	 *
	 * @memberOf wp.customize.HeaderTool
	 * @alias wp.customize.HeaderTool.ImageModel
	 *
	 * @constructor
	 * @augments Backbone.Model
	 */
	api.HeaderTool.ImageModel = Backbone.Model.extend(/** @lends wp.customize.HeaderTool.ImageModel.prototype */{
		defaults: function() {
			return {
				header: {
					attachment_id: 0,
					url: '',
					timestamp: _.now(),
					thumbnail_url: ''
				},
				choice: '',
				selected: false,
				random: false
			};
		},

		initialize: function() {
			this.on('hide', this.hide, this);
		},

		hide: function() {
			this.set('choice', '');
			api('header_image').set('remove-header');
			api('header_image_data').set('remove-header');
		},

		destroy: function() {
			var data = this.get('header'),
				curr = api.HeaderTool.currentHeader.get('header').attachment_id;

			// If the image we're removing is also the current header,
			// unset the latter.
			if (curr && data.attachment_id === curr) {
				api.HeaderTool.currentHeader.trigger('hide');
			}

			wp.ajax.post( 'custom-header-remove', {
				nonce: _wpCustomizeHeader.nonces.remove,
				wp_customize: 'on',
				theme: api.settings.theme.stylesheet,
				attachment_id: data.attachment_id
			});

			this.trigger('destroy', this, this.collection);
		},

		save: function() {
			if (this.get('random')) {
				api('header_image').set(this.get('header').random);
				api('header_image_data').set(this.get('header').random);
			} else {
				if (this.get('header').defaultName) {
					api('header_image').set(this.get('header').url);
					api('header_image_data').set(this.get('header').defaultName);
				} else {
					api('header_image').set(this.get('header').url);
					api('header_image_data').set(this.get('header'));
				}
			}

			api.HeaderTool.combinedList.trigger('control:setImage', this);
		},

		importImage: function() {
			var data = this.get('header');
			if (data.attachment_id === undefined) {
				return;
			}

			wp.ajax.post( 'custom-header-add', {
				nonce: _wpCustomizeHeader.nonces.add,
				wp_customize: 'on',
				theme: api.settings.theme.stylesheet,
				attachment_id: data.attachment_id
			} );
		},

		shouldBeCropped: function() {
			if (this.get('themeFlexWidth') === true &&
						this.get('themeFlexHeight') === true) {
				return false;
			}

			if (this.get('themeFlexWidth') === true &&
				this.get('themeHeight') === this.get('imageHeight')) {
				return false;
			}

			if (this.get('themeFlexHeight') === true &&
				this.get('themeWidth') === this.get('imageWidth')) {
				return false;
			}

			if (this.get('themeWidth') === this.get('imageWidth') &&
				this.get('themeHeight') === this.get('imageHeight')) {
				return false;
			}

			if (this.get('imageWidth') <= this.get('themeWidth')) {
				return false;
			}

			return true;
		}
	});


	/**
	 * wp.customize.HeaderTool.ChoiceList
	 *
	 * @memberOf wp.customize.HeaderTool
	 * @alias wp.customize.HeaderTool.ChoiceList
	 *
	 * @constructor
	 * @augments Backbone.Collection
	 */
	api.HeaderTool.ChoiceList = Backbone.Collection.extend({
		model: api.HeaderTool.ImageModel,

		// Ordered from most recently used to least.
		comparator: function(model) {
			return -model.get('header').timestamp;
		},

		initialize: function() {
			var current = api.HeaderTool.currentHeader.get('choice').replace(/^https?:\/\//, ''),
				isRandom = this.isRandomChoice(api.get().header_image);

			// Overridable by an extending class.
			if (!this.type) {
				this.type = 'uploaded';
			}

			// Overridable by an extending class.
			if (typeof this.data === 'undefined') {
				this.data = _wpCustomizeHeader.uploads;
			}

			if (isRandom) {
				// So that when adding data we don't hide regular images.
				current = api.get().header_image;
			}

			this.on('control:setImage', this.setImage, this);
			this.on('control:removeImage', this.removeImage, this);
			this.on('add', this.maybeRemoveOldCrop, this);
			this.on('add', this.maybeAddRandomChoice, this);

			_.each(this.data, function(elt, index) {
				if (!elt.attachment_id) {
					elt.defaultName = index;
				}

				if (typeof elt.timestamp === 'undefined') {
					elt.timestamp = 0;
				}

				this.add({
					header: elt,
					choice: elt.url.split('/').pop(),
					selected: current === elt.url.replace(/^https?:\/\//, '')
				}, { silent: true });
			}, this);

			if (this.size() > 0) {
				this.addRandomChoice(current);
			}
		},

		maybeRemoveOldCrop: function( model ) {
			var newID = model.get( 'header' ).attachment_id || false,
			 	oldCrop;

			// Bail early if we don't have a new attachment ID.
			if ( ! newID ) {
				return;
			}

			oldCrop = this.find( function( item ) {
				return ( item.cid !== model.cid && item.get( 'header' ).attachment_id === newID );
			} );

			// If we found an old crop, remove it from the collection.
			if ( oldCrop ) {
				this.remove( oldCrop );
			}
		},

		maybeAddRandomChoice: function() {
			if (this.size() === 1) {
				this.addRandomChoice();
			}
		},

		addRandomChoice: function(initialChoice) {
			var isRandomSameType = RegExp(this.type).test(initialChoice),
				randomChoice = 'random-' + this.type + '-image';

			this.add({
				header: {
					timestamp: 0,
					random: randomChoice,
					width: 245,
					height: 41
				},
				choice: randomChoice,
				random: true,
				selected: isRandomSameType
			});
		},

		isRandomChoice: function(choice) {
			return (/^random-(uploaded|default)-image$/).test(choice);
		},

		shouldHideTitle: function() {
			return this.size() < 2;
		},

		setImage: function(model) {
			this.each(function(m) {
				m.set('selected', false);
			});

			if (model) {
				model.set('selected', true);
			}
		},

		removeImage: function() {
			this.each(function(m) {
				m.set('selected', false);
			});
		}
	});


	/**
	 * wp.customize.HeaderTool.DefaultsList
	 *
	 * @memberOf wp.customize.HeaderTool
	 * @alias wp.customize.HeaderTool.DefaultsList
	 *
	 * @constructor
	 * @augments wp.customize.HeaderTool.ChoiceList
	 * @augments Backbone.Collection
	 */
	api.HeaderTool.DefaultsList = api.HeaderTool.ChoiceList.extend({
		initialize: function() {
			this.type = 'default';
			this.data = _wpCustomizeHeader.defaults;
			api.HeaderTool.ChoiceList.prototype.initialize.apply(this);
		}
	});

})( jQuery, window.wp );