You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
170 lines
5.3 KiB
170 lines
5.3 KiB
/** |
|
* @output wp-admin/js/widgets/media-image-widget.js |
|
*/ |
|
|
|
/* 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 wp.mediaWidgets.modelConstructors.media_image |
|
* @augments wp.mediaWidgets.MediaWidgetModel |
|
*/ |
|
ImageWidgetModel = component.MediaWidgetModel.extend({}); |
|
|
|
/** |
|
* Image widget control. |
|
* |
|
* See WP_Widget_Media_Image::enqueue_admin_scripts() for amending prototype from PHP exports. |
|
* |
|
* @class wp.mediaWidgets.controlConstructors.media_audio |
|
* @augments wp.mediaWidgets.MediaWidgetControl |
|
*/ |
|
ImageWidgetControl = component.MediaWidgetControl.extend(/** @lends wp.mediaWidgets.controlConstructors.media_image.prototype */{ |
|
|
|
/** |
|
* View events. |
|
* |
|
* @type {object} |
|
*/ |
|
events: _.extend( {}, component.MediaWidgetControl.prototype.events, { |
|
'click .media-widget-preview.populated': 'editMedia' |
|
} ), |
|
|
|
/** |
|
* Render preview. |
|
* |
|
* @returns {void} |
|
*/ |
|
renderPreview: function renderPreview() { |
|
var control = this, previewContainer, previewTemplate, fieldsContainer, fieldsTemplate, linkInput; |
|
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( control.previewTemplateProps.toJSON() ) ); |
|
previewContainer.addClass( 'populated' ); |
|
|
|
linkInput = control.$el.find( '.link' ); |
|
if ( ! linkInput.is( document.activeElement ) ) { |
|
fieldsContainer = control.$el.find( '.media-widget-fields' ); |
|
fieldsTemplate = wp.template( 'wp-media-widget-image-fields' ); |
|
fieldsContainer.html( fieldsTemplate( 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, linkType; |
|
|
|
// Update cached attachment object to avoid having to re-fetch. This also triggers re-rendering of preview. |
|
mediaProps = mediaFrame.state().attributes.image.toJSON(); |
|
linkType = mediaProps.link; |
|
mediaProps.link = mediaProps.linkUrl; |
|
control.selectedAttachment.set( mediaProps ); |
|
control.displaySettings.set( 'link', linkType ); |
|
|
|
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, previewTemplateProps, url; |
|
url = control.model.get( 'url' ); |
|
previewTemplateProps = component.MediaWidgetControl.prototype.mapModelToPreviewTemplateProps.call( control ); |
|
previewTemplateProps.currentFilename = url ? url.replace( /\?.*$/, '' ).replace( /^.+\//, '' ) : ''; |
|
previewTemplateProps.link_url = control.model.get( 'link_url' ); |
|
return previewTemplateProps; |
|
} |
|
}); |
|
|
|
// Exports. |
|
component.controlConstructors.media_image = ImageWidgetControl; |
|
component.modelConstructors.media_image = ImageWidgetModel; |
|
|
|
})( wp.mediaWidgets, jQuery );
|
|
|