WordPress/wp-admin/js/widgets/media-image-widget.js

146 lines
4.3 KiB
JavaScript
Raw Normal View History

/* eslint consistent-this: [ "error", "control" ] */
(function( component, $ ) {
'use strict';
var ImageWidgetModel, ImageWidgetControl;
/**
* Image widget model.
*
* See WP_Widget_Media_Image::enqueue_admin_scripts() for amending prototype from PHP exports.
*
* @class ImageWidgetModel
* @constructor
*/
ImageWidgetModel = component.MediaWidgetModel.extend({});
/**
* Image widget control.
*
* See WP_Widget_Media_Image::enqueue_admin_scripts() for amending prototype from PHP exports.
*
* @class ImageWidgetModel
* @constructor
*/
ImageWidgetControl = component.MediaWidgetControl.extend({
/**
* Render preview.
*
* @returns {void}
*/
renderPreview: function renderPreview() {
var control = this, previewContainer, previewTemplate;
if ( ! control.model.get( 'attachment_id' ) && ! control.model.get( 'url' ) ) {
return;
}
previewContainer = control.$el.find( '.media-widget-preview' );
previewTemplate = wp.template( 'wp-media-widget-image-preview' );
previewContainer.html( previewTemplate( _.extend( control.previewTemplateProps.toJSON() ) ) );
},
/**
* Open the media image-edit frame to modify the selected item.
*
* @returns {void}
*/
editMedia: function editMedia() {
var control = this, mediaFrame, updateCallback, defaultSync, metadata;
metadata = control.mapModelToMediaFrameProps( control.model.toJSON() );
// Needed or else none will not be selected if linkUrl is not also empty.
if ( 'none' === metadata.link ) {
metadata.linkUrl = '';
}
// Set up the media frame.
mediaFrame = wp.media({
frame: 'image',
state: 'image-details',
metadata: metadata
});
mediaFrame.$el.addClass( 'media-widget' );
updateCallback = function() {
var mediaProps;
// Update cached attachment object to avoid having to re-fetch. This also triggers re-rendering of preview.
mediaProps = mediaFrame.state().attributes.image.toJSON();
control.selectedAttachment.set( mediaProps );
control.model.set( _.extend(
control.mapMediaToModelProps( mediaProps ),
{ error: false }
) );
};
mediaFrame.state( 'image-details' ).on( 'update', updateCallback );
mediaFrame.state( 'replace-image' ).on( 'replace', updateCallback );
// Disable syncing of attachment changes back to server. See <https://core.trac.wordpress.org/ticket/40403>.
defaultSync = wp.media.model.Attachment.prototype.sync;
wp.media.model.Attachment.prototype.sync = function rejectedSync() {
return $.Deferred().rejectWith( this ).promise();
};
mediaFrame.on( 'close', function onClose() {
mediaFrame.detach();
wp.media.model.Attachment.prototype.sync = defaultSync;
});
mediaFrame.open();
},
/**
* Get props which are merged on top of the model when an embed is chosen (as opposed to an attachment).
*
* @returns {Object} Reset/override props.
*/
getEmbedResetProps: function getEmbedResetProps() {
return _.extend(
component.MediaWidgetControl.prototype.getEmbedResetProps.call( this ),
{
size: 'full',
width: 0,
height: 0
}
);
},
/**
* Get the instance props from the media selection frame.
*
* Prevent the image_title attribute from being initially set when adding an image from the media library.
*
* @param {wp.media.view.MediaFrame.Select} mediaFrame - Select frame.
* @returns {Object} Props.
*/
getModelPropsFromMediaFrame: function getModelPropsFromMediaFrame( mediaFrame ) {
var control = this;
return _.omit(
component.MediaWidgetControl.prototype.getModelPropsFromMediaFrame.call( control, mediaFrame ),
'image_title'
);
},
/**
* Map model props to preview template props.
*
* @returns {Object} Preview template props.
*/
mapModelToPreviewTemplateProps: function mapModelToPreviewTemplateProps() {
var control = this, mediaFrameProps, url;
url = control.model.get( 'url' );
mediaFrameProps = component.MediaWidgetControl.prototype.mapModelToPreviewTemplateProps.call( control );
mediaFrameProps.currentFilename = url ? url.replace( /\?.*$/, '' ).replace( /^.+\//, '' ) : '';
return mediaFrameProps;
}
});
// Exports.
component.controlConstructors.media_image = ImageWidgetControl;
component.modelConstructors.media_image = ImageWidgetModel;
})( wp.mediaWidgets, jQuery );