ru-se.com

Unnamed repository; edit this file 'description' to name the repository.
Log | Files | Refs

media-image-widget.js (5468B)

      1 /**
      2  * @output wp-admin/js/widgets/media-image-widget.js
      3  */
      4 
      5 /* eslint consistent-this: [ "error", "control" ] */
      6 (function( component, $ ) {
      7 	'use strict';
      8 
      9 	var ImageWidgetModel, ImageWidgetControl;
     10 
     11 	/**
     12 	 * Image widget model.
     13 	 *
     14 	 * See WP_Widget_Media_Image::enqueue_admin_scripts() for amending prototype from PHP exports.
     15 	 *
     16 	 * @class    wp.mediaWidgets.modelConstructors.media_image
     17 	 * @augments wp.mediaWidgets.MediaWidgetModel
     18 	 */
     19 	ImageWidgetModel = component.MediaWidgetModel.extend({});
     20 
     21 	/**
     22 	 * Image widget control.
     23 	 *
     24 	 * See WP_Widget_Media_Image::enqueue_admin_scripts() for amending prototype from PHP exports.
     25 	 *
     26 	 * @class    wp.mediaWidgets.controlConstructors.media_audio
     27 	 * @augments wp.mediaWidgets.MediaWidgetControl
     28 	 */
     29 	ImageWidgetControl = component.MediaWidgetControl.extend(/** @lends wp.mediaWidgets.controlConstructors.media_image.prototype */{
     30 
     31 		/**
     32 		 * View events.
     33 		 *
     34 		 * @type {object}
     35 		 */
     36 		events: _.extend( {}, component.MediaWidgetControl.prototype.events, {
     37 			'click .media-widget-preview.populated': 'editMedia'
     38 		} ),
     39 
     40 		/**
     41 		 * Render preview.
     42 		 *
     43 		 * @return {void}
     44 		 */
     45 		renderPreview: function renderPreview() {
     46 			var control = this, previewContainer, previewTemplate, fieldsContainer, fieldsTemplate, linkInput;
     47 			if ( ! control.model.get( 'attachment_id' ) && ! control.model.get( 'url' ) ) {
     48 				return;
     49 			}
     50 
     51 			previewContainer = control.$el.find( '.media-widget-preview' );
     52 			previewTemplate = wp.template( 'wp-media-widget-image-preview' );
     53 			previewContainer.html( previewTemplate( control.previewTemplateProps.toJSON() ) );
     54 			previewContainer.addClass( 'populated' );
     55 
     56 			linkInput = control.$el.find( '.link' );
     57 			if ( ! linkInput.is( document.activeElement ) ) {
     58 				fieldsContainer = control.$el.find( '.media-widget-fields' );
     59 				fieldsTemplate = wp.template( 'wp-media-widget-image-fields' );
     60 				fieldsContainer.html( fieldsTemplate( control.previewTemplateProps.toJSON() ) );
     61 			}
     62 		},
     63 
     64 		/**
     65 		 * Open the media image-edit frame to modify the selected item.
     66 		 *
     67 		 * @return {void}
     68 		 */
     69 		editMedia: function editMedia() {
     70 			var control = this, mediaFrame, updateCallback, defaultSync, metadata;
     71 
     72 			metadata = control.mapModelToMediaFrameProps( control.model.toJSON() );
     73 
     74 			// Needed or else none will not be selected if linkUrl is not also empty.
     75 			if ( 'none' === metadata.link ) {
     76 				metadata.linkUrl = '';
     77 			}
     78 
     79 			// Set up the media frame.
     80 			mediaFrame = wp.media({
     81 				frame: 'image',
     82 				state: 'image-details',
     83 				metadata: metadata
     84 			});
     85 			mediaFrame.$el.addClass( 'media-widget' );
     86 
     87 			updateCallback = function() {
     88 				var mediaProps, linkType;
     89 
     90 				// Update cached attachment object to avoid having to re-fetch. This also triggers re-rendering of preview.
     91 				mediaProps = mediaFrame.state().attributes.image.toJSON();
     92 				linkType = mediaProps.link;
     93 				mediaProps.link = mediaProps.linkUrl;
     94 				control.selectedAttachment.set( mediaProps );
     95 				control.displaySettings.set( 'link', linkType );
     96 
     97 				control.model.set( _.extend(
     98 					control.mapMediaToModelProps( mediaProps ),
     99 					{ error: false }
    100 				) );
    101 			};
    102 
    103 			mediaFrame.state( 'image-details' ).on( 'update', updateCallback );
    104 			mediaFrame.state( 'replace-image' ).on( 'replace', updateCallback );
    105 
    106 			// Disable syncing of attachment changes back to server. See <https://core.trac.wordpress.org/ticket/40403>.
    107 			defaultSync = wp.media.model.Attachment.prototype.sync;
    108 			wp.media.model.Attachment.prototype.sync = function rejectedSync() {
    109 				return $.Deferred().rejectWith( this ).promise();
    110 			};
    111 			mediaFrame.on( 'close', function onClose() {
    112 				mediaFrame.detach();
    113 				wp.media.model.Attachment.prototype.sync = defaultSync;
    114 			});
    115 
    116 			mediaFrame.open();
    117 		},
    118 
    119 		/**
    120 		 * Get props which are merged on top of the model when an embed is chosen (as opposed to an attachment).
    121 		 *
    122 		 * @return {Object} Reset/override props.
    123 		 */
    124 		getEmbedResetProps: function getEmbedResetProps() {
    125 			return _.extend(
    126 				component.MediaWidgetControl.prototype.getEmbedResetProps.call( this ),
    127 				{
    128 					size: 'full',
    129 					width: 0,
    130 					height: 0
    131 				}
    132 			);
    133 		},
    134 
    135 		/**
    136 		 * Get the instance props from the media selection frame.
    137 		 *
    138 		 * Prevent the image_title attribute from being initially set when adding an image from the media library.
    139 		 *
    140 		 * @param {wp.media.view.MediaFrame.Select} mediaFrame - Select frame.
    141 		 * @return {Object} Props.
    142 		 */
    143 		getModelPropsFromMediaFrame: function getModelPropsFromMediaFrame( mediaFrame ) {
    144 			var control = this;
    145 			return _.omit(
    146 				component.MediaWidgetControl.prototype.getModelPropsFromMediaFrame.call( control, mediaFrame ),
    147 				'image_title'
    148 			);
    149 		},
    150 
    151 		/**
    152 		 * Map model props to preview template props.
    153 		 *
    154 		 * @return {Object} Preview template props.
    155 		 */
    156 		mapModelToPreviewTemplateProps: function mapModelToPreviewTemplateProps() {
    157 			var control = this, previewTemplateProps, url;
    158 			url = control.model.get( 'url' );
    159 			previewTemplateProps = component.MediaWidgetControl.prototype.mapModelToPreviewTemplateProps.call( control );
    160 			previewTemplateProps.currentFilename = url ? url.replace( /\?.*$/, '' ).replace( /^.+\//, '' ) : '';
    161 			previewTemplateProps.link_url = control.model.get( 'link_url' );
    162 			return previewTemplateProps;
    163 		}
    164 	});
    165 
    166 	// Exports.
    167 	component.controlConstructors.media_image = ImageWidgetControl;
    168 	component.modelConstructors.media_image = ImageWidgetModel;
    169 
    170 })( wp.mediaWidgets, jQuery );