diff --git src/wp-includes/css/media-views.css src/wp-includes/css/media-views.css index 107a131..5d21acf 100644 --- src/wp-includes/css/media-views.css +++ src/wp-includes/css/media-views.css @@ -603,6 +603,17 @@ margin: 0; } +.media-frame-title .suggested-dimensions { + font-size: 14px; + float: right; + margin-right: 20px; +} + +.media-frame-content #crop-content { + width: 100%; + height: 100%; +} + /** * Iframes */ diff --git src/wp-includes/js/media-views.js src/wp-includes/js/media-views.js index 1904a0f..dc6148c 100644 --- src/wp-includes/js/media-views.js +++ src/wp-includes/js/media-views.js @@ -1,5 +1,5 @@ /* global _wpMediaViewsL10n, confirm, getUserSetting, setUserSetting */ -(function($){ +(function($, wp){ var media = wp.media, l10n; // Link any localized strings. @@ -390,7 +390,8 @@ * @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,19 +456,21 @@ 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 ) { @@ -1199,6 +1202,110 @@ }); /** + * 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 * ======================================================================== @@ -5252,4 +5359,52 @@ 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({ + id: 'crop-content', + template: _.template(''), + initialize: function() { + _.bindAll( this, 'onImageLoad' ); + }, + ready: function() { + this.$el.find('img').on('load', this.onImageLoad); + $(window).on('resize', _.debounce(this.onImageLoad, 250)); + }, + remove: function() { + var img = this.$el.find('img'); + img.remove(); + img.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.find('img').imgAreaSelect(imgOptions); + } + + }); + +}(jQuery, wp)); diff --git src/wp-includes/media.php src/wp-includes/media.php index 129bc92..047518f 100644 --- src/wp-includes/media.php +++ src/wp-includes/media.php @@ -1869,6 +1869,7 @@ function wp_prepare_attachment_for_js( $attachment ) { 'nonces' => array( 'update' => false, 'delete' => false, + 'crop' => false, ), 'editLink' => false, ); @@ -1881,6 +1882,9 @@ function wp_prepare_attachment_for_js( $attachment ) { 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 */ @@ -2071,7 +2075,24 @@ function wp_enqueue_media( $args = array() ) { // 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.' ), ); $settings = apply_filters( 'media_view_settings', $settings, $post ); @@ -2302,4 +2323,4 @@ function theme_supports_thumbnails( $post ) { } return current_theme_supports( 'post-thumbnails', $post->post_type ); -} \ No newline at end of file +}