[Summary view] [Print] [Text view]

   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 );