Changeset 27946

Timestamp:

04/04/2014 03:47:43 PM (11 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