1 /* eslint consistent-this: [ "error", "control" ] */

     2 (function( component, $ ) {

     3 	'use strict';

     4 

     5 	var ImageWidgetModel, ImageWidgetControl;

     6 

     7 	/**

     8 	 * Image widget model.

     9 	 *

    10 	 * See WP_Widget_Media_Image::enqueue_admin_scripts() for amending prototype from PHP exports.

    11 	 *

    12 	 * @class ImageWidgetModel

    13 	 * @constructor

    14 	 */

    15 	ImageWidgetModel = component.MediaWidgetModel.extend({});

    16 

    17 	/**

    18 	 * Image widget control.

    19 	 *

    20 	 * See WP_Widget_Media_Image::enqueue_admin_scripts() for amending prototype from PHP exports.

    21 	 *

    22 	 * @class ImageWidgetModel

    23 	 * @constructor

    24 	 */

    25 	ImageWidgetControl = component.MediaWidgetControl.extend({

    26 

    27 		/**

    28 		 * View events.

    29 		 *

    30 		 * @type {object}

    31 		 */

    32 		events: _.extend( {}, component.MediaWidgetControl.prototype.events, {

    33 			'click .media-widget-preview.populated': 'editMedia'

    34 		} ),

    35 

    36 		/**

    37 		 * Render preview.

    38 		 *

    39 		 * @returns {void}

    40 		 */

    41 		renderPreview: function renderPreview() {

    42 			var control = this, previewContainer, previewTemplate, fieldsContainer, fieldsTemplate, linkInput;

    43 			if ( ! control.model.get( 'attachment_id' ) && ! control.model.get( 'url' ) ) {

    44 				return;

    45 			}

    46 

    47 			previewContainer = control.$el.find( '.media-widget-preview' );

    48 			previewTemplate = wp.template( 'wp-media-widget-image-preview' );

    49 			previewContainer.html( previewTemplate( control.previewTemplateProps.toJSON() ) );

    50 			previewContainer.addClass( 'populated' );

    51 

    52 			linkInput = control.$el.find( '.link' );

    53 			if ( ! linkInput.is( document.activeElement ) ) {

    54 				fieldsContainer = control.$el.find( '.media-widget-fields' );

    55 				fieldsTemplate = wp.template( 'wp-media-widget-image-fields' );

    56 				fieldsContainer.html( fieldsTemplate( control.previewTemplateProps.toJSON() ) );

    57 			}

    58 		},

    59 

    60 		/**

    61 		 * Open the media image-edit frame to modify the selected item.

    62 		 *

    63 		 * @returns {void}

    64 		 */

    65 		editMedia: function editMedia() {

    66 			var control = this, mediaFrame, updateCallback, defaultSync, metadata;

    67 

    68 			metadata = control.mapModelToMediaFrameProps( control.model.toJSON() );

    69 

    70 			// Needed or else none will not be selected if linkUrl is not also empty.

    71 			if ( 'none' === metadata.link ) {

    72 				metadata.linkUrl = '';

    73 			}

    74 

    75 			// Set up the media frame.

    76 			mediaFrame = wp.media({

    77 				frame: 'image',

    78 				state: 'image-details',

    79 				metadata: metadata

    80 			});

    81 			mediaFrame.$el.addClass( 'media-widget' );

    82 

    83 			updateCallback = function() {

    84 				var mediaProps, linkType;

    85 

    86 				// Update cached attachment object to avoid having to re-fetch. This also triggers re-rendering of preview.

    87 				mediaProps = mediaFrame.state().attributes.image.toJSON();

    88 				linkType = mediaProps.link;

    89 				mediaProps.link = mediaProps.linkUrl;

    90 				control.selectedAttachment.set( mediaProps );

    91 				control.displaySettings.set( 'link', linkType );

    92 

    93 				control.model.set( _.extend(

    94 					control.mapMediaToModelProps( mediaProps ),

    95 					{ error: false }

    96 				) );

    97 			};

    98 

    99 			mediaFrame.state( 'image-details' ).on( 'update', updateCallback );

   100 			mediaFrame.state( 'replace-image' ).on( 'replace', updateCallback );

   101 

   102 			// Disable syncing of attachment changes back to server. See <https://core.trac.wordpress.org/ticket/40403>.

   103 			defaultSync = wp.media.model.Attachment.prototype.sync;

   104 			wp.media.model.Attachment.prototype.sync = function rejectedSync() {

   105 				return $.Deferred().rejectWith( this ).promise();

   106 			};

   107 			mediaFrame.on( 'close', function onClose() {

   108 				mediaFrame.detach();

   109 				wp.media.model.Attachment.prototype.sync = defaultSync;

   110 			});

   111 

   112 			mediaFrame.open();

   113 		},

   114 

   115 		/**

   116 		 * Get props which are merged on top of the model when an embed is chosen (as opposed to an attachment).

   117 		 *

   118 		 * @returns {Object} Reset/override props.

   119 		 */

   120 		getEmbedResetProps: function getEmbedResetProps() {

   121 			return _.extend(

   122 				component.MediaWidgetControl.prototype.getEmbedResetProps.call( this ),

   123 				{

   124 					size: 'full',

   125 					width: 0,

   126 					height: 0

   127 				}

   128 			);

   129 		},

   130 

   131 		/**

   132 		 * Get the instance props from the media selection frame.

   133 		 *

   134 		 * Prevent the image_title attribute from being initially set when adding an image from the media library.

   135 		 *

   136 		 * @param {wp.media.view.MediaFrame.Select} mediaFrame - Select frame.

   137 		 * @returns {Object} Props.

   138 		 */

   139 		getModelPropsFromMediaFrame: function getModelPropsFromMediaFrame( mediaFrame ) {

   140 			var control = this;

   141 			return _.omit(

   142 				component.MediaWidgetControl.prototype.getModelPropsFromMediaFrame.call( control, mediaFrame ),

   143 				'image_title'

   144 			);

   145 		},

   146 

   147 		/**

   148 		 * Map model props to preview template props.

   149 		 *

   150 		 * @returns {Object} Preview template props.

   151 		 */

   152 		mapModelToPreviewTemplateProps: function mapModelToPreviewTemplateProps() {

   153 			var control = this, previewTemplateProps, url;

   154 			url = control.model.get( 'url' );

   155 			previewTemplateProps = component.MediaWidgetControl.prototype.mapModelToPreviewTemplateProps.call( control );

   156 			previewTemplateProps.currentFilename = url ? url.replace( /\?.*$/, '' ).replace( /^.+\//, '' ) : '';

   157 			previewTemplateProps.link_url = control.model.get( 'link_url' );

   158 			return previewTemplateProps;

   159 		}

   160 	});

   161 

   162 	// Exports.

   163 	component.controlConstructors.media_image = ImageWidgetControl;

   164 	component.modelConstructors.media_image = ImageWidgetModel;

   165 

   166 })( wp.mediaWidgets, jQuery );