Add header image uploads with cropping to the customizer.

props mcsf, ehg, gcorne.
see #21785.

Built from https://develop.svn.wordpress.org/trunk@27497


git-svn-id: http://core.svn.wordpress.org/trunk@27339 1a063a9b-81f0-0310-95a4-ce76da25c4cd

wp-includes/js/customize-models.js

@@ -0,0 +1,249 @@
+/* globals _wpCustomizeHeader, _wpCustomizeSettings */
+(function( $, wp ) {
+	var api = wp.customize;
+	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.
+	 *
+	 * @constructor
+	 * @augments Backbone.Model
+	 */
+	api.HeaderTool.ImageModel = Backbone.Model.extend({
+		defaults: function() {
+			return {
+				header: {
+					attachment_id: 0,
+					url: '',
+					timestamp: Date.now(),
+					thumbnail_url: ''
+				},
+				choice: '',
+				hidden: 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;
+			}
+
+			return true;
+		}
+	});
+
+
+	/**
+	 * 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 (!this.data) {
+				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.maybeAddRandomChoice, this);
+
+			_.each(this.data, function(elt, index) {
+				if (!elt.attachment_id) {
+					elt.defaultName = index;
+				}
+
+				this.add({
+					header: elt,
+					choice: elt.url.split('/').pop(),
+					hidden: current === elt.url.replace(/^https?:\/\//, '')
+				}, { silent: true });
+			}, this);
+
+			if (this.size() > 0) {
+				this.addRandomChoice(current);
+			}
+		},
+
+		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,
+				hidden: isRandomSameType
+			});
+		},
+
+		isRandomChoice: function(choice) {
+			return (/^random-(uploaded|default)-image$/).test(choice);
+		},
+
+		shouldHideTitle: function() {
+			return _.every(this.pluck('hidden'));
+		},
+
+		setImage: function(model) {
+			this.each(function(m) {
+				m.set('hidden', false);
+			});
+
+			if (model) {
+				model.set('hidden', true);
+				// Bump images to top except for special "Randomize" images
+				if (!model.get('random')) {
+					model.get('header').timestamp = Date.now();
+					this.sort();
+				}
+			}
+		},
+
+		removeImage: function() {
+			this.each(function(m) {
+				m.set('hidden', false);
+			});
+		},
+
+		shown: function() {
+			var filtered = this.where({ hidden: false });
+			return new api.HeaderTool.ChoiceList( filtered );
+		}
+	});
+
+
+	/**
+	 * 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 );

wp-includes/js/customize-models.min.js

@@ -0,0 +1 @@
+!function(a,b){var c=b.customize;c.HeaderTool={},c.HeaderTool.ImageModel=Backbone.Model.extend({defaults:function(){return{header:{attachment_id:0,url:"",timestamp:Date.now(),thumbnail_url:""},choice:"",hidden:!1,random:!1}},initialize:function(){this.on("hide",this.hide,this)},hide:function(){this.set("choice",""),c("header_image").set("remove-header"),c("header_image_data").set("remove-header")},destroy:function(){var a=this.get("header"),d=c.HeaderTool.currentHeader.get("header").attachment_id;d&&a.attachment_id===d&&c.HeaderTool.currentHeader.trigger("hide"),b.ajax.post("custom-header-remove",{nonce:_wpCustomizeHeader.nonces.remove,wp_customize:"on",theme:c.settings.theme.stylesheet,attachment_id:a.attachment_id}),this.trigger("destroy",this,this.collection)},save:function(){this.get("random")?(c("header_image").set(this.get("header").random),c("header_image_data").set(this.get("header").random)):this.get("header").defaultName?(c("header_image").set(this.get("header").url),c("header_image_data").set(this.get("header").defaultName)):(c("header_image").set(this.get("header").url),c("header_image_data").set(this.get("header"))),c.HeaderTool.combinedList.trigger("control:setImage",this)},importImage:function(){var a=this.get("header");void 0!==a.attachment_id&&b.ajax.post("custom-header-add",{nonce:_wpCustomizeHeader.nonces.add,wp_customize:"on",theme:c.settings.theme.stylesheet,attachment_id:a.attachment_id})},shouldBeCropped:function(){return this.get("themeFlexWidth")===!0&&this.get("themeFlexHeight")===!0?!1:this.get("themeFlexWidth")===!0&&this.get("themeHeight")===this.get("imageHeight")?!1:this.get("themeFlexHeight")===!0&&this.get("themeWidth")===this.get("imageWidth")?!1:this.get("themeWidth")===this.get("imageWidth")&&this.get("themeHeight")===this.get("imageHeight")?!1:!0}}),c.HeaderTool.ChoiceList=Backbone.Collection.extend({model:c.HeaderTool.ImageModel,comparator:function(a){return-a.get("header").timestamp},initialize:function(){var a=c.HeaderTool.currentHeader.get("choice").replace(/^https?:\/\//,""),b=this.isRandomChoice(c.get().header_image);this.type||(this.type="uploaded"),this.data||(this.data=_wpCustomizeHeader.uploads),b&&(a=c.get().header_image),this.on("control:setImage",this.setImage,this),this.on("control:removeImage",this.removeImage,this),this.on("add",this.maybeAddRandomChoice,this),_.each(this.data,function(b,c){b.attachment_id||(b.defaultName=c),this.add({header:b,choice:b.url.split("/").pop(),hidden:a===b.url.replace(/^https?:\/\//,"")},{silent:!0})},this),this.size()>0&&this.addRandomChoice(a)},maybeAddRandomChoice:function(){1===this.size()&&this.addRandomChoice()},addRandomChoice:function(a){var b=RegExp(this.type).test(a),c="random-"+this.type+"-image";this.add({header:{timestamp:0,random:c,width:245,height:41},choice:c,random:!0,hidden:b})},isRandomChoice:function(a){return/^random-(uploaded|default)-image$/.test(a)},shouldHideTitle:function(){return _.every(this.pluck("hidden"))},setImage:function(a){this.each(function(a){a.set("hidden",!1)}),a&&(a.set("hidden",!0),a.get("random")||(a.get("header").timestamp=Date.now(),this.sort()))},removeImage:function(){this.each(function(a){a.set("hidden",!1)})},shown:function(){var a=this.where({hidden:!1});return new c.HeaderTool.ChoiceList(a)}}),c.HeaderTool.DefaultsList=c.HeaderTool.ChoiceList.extend({initialize:function(){this.type="default",this.data=_wpCustomizeHeader.defaults,c.HeaderTool.ChoiceList.prototype.initialize.apply(this)}})}(jQuery,window.wp);

wp-includes/js/customize-views.js

@@ -0,0 +1,232 @@
+/* globals _wpCustomizeHeader */
+(function( $, wp, _ ) {
+
+	if ( ! wp || ! wp.customize ) { return; }
+	var api = wp.customize;
+
+
+	/**
+	 * wp.customize.HeaderTool.CurrentView
+	 *
+	 * Displays the currently selected header image, or a placeholder in lack
+	 * thereof.
+	 *
+	 * Instantiate with model wp.customize.HeaderTool.currentHeader.
+	 *
+	 * @constructor
+	 * @augments wp.Backbone.View
+	 */
+	api.HeaderTool.CurrentView = wp.Backbone.View.extend({
+		template: wp.template('header-current'),
+
+		initialize: function() {
+			this.listenTo(this.model, 'change', this.render);
+			this.render();
+		},
+
+		render: function() {
+			this.$el.html(this.template(this.model.toJSON()));
+			this.setPlaceholder();
+			this.setButtons();
+			return this;
+		},
+
+		getHeight: function() {
+			var image = this.$el.find('img'),
+				saved = this.model.get('savedHeight'),
+				height = image.height() || saved,
+				headerImageData;
+
+			if (image.length) {
+				this.$el.find('.inner').hide();
+			} else {
+				this.$el.find('.inner').show();
+			}
+
+			// happens at ready
+			if (!height) {
+				headerImageData = api.get().header_image_data;
+
+				if (headerImageData && headerImageData.width && headerImageData.height) {
+					// hardcoded container width
+					height = 260 / headerImageData.width * headerImageData.height;
+				}
+				else {
+					// fallback for when no image is set
+					height = 40;
+				}
+			}
+
+			return height;
+		},
+
+		setPlaceholder: function(_height) {
+			var height = _height || this.getHeight();
+			this.model.set('savedHeight', height);
+			this.$el
+				.add(this.$el.find('.placeholder'))
+				.height(height);
+		},
+
+		setButtons: function() {
+			var elements = $('.actions .remove');
+			if (this.model.get('choice')) {
+				elements.show();
+			} else {
+				elements.hide();
+			}
+		}
+	});
+
+
+	/**
+	 * wp.customize.HeaderTool.ChoiceView
+	 *
+	 * Represents a choosable header image, be it user-uploaded,
+	 * theme-suggested or a special Randomize choice.
+	 *
+	 * Takes a wp.customize.HeaderTool.ImageModel.
+	 *
+	 * Manually changes model wp.customize.HeaderTool.currentHeader via the
+	 * `select` method.
+	 *
+	 * @constructor
+	 * @augments wp.Backbone.View
+	 */
+	(function () { // closures FTW
+	var lastHeight = 0;
+	api.HeaderTool.ChoiceView = wp.Backbone.View.extend({
+		template: wp.template('header-choice'),
+
+		className: 'header-view',
+
+		events: {
+			'click .choice,.random': 'select',
+			'click .close': 'removeImage'
+		},
+
+		initialize: function() {
+			var properties = [
+				this.model.get('header').url,
+				this.model.get('choice')
+			];
+
+			this.listenTo(this.model, 'change', this.render);
+
+			if (_.contains(properties, api.get().header_image)) {
+				api.HeaderTool.currentHeader.set(this.extendedModel());
+			}
+		},
+
+		render: function() {
+			var model = this.model;
+
+			this.$el.html(this.template(this.extendedModel()));
+
+			if (model.get('random')) {
+				this.setPlaceholder(40);
+			}
+			else {
+				lastHeight = this.getHeight();
+			}
+
+			this.$el.toggleClass('hidden', model.get('hidden'));
+			return this;
+		},
+
+		extendedModel: function() {
+			var c = this.model.get('collection'),
+				t = _wpCustomizeHeader.l10n[c.type] || '';
+
+			return _.extend(this.model.toJSON(), {
+				// -1 to exclude the randomize button
+				nImages: c.size() - 1,
+				type: t
+			});
+		},
+
+		getHeight: api.HeaderTool.CurrentView.prototype.getHeight,
+
+		setPlaceholder: api.HeaderTool.CurrentView.prototype.setPlaceholder,
+
+		select: function() {
+			this.model.save();
+			api.HeaderTool.currentHeader.set(this.extendedModel());
+		},
+
+		removeImage: function(e) {
+			e.stopPropagation();
+			this.model.destroy();
+			this.remove();
+		}
+	});
+	})();
+
+
+	/**
+	 * wp.customize.HeaderTool.ChoiceListView
+	 *
+	 * A container for ChoiceViews. These choices should be of one same type:
+	 * user-uploaded headers or theme-defined ones.
+	 *
+	 * Takes a wp.customize.HeaderTool.ChoiceList.
+	 *
+	 * @constructor
+	 * @augments wp.Backbone.View
+	 */
+	api.HeaderTool.ChoiceListView = wp.Backbone.View.extend({
+		initialize: function() {
+			this.listenTo(this.collection, 'add', this.addOne);
+			this.listenTo(this.collection, 'remove', this.render);
+			this.listenTo(this.collection, 'sort', this.render);
+			this.listenTo(this.collection, 'change:hidden', this.toggleTitle);
+			this.listenTo(this.collection, 'change:hidden', this.setMaxListHeight);
+			this.render();
+		},
+
+		render: function() {
+			this.$el.empty();
+			this.collection.each(this.addOne, this);
+			this.toggleTitle();
+		},
+
+		addOne: function(choice) {
+			var view;
+			choice.set({ collection: this.collection });
+			view = new api.HeaderTool.ChoiceView({ model: choice });
+			this.$el.append(view.render().el);
+		},
+
+		toggleTitle: function() {
+			var title = this.$el.parents().prev('.customize-control-title');
+			if (this.collection.shouldHideTitle()) {
+				title.hide();
+			} else {
+				title.show();
+			}
+		}
+	});
+
+
+	/**
+	 * wp.customize.HeaderTool.CombinedList
+	 *
+	 * Aggregates wp.customize.HeaderTool.ChoiceList collections (or any
+	 * Backbone object, really) and acts as a bus to feed them events.
+	 *
+	 * @constructor
+	 * @augments wp.Backbone.View
+	 */
+	api.HeaderTool.CombinedList = wp.Backbone.View.extend({
+		initialize: function(collections) {
+			this.collections = collections;
+			this.on('all', this.propagate, this);
+		},
+		propagate: function(event, arg) {
+			_.each(this.collections, function(collection) {
+				collection.trigger(event, arg);
+			});
+		}
+	});
+
+})( jQuery, window.wp, _ );

wp-includes/js/customize-views.min.js

@@ -0,0 +1 @@
+!function(a,b,c){if(b&&b.customize){var d=b.customize;d.HeaderTool.CurrentView=b.Backbone.View.extend({template:b.template("header-current"),initialize:function(){this.listenTo(this.model,"change",this.render),this.render()},render:function(){return this.$el.html(this.template(this.model.toJSON())),this.setPlaceholder(),this.setButtons(),this},getHeight:function(){var a,b=this.$el.find("img"),c=this.model.get("savedHeight"),e=b.height()||c;return b.length?this.$el.find(".inner").hide():this.$el.find(".inner").show(),e||(a=d.get().header_image_data,e=a&&a.width&&a.height?260/a.width*a.height:40),e},setPlaceholder:function(a){var b=a||this.getHeight();this.model.set("savedHeight",b),this.$el.add(this.$el.find(".placeholder")).height(b)},setButtons:function(){var b=a(".actions .remove");this.model.get("choice")?b.show():b.hide()}}),function(){var a=0;d.HeaderTool.ChoiceView=b.Backbone.View.extend({template:b.template("header-choice"),className:"header-view",events:{"click .choice,.random":"select","click .close":"removeImage"},initialize:function(){var a=[this.model.get("header").url,this.model.get("choice")];this.listenTo(this.model,"change",this.render),c.contains(a,d.get().header_image)&&d.HeaderTool.currentHeader.set(this.extendedModel())},render:function(){var b=this.model;return this.$el.html(this.template(this.extendedModel())),b.get("random")?this.setPlaceholder(40):a=this.getHeight(),this.$el.toggleClass("hidden",b.get("hidden")),this},extendedModel:function(){var a=this.model.get("collection"),b=_wpCustomizeHeader.l10n[a.type]||"";return c.extend(this.model.toJSON(),{nImages:a.size()-1,type:b})},getHeight:d.HeaderTool.CurrentView.prototype.getHeight,setPlaceholder:d.HeaderTool.CurrentView.prototype.setPlaceholder,select:function(){this.model.save(),d.HeaderTool.currentHeader.set(this.extendedModel())},removeImage:function(a){a.stopPropagation(),this.model.destroy(),this.remove()}})}(),d.HeaderTool.ChoiceListView=b.Backbone.View.extend({initialize:function(){this.listenTo(this.collection,"add",this.addOne),this.listenTo(this.collection,"remove",this.render),this.listenTo(this.collection,"sort",this.render),this.listenTo(this.collection,"change:hidden",this.toggleTitle),this.listenTo(this.collection,"change:hidden",this.setMaxListHeight),this.render()},render:function(){this.$el.empty(),this.collection.each(this.addOne,this),this.toggleTitle()},addOne:function(a){var b;a.set({collection:this.collection}),b=new d.HeaderTool.ChoiceView({model:a}),this.$el.append(b.render().el)},toggleTitle:function(){var a=this.$el.parents().prev(".customize-control-title");this.collection.shouldHideTitle()?a.hide():a.show()}}),d.HeaderTool.CombinedList=b.Backbone.View.extend({initialize:function(a){this.collections=a,this.on("all",this.propagate,this)},propagate:function(a,b){c.each(this.collections,function(c){c.trigger(a,b)})}})}}(jQuery,window.wp,_);

wp-includes/js/media-views.js

@@ -1316,6 +1316,109 @@
 		}
 	});
 
+	/**
+	 * wp.media.controller.Cropper
+	 *
+	 * Allows for a cropping step.
+	 *
+	 * @constructor
+	 * @augments wp.media.controller.State
+	 * @augments Backbone.Model
+	 */
+	media.controller.Cropper = media.controller.State.extend({
+		defaults: {
+			id: 'cropper',
+			title: l10n.cropImage,
+			toolbar: 'crop',
+			content: 'crop',
+			router: false,
+			canSkipCrop: false
+		},
+
+		activate: function() {
+			this.frame.on( 'content:create:crop', this.createCropContent, this );
+			this.frame.on( 'close', this.removeCropper, this );
+			this.set('selection', new Backbone.Collection(this.frame._selection.single));
+		},
+
+		deactivate: function() {
+			this.frame.toolbar.mode('browse');
+		},
+
+		createCropContent: function() {
+			this.cropperView = new wp.media.view.Cropper({controller: this,
+					attachment: this.get('selection').first() });
+			this.cropperView.on('image-loaded', this.createCropToolbar, this);
+			this.frame.content.set(this.cropperView);
+
+		},
+		removeCropper: function() {
+			this.imgSelect.cancelSelection();
+			this.imgSelect.setOptions({remove: true});
+			this.imgSelect.update();
+			this.cropperView.remove();
+		},
+		createCropToolbar: function() {
+			var canSkipCrop, toolbarOptions;
+
+			canSkipCrop = this.get('canSkipCrop') || false;
+
+			toolbarOptions = {
+				controller: this.frame,
+				items: {
+					insert: {
+						style:    'primary',
+						text:     l10n.cropImage,
+						priority: 80,
+						requires: { library: false, selection: false },
+
+						click: function() {
+							var self = this,
+								selection = this.controller.state().get('selection').first();
+
+							selection.set({cropDetails: this.controller.state().imgSelect.getSelection()});
+
+							this.$el.text(l10n.cropping);
+							this.$el.attr('disabled', true);
+							this.controller.state().doCrop( selection ).done( function( croppedImage ) {
+								console.log( croppedImage );
+								self.controller.trigger('cropped', croppedImage );
+								self.controller.close();
+							});
+						}
+					}
+				}
+			};
+
+			if ( canSkipCrop ) {
+				_.extend( toolbarOptions.items, {
+					skip: {
+						style:      'secondary',
+						text:       l10n.skipCropping,
+						priority:   70,
+						requires:   { library: false, selection: false },
+						click:      function() {
+							var selection = this.controller.state().get('selection').first();
+							this.controller.state().cropperView.remove();
+							this.controller.trigger('skippedcrop', selection);
+							this.controller.close();
+						}
+					}
+				});
+			}
+
+			this.frame.toolbar.set( new wp.media.view.Toolbar(toolbarOptions) );
+		},
+
+		doCrop: function( attachment ) {
+			return wp.ajax.post( 'custom-header-crop', {
+				nonce: attachment.get('nonces').edit,
+				id: attachment.get('id'),
+				cropDetails: attachment.get('cropDetails')
+			} );
+		}
+	});
+
 	/**
 	 * ========================================================================
 	 * VIEWS
@@ -6323,6 +6426,53 @@
 		}
 	});
 
+	/**
+	 * wp.media.view.Cropper
+	 *
+	 * Uses the imgAreaSelect plugin to allow a user to crop an image.
+	 *
+	 * Takes imgAreaSelect options from
+	 * wp.customize.HeaderControl.calculateImageSelectOptions via
+	 * wp.customize.HeaderControl.openMM.
+	 *
+	 * @constructor
+	 * @augments wp.media.View
+	 * @augments wp.Backbone.View
+	 * @augments Backbone.View
+	 */
+	media.view.Cropper = media.View.extend({
+		tagName: 'img',
+		className: 'crop-content',
+		initialize: function() {
+			_.bindAll(this, 'onImageLoad');
+			this.$el.attr('src', this.options.attachment.get('url'));
+		},
+		ready: function() {
+			this.$el.on('load', this.onImageLoad);
+			$(window).on('resize.cropper', _.debounce(this.onImageLoad, 250));
+		},
+		remove: function() {
+			$(window).off('resize.cropper');
+			this.$el.remove();
+			this.$el.off();
+			wp.media.View.prototype.remove.apply(this, arguments);
+		},
+		prepare: function() {
+			return {
+				title: l10n.cropYourImage,
+				url: this.options.attachment.get('url')
+			};
+		},
+		onImageLoad: function() {
+			var imgOptions = this.controller.frame.options.imgSelectOptions;
+			if (typeof imgOptions === 'function') {
+				imgOptions = imgOptions(this.options.attachment, this.controller);
+			}
+			this.trigger('image-loaded');
+			this.controller.imgSelect = this.$el.imgAreaSelect(imgOptions);
+		}
+
+	});
 
 	media.view.EditImage = media.View.extend({