Header images: Handle cropping failures.

props ehg.
see #21785.


git-svn-id: https://develop.svn.wordpress.org/trunk@27946 602fd350-edb4-49c9-b593-d223f7449a82

src/wp-admin/js/customize-controls.js

@@ -389,7 +389,6 @@
 				keys: true,
 				instance: true,
 				persistent: true,
-				parent: this.$el,
 				imageWidth: realWidth,
 				imageHeight: realHeight,
 				x1: 0,

src/wp-includes/css/media-views.css

@@ -609,13 +609,24 @@
 	margin-right: 20px;
 }
 
-.media-frame-content .crop-content {
+.media-frame-content .crop-content .crop-image {
 	display: block;
 	margin: auto;
 	max-width: 100%;
 	max-height: 100%;
 }
 
+.media-frame-content .crop-content .upload-errors
+{
+	position: absolute;
+	width: 300px;
+	top: 50%;
+	left: 50%;
+	margin-left: -150px;
+	margin-right: -150px;
+	z-index: 600000;
+}
+
 /**
  * Iframes
  */

src/wp-includes/js/media-views.js

@@ -1344,6 +1344,8 @@
 							this.controller.state().doCrop( selection ).done( function( croppedImage ) {
 								self.controller.trigger('cropped', croppedImage );
 								self.controller.close();
+							}).fail( function() {
+								self.controller.trigger('content:error:crop');
 							});
 						}
 					}
@@ -6202,14 +6204,15 @@
 	 * @augments Backbone.View
 	 */
 	media.view.Cropper = media.View.extend({
-		tagName: 'img',
 		className: 'crop-content',
+		template: media.template('crop-content'),
 		initialize: function() {
 			_.bindAll(this, 'onImageLoad');
-			this.$el.attr('src', this.options.attachment.get('url'));
 		},
 		ready: function() {
-			this.$el.on('load', this.onImageLoad);
+			this.controller.frame.on('content:error:crop', this.onError, this);
+			this.$image = this.$el.find('.crop-image');
+			this.$image.on('load', this.onImageLoad);
 			$(window).on('resize.cropper', _.debounce(this.onImageLoad, 250));
 		},
 		remove: function() {
@@ -6229,10 +6232,19 @@
 			if (typeof imgOptions === 'function') {
 				imgOptions = imgOptions(this.options.attachment, this.controller);
 			}
-			this.trigger('image-loaded');
-			this.controller.imgSelect = this.$el.imgAreaSelect(imgOptions);
-		}
 
+			imgOptions = _.extend(imgOptions, {parent: this.$el});
+			this.trigger('image-loaded');
+			this.controller.imgSelect = this.$image.imgAreaSelect(imgOptions);
+		},
+		onError: function() {
+			var filename = this.options.attachment.get('filename');
+
+			this.views.add( '.upload-errors', new media.view.UploaderStatusError({
+				filename: media.view.UploaderStatus.prototype.filename(filename),
+				message: _wpMediaViewsL10n.cropError
+			}), { at: 0 });
+		}
 	});
 
 	media.view.EditImage = media.View.extend({

src/wp-includes/media-template.php

@@ -1048,6 +1048,11 @@ function wp_print_media_templates() {
 		<div class="wpview-overlay"></div>
 	</script>
 
+	<script type="text/html" id="tmpl-crop-content">
+		<img class="crop-image" src="{{ data.url }}">
+		<div class="upload-errors"></div>
+	</script>
+
 	<?php
 
 	/**

src/wp-includes/media.php

@@ -2529,6 +2529,7 @@ function wp_enqueue_media( $args = array() ) {
 		'cropping' => __( 'Cropping…' ),
 		'suggestedWidth' => __( 'Suggested width is %d pixels.' ),
 		'suggestedHeight' => __( 'Suggested height is %d pixels.' ),
+		'cropError' => __( 'There has been an error cropping your image.' ),
 
 		// Edit Audio
 		'audioDetailsTitle'     => __( 'Audio Details' ),