mirror of
https://github.com/WordPress/WordPress.git
synced 2024-11-06 19:01:44 +01:00
d568679946
* Add a new folder in `wp-includes/js`, `media` * Create manifest files for `views`, `models`, `grid`, and `audio-video` * Make `browserify` an `npm` dependency * Add Grunt tasks for `browserify` and `uglify:media` on `build` and `watch` * Update the paths loaded for media files in `script-loader` * All new files were created using `svn cp` from their original location Please run `npm install`. While developing media JS, you must run `grunt watch`. See #28510. Built from https://develop.svn.wordpress.org/trunk@31373 git-svn-id: http://core.svn.wordpress.org/trunk@31354 1a063a9b-81f0-0310-95a4-ce76da25c4cd
117 lines
2.9 KiB
JavaScript
117 lines
2.9 KiB
JavaScript
/*globals _, wp, Backbone */
|
|
|
|
/**
|
|
* wp.media.controller.Cropper
|
|
*
|
|
* A state for cropping an image.
|
|
*
|
|
* @class
|
|
* @augments wp.media.controller.State
|
|
* @augments Backbone.Model
|
|
*/
|
|
var State = require( './state.js' ),
|
|
ToolbarView = require( '../views/toolbar.js' ),
|
|
CropperView = require( '../views/cropper.js' ),
|
|
l10n = wp.media.view.l10n,
|
|
Cropper;
|
|
|
|
Cropper = State.extend({
|
|
defaults: {
|
|
id: 'cropper',
|
|
title: l10n.cropImage,
|
|
// Region mode defaults.
|
|
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 CropperView({
|
|
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 ).done( function( croppedImage ) {
|
|
self.controller.trigger('cropped', croppedImage );
|
|
self.controller.close();
|
|
}).fail( function() {
|
|
self.controller.trigger('content:error:crop');
|
|
});
|
|
}
|
|
}
|
|
}
|
|
};
|
|
|
|
if ( canSkipCrop ) {
|
|
_.extend( toolbarOptions.items, {
|
|
skip: {
|
|
style: 'secondary',
|
|
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 ToolbarView(toolbarOptions) );
|
|
},
|
|
|
|
doCrop: function( attachment ) {
|
|
return wp.ajax.post( 'custom-header-crop', {
|
|
nonce: attachment.get('nonces').edit,
|
|
id: attachment.get('id'),
|
|
cropDetails: attachment.get('cropDetails')
|
|
} );
|
|
}
|
|
});
|
|
|
|
module.exports = Cropper; |