Changeset 27946

Timestamp:

04/04/2014 03:47:43 PM (12 years ago)

Author:

nacin

Message:

Header images: Handle cropping failures.

props ehg.
see #21785.

Location:

trunk/src

Files:

• wp-admin/js/customize-controls.js (modified) (1 diff)
• wp-includes/css/media-views.css (modified) (1 diff)
• wp-includes/js/media-views.js (modified) (3 diffs)
• wp-includes/media-template.php (modified) (1 diff)
• wp-includes/media.php (modified) (1 diff)

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

@@ -390 +390 @@
                                 instance: true,
                                 persistent: true,
-                                parent: this.$el,
                                 imageWidth: realWidth,
                                 imageHeight: realHeight,

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

@@ -610 +610 @@
 }
 
-.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;
 }
 

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

@@ -1345 +1345 @@
                                                                 self.controller.trigger('cropped', croppedImage );
                                                                 self.controller.close();
+                                                        }).fail( function() {
+                                                                self.controller.trigger('content:error:crop');
                                                         });
                                                 }
@@ -6203 +6205 @@
          */
         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));
                 },
@@ -6230 +6233 @@
                                 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 });
                 }
-
         });
 

trunk/src/wp-includes/media-template.php

@@ -1049 +1049 @@
         </script>
 
+        <script type="text/html" id="tmpl-crop-content">
+                <img class="crop-image" src="{{ data.url }}">
+                <div class="upload-errors"></div>
+        </script>
+
         <?php
 

trunk/src/wp-includes/media.php

@@ -2530 +2530 @@
                 'suggestedWidth' => __( 'Suggested width is %d pixels.' ),
                 'suggestedHeight' => __( 'Suggested height is %d pixels.' ),
+                'cropError' => __( 'There has been an error cropping your image.' ),
 
                 // Edit Audio