From 96e15acb2e781ec595a3586efff7881c45faaeec Mon Sep 17 00:00:00 2001
From: Andrew Nacin <nacin@git.wordpress.org>
Date: Fri, 4 Apr 2014 15:47:43 +0000
Subject: [PATCH] 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 |  1 -
 src/wp-includes/css/media-views.css   | 13 ++++++++++++-
 src/wp-includes/js/media-views.js     | 24 ++++++++++++++++++------
 src/wp-includes/media-template.php    |  5 +++++
 src/wp-includes/media.php             |  1 +
 5 files changed, 36 insertions(+), 8 deletions(-)

diff --git a/src/wp-admin/js/customize-controls.js b/src/wp-admin/js/customize-controls.js
index 39edc8b411..88e020c631 100644
--- a/src/wp-admin/js/customize-controls.js
+++ b/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,
diff --git a/src/wp-includes/css/media-views.css b/src/wp-includes/css/media-views.css
index b216f7f4d9..2e172b143a 100644
--- a/src/wp-includes/css/media-views.css
+++ b/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
  */
diff --git a/src/wp-includes/js/media-views.js b/src/wp-includes/js/media-views.js
index 6a01aa63ee..97dd232e7f 100644
--- a/src/wp-includes/js/media-views.js
+++ b/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({
diff --git a/src/wp-includes/media-template.php b/src/wp-includes/media-template.php
index 905bc6d5d7..f38638d22b 100644
--- a/src/wp-includes/media-template.php
+++ b/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
 
 	/**
diff --git a/src/wp-includes/media.php b/src/wp-includes/media.php
index 1026e9d0de..c2ce319fd2 100644
--- a/src/wp-includes/media.php
+++ b/src/wp-includes/media.php
@@ -2529,6 +2529,7 @@ function wp_enqueue_media( $args = array() ) {
 		'cropping' => __( 'Cropping&hellip;' ),
 		'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' ),