Ticket #21785: 21785-mm-crop-error-overlay.diff

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

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

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

@@ -608 +608 @@
         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 +1344 @@
                                                         this.controller.state().doCrop( selection ).done( function( croppedImage ) {
                                                                 self.controller.trigger('cropped', croppedImage );
                                                                 self.controller.close();
+                                                        }).fail( function() {
+                                                                self.controller.trigger('content:error:crop');
                                                         });
                                                 }
                                         }
@@ -6163 +6165 @@
          * @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() {
@@ -6190 +6193 @@
                         if (typeof imgOptions === 'function') {
                                 imgOptions = imgOptions(this.options.attachment, this.controller);
                         }
+
+                        imgOptions = _.extend(imgOptions, {parent: this.$el});
                         this.trigger('image-loaded');
-                        this.controller.imgSelect = this.$el.imgAreaSelect(imgOptions);
-                }
+                        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

@@ -1034 +1034 @@
                 <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

@@ -2528 +2528 @@
                 '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' ),