Ticket #21785: 21785-media-manager.2.diff

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

@@ -602 +602 @@
         margin: 0;
 }
 
+.media-frame-title .suggested-dimensions {
+        font-size: 14px;
+        float: right;
+        margin-right: 20px;
+}
+
+.media-frame-content .crop-content {
+        display: block;
+        margin: auto;
+        max-width: 100%;
+        max-height: 100%;
+}
+
 /**
  * Iframes
  */

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

@@ -1 +1 @@
 /* global _wpMediaViewsL10n, confirm, getUserSetting, setUserSetting */
-(function($){
+(function($, wp){
         var media = wp.media, l10n;
 
         // Link any localized strings.
@@ -390 +390 @@
                  * @access private
                  */
                 _renderTitle: function( view ) {
-                        view.$el.text( this.get('title') || '' );
+                        var title = this.get('title');
+                        view.$el.html( title.html || title || '' );
                 },
                 /**
                  * @access private
@@ -455 +456 @@
                                 priority = this.get('priority');
 
                         if ( ! menuItem && title ) {
-                                menuItem = { text: title };
+                                if ( title.text !== undefined ) {
+                                        menuItem = { text: title.text };
+                                } else {
+                                        menuItem = { text: title };
+                                }
 
-                                if ( priority ) {
+                                if ( priority )
                                         menuItem.priority = priority;
-                                }
                         }
 
-                        if ( ! menuItem ) {
+                        if ( ! menuItem )
                                 return;
-                        }
 
                         view.set( this.id, menuItem );
-                }
+                        }
         });
 
         _.each(['toolbar','content'], function( region ) {
@@ -1242 +1245 @@
         });
 
         /**
+         * wp.media.controller.Cropper
+         *
+         * Allows for a cropping step.
+         *
+         * @constructor
+         * @augments wp.media.controller.State
+         * @augments Backbone.Model
+         */
+        media.controller.Cropper = media.controller.State.extend({
+                defaults: {
+                        id: 'cropper',
+                        title: l10n.cropImage,
+                        toolbar: 'crop',
+                        content: 'crop',
+                        router: false,
+                        canSkipCrop: false
+                },
+
+                activate: function() {
+                        this.frame.on( 'content:create:crop', this.createCropContent, this );
+                        this.frame.on( 'close', this.removeCropper, this );
+                        this.set('selection', new Backbone.Collection(this.frame._selection.single));
+                },
+
+                deactivate: function() {
+                        this.frame.toolbar.mode('browse');
+                },
+
+                createCropContent: function() {
+                        this.cropperView = new wp.media.view.Cropper({controller: this,
+                                        attachment: this.get('selection').first() });
+                        this.cropperView.on('image-loaded', this.createCropToolbar, this);
+                        this.frame.content.set(this.cropperView);
+
+                },
+                removeCropper: function() {
+                        this.imgSelect.cancelSelection();
+                        this.imgSelect.setOptions({remove: true});
+                        this.imgSelect.update();
+                        this.cropperView.remove();
+                },
+                createCropToolbar: function() {
+                        var canSkipCrop, toolbarOptions;
+
+                        canSkipCrop = this.get('canSkipCrop') || false;
+
+                        toolbarOptions = {
+                                controller: this.frame,
+                                items: {
+                                        insert: {
+                                                style:    'primary',
+                                                text:     l10n.cropImage,
+                                                priority: 80,
+                                                requires: { library: false, selection: false },
+
+                                                click: function() {
+                                                        var self = this,
+                                                                selection = this.controller.state().get('selection').first();
+
+                                                        selection.set({cropDetails: this.controller.state().imgSelect.getSelection()});
+
+                                                        this.$el.text(l10n.cropping);
+                                                        this.$el.attr('disabled', true);
+                                                        this.controller.state().doCrop(selection, function(croppedImage) {
+                                                                var img = JSON.parse(croppedImage);
+
+                                                                self.controller.trigger('cropped', img);
+                                                                self.controller.close();
+                                                        });
+                                                }
+                                        }
+                                }
+                        };
+
+                        if ( canSkipCrop ) {
+                                _.extend( toolbarOptions.items, {
+                                        skip: {
+                                                style:          'primary',
+                                                text:   l10n.skipCropping,
+                                                priority:       70,
+                                                requires:       { library: false, selection: false },
+                                                click:          function() {
+                                                        var selection = this.controller.state().get('selection').first();
+                                                        this.controller.state().cropperView.remove();
+                                                        this.controller.trigger('skippedcrop', selection);
+                                                        this.controller.close();
+                                                }
+                                        }
+                                });
+                        }
+
+                        this.frame.toolbar.set( new wp.media.view.Toolbar(toolbarOptions) );
+                },
+
+                doCrop: function(attachment, callback) {
+                        $.post(wp.ajax.settings.url, {
+                                dataType: 'json',
+                                action: 'header_crop',
+                                data: attachment.toJSON()
+                        }, callback);
+                }
+        });
+
+        /**
          * ========================================================================
          * VIEWS
          * ========================================================================
@@ -5576 +5683 @@
                         this.$( '.embed-image-settings' ).scrollTop( 0 );
                 }
         });
-}(jQuery));
+
+        /**
+         * wp.media.view.Cropper
+         *
+         * Uses the imgAreaSelect plugin to allow a user to crop an image.
+         *
+         * Takes imgAreaSelect options from
+         * wp.customize.HeaderControl.calculateImageSelectOptions via
+         * wp.customize.HeaderControl.openMM.
+         *
+         * @constructor
+         * @augments wp.media.View
+         * @augments wp.Backbone.View
+         * @augments Backbone.View
+         */
+        media.view.Cropper = media.View.extend({
+                tagName: 'img',
+                className: 'crop-content',
+                initialize: function() {
+                        _.bindAll(this, 'onImageLoad');
+                        this.$el.attr('src', this.options.attachment.get('url'));
+                },
+                ready: function() {
+                        this.$el.on('load', this.onImageLoad);
+                        $(window).on('resize', _.debounce(this.onImageLoad, 250));
+                },
+                remove: function() {
+                        this.$el.remove();
+                        this.$el.off();
+                        wp.media.View.prototype.remove.apply(this, arguments);
+                },
+                prepare: function() {
+                        return {
+                                title: l10n.cropYourImage,
+                                url: this.options.attachment.get('url')
+                        };
+                },
+                onImageLoad: function() {
+                        var imgOptions = this.controller.frame.options.imgSelectOptions;
+                        if (typeof imgOptions === 'function') {
+                                imgOptions = imgOptions(this.options.attachment, this.controller);
+                        }
+                        this.trigger('image-loaded');
+                        this.controller.imgSelect = this.$el.imgAreaSelect(imgOptions);
+                }
+
+        });
+
+}(jQuery, wp));

src/wp-includes/media.php

@@ -2135 +2135 @@
                 'nonces'      => array(
                         'update' => false,
                         'delete' => false,
+                        'crop' => false,
                 ),
                 'editLink'   => false,
         );
@@ -2147 +2148 @@
         if ( current_user_can( 'delete_post', $attachment->ID ) )
                 $response['nonces']['delete'] = wp_create_nonce( 'delete-post_' . $attachment->ID );
 
+        if ( current_user_can( 'edit_post', $attachment->ID ) )
+                $response['nonces']['crop'] = wp_create_nonce( 'crop-image_' . $attachment->ID );
+
         if ( $meta && 'image' === $type ) {
                 $sizes = array();
                 /** This filter is documented in wp-admin/includes/media.php */
@@ -2339 +2343 @@
                 // Edit Image
                 'imageDetailsTitle'     => __( 'Image Details' ),
                 'imageReplaceTitle'     => __( 'Replace Image' ),
-                'imageDetailsCancel'    => __( 'Cancel Edit' ),
+                'imageDetailsCancel'     => __( 'Cancel Edit' ),
+
+                // Crop Image
+                /* translators: title for Media Manager library view */
+                'chooseImage' => __( 'Choose Image' ),
+                /* translators: button to select an image from the MM library to crop */
+                'selectAndCrop' => __( 'Select and Crop' ),
+                /* translators: button to choose not to crop the selected image */
+                'skipCropping' => __( 'Skip Cropping' ),
+                /* translators: button to choose to crop the selected image */
+                'cropImage' => __( 'Crop Image' ),
+                'cropYourImage' => __( 'Crop your image' ),
+                /* translators: button label changes to this while the image is being cropped server-side */
+                'cropping' => __( 'Cropping...' ),
+                /* translators: suggested width of header image in pixels */
+                'suggestedWidth' => __( 'Suggested width is %d pixels.' ),
+                /* translators: suggested height of header image in pixels */
+                'suggestedHeight' => __( 'Suggested height is %d pixels.' ),
 
                 // Playlist
                 'playlistDragInfo'    => __( 'Drag and drop to reorder tracks.' ),
@@ -2590 +2611 @@
         }
 
         return current_theme_supports( 'post-thumbnails', $post->post_type );
-}
- No newline at end of file
+}